feat(select): align selected option over trigger

angular · Dec 1, 2016 · 64c57c8 · 64c57c8
1 parent 26eb7ce
commit 64c57c8
Show file tree

Hide file tree

Showing 6 changed files with 501 additions and 91 deletions.
diff --git a/src/demo-app/select/select-demo.ts b/src/demo-app/select/select-demo.ts
@@ -21,8 +21,14 @@ export class SelectDemo {
 
   drinks = [
     {value: 'coke-0', viewValue: 'Coke'},
-    {value: 'sprite-1', viewValue: 'Sprite', disabled: true},
-    {value: 'water-2', viewValue: 'Water'}
+    {value: 'sprite-1', viewValue: 'Sprite'},
+    {value: 'water-2', viewValue: 'Water'},
+    {value: 'pepper-3', viewValue: 'Dr. Pepper'},
+    {value: 'coffee-4', viewValue: 'Coffee'},
+    {value: 'tea-5', viewValue: 'Tea'},
+    {value: 'juice-6', viewValue: 'Orange juice'},
+    {value: 'wine-7', viewValue: 'Wine'},
+    {value: 'milk-8', viewValue: 'Milk'},
   ];
 
   toggleDisabled() {

diff --git a/src/lib/select/select-animations.ts b/src/lib/select/select-animations.ts
@@ -42,25 +42,10 @@ export const transformPlaceholder: AnimationEntryMetadata = trigger('transformPl
  * When the panel is removed from the DOM, it simply fades out linearly.
  */
 export const transformPanel: AnimationEntryMetadata = trigger('transformPanel', [
-  state('top-ltr', style({
+  state('showing', style({
     opacity: 1,
     width: 'calc(100% + 32px)',
-    transform: `translate3d(-16px, -9px, 0) scaleY(1)`
-  })),
-  state('top-rtl', style({
-    opacity: 1,
-    width: 'calc(100% + 32px)',
-    transform: `translate3d(16px, -9px, 0) scaleY(1)`
-  })),
-  state('bottom-ltr', style({
-    opacity: 1,
-    width: 'calc(100% + 32px)',
-    transform: `translate3d(-16px, 8px, 0) scaleY(1)`
-  })),
-  state('bottom-rtl', style({
-    opacity: 1,
-    width: 'calc(100% + 32px)',
-    transform: `translate3d(16px, 8px, 0) scaleY(1)`
+    transform: `translate3d(0,0,0) scaleY(1)`
   })),
   transition('void => *', [
     style({

diff --git a/src/lib/select/select.html b/src/lib/select/select.html
@@ -6,8 +6,8 @@
 
 <template connected-overlay [origin]="origin"  [open]="panelOpen" hasBackdrop (backdropClick)="close()"
   backdropClass="md-overlay-transparent-backdrop" [positions]="_positions" [width]="_getWidth()"
-  (positionChange)="_updateTransformOrigin($event)">
-  <div class="md-select-panel" [@transformPanel]="_getPanelState()" (@transformPanel.done)="_onPanelDone()"
+  [offsetY]="_offsetY" [offsetX]="_offsetX" (attach)="_setScrollTop()">
+  <div class="md-select-panel" [@transformPanel]="'showing'" (@transformPanel.done)="_onPanelDone()"
     (keydown)="_keyManager.onKeydown($event)" [style.transformOrigin]="_transformOrigin">
     <div class="md-select-content" [@fadeInContent]="'showing'">
       <ng-content></ng-content>

diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
@@ -5,6 +5,7 @@ $md-select-trigger-height: 30px !default;
 $md-select-trigger-min-width: 112px !default;
 $md-select-arrow-size: 5px !default;
 $md-select-arrow-margin: 4px !default;
+$md-select-panel-max-height: 256px !default;
 
 md-select {
   display: inline-block;
@@ -19,6 +20,7 @@ md-select {
   min-width: $md-select-trigger-min-width;
   cursor: pointer;
   position: relative;
+  box-sizing: border-box;
 
   [aria-disabled='true'] & {
     @include md-control-disabled-underline();
@@ -78,7 +80,7 @@ md-select {
   @include md-menu-base();
   padding-top: 0;
   padding-bottom: 0;
-  transform-origin: top;
+  max-height: $md-select-panel-max-height;
 }
 
 md-option {