purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Scrumboard label selector not working correctly + style refinements

Browse Source
This commit is contained in:
Sercan Yemen 2017-11-13 10:36:32 +03:00
parent 7f357306eb
commit 4cb8009c69
2 changed files with 44 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html
View File

@ -1,8 +1,8 @@
<div [ngSwitch]="labelsMenuView" class="views" (click)="$event.stopPropagation()"> <div [ngSwitch]="labelsMenuView" class="views" (click)="$event.stopPropagation()">
<div class="view " *ngSwitchCase="'labels'" [@slideInLeft] fxFlex fxLayout="column"> <div class="view" *ngSwitchCase="'labels'" fxFlex fxLayout="column">
<div class="header mb-12 pb-4 px-8" fxLayout="row" fxLayoutAlign="space-between center"> <div class="header" fxLayout="row" fxLayoutAlign="space-between center">
<div>Labels</div> <div>Labels</div>
<button mat-button (click)="labelsMenuView ='add'"> <button mat-button (click)="labelsMenuView ='add'">
<mat-icon class="s-16">add</mat-icon> <mat-icon class="s-16">add</mat-icon>
@ -12,7 +12,7 @@
<div fxFlex fxLayout="column" fusePerfectScrollbar> <div fxFlex fxLayout="column" fusePerfectScrollbar>
<div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center" <div class="label" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center"
[ngClass]="label.color"> [ngClass]="label.color">
<mat-checkbox fxFlex fxLayout="row" fxLayoutAlign="start center" [checked]="card.idLabels.indexOf(label.id) > -1" <mat-checkbox fxFlex fxLayout="row" fxLayoutAlign="start center" [checked]="card.idLabels.indexOf(label.id) > -1"
@ -27,16 +27,16 @@
</div> </div>
</div> </div>
<div class="view px-8" *ngSwitchCase="'edit'" [@slideInRight] fxFlex fxLayout="column"> <div class="view edit" *ngSwitchCase="'edit'" fxFlex fxLayout="column">
<div class="header mb-12 pb-4" fxLayout="row" fxLayoutAlign="space-between center"> <div class="header" fxLayout="row" fxLayoutAlign="start center">
<div>Edit Label</div>
<button mat-icon-button (click)="labelsMenuView ='labels'"> <button mat-icon-button (click)="labelsMenuView ='labels'">
<mat-icon class="s-16">arrow_back</mat-icon> <mat-icon class="s-16">arrow_back</mat-icon>
</button> </button>
<div>Edit Label</div>
</div> </div>
<div fxLayout="row" fxLayoutAlign="space-between center"> <div class="content" fxLayout="row" fxLayoutAlign="start center">
<mat-form-field> <mat-form-field>
<input matInput placeholder="Name" [(ngModel)]="selectedLabel.name" (change)="onLabelChange()"> <input matInput placeholder="Name" [(ngModel)]="selectedLabel.name" (change)="onLabelChange()">
</mat-form-field> </mat-form-field>
@ -46,26 +46,26 @@
</div> </div>
<div class="view px-8" *ngSwitchCase="'add'" [@slideInRight] fxFlex fxLayout="column"> <div class="view add" *ngSwitchCase="'add'" fxFlex fxLayout="column">
<div class="header mb-12 pb-4" fxLayout="row" fxLayoutAlign="space-between center"> <div class="header" fxLayout="row" fxLayoutAlign="start center">
<div>Add Label</div>
<button mat-icon-button (click)="labelsMenuView ='labels'"> <button mat-icon-button (click)="labelsMenuView ='labels'">
<mat-icon class="s-16">arrow_back</mat-icon> <mat-icon class="s-16">arrow_back</mat-icon>
</button> </button>
<div>Add Label</div>
</div> </div>
<form (submit)="addNewLabel()" #newLabelForm="ngForm" fxFlex fxLayout="column" fxLayoutAlign="start end"> <form (submit)="addNewLabel()" #newLabelForm="ngForm" fxFlex fxLayout="column" fxLayoutAlign="start end">
<div class="w-100-p" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="space-between center">
<mat-form-field fxFlex> <mat-form-field fxFlex>
<input matInput placeholder="Name" [(ngModel)]="newLabel.name" name="labelName" required> <input matInput placeholder="Name" [(ngModel)]="newLabel.name" name="labelName" required>
</mat-form-field> </mat-form-field>
<fuse-material-color-picker [(selectedClass)]="newLabel.color" name="labelColor" class="ml-8"></fuse-material-color-picker> <fuse-material-color-picker class="ml-8" [(selectedClass)]="newLabel.color" name="labelColor"></fuse-material-color-picker>
</div> </div>
<button mat-raised-button class="mat-accent mt-16" [disabled]="!newLabelForm.valid">Add</button> <button mat-raised-button class="mat-accent mt-16" [disabled]="!newLabelForm.valid">ADD NEW LABEL</button>
</form> </form>
</div> </div>
</div> </div>

31
src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.scss
View File

@ -30,6 +30,37 @@
> .header { > .header {
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 4px 8px 8px 16px;
margin-bottom: 8px;
}
.label {
margin: 0 8px 8px 8px;
padding: 4px 4px 4px 16px;
}
&.edit,
&.add {
> .header {
padding: 0 8px 8px 0;
}
form {
padding: 0 16px 8px 16px;
.mat-form-field-infix {
width: auto !important;
}
}
.content {
padding: 8px 16px 8px 16px;
.mat-form-field-infix {
width: auto !important;
}
}
} }
} }
} }