Permalink
Browse files

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
  • Loading branch information...
ZHollingshead authored and EisenbergEffect committed Jul 23, 2017
1 parent 66966e4 commit ee64238910faae5ebd0bbc3711ab81fe656471b2
View
@@ -15,6 +15,8 @@ export { UxTagTheme } from './chip-input/ux-tag-theme';
export { UxChipTheme } from './chip-input/ux-chip-theme';
export { UxCheckboxTheme } from './checkbox/ux-checkbox-theme';
export { UxIconTheme } from './icons/ux-icon-theme';
export { UxListTheme } from './list/ux-list-theme';
export { UxListItemTheme } from './list/ux-list-item-theme';
export { UxButton } from './button/ux-button';
export { UxInput } from './input/ux-input';
@@ -28,6 +30,8 @@ export { UxChip } from './chip-input/ux-chip';
export { UxCheckbox } from './checkbox/ux-checkbox';
export { UxIcon } from './icons/ux-icon';
export { UxSubmitCustomAttribute } from './form/ux-submit-attribute';
export { UxList } from './list/ux-list';
export { UxListItem } from './list/ux-list-item';
export { Themable } from './styles/themable';
export { StyleEngine } from './styles/style-engine';
@@ -50,7 +54,9 @@ export function configure(config: FrameworkConfiguration, callback?: (config: Au
PLATFORM.moduleName('./chip-input/ux-chip'),
PLATFORM.moduleName('./chip-input/ux-tag'),
PLATFORM.moduleName('./checkbox/ux-checkbox'),
PLATFORM.moduleName('./icons/ux-icon')
PLATFORM.moduleName('./icons/ux-icon'),
PLATFORM.moduleName('./list/ux-list'),
PLATFORM.moduleName('./list/ux-list-item')
]);
const ux = config.container.get(AureliaUX) as AureliaUX;
@@ -0,0 +1,100 @@
ux-list>styles.listitem {
display: flex;
align-items: center;
padding: 16px;
font-size: 16px;
}
ux-list>styles.listitem>ux-icon,
ux-list>styles.listitem>ux-icon>svg {
width: 40px;
height: 32px;
fill: ${foreground || $swatches.grey.p700};
}
ux-list>styles.listitem>ux-icon {
margin-left: 16px;
margin-right: 0;
}
ux-list>styles.listitem>ux-icon:first-child {
margin-left: 0px;
margin-right: 16px;
}
ux-list>styles.listitem>.list-avatar {
color: ${foreground || $swatches.grey.p700};
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 16px;
}
ux-list>styles.listitem>.action-item {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding-right: 0;
padding-left: 16px;
}
ux-list>styles.listitem>.action-item:first-child {
padding-right: 16px;
padding-left: 0px;
}
ux-list>styles.listitem>a.action-item {
padding: 16px;
margin: -16px;
}
ux-list>styles.listitem>.action-item:first-child {
padding-right: 16px;
padding-left: 0;
}
ux-list>styles.listitem>.list-content {
flex-grow: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: ${foreground || $swatches.grey.p700};
}
ux-list>styles.listitem>a.list-content {
margin: -16px;
padding: 16px;
text-decoration: none;
}
ux-list>styles.listitem>.list-content>.secondary {
font-size: 14px;
color: ${foregroundSecondary || $swatches.grey.p500};
}
ux-list[type="two-line"]>styles.listitem>.list-content {
overflow: inherit;
text-overflow: inherit;
white-space: inherit;
}
ux-list[type="two-line"]>styles.listitem>.list-content>.secondary {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ux-list[type="three-line"]>styles.listitem {
align-items: flex-start;
}
ux-list[type="three-line"]>styles.listitem>.list-content>.secondary {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: 1.2;
height: 2.4em;
}
@@ -0,0 +1,8 @@
import {styles} from '../styles/decorators';
@styles()
export class UxListItemTheme {
public background: string;
public foreground: string;
public foregroundSecondary: string;
}
@@ -0,0 +1,5 @@
<template role="listitem" styles.listitem>
<require from="./ux-list-item-theme"></require>
<slot></slot>
</template>
View
@@ -0,0 +1,31 @@
import { customElement, bindable, ViewResources, View, processAttributes } from 'aurelia-templating';
import { inject } from 'aurelia-dependency-injection';
import { StyleEngine } from '../styles/style-engine';
import { Themable } from '../styles/themable';
import { processDesignAttributes } from '../designs/design-attributes';
@inject(ViewResources, StyleEngine)
@customElement('ux-list-item')
@processAttributes(processDesignAttributes)
export class UxListItem implements Themable {
@bindable public theme = null;
public view: View;
constructor(public resources: ViewResources, private styleEngine: StyleEngine) { }
public created(_: any, myView: View) {
this.view = myView;
}
public bind() {
if (this.theme) {
this.styleEngine.applyTheme(this, this.theme);
}
}
public themeChanged(newValue: any) {
this.styleEngine.applyTheme(this, newValue);
}
}
@@ -0,0 +1,3 @@
styles.list {
display: block;
}
@@ -0,0 +1,8 @@
import {styles} from '../styles/decorators';
@styles()
export class UxListTheme {
public background: string;
public foreground: string;
public foregroundSecondary: string;
}
View
@@ -0,0 +1,5 @@
<template role="list" styles.list>
<require from="./ux-list-theme"></require>
<slot></slot>
</template>
View
@@ -0,0 +1,31 @@
import { customElement, bindable, ViewResources, View, processAttributes } from 'aurelia-templating';
import { inject } from 'aurelia-dependency-injection';
import { StyleEngine } from '../styles/style-engine';
import { Themable } from '../styles/themable';
import { processDesignAttributes } from '../designs/design-attributes';
@inject(ViewResources, StyleEngine)
@customElement('ux-list')
@processAttributes(processDesignAttributes)
export class UxList implements Themable {
@bindable public theme = null;
public view: View;
constructor(public resources: ViewResources, private styleEngine: StyleEngine) { }
public created(_: any, myView: View) {
this.view = myView;
}
public bind() {
if (this.theme) {
this.styleEngine.applyTheme(this, this.theme);
}
}
public themeChanged(newValue: any) {
this.styleEngine.applyTheme(this, newValue);
}
}

0 comments on commit ee64238

Please sign in to comment.