Skip to content

Commit dccce1c

Browse files
sllethemmalerba
authored andcommitted
feat(selection-list): Selection-list initial version all code(without demo) (#5562)
* # This is a combination of 4 commits. # This is the 1st commit message: add lib files for sticky-header add chose parent add support to 'optional 'cdkStickyRegion' input ' add app-demo for sticky-header fix bugs and deleted unused tag id in HTML files modify fix some code according to PR review comments change some format to pass TSlint check add '_' before private elements delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable refine code encapsulate 'set style for element' change @input() Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')' add const STICK_START_CLASS and STICK_END_CLASS Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'. change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule'; encapsulate reset css style operation for sticky header. delete unnecessary gloable variables sticky-header-rebased add one test && fixed bug 'sticky-header not working on iPhone', and bug 'reshape too obviously when being sticked'. && made some change according to the design doc('md-stick --> cdkSticky') make the sticky element being scrolled up smoothly when being unsticked Add code to support optional parentRegion input add add unit test for sticky-header add e2e/sticky-header files e2e test clear code master sticky-header-rebased Add code to support optional parentRegion input add e2e/sticky-header files e2e test clear code fix encapsulate reset css style operation for sticky header. sticky-header-rebased Add code to support optional parentRegion input add e2e/sticky-header files e2e test clear code master sticky-header-rebased Add code to support optional parentRegion input add e2e/sticky-header files e2e test clear code fix delete unused files encapsulate reset css style operation for sticky header. sticky-header-rebased Add code to support optional parentRegion input add unit test for sticky-header add e2e/sticky-header files e2e test clear code master sticky-header-rebased Add code to support optional parentRegion input add e2e/sticky-header files e2e test clear code fix encapsulate reset css style operation for sticky header. sticky-header-rebased Add code to support optional parentRegion input add e2e/sticky-header files e2e test clear code master sticky-header-rebased Add code to support optional parentRegion input add e2e/sticky-header files e2e test clear code fix clean unused files delete sticky-header delete styicky-heade demo delete sticky-header lib revert public_api delete sticky-header e2e files delete.firebasesrc revert revert revert revert add css styles for selection-list add selection-list structures in list.ts initial version of selection-list all src/lib code fix tslint error fix tslint error applied '[class.mat-list-item-content-reverse]="checkboxPosition == 'after'"', deleted comments in code Deleted 'MdSelectionListCssMatStyler' class Added doc for 'md-selection-option' Added binding expression for 'attr.aria-selected' and 'attr.aria-disabled' Added a value and a disabled @input() property Changed 'isSelected' to 'selected'. And added '@input(selected)' for it.(Using 'coerceBooleanProperty') changed '_slist' to 'selectionList' and deleted 'MdSelectionListCheckboxer' class Deleted navList in selection-list-option changed 'onchange()' to toggle(). And added doc for it checkedItems -> selectedOptions deleted 'pCheckbox' and store 'this' instead of HTMLelement in 'optionlist' optimized toggle() with 'this._selected = !this._selected' Added 'Tab' moves focus on selection-list, 'UP_ARROW' and 'DOWN_ARROW' moves focus within selection-list. And use 'SPACE' to select checkbox Added another empty line at the end of each file remove comment line in CSS file Deleted 'webkit-justify-content' in CSS file Deleted 'mat-list-item-content-reverse' to these existing styles; the 'mat-list-item-content-reverse' class should only have the extra styles you need to reverse the display Deleted 'mat-list-item-content' and 'mat-list-item-content-reverse' and '<a>' styles in '.mat-selection-list' Deleted unused 'mat-checkbox' class add ".mat-list-option" class in css file added 'mat-list-option' class fix toggle() disabled Deleted empty class Deleted unused import Removed 'if (this.selectable)' check moved styles in '.mat-selection-list .mat-list-item' to '.mat-list-option'. Deleted position, box-sizing, and height in '.mat-list-item-content-reverse' in list.scss file put md-selection-list and md-list-option in separate files(selection-list.ts and list-option.ts) # This is the commit message #2: nit # This is the commit message #3: correct imports in index.ts # This is the commit message #4: use ' @ContentChildren(MdListOption) options;' instead of QueryList * add lib files for sticky-header add chose parent add support to 'optional 'cdkStickyRegion' input ' add app-demo for sticky-header fix bugs and deleted unused tag id in HTML files modify fix some code according to PR review comments change some format to pass TSlint check add '_' before private elements delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable refine code encapsulate 'set style for element' change @input() Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')' add const STICK_START_CLASS and STICK_END_CLASS Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'. change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule'; encapsulate reset css style operation for sticky header. delete unnecessary gloable variables sticky-header-rebased add one test && fixed bug 'sticky-header not working on iPhone', and bug 'reshape too obviously when being sticked'. && made some change according to the design doc('md-stick --> cdkSticky') make the sticky element being scrolled up smoothly when being unsticked Add code to support optional parentRegion input add add unit test for sticky-header add e2e/sticky-header files e2e test clear code master sticky-header-rebased Add code to support optional parentRegion input add e2e/sticky-header files e2e test clear code fix encapsulate reset css style operation for sticky header. sticky-header-rebased Add code to support optional parentRegion input add e2e/sticky-header files e2e test clear code master sticky-header-rebased Add code to support optional parentRegion input add e2e/sticky-header files e2e test clear code fix delete unused files encapsulate reset css style operation for sticky header. sticky-header-rebased Add code to support optional parentRegion input add unit test for sticky-header add e2e/sticky-header files e2e test clear code master sticky-header-rebased Add code to support optional parentRegion input add e2e/sticky-header files e2e test clear code fix encapsulate reset css style operation for sticky header. sticky-header-rebased Add code to support optional parentRegion input add e2e/sticky-header files e2e test clear code master sticky-header-rebased Add code to support optional parentRegion input add e2e/sticky-header files e2e test clear code fix clean unused files delete sticky-header delete styicky-heade demo delete sticky-header lib revert public_api delete sticky-header e2e files delete.firebasesrc revert revert revert revert add css styles for selection-list add selection-list structures in list.ts initial version of selection-list all src/lib code fix tslint error fix tslint error applied '[class.mat-list-item-content-reverse]="checkboxPosition == 'after'"', deleted comments in code Deleted 'MdSelectionListCssMatStyler' class Added doc for 'md-selection-option' Added binding expression for 'attr.aria-selected' and 'attr.aria-disabled' Added a value and a disabled @input() property Changed 'isSelected' to 'selected'. And added '@input(selected)' for it.(Using 'coerceBooleanProperty') changed '_slist' to 'selectionList' and deleted 'MdSelectionListCheckboxer' class Deleted navList in selection-list-option changed 'onchange()' to toggle(). And added doc for it checkedItems -> selectedOptions deleted 'pCheckbox' and store 'this' instead of HTMLelement in 'optionlist' optimized toggle() with 'this._selected = !this._selected' Added 'Tab' moves focus on selection-list, 'UP_ARROW' and 'DOWN_ARROW' moves focus within selection-list. And use 'SPACE' to select checkbox Added another empty line at the end of each file remove comment line in CSS file Deleted 'webkit-justify-content' in CSS file Deleted 'mat-list-item-content-reverse' to these existing styles; the 'mat-list-item-content-reverse' class should only have the extra styles you need to reverse the display Deleted 'mat-list-item-content' and 'mat-list-item-content-reverse' and '<a>' styles in '.mat-selection-list' Deleted unused 'mat-checkbox' class add ".mat-list-option" class in css file added 'mat-list-option' class fix toggle() disabled Deleted empty class Deleted unused import Removed 'if (this.selectable)' check moved styles in '.mat-selection-list .mat-list-item' to '.mat-list-option'. Deleted position, box-sizing, and height in '.mat-list-item-content-reverse' in list.scss file put md-selection-list and md-list-option in separate files(selection-list.ts and list-option.ts) nit correct imports in index.ts use ' @ContentChildren(MdListOption) options;' instead of QueryList change to check 'focusedIndex != null'. Set The tabindex of list option as -1 when the selection-list is disabled change ['class': 'mat-list-item, mat-list-option',] to ['class': 'mat-list-item mat-list-option',]; Don't want a comma between class names. fix typo in comments fix Binded 'aria-disabled' for selection-list.ts rename to '_optionsChangeSubscription' typo Instead of defining the disabled getter/setter yourself, you can include it via mixin. Removed ' selectable' property Deleted unnecessary 'this._isValidIndex(optionIndex)' check import switchMap Added SwitchMerge nit revert revert revert2 revert3 r4 r5 r2 r3 r4 r5 revert fix rxjs import Changed to use 'RxChain' instead of directly importing 'observer/add/' delete unusd import Added exports for selectionlist fix tslint check fix tslint check fix tslint check Add tests for selection-list and list-option fix typo in test Added new test on native element's focus & blur Added check expect(selectList.selected.length).toBe(0);before the toggle nit Added test on desecting an option fix tslink check fix typo in doc refine docs fix 'What happens if the selection list is disabled later? Would the list option become disabled?' Changed all the test name to the format of 'should ...' rename Deleted unused '_tabOutSubscription' return RxChain.from(this.options.changes)... fix tsLint check fix tslint fix tslint error test can not pass on travel CI fix travelCI check try to fix nativeElement focus test revert fix test fix travis CI error fixing travis fixed~! update fix fix fix fix2 fix added test check on 'aria-selected' Added test checkou on 'aria-disabled' reformat structure changed to 'if (!fixture.componentInstance.isIE) { ... }' Change 'platform.SAFARI || platform.EDGE || platform.FIREFOX' to '!platform.IS_TRIDENT' fix travis check Added aris-disabled test fix travis test put disabled style in theme.scss use background color for disabled items deselect --> deselected destory -> destoryed optimize changed to "if (!this.disabled) { ... }" restructured test cases change function to private _keydown protected -> private indent change 'select' to 'selectChange' Better to delete if (this.selectionList.disabled) {...} part Use this.disabled to consider the case when parent selectionList is disabled? Deleted emty lines It would be better not to mutate the option disabled state based on the parent state; this can be error prone, as it's easy to miss updating one when the other changes. It's better to rely on the disabled getter for the option to account for the parent state. * fix after rebase * fix * change 'grey, 1000' to 'black' * remove unused import * fix test * put selection-list.ts and list-option.ts into one file~ and fix the test * fix google3 * fix * Add imports * fix * Deleted unused import
1 parent 4d82f83 commit dccce1c

File tree

8 files changed

+783
-9
lines changed

8 files changed

+783
-9
lines changed

src/lib/core/theming/_palette.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -660,6 +660,7 @@ $mat-light-theme-background: (
660660
selected-disabled-button: map_get($mat-grey, 400),
661661
disabled-button-toggle: map_get($mat-grey, 200),
662662
unselected-chip: map_get($mat-grey, 300),
663+
disabled-list-option: map_get($mat-grey, 200),
663664
);
664665

665666
// Background palette for dark themes.
@@ -675,8 +676,9 @@ $mat-dark-theme-background: (
675676
focused-button: $white-6-opacity,
676677
selected-button: map_get($mat-grey, 900),
677678
selected-disabled-button: map_get($mat-grey, 800),
678-
disabled-button-toggle: map_get($mat-grey, 1000),
679+
disabled-button-toggle: black,
679680
unselected-chip: map_get($mat-grey, 700),
681+
disabled-list-option: black,
680682
);
681683

682684
// Foreground palette for light themes.

src/lib/list/_list-theme.scss

+33-3
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,24 @@
88
$background: map-get($theme, background);
99
$foreground: map-get($theme, foreground);
1010

11-
.mat-list, .mat-nav-list {
11+
.mat-list, .mat-nav-list, .mat-selection-list {
1212
.mat-list-item {
1313
color: mat-color($foreground, text);
1414
}
1515

16+
.mat-list-option {
17+
color: mat-color($foreground, text);
18+
}
19+
1620
.mat-subheader {
1721
color: mat-color($foreground, secondary-text);
1822
}
1923
}
2024

25+
.mat-list-item-disabled {
26+
background-color: mat-color($background, disabled-list-option);
27+
}
28+
2129
.mat-divider {
2230
border-top-color: mat-color($foreground, divider);
2331
}
@@ -29,6 +37,14 @@
2937
background: mat-color($background, 'hover');
3038
}
3139
}
40+
41+
.mat-list-option {
42+
outline: none;
43+
44+
&:hover, &.mat-list-item-focus {
45+
background: mat-color($background, 'hover');
46+
}
47+
}
3248
}
3349

3450
@mixin mat-list-typography($config) {
@@ -38,13 +54,22 @@
3854
font-family: $font-family;
3955
}
4056

57+
.mat-list-option {
58+
font-family: $font-family;
59+
}
60+
4161
// Default list
42-
.mat-list, .mat-nav-list {
62+
.mat-list, .mat-nav-list, .mat-selection-list {
4363
.mat-list-item {
4464
font-size: mat-font-size($config, subheading-2);
4565
@include mat-line-base(mat-font-size($config, body-1));
4666
}
4767

68+
.mat-list-option {
69+
font-size: mat-font-size($config, subheading-2);
70+
@include mat-line-base(mat-font-size($config, body-1));
71+
}
72+
4873
.mat-subheader {
4974
font-family: mat-font-family($config, body-2);
5075
font-size: mat-font-size($config, body-2);
@@ -53,12 +78,17 @@
5378
}
5479

5580
// Dense list
56-
.mat-list[dense], .mat-nav-list[dense] {
81+
.mat-list[dense], .mat-nav-list[dense], .mat-selection-list[dense] {
5782
.mat-list-item {
5883
font-size: mat-font-size($config, caption);
5984
@include mat-line-base(mat-font-size($config, caption));
6085
}
6186

87+
.mat-list-option {
88+
font-size: mat-font-size($config, caption);
89+
@include mat-line-base(mat-font-size($config, caption));
90+
}
91+
6292
.mat-subheader {
6393
font-family: $font-family;
6494
font-size: mat-font-size($config, caption);

src/lib/list/index.ts

+11-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
*/
88

99
import {NgModule} from '@angular/core';
10-
import {MdLineModule, MdRippleModule, MdCommonModule} from '../core';
10+
import {MdLineModule, MdRippleModule, MdCommonModule, MdSelectionModule} from '../core';
11+
import {CommonModule} from '@angular/common';
1112
import {
1213
MdList,
1314
MdListItem,
@@ -17,12 +18,13 @@ import {
1718
MdListCssMatStyler,
1819
MdNavListCssMatStyler,
1920
MdDividerCssMatStyler,
20-
MdListSubheaderCssMatStyler,
21+
MdListSubheaderCssMatStyler
2122
} from './list';
23+
import {MdSelectionList, MdListOption} from './selection-list';
2224

2325

2426
@NgModule({
25-
imports: [MdLineModule, MdRippleModule, MdCommonModule],
27+
imports: [MdLineModule, MdRippleModule, MdCommonModule, MdSelectionModule, CommonModule],
2628
exports: [
2729
MdList,
2830
MdListItem,
@@ -35,6 +37,9 @@ import {
3537
MdNavListCssMatStyler,
3638
MdDividerCssMatStyler,
3739
MdListSubheaderCssMatStyler,
40+
MdSelectionModule,
41+
MdSelectionList,
42+
MdListOption
3843
],
3944
declarations: [
4045
MdList,
@@ -46,9 +51,12 @@ import {
4651
MdNavListCssMatStyler,
4752
MdDividerCssMatStyler,
4853
MdListSubheaderCssMatStyler,
54+
MdSelectionList,
55+
MdListOption
4956
],
5057
})
5158
export class MdListModule {}
5259

5360

5461
export * from './list';
62+
export * from './selection-list';

src/lib/list/list-option.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="mat-list-item-content" [class.mat-list-item-content-reverse]="checkboxPosition == 'after'" [class.mat-list-item-disabled]="disabled">
2+
<div class="mat-list-item-ripple" md-ripple
3+
[mdRippleTrigger]="_getHostElement()"
4+
[mdRippleDisabled]="!isRippleEnabled()">
5+
</div>
6+
7+
<md-pseudo-checkbox [state]="selected ? 'checked' : 'unchecked'" #autocheckbox [disabled]="disabled"></md-pseudo-checkbox>
8+
<div class="mat-list-text"><ng-content></ng-content></div>
9+
10+
</div>

src/lib/list/list.scss

+31-2
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,14 @@ $mat-dense-list-icon-size: 20px;
4343
position: relative;
4444
}
4545

46+
.mat-list-item-content-reverse {
47+
display: flex;
48+
align-items: center;
49+
padding: 0 $mat-list-side-padding;
50+
flex-direction: row-reverse;
51+
justify-content: space-around;
52+
}
53+
4654
.mat-list-item-ripple {
4755
position: absolute;
4856
left: 0;
@@ -128,7 +136,7 @@ $mat-dense-list-icon-size: 20px;
128136
}
129137
}
130138

131-
.mat-list, .mat-nav-list {
139+
.mat-list, .mat-nav-list, .mat-selection-list {
132140
padding-top: $mat-list-top-padding;
133141
display: block;
134142

@@ -145,10 +153,21 @@ $mat-dense-list-icon-size: 20px;
145153
$mat-list-icon-size
146154
);
147155
}
156+
157+
.mat-list-option {
158+
@include mat-list-item-base(
159+
$mat-list-base-height,
160+
$mat-list-avatar-height,
161+
$mat-list-two-line-height,
162+
$mat-list-three-line-height,
163+
$mat-list-icon-size
164+
);
165+
}
148166
}
149167

150168

151-
.mat-list[dense], .mat-nav-list[dense] {
169+
.mat-list[dense], .mat-nav-list[dense], .mat-selection-list[dense] {
170+
152171
padding-top: $mat-dense-top-padding;
153172
display: block;
154173

@@ -165,6 +184,16 @@ $mat-dense-list-icon-size: 20px;
165184
$mat-dense-list-icon-size
166185
);
167186
}
187+
188+
.mat-list-option {
189+
@include mat-list-item-base(
190+
$mat-dense-base-height,
191+
$mat-dense-avatar-height,
192+
$mat-dense-two-line-height,
193+
$mat-dense-three-line-height,
194+
$mat-dense-list-icon-size
195+
);
196+
}
168197
}
169198

170199
.mat-divider {

src/lib/list/list.ts

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export const _MdListMixinBase = mixinDisableRipple(MdListBase);
3232
export class MdListItemBase {}
3333
export const _MdListItemMixinBase = mixinDisableRipple(MdListItemBase);
3434

35+
3536
@Directive({
3637
selector: 'md-divider, mat-divider',
3738
host: {

0 commit comments

Comments
 (0)