Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(button-toggle): Add a focus overlay for button-toggle #3119

Merged
merged 6 commits into from
Feb 21, 2017
Merged

feat(button-toggle): Add a focus overlay for button-toggle #3119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
89f82d8
Add a focus overlay for button-toggle
tinayuangao Feb 16, 2017
85ad786
Use FocusOriginMonitor
tinayuangao Feb 16, 2017
6920d56
.
tinayuangao Feb 17, 2017
61f0471
Fix test
tinayuangao Feb 17, 2017
a836624
Add 0.12 opacity white and black.
tinayuangao Feb 18, 2017
7a23190
Add dark-overlay
tinayuangao Feb 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/lib/button-toggle/_button-toggle-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,25 @@
@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);
$background: map-get($theme, background);

.mat-button-toggle {
color: mat-color($foreground, hint-text);

&.cdk-focused {
@include _mat-button-toggle-focus-color($theme);
}
}

.mat-button-toggle-checked {
Expand Down
2 changes: 2 additions & 0 deletions src/lib/button-toggle/button-toggle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,5 @@
<ng-content></ng-content>
</div>
</label>
<!-- the touchstart handler prevents the overlay from capturing the initial tap on touch devices -->
<div class="mat-button-toggle-focus-overlay" (touchstart)="$event.preventDefault()"></div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we want to disable the initial tap?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the same as https://github.com/angular/material2/blob/master/src/lib/button/button.html

17 changes: 17 additions & 0 deletions src/lib/button-toggle/button-toggle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}
9 changes: 6 additions & 3 deletions src/lib/button-toggle/button-toggle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -276,7 +277,6 @@ export class MdButtonToggleGroupMultiple {
set vertical(value) {
this._vertical = coerceBooleanProperty(value);
}

}

/** Single button inside of a toggle group. */
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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. */
Expand Down Expand Up @@ -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 */
Expand Down
16 changes: 10 additions & 6 deletions src/lib/core/theming/_palette.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.
Expand All @@ -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),
Expand All @@ -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),
Expand Down