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

feat(chips): use MdAutocomplete, MdChipList and MdBasicChip + bugfixes + a11y. (closes #215) (closes #165) (closes #96) #459

Merged
merged 20 commits into from
Apr 2, 2017
Merged

feat(chips): use MdAutocomplete, MdChipList and MdBasicChip + bugfixes + a11y. (closes #215) (closes #165) (closes #96) #459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
058ffda
feat(chips): remove TdAutocomplete and use MdAutocomplete
Mar 28, 2017
835173e
feat(chips): remove TdChipComponent and leverage md-chip-list and md-…
Mar 28, 2017
7a77829
feat(chips): filter items depending on input value for autocomplete
Mar 28, 2017
3657857
fix(chips): add debounceTime and clean input on chips add/remove
Mar 28, 2017
df79dea
fix(chips): change input label when incorrect + remove warn when valu…
Mar 28, 2017
a5c9031
fix(chips): filter options even if there is no ngModel
Mar 29, 2017
4861eca
Merge branch 'develop' into feature/autocomplete-chips
emoralesb05 Mar 29, 2017
dff687c
Merge branch 'develop' into feature/autocomplete-chips
kyleledbetter Mar 30, 2017
dfbc019
Merge branch 'develop' into feature/autocomplete-chips
kyleledbetter Mar 30, 2017
188a24a
feat(chips): add better a11y to td-chips
Mar 31, 2017
bc911f1
feat(chips): polish code to add chips internally
Mar 31, 2017
a48bc81
fix(chips): still return boolean to check if successful or not when a…
Mar 31, 2017
a1a92b3
fix(chips): rename removeItem to removeChip
Mar 31, 2017
27031ae
feat(chips): add marging to td-chips in docsx
Mar 31, 2017
d09062a
feat(chips): make input 0 width when readOnly so chips fit better
Apr 2, 2017
84f9de9
fix(chips): removed unneeded styles and added hover color to icon whe…
Apr 2, 2017
efdbdb7
update(styles): proper warn ripple for mdInput
Apr 2, 2017
d00c964
update(docs): margin around td-chips instead of on it
Apr 2, 2017
5c3e2ff
udpate(chips): better margins around chips & input
Apr 2, 2017
9440ca9
update(docs): better demo markup
Apr 2, 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
140 changes: 76 additions & 64 deletions src/app/components/components/chips/chips.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,29 @@
<md-card>
<md-card-title>Chips &amp; Autocomplete</md-card-title>
<md-card-subtitle>Small blocks for multiple items</md-card-subtitle>
<md-card-subtitle>Autocomplete with chips and no custom inputs</md-card-subtitle>
<md-divider></md-divider>
<md-card-content>
<h3 class="md-title">Basic Demo</h3>
<md-tab-group md-stretch-tabs>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<td-chips placeholder="Enter any string"></td-chips>
</md-tab>
<md-tab>
<ng-template md-tab-label>Code</ng-template>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-chips placeholder="Enter any string"></td-chips>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
export class ChipsDemoComponent {

}
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
</md-card>
<md-card>
<md-card-content>
<h3 class="md-title">Autocomplete Demo</h3>
<md-tab-group md-stretch-tabs>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<td-chips [items]="items" placeholder="Enter any string"></td-chips>
</md-tab>
<md-tab>
<ng-template md-tab-label>Code</ng-template>
<md-tab-group md-stretch-tabs>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<div class="push">
<div class="md-body-1">Type and select a preset option:</div>
<td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
</div>
</md-tab>
<md-tab>
<ng-template md-tab-label>Code</ng-template>
<md-card-content>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-chips [items]="items" placeholder="Enter any string"></td-chips>
<td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
export class ChipsDemoComponent {
readOnly: boolean = false;

items: string[] = [
'stepper',
Expand All @@ -64,34 +39,47 @@ <h3 class="md-title">Autocomplete Demo</h3>
'need more?',
];

itemsRequireMatch: string[] = this.items.slice(0, 6);

toggleReadOnly(): void {
this.readOnly = !this.readOnly;
}
}
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
</md-card-content>
</md-tab>
</md-tab-group>
<md-divider></md-divider>
<md-card-actions>
<button md-button color="primary" (click)="toggleReadOnly()" class="text-upper">Toggle ReadOnly</button>
</md-card-actions>
</md-card>
<md-card>
<md-card-content>
<h3 class="md-title">Autocomplete and requireMatch Demo</h3>
<md-tab-group md-stretch-tabs>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
</md-tab>
<md-tab>
<ng-template md-tab-label>Code</ng-template>
<md-card-title>Autocomplete with custom inputs</md-card-title>
<md-card-subtitle>Autocomplete demo allowing custom inputs</md-card-subtitle>
<md-divider></md-divider>
<md-tab-group md-stretch-tabs>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<div class="push">
<div class="md-body-1">Type and select option or enter custom text and press enter:</div>
<td-chips [items]="items" placeholder="Enter any string"></td-chips>
</div>
</md-tab>
<md-tab>
<ng-template md-tab-label>Code</ng-template>
<md-card-content>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
<td-chips [items]="items" placeholder="Enter any string"></td-chips>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
export class ChipsDemoComponent {
readOnly: boolean = false;

items: string[] = [
'stepper',
Expand All @@ -107,21 +95,45 @@ <h3 class="md-title">Autocomplete and requireMatch Demo</h3>
'need more?',
];

itemsRequireMatch: string[] = this.items.slice(0, 6);

toggleReadOnly(): void {
this.readOnly = !this.readOnly;
}
}
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
</md-card-content>
</md-tab>
</md-tab-group>
</md-card>
<md-card>
<md-card-title>Custom chips</md-card-title>
<md-card-subtitle>Demo allowing custom inputs for tags</md-card-subtitle>
<md-divider></md-divider>
<md-card-actions>
<button md-button color="primary" (click)="toggleReadOnly()" class="text-upper">Toggle ReadOnly</button>
</md-card-actions>
<md-tab-group md-stretch-tabs>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<div class="push">
<div class="md-body-1">Type any test and press enter:</div>
<td-chips placeholder="Enter any string"></td-chips>
</div>
</md-tab>
<md-tab>
<ng-template md-tab-label>Code</ng-template>
<md-card-content>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-chips placeholder="Enter any string"></td-chips>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
export class ChipsDemoComponent {

}
]]>
</td-highlight>
</md-card-content>
</md-tab>
</md-tab-group>
</md-card>
<md-card>
<md-card-title>TdChipsComponent</md-card-title>
Expand Down
45 changes: 16 additions & 29 deletions src/platform/core/chips/_chips-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@import '~@angular/material/core/theming/theming';
@import '~@angular/material/core/style/variables';

@mixin td-chips-theme($theme) {
$primary: map-get($theme, primary);
Expand All @@ -8,37 +7,25 @@
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);

// Gradient for showing the dashed line when the input is disabled.
$md-input-underline-disabled-background-image: linear-gradient(to right,
rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%);

// chip
.td-chip {
background: md-color($background, status-bar);
color: md-color($foreground, text);
md-icon {
color: md-color($foreground, hint-text);
&:hover {
color: md-color($foreground, icon);
}
}
}
// chips
td-chips {
.mat-input-underline {
border-top: 1px solid md-color($foreground, hint-text);
&.mat-disabled {
background-image: $md-input-underline-disabled-background-image;
}
.mat-input-ripple {
background-color: md-color($primary);
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
opacity $swift-ease-out-duration $swift-ease-out-timing-function;
&.mat-accent {
background-color: md-color($accent);
// chip
.mat-basic-chip {
background: md-color($background, status-bar);
color: md-color($foreground, text);
&:focus:not(.td-chip-disabled) {
background: md-color($primary);
&, md-icon {
color: mat-color($primary, default-contrast);
md-icon:hover {
color: md-color($foreground, icon);
}
}
&.mat-warn {
background-color: md-color($warn);
}
md-icon {
color: md-color($foreground, hint-text);
&:hover {
color: md-color($foreground, icon);
}
}
}
Expand Down
26 changes: 0 additions & 26 deletions src/platform/core/chips/autocomplete/autocomplete.component.html
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions src/platform/core/chips/autocomplete/autocomplete.component.scss
View file
Open in desktop

This file was deleted.

108 changes: 0 additions & 108 deletions src/platform/core/chips/autocomplete/autocomplete.component.ts
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions src/platform/core/chips/chip.component.html
View file
Open in desktop

This file was deleted.

5 changes: 0 additions & 5 deletions src/platform/core/chips/chip.component.scss
View file
Open in desktop

This file was deleted.

Loading