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.

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

Accessibility: Tags keyboard navigation and OnPush change detection #1421

Merged
merged 11 commits into from
Jun 10, 2018
Prev Previous commit
Next Next commit
Tags refactor done
timotheeguerin committed Jun 9, 2018

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 03de6b803840502fdc5af75efb4a094ed220aa50
19 changes: 16 additions & 3 deletions src/@batch-flask/ui/tags/tag-list/tag-list.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from "@angular/core";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges } from "@angular/core";
import { List } from "immutable";

import "./tag-list.scss";

@@ -7,8 +8,20 @@ import "./tag-list.scss";
templateUrl: "tag-list.html",
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TagListComponent {
constructor(private changeDetector: ChangeDetectorRef) {
export class TagListComponent implements OnChanges {
@Input() public tags: List<string>;
@Input() public maxTags: number;
@Input() public noTagsMessage: string;

public displayTags: List<string> = List([]);

public ngOnChanges(inputs) {
if (inputs.tags || inputs.maxTags) {
this.displayTags = List<string>(this.tags.slice(0, this.maxTags));
}
}

public trackTag(index, tag: string) {
return tag;
}
}
10 changes: 6 additions & 4 deletions src/@batch-flask/ui/tags/tag-list/tag-list.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
@import "app/styles/variables";

bl-tag-list {
display: flex;
align-items: center;

.tag {
font-size: 11px;
color: white;
background: map-get($primary, 300);
background: $primary-color;
padding: 0 5px;

&:not(:last-child) {
@@ -15,13 +17,13 @@ bl-tag-list {

.expand-tags {
font-size: 16px;
color: map-get($primary, 300);
color: $primary-color;
padding: 0 5px;
border-radius: 3px;

&:hover {
color: map-get($primary, 50);
background: map-get($primary, 300);
color: whi;
background: $primary-color-dark;
}
}
}
29 changes: 14 additions & 15 deletions src/@batch-flask/ui/tags/tags.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, ViewChild } from "@angular/core";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnChanges, ViewChild } from "@angular/core";
import { List } from "immutable";
import { Observable } from "rxjs";

@@ -11,7 +11,7 @@ import "./tags.scss";
templateUrl: "tags.html",
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TagsComponent implements OnChanges {
export class TagsComponent {
@Input() public tags: List<string>;

@Input() public editable: boolean = false;
@@ -30,30 +30,31 @@ export class TagsComponent implements OnChanges {

public tagEditString = "";

public displayTags: List<string> = List([]);

@ViewChild("editInput")
private _editInput: ElementRef;

public ngOnChanges(inputs) {
if (inputs.tags || inputs.maxTags) {
this.displayTags = List<string>(this.tags.slice(0, this.maxTags));
}
constructor(private changeDetector: ChangeDetectorRef) {
}

public edit() {
this._resetTagEditStr();
this.isEditing = true;
this._editInput.nativeElement.focus();
this.changeDetector.markForCheck();
setTimeout(() => {
this._editInput.nativeElement.focus();
});
}

public triggerSave() {
const tags = this.tagEditString.split(",");
const tags = List(this.tagEditString.split(","));
this.isEditing = false;
this.saving = true;
this.save(List(tags)).subscribe({
this.changeDetector.markForCheck();

this.save(tags).subscribe({
next: () => {
this.saving = false;
this.changeDetector.markForCheck();
},
error: (error) => {
log.error("Error saving tags", error);
@@ -64,13 +65,11 @@ export class TagsComponent implements OnChanges {
public cancel() {
this._resetTagEditStr();
this.isEditing = false;
}

public trackTag(index, tag: string) {
return tag;
this.changeDetector.markForCheck();
}

private _resetTagEditStr() {
this.tagEditString = this.tags.join(",");
this.changeDetector.markForCheck();
}
}
42 changes: 21 additions & 21 deletions src/@batch-flask/ui/tags/tags.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<div class="main">
<div class="tags">
<bl-tag-list *ngIf="!isEditing"></bl-tag-list>
<form (submit)="triggerSave()" [hidden]="!isEditing">
<bl-form-field>
<input blInput #editInput placeholder="Tags(Comma separated)" [(ngModel)]="tagEditString" [ngModelOptions]="{standalone: true}">
</bl-form-field>
</form>
</div>
<div class="tags-control" *ngIf="editable">
<bl-clickable class="edit" matTooltip="Edit tags" (do)="edit()" *ngIf="!isEditing && !saving">
<i class="fa fa-pencil"></i>
</bl-clickable>
<bl-clickable class="save" matTooltip="Save" (do)="triggerSave()" *ngIf="isEditing">
<i class="fa fa-check"></i>
</bl-clickable>
<bl-clickable class="cancel" matTooltip="Cancel" (do)="cancel()" *ngIf="isEditing">
<i class="fa fa-times"></i>
</bl-clickable>
<i class="fa fa-spinner fa-spin" *ngIf="saving"></i>
</div>
<div class="display" *ngIf="!isEditing && !isSaving" >
<bl-tag-list [tags]="tags" [maxTags]="maxTags" [noTagsMessage]="noTagsMessage"></bl-tag-list>
<bl-clickable class="edit" matTooltip="Edit tags" (do)="edit()" *ngIf="editable">
<i class="fa fa-pencil"></i>
</bl-clickable>
</div>
<div class="editor" *ngIf="isEditing || isSaving">
<form (submit)="triggerSave()" [hidden]="!isEditing">
<bl-form-field>
<input blInput #editInput placeholder="Tags(Comma separated)" [(ngModel)]="tagEditString" [ngModelOptions]="{standalone: true}">
<div blFormFieldSuffix>
<bl-clickable class="save" matTooltip="Save" (do)="triggerSave()" *ngIf="isEditing">
<i class="fa fa-check"></i>
</bl-clickable>
<bl-clickable class="cancel" matTooltip="Cancel" (do)="cancel()" *ngIf="isEditing">
<i class="fa fa-times"></i>
</bl-clickable>
<i class="fa fa-spinner fa-spin" *ngIf="saving"></i>
</div>
</bl-form-field>
</form>
</div>
47 changes: 19 additions & 28 deletions src/@batch-flask/ui/tags/tags.scss
Original file line number Diff line number Diff line change
@@ -3,47 +3,38 @@

bl-tags {

.no-tags {
color: $mineshaft-grey;
}

.main {
.display {
display: flex;
align-items: center;

input {
min-width: 200px;
> .edit {
margin-left: 5px;
}
}

.tags-control {
margin: 0 5px;

button {
background: none;
}

.fa-pencil {
cursor: pointer;
color: map-get($primary, 500);

&:hover {
color: map-get($primary, 300);
}
}
.editor {
display: flex;
align-items: center;

.fa-check, .fa-times {
font-size: 20px;
cursor: pointer;
input {
min-width: 200px;
}

.fa-check:hover {
color: map-get($success, 500);
.input-suffix {
padding: 0;
}

.fa-times:hover {
color: map-get($danger, 400);
.save, .cancel {
display: inline-block;
height: 24px;
width: 24px;
font-size: 20px;
text-align: center;
}
}

.no-tags {
color: $secondary-text;
}
}