From 0544deb6ced20b45d67fe0c08b1fe1dca8a5d8e3 Mon Sep 17 00:00:00 2001 From: tinayuangao Date: Tue, 21 Feb 2017 12:47:37 -0800 Subject: [PATCH] feat(button-toggle): Add a focus overlay for button-toggle (#3119) * Add a focus overlay for button-toggle * Use FocusOriginMonitor * . * Fix test * Add 0.12 opacity white and black. * Add dark-overlay --- src/lib/button-toggle/_button-toggle-theme.scss | 12 ++++++++++++ src/lib/button-toggle/button-toggle.html | 2 ++ src/lib/button-toggle/button-toggle.scss | 17 +++++++++++++++++ src/lib/button-toggle/button-toggle.ts | 9 ++++++--- src/lib/core/theming/_palette.scss | 16 ++++++++++------ 5 files changed, 47 insertions(+), 9 deletions(-) diff --git a/src/lib/button-toggle/_button-toggle-theme.scss b/src/lib/button-toggle/_button-toggle-theme.scss index 4b7f6c9309f3..4da2ad51bf19 100644 --- a/src/lib/button-toggle/_button-toggle-theme.scss +++ b/src/lib/button-toggle/_button-toggle-theme.scss @@ -1,6 +1,14 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; +// Applies a focus style to an md-button-toggle element for each of the supported palettes. +@mixin _mat-button-toggle-focus-color($theme) { + $background: map-get($theme, background); + + .mat-button-toggle-focus-overlay { + background-color: mat-color($background, dark-overlay); + } +} @mixin mat-button-toggle-theme($theme) { $foreground: map-get($theme, foreground); @@ -8,6 +16,10 @@ .mat-button-toggle { color: mat-color($foreground, hint-text); + + &.cdk-focused { + @include _mat-button-toggle-focus-color($theme); + } } .mat-button-toggle-checked { diff --git a/src/lib/button-toggle/button-toggle.html b/src/lib/button-toggle/button-toggle.html index face84340cfa..fffdfa7c3e25 100644 --- a/src/lib/button-toggle/button-toggle.html +++ b/src/lib/button-toggle/button-toggle.html @@ -12,3 +12,5 @@ + +
diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss index 78a54939c765..98c04cb95c08 100644 --- a/src/lib/button-toggle/button-toggle.scss +++ b/src/lib/button-toggle/button-toggle.scss @@ -1,4 +1,6 @@ +@import '../core/a11y/a11y'; @import '../core/style/elevation'; +@import '../core/style/layout-common'; $mat-button-toggle-padding: 0 16px !default; $mat-button-toggle-line-height: 36px !default; @@ -34,6 +36,11 @@ $mat-button-toggle-border-radius: 2px !default; .mat-button-toggle { white-space: nowrap; font-family: $mat-font-family; + position: relative; +} + +.mat-button-toggle.cdk-focused .mat-button-toggle-focus-overlay { + opacity: 1; } .mat-button-toggle-label-content { @@ -47,3 +54,13 @@ $mat-button-toggle-border-radius: 2px !default; .mat-button-toggle-label-content > * { vertical-align: middle; } + +// Overlay to be used as a tint. Note that the same effect can be achieved by using a pseudo +// element, however we use a proper DOM element in order to be able to disable the default +// touch action. This makes the buttons more responsive on touch devices. +.mat-button-toggle-focus-overlay { + border-radius: inherit; + pointer-events: none; + opacity: 0; + @include mat-fill; +} diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts index a34cbb15134b..7bc964988040 100644 --- a/src/lib/button-toggle/button-toggle.ts +++ b/src/lib/button-toggle/button-toggle.ts @@ -21,6 +21,7 @@ import { import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms'; import {Observable} from 'rxjs/Observable'; import { + FocusOriginMonitor, UniqueSelectionDispatcher, coerceBooleanProperty, UNIQUE_SELECTION_DISPATCHER_PROVIDER, @@ -276,7 +277,6 @@ export class MdButtonToggleGroupMultiple { set vertical(value) { this._vertical = coerceBooleanProperty(value); } - } /** Single button inside of a toggle group. */ @@ -332,7 +332,9 @@ export class MdButtonToggle implements OnInit { constructor(@Optional() toggleGroup: MdButtonToggleGroup, @Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple, public buttonToggleDispatcher: UniqueSelectionDispatcher, - private _renderer: Renderer) { + private _renderer: Renderer, + private _elementRef: ElementRef, + private _focusOriginMonitor: FocusOriginMonitor) { this.buttonToggleGroup = toggleGroup; this.buttonToggleGroupMultiple = toggleGroupMultiple; @@ -363,6 +365,7 @@ export class MdButtonToggle implements OnInit { if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) { this._checked = true; } + this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true); } /** Unique ID for the underlying `input` element. */ @@ -477,7 +480,7 @@ export class MdButtonToggle implements OnInit { CompatibilityModule, ], declarations: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle], - providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER] + providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER, FocusOriginMonitor] }) export class MdButtonToggleModule { /** @deprecated */ diff --git a/src/lib/core/theming/_palette.scss b/src/lib/core/theming/_palette.scss index a211a0836914..00c85649459b 100644 --- a/src/lib/core/theming/_palette.scss +++ b/src/lib/core/theming/_palette.scss @@ -8,6 +8,8 @@ $black-87-opacity: rgba(black, 0.87); $white-87-opacity: rgba(white, 0.87); +$black-12-opacity: rgba(black, 0.12); +$white-12-opacity: rgba(white, 0.12); $mat-red: ( 50: #ffebee, @@ -649,8 +651,9 @@ $mat-light-theme-background: ( hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX card: white, dialog: white, - disabled-button: rgba(black, 0.12), + disabled-button: $black-12-opacity, raised-button: white, + dark-overlay: $black-12-opacity, ); // Background palette for dark themes. @@ -661,15 +664,16 @@ $mat-dark-theme-background: ( hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX card: map_get($mat-grey, 800), dialog: map_get($mat-grey, 800), - disabled-button: rgba(white, 0.12), + disabled-button: $white-12-opacity, raised-button: map-get($mat-grey, 800), + dark-overlay: $white-12-opacity, ); // Foreground palette for light themes. $mat-light-theme-foreground: ( base: black, - divider: rgba(black, 0.12), - dividers: rgba(black, 0.12), + divider: $black-12-opacity, + dividers: $black-12-opacity, disabled: rgba(black, 0.38), disabled-button: rgba(black, 0.38), disabled-text: rgba(black, 0.38), @@ -683,8 +687,8 @@ $mat-light-theme-foreground: ( // Foreground palette for dark themes. $mat-dark-theme-foreground: ( base: white, - divider: rgba(white, 0.12), - dividers: rgba(white, 0.12), + divider: $white-12-opacity, + dividers: $white-12-opacity, disabled: rgba(white, 0.3), disabled-button: rgba(white, 0.3), disabled-text: rgba(white, 0.3),