Skip to content

Commit ee64238

Browse files
serifineEisenbergEffect
serifine
authored and
EisenbergEffect
committed
feat(list): add ux-list control (#82)
* feat(list): add ux-list component * feat(list): single line list styles * feat(list): multi line styles * feat(list): add three line list * feat(list): ux-list-item component split ux-list-item into its own component to add the listitem role for accessability * style(list): three line list text wrapping
1 parent 66966e4 commit ee64238

File tree

9 files changed

+198
-1
lines changed

9 files changed

+198
-1
lines changed

‎src/index.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export { UxTagTheme } from './chip-input/ux-tag-theme';
1515
export { UxChipTheme } from './chip-input/ux-chip-theme';
1616
export { UxCheckboxTheme } from './checkbox/ux-checkbox-theme';
1717
export { UxIconTheme } from './icons/ux-icon-theme';
18+
export { UxListTheme } from './list/ux-list-theme';
19+
export { UxListItemTheme } from './list/ux-list-item-theme';
1820

1921
export { UxButton } from './button/ux-button';
2022
export { UxInput } from './input/ux-input';
@@ -28,6 +30,8 @@ export { UxChip } from './chip-input/ux-chip';
2830
export { UxCheckbox } from './checkbox/ux-checkbox';
2931
export { UxIcon } from './icons/ux-icon';
3032
export { UxSubmitCustomAttribute } from './form/ux-submit-attribute';
33+
export { UxList } from './list/ux-list';
34+
export { UxListItem } from './list/ux-list-item';
3135

3236
export { Themable } from './styles/themable';
3337
export { StyleEngine } from './styles/style-engine';
@@ -50,7 +54,9 @@ export function configure(config: FrameworkConfiguration, callback?: (config: Au
5054
PLATFORM.moduleName('./chip-input/ux-chip'),
5155
PLATFORM.moduleName('./chip-input/ux-tag'),
5256
PLATFORM.moduleName('./checkbox/ux-checkbox'),
53-
PLATFORM.moduleName('./icons/ux-icon')
57+
PLATFORM.moduleName('./icons/ux-icon'),
58+
PLATFORM.moduleName('./list/ux-list'),
59+
PLATFORM.moduleName('./list/ux-list-item')
5460
]);
5561

5662
const ux = config.container.get(AureliaUX) as AureliaUX;

‎src/list/ux-list-item-theme.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
ux-list>styles.listitem {
2+
display: flex;
3+
align-items: center;
4+
padding: 16px;
5+
font-size: 16px;
6+
}
7+
8+
ux-list>styles.listitem>ux-icon,
9+
ux-list>styles.listitem>ux-icon>svg {
10+
width: 40px;
11+
height: 32px;
12+
fill: ${foreground || $swatches.grey.p700};
13+
}
14+
15+
ux-list>styles.listitem>ux-icon {
16+
margin-left: 16px;
17+
margin-right: 0;
18+
}
19+
20+
ux-list>styles.listitem>ux-icon:first-child {
21+
margin-left: 0px;
22+
margin-right: 16px;
23+
}
24+
25+
ux-list>styles.listitem>.list-avatar {
26+
color: ${foreground || $swatches.grey.p700};
27+
width: 40px;
28+
height: 40px;
29+
border-radius: 50%;
30+
margin-right: 16px;
31+
}
32+
33+
ux-list>styles.listitem>.action-item {
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
min-width: 40px;
38+
min-height: 40px;
39+
padding-right: 0;
40+
padding-left: 16px;
41+
}
42+
43+
ux-list>styles.listitem>.action-item:first-child {
44+
padding-right: 16px;
45+
padding-left: 0px;
46+
}
47+
48+
ux-list>styles.listitem>a.action-item {
49+
padding: 16px;
50+
margin: -16px;
51+
}
52+
53+
ux-list>styles.listitem>.action-item:first-child {
54+
padding-right: 16px;
55+
padding-left: 0;
56+
}
57+
58+
ux-list>styles.listitem>.list-content {
59+
flex-grow: 1;
60+
min-width: 0;
61+
overflow: hidden;
62+
text-overflow: ellipsis;
63+
white-space: nowrap;
64+
color: ${foreground || $swatches.grey.p700};
65+
}
66+
67+
ux-list>styles.listitem>a.list-content {
68+
margin: -16px;
69+
padding: 16px;
70+
text-decoration: none;
71+
}
72+
73+
ux-list>styles.listitem>.list-content>.secondary {
74+
font-size: 14px;
75+
color: ${foregroundSecondary || $swatches.grey.p500};
76+
}
77+
78+
ux-list[type="two-line"]>styles.listitem>.list-content {
79+
overflow: inherit;
80+
text-overflow: inherit;
81+
white-space: inherit;
82+
}
83+
84+
ux-list[type="two-line"]>styles.listitem>.list-content>.secondary {
85+
overflow: hidden;
86+
text-overflow: ellipsis;
87+
white-space: nowrap;
88+
}
89+
90+
ux-list[type="three-line"]>styles.listitem {
91+
align-items: flex-start;
92+
}
93+
94+
ux-list[type="three-line"]>styles.listitem>.list-content>.secondary {
95+
overflow: hidden;
96+
text-overflow: ellipsis;
97+
white-space: normal;
98+
line-height: 1.2;
99+
height: 2.4em;
100+
}

‎src/list/ux-list-item-theme.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {styles} from '../styles/decorators';
2+
3+
@styles()
4+
export class UxListItemTheme {
5+
public background: string;
6+
public foreground: string;
7+
public foregroundSecondary: string;
8+
}

‎src/list/ux-list-item.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template role="listitem" styles.listitem>
2+
<require from="./ux-list-item-theme"></require>
3+
4+
<slot></slot>
5+
</template>

‎src/list/ux-list-item.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { customElement, bindable, ViewResources, View, processAttributes } from 'aurelia-templating';
2+
import { inject } from 'aurelia-dependency-injection';
3+
import { StyleEngine } from '../styles/style-engine';
4+
import { Themable } from '../styles/themable';
5+
import { processDesignAttributes } from '../designs/design-attributes';
6+
7+
@inject(ViewResources, StyleEngine)
8+
@customElement('ux-list-item')
9+
@processAttributes(processDesignAttributes)
10+
11+
export class UxListItem implements Themable {
12+
@bindable public theme = null;
13+
14+
public view: View;
15+
16+
constructor(public resources: ViewResources, private styleEngine: StyleEngine) { }
17+
18+
public created(_: any, myView: View) {
19+
this.view = myView;
20+
}
21+
22+
public bind() {
23+
if (this.theme) {
24+
this.styleEngine.applyTheme(this, this.theme);
25+
}
26+
}
27+
28+
public themeChanged(newValue: any) {
29+
this.styleEngine.applyTheme(this, newValue);
30+
}
31+
}

‎src/list/ux-list-theme.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
styles.list {
2+
display: block;
3+
}

‎src/list/ux-list-theme.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {styles} from '../styles/decorators';
2+
3+
@styles()
4+
export class UxListTheme {
5+
public background: string;
6+
public foreground: string;
7+
public foregroundSecondary: string;
8+
}

‎src/list/ux-list.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template role="list" styles.list>
2+
<require from="./ux-list-theme"></require>
3+
4+
<slot></slot>
5+
</template>

‎src/list/ux-list.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { customElement, bindable, ViewResources, View, processAttributes } from 'aurelia-templating';
2+
import { inject } from 'aurelia-dependency-injection';
3+
import { StyleEngine } from '../styles/style-engine';
4+
import { Themable } from '../styles/themable';
5+
import { processDesignAttributes } from '../designs/design-attributes';
6+
7+
@inject(ViewResources, StyleEngine)
8+
@customElement('ux-list')
9+
@processAttributes(processDesignAttributes)
10+
11+
export class UxList implements Themable {
12+
@bindable public theme = null;
13+
14+
public view: View;
15+
16+
constructor(public resources: ViewResources, private styleEngine: StyleEngine) { }
17+
18+
public created(_: any, myView: View) {
19+
this.view = myView;
20+
}
21+
22+
public bind() {
23+
if (this.theme) {
24+
this.styleEngine.applyTheme(this, this.theme);
25+
}
26+
}
27+
28+
public themeChanged(newValue: any) {
29+
this.styleEngine.applyTheme(this, newValue);
30+
}
31+
}

0 commit comments

Comments
 (0)