javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
rename Sass variables for opacity for consistency

references #5639
This commit is contained in:
Brandy Carney
2016-04-27 16:09:07 -04:00
parent 5030246c5d
commit 4fca31ec36
7 changed files with 126 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/button/button.wp.scss
View File

@ -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;

61
ionic/components/segment/segment.ios.scss
View File

@ -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-opacity-active);
}
&.segment-activated {
color: $color-contrast;
background-color: $color-base;
}
}
&:active:not(.segment-activated) {
background-color: rgba($color-base, $segment-button-ios-active-opacity);
.segment-button-disabled {
color: rgba($color-base, $segment-button-ios-opacity-disabled);
}
&.segment-activated {
color: $color-contrast;
background-color: $color-base;
}
}
}

14
ionic/components/segment/segment.md.scss
View File

@ -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 {

48
ionic/components/segment/segment.ts
View File

@ -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);
}
}
}

7
ionic/components/segment/segment.wp.scss
View File

@ -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 {

7
ionic/components/segment/test/basic/index.ts
View File

@ -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);
}

26
ionic/components/segment/test/basic/main.html
View File

@ -32,14 +32,14 @@
<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 @@
<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 @@
<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,7 +102,7 @@
Toolbar
</ion-segment-button>
<ion-segment-button value="top" class="e2eSegmentTopGrossing">
Default Segment
Light Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
@ -108,7 +110,7 @@
<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 @@
</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>