-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add simplified checkbox component for usage in other components (…
…#2619) * feat: add simplified checkbox component for usage in other components Adds the `md-pseudo-checkbox`, which is a simplified version of `md-checkbox`, that doesn't have the expensive SVG animations or the form control logic. This will be useful for multiple selection in `md-select`, as well as other components in the future. Relates to #2412. * Remove unnecessary template. * Fix linter error. * Address PR feedback. * Trailing comma.
- Loading branch information
1 parent
408c58d
commit 3b6cab0
Showing
8 changed files
with
205 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import {NgModule} from '@angular/core'; | ||
| import {MdPseudoCheckbox} from './pseudo-checkbox/pseudo-checkbox'; | ||
|
|
||
| export * from './pseudo-checkbox/pseudo-checkbox'; | ||
|
|
||
| @NgModule({ | ||
| exports: [MdPseudoCheckbox], | ||
| declarations: [MdPseudoCheckbox] | ||
| }) | ||
| export class MdSelectionModule { } |
44 changes: 44 additions & 0 deletions
44
src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| @import '../../theming/theming'; | ||
|
|
||
|
|
||
| @mixin md-pseudo-checkbox-theme($theme) { | ||
| $is-dark-theme: map-get($theme, is-dark); | ||
| $primary: map-get($theme, primary); | ||
| $accent: map-get($theme, accent); | ||
| $warn: map-get($theme, warn); | ||
| $background: map-get($theme, background); | ||
|
|
||
| // The color of the checkbox's checkmark / mixedmark. | ||
| $checkbox-mark-color: md-color($background, background); | ||
|
|
||
| // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors, | ||
| // this does not work well with elements layered on top of one another. To get around this we | ||
| // blend the colors together based on the base color and the theme background. | ||
| $white-30pct-opacity-on-dark: #686868; | ||
| $black-26pct-opacity-on-light: #b0b0b0; | ||
| $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light); | ||
|
|
||
| md-pseudo-checkbox::after { | ||
| color: $checkbox-mark-color; | ||
| } | ||
|
|
||
| .md-pseudo-checkbox-checked, .md-pseudo-checkbox-indeterminate { | ||
| border: none; | ||
|
|
||
| &.md-primary { | ||
| background: md-color($primary, 500); | ||
| } | ||
|
|
||
| &.md-accent { | ||
| background: md-color($accent, 500); | ||
| } | ||
|
|
||
| &.md-warn { | ||
| background: md-color($warn, 500); | ||
| } | ||
|
|
||
| &.md-pseudo-checkbox-disabled { | ||
| background: $disabled-color; | ||
| } | ||
| } | ||
| } |
53 changes: 53 additions & 0 deletions
53
src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| @import '../../style/checkbox-common'; | ||
|
|
||
| // Padding inside of a pseudo checkbox. | ||
| $_md-pseudo-checkbox-padding: $md-checkbox-border-width * 2; | ||
|
|
||
| // Size of the checkmark in a pseudo checkbox. | ||
| $_md-pseudo-checkmark-size: $md-checkbox-size - (2 * $_md-pseudo-checkbox-padding); | ||
|
|
||
|
|
||
| md-pseudo-checkbox { | ||
| width: $md-checkbox-size; | ||
| height: $md-checkbox-size; | ||
| border: $md-checkbox-border-width solid; | ||
| border-radius: 2px; | ||
| cursor: pointer; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| box-sizing: border-box; | ||
| position: relative; | ||
| transition: | ||
| border-color $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function, | ||
| background-color $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function; | ||
|
|
||
| // Used to render the checkmark/mixedmark inside of the box. | ||
| &::after { | ||
| position: absolute; | ||
| opacity: 0; | ||
| content: ''; | ||
| border-bottom: $md-checkbox-border-width solid currentColor; | ||
| transition: opacity $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function; | ||
| } | ||
| } | ||
|
|
||
| .md-pseudo-checkbox-disabled { | ||
| cursor: default; | ||
| } | ||
|
|
||
| .md-pseudo-checkbox-indeterminate::after { | ||
| top: ($md-checkbox-size - $md-checkbox-border-width) / 2; | ||
| left: $md-checkbox-border-width; | ||
| width: $md-checkbox-size - ($md-checkbox-border-width * 2); | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .md-pseudo-checkbox-checked::after { | ||
| top: ($md-checkbox-size / 2) - ($_md-pseudo-checkmark-size / 4) - ($md-checkbox-size / 10); | ||
| left: $_md-pseudo-checkbox-padding - $md-checkbox-border-width / 2; | ||
| width: $_md-pseudo-checkmark-size; | ||
| height: ($_md-pseudo-checkmark-size - $md-checkbox-border-width) / 2; | ||
| border-left: $md-checkbox-border-width solid currentColor; | ||
| transform: rotate(-45deg); | ||
| opacity: 1; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { | ||
| Component, | ||
| ViewEncapsulation, | ||
| Input, | ||
| ElementRef, | ||
| Renderer, | ||
| } from '@angular/core'; | ||
|
|
||
| export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate'; | ||
|
|
||
| /** | ||
| * Component that shows a simplified checkbox without including any kind of "real" checkbox. | ||
| * Meant to be used when the checkbox is purely decorative and a large number of them will be | ||
| * included, such as for the options in a multi-select. Uses no SVGs or complex animations. | ||
| * | ||
| * Note that this component will be completely invisible to screen-reader users. This is *not* | ||
| * interchangeable with <md-checkbox> and should *not* be used if the user would directly interact | ||
| * with the checkbox. The pseudo-checkbox should only be used as an implementation detail of | ||
| * more complex components that appropriately handle selected / checked state. | ||
| * @docs-private | ||
| */ | ||
| @Component({ | ||
| moduleId: module.id, | ||
| encapsulation: ViewEncapsulation.None, | ||
| selector: 'md-pseudo-checkbox', | ||
| styleUrls: ['pseudo-checkbox.css'], | ||
| template: '', | ||
| host: { | ||
| '[class.md-pseudo-checkbox-indeterminate]': 'state === "indeterminate"', | ||
| '[class.md-pseudo-checkbox-checked]': 'state === "checked"', | ||
| '[class.md-pseudo-checkbox-disabled]': 'disabled', | ||
| }, | ||
| }) | ||
| export class MdPseudoCheckbox { | ||
| /** Display state of the checkbox. */ | ||
| @Input() state: MdPseudoCheckboxState = 'unchecked'; | ||
|
|
||
| /** Whether the checkbox is disabled. */ | ||
| @Input() disabled: boolean = false; | ||
|
|
||
| /** Color of the checkbox. */ | ||
| @Input() | ||
| get color(): string { return this._color; }; | ||
| set color(value: string) { | ||
| if (value) { | ||
| let nativeElement = this._elementRef.nativeElement; | ||
|
|
||
| this._renderer.setElementClass(nativeElement, `md-${this.color}`, false); | ||
| this._renderer.setElementClass(nativeElement, `md-${value}`, true); | ||
| this._color = value; | ||
| } | ||
| } | ||
|
|
||
| private _color: string; | ||
|
|
||
| constructor(private _elementRef: ElementRef, private _renderer: Renderer) { | ||
| this.color = 'accent'; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| @import './variables'; | ||
|
|
||
| // The width/height of the checkbox element. | ||
| $md-checkbox-size: $md-toggle-size !default; | ||
|
|
||
| // The width of the checkbox border shown when the checkbox is unchecked. | ||
| $md-checkbox-border-width: 2px; | ||
|
|
||
| // The base duration used for the majority of transitions for the checkbox. | ||
| $md-checkbox-transition-duration: 90ms; |