fix(segment): add disabled property to segment and segment button

rename Sass variables for opacity for consistency references #5639
ionic-team · Apr 27, 2016 · 4fca31e · 4fca31e
1 parent 5030246
commit 4fca31e
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 39 deletions.
diff --git a/ionic/components/button/button.wp.scss b/ionic/components/button/button.wp.scss
@@ -211,7 +211,7 @@ $button-wp-fab-border-radius:                         50% !default;
   .button-clear-#{$color-name} {
     $fg-color: $color-base;
     color: $fg-color;
-    background-color: transparent;    
+    background-color: transparent;
 
     &.activated {
       background-color: $button-wp-clear-background-color-activated;

diff --git a/ionic/components/segment/segment.ios.scss b/ionic/components/segment/segment.ios.scss
@@ -8,11 +8,14 @@ $segment-button-ios-background-color:           transparent !default;
 $segment-button-ios-background-color-activated: $toolbar-ios-active-color !default;
 
 $segment-button-ios-text-color:                 color-contrast($colors-ios, $segment-button-ios-background-color-activated) !default;
-$segment-button-ios-activated-transition:       100ms all linear !default;
-$segment-button-ios-hover-transition:           100ms all linear !default;
-$segment-button-ios-active-transition:          100ms all linear !default;
-$segment-button-ios-hover-opacity:              .1 !default;
-$segment-button-ios-active-opacity:             .16 !default;
+$segment-button-ios-transition-activated:       100ms all linear !default;
+$segment-button-ios-transition-hover:           100ms all linear !default;
+$segment-button-ios-transition-active:          100ms all linear !default;
+
+$segment-button-ios-opacity-hover:              .1 !default;
+$segment-button-ios-opacity-active:             .16 !default;
+$segment-button-ios-opacity-activated:          1 !default;
+$segment-button-ios-opacity-disabled:           .3 !default;
 
 $segment-button-ios-border-width:               1px !default;
 $segment-button-ios-height:                     3.2rem !default;
@@ -55,18 +58,18 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
   &.segment-activated {
     color: $segment-button-ios-text-color;
     background-color: $segment-button-ios-background-color-activated;
-    opacity: 1;
-    transition: $segment-button-ios-activated-transition;
+    opacity: $segment-button-ios-opacity-activated;
+    transition: $segment-button-ios-transition-activated;
   }
 
   &:hover:not(.segment-activated) {
-    background-color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-hover-opacity);
-    transition: $segment-button-ios-hover-transition;
+    background-color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-hover);
+    transition: $segment-button-ios-transition-hover;
   }
 
   &:active:not(.segment-activated) {
-    background-color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-active-opacity);
-    transition: $segment-button-ios-active-transition;
+    background-color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-active);
+    transition: $segment-button-ios-transition-active;
   }
 
   &:first-of-type {
@@ -87,6 +90,12 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
   }
 }
 
+.segment-button-disabled {
+  color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-disabled);
+
+  pointer-events: none;
+}
+
 .toolbar {
 
   ion-segment {
@@ -117,22 +126,30 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
 
 @mixin ios-segment-button($color-name, $color-base, $color-contrast) {
 
-  ion-segment[#{$color-name}] .segment-button {
-    border-color: $color-base;
-    color: $color-base;
+  ion-segment[#{$color-name}] {
 
-    &:hover:not(.segment-activated) {
-      background-color: rgba($color-base, $segment-button-ios-hover-opacity);
-    }
+    .segment-button {
+      border-color: $color-base;
+      color: $color-base;
+
+      &:hover:not(.segment-activated) {
+        background-color: rgba($color-base, $segment-button-ios-opacity-hover);
+      }
 
-    &:active:not(.segment-activated) {
-      background-color: rgba($color-base, $segment-button-ios-active-opacity);
+      &:active:not(.segment-activated) {
+        background-color: rgba($color-base, $segment-button-ios-opacity-active);
+      }
+
+      &.segment-activated {
+        color: $color-contrast;
+        background-color: $color-base;
+      }
     }
 
-    &.segment-activated {
-      color: $color-contrast;
-      background-color: $color-base;
+    .segment-button-disabled {
+      color: rgba($color-base, $segment-button-ios-opacity-disabled);
     }
+
   }
 
 }

diff --git a/ionic/components/segment/segment.md.scss b/ionic/components/segment/segment.md.scss
@@ -10,6 +10,10 @@ $segment-button-md-border-color-activated:     $toolbar-md-active-color !default
 $segment-button-md-border-bottom-width:        2px !default;
 $segment-button-md-border-bottom-color:        rgba(#000, .10) !default;
 
+$segment-button-md-opacity:                    .7 !default;
+$segment-button-md-opacity-activated:          1 !default;
+$segment-button-md-opacity-disabled:           .3 !default;
+
 $segment-button-md-padding:                    0 6px !default;
 $segment-button-md-height:                     4.2rem !default;
 $segment-button-md-line-height:                4rem !default;
@@ -37,7 +41,7 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
 
   color: $segment-button-md-text-color-activated;
   background-color: transparent;
-  opacity: .7;
+  opacity: $segment-button-md-opacity;
   transition: 100ms all linear;
 
   ion-icon {
@@ -48,10 +52,16 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
   &.activated,
   &.segment-activated {
     border-color: $segment-button-md-border-color-activated;
-    opacity: 1;
+    opacity: $segment-button-md-opacity-activated;
   }
 }
 
+.segment-button-disabled {
+  opacity: $segment-button-md-opacity-disabled;
+
+  pointer-events: none;
+}
+
 .toolbar {
 
   ion-segment {

diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts
@@ -1,7 +1,7 @@
 import {Directive, Component, ElementRef, Renderer, Optional, EventEmitter, Input, Output, HostListener, ContentChildren, QueryList, ViewEncapsulation} from 'angular2/core';
 import {NgControl} from 'angular2/common';
 
-import {isPresent} from '../../util/util';
+import {isTrueProperty, isPresent} from '../../util/util';
 
 
 /**
@@ -56,6 +56,7 @@ import {isPresent} from '../../util/util';
   encapsulation: ViewEncapsulation.None,
 })
 export class SegmentButton {
+  private _disabled: boolean = false;
 
   /**
    * @input {string} the value of the segment button. Required.
@@ -69,6 +70,26 @@ export class SegmentButton {
 
   constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
 
+  /**
+   * @private
+   */
+  @Input()
+  get disabled(): boolean {
+    return this._disabled;
+  }
+
+  set disabled(val: boolean) {
+    this._disabled = isTrueProperty(val);
+    this.setCssClass('segment-button-disabled', this._disabled);
+  }
+
+  /**
+   * @private
+   */
+  setCssClass(cssClass: string, shouldAdd: boolean) {
+    this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
+  }
+
   /**
    * @private
    * On click of a SegmentButton
@@ -146,6 +167,7 @@ export class SegmentButton {
   selector: 'ion-segment'
 })
 export class Segment {
+  private _disabled: boolean = false;
 
   /**
    * @private
@@ -170,6 +192,25 @@ export class Segment {
     }
   }
 
+  /**
+   * @private
+   */
+  @Input()
+  get disabled(): boolean {
+    return this._disabled;
+  }
+
+  set disabled(val: boolean) {
+    this._disabled = isTrueProperty(val);
+
+    if (this._buttons) {
+      let buttons = this._buttons.toArray();
+      for (let button of buttons) {
+        button.setCssClass('segment-button-disabled', this._disabled);
+      }
+    }
+  }
+
   /**
    * @private
    * Write a new value to the element.
@@ -199,6 +240,11 @@ export class Segment {
      if (isPresent(this.value)) {
        button.isActive = (button.value === this.value);
      }
+
+     if (isTrueProperty(this._disabled)) {
+       button.setCssClass('segment-button-disabled', this._disabled);
+     }
+
    }
   }
 

diff --git a/ionic/components/segment/segment.wp.scss b/ionic/components/segment/segment.wp.scss
@@ -18,6 +18,7 @@ $segment-button-wp-background-color:           transparent !default;
 
 $segment-button-wp-opacity:                    .5 !default;
 $segment-button-wp-opacity-activated:          1 !default;
+$segment-button-wp-opacity-disabled:           .3 !default;
 
 $segment-button-wp-buttons-justify-content:    flex-start !default;
 
@@ -50,6 +51,12 @@ ion-segment {
   }
 }
 
+.segment-button-disabled {
+  opacity: $segment-button-wp-opacity-disabled;
+
+  pointer-events: none;
+}
+
 .toolbar {
 
   ion-segment {

diff --git a/ionic/components/segment/test/basic/index.ts b/ionic/components/segment/test/basic/index.ts
@@ -13,15 +13,20 @@ class MyApp {
   modelStyle: string = 'B';
   appType: string = 'free';
   icons: string = 'camera';
+  isDisabled: boolean = true;
 
   myForm;
 
   constructor(fb: FormBuilder) {
     this.myForm = fb.group({
-      mapStyle: ['hybrid', Validators.required]
+      mapStyle: ['active', Validators.required]
     });
   }
 
+  toggleDisabled() {
+    this.isDisabled = !this.isDisabled;
+  }
+
   onSegmentChanged(segmentButton) {
     console.log("Segment changed to", segmentButton.value);
   }

diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html
@@ -32,14 +32,14 @@ <h4>Map mode: NgControl</h4>
 
   <form (submit)="doSubmit($event)" [ngFormModel]="myForm">
     <ion-segment ngControl="mapStyle" danger>
-      <ion-segment-button value="standard" class="e2eSegmentStandard">
-        Standard
+      <ion-segment-button value="active" class="e2eSegmentStandard">
+        Active
       </ion-segment-button>
-      <ion-segment-button value="hybrid">
-        Hybrid
+      <ion-segment-button value="disabled" [disabled]="isDisabled">
+        Disabled
       </ion-segment-button>
-      <ion-segment-button value="sat">
-        Satellite
+      <ion-segment-button value="inactive" disabled="false">
+        Inactive
       </ion-segment-button>
     </ion-segment>
   </form>
@@ -74,7 +74,7 @@ <h4>Model style: NgModel</h4>
     <ion-segment-button value="C" class="e2eSegmentModelC">
       Model C
     </ion-segment-button>
-    <ion-segment-button value="D">
+    <ion-segment-button value="D" [disabled]="isDisabled">
       Model D
     </ion-segment-button>
   </ion-segment>
@@ -89,6 +89,8 @@ <h4>Model style: NgModel</h4>
       <ion-icon name="bookmark"></ion-icon>
     </ion-segment-button>
   </ion-segment>
+
+  <button block dark (click)="toggleDisabled()">Toggle Disabled</button>
 </ion-content>
 
 <ion-toolbar position="bottom" primary>
@@ -100,15 +102,15 @@ <h4>Model style: NgModel</h4>
       Toolbar
     </ion-segment-button>
     <ion-segment-button value="top" class="e2eSegmentTopGrossing">
-      Default Segment
+      Light Segment
     </ion-segment-button>
   </ion-segment>
 </ion-toolbar>
 
 <ion-toolbar position="bottom">
   <ion-segment [(ngModel)]="appType" danger>
     <ion-segment-button value="paid">
-      Light
+      Default
     </ion-segment-button>
     <ion-segment-button value="free">
       Toolbar
@@ -120,15 +122,15 @@ <h4>Model style: NgModel</h4>
 </ion-toolbar>
 
 <ion-toolbar position="bottom">
-  <ion-segment [(ngModel)]="appType" dark>
+  <ion-segment [(ngModel)]="appType" dark [disabled]="isDisabled">
     <ion-segment-button value="paid">
-      Light
+      Default
     </ion-segment-button>
     <ion-segment-button value="free">
       Toolbar
     </ion-segment-button>
     <ion-segment-button value="top">
-      Default Segment
+      Dark Segment
     </ion-segment-button>
   </ion-segment>
 </ion-toolbar>