TSK-1502: Small improvements in workbasket details
This commit is contained in:
Sofie Hofmann
parent
d4c70132f7
commit
f2f132fb04
|
|
@ -5,14 +5,12 @@
|
|||
[ngStyle]="{'width': expanded ? 'calc(' + 100 + 'vw - 500px)' : 'calc(' + 100 + 'vw - 250px)'}">
|
||||
<div class=" workbasket-access-items__buttons">
|
||||
<button mat-stroked-button matTooltip="Add new access" type="button"
|
||||
class="workbasket-access-items__buttons-add-access" (click)="addAccessItem()" data-toggle="tooltip"
|
||||
title="Add new access">
|
||||
class="workbasket-access-items__buttons-add-access" (click)="addAccessItem()">
|
||||
Add new access
|
||||
<mat-icon color="green-blue" aria-label="add new access">add</mat-icon>
|
||||
</button>
|
||||
<button mat-stroked-button matTooltip="Delete selected access" type="button"
|
||||
class="workbasket-access-items__buttons-delete-access" (click)="deleteAccessItems()"
|
||||
data-toggle="tooltip" title="delete selected access">
|
||||
class="workbasket-access-items__buttons-delete-access" (click)="deleteAccessItems()">
|
||||
Delete selected access
|
||||
<mat-icon color="green-blue" aria-label="delete access">delete</mat-icon>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -167,7 +167,6 @@ describe('WorkbasketAccessItemsComponent', () => {
|
|||
'button.workbasket-access-items__buttons-add-access'
|
||||
);
|
||||
const clearSpy = jest.spyOn(component, 'addAccessItem');
|
||||
expect(addAccessItemButton.title).toMatch('Add new access');
|
||||
|
||||
addAccessItemButton.click();
|
||||
expect(clearSpy).toHaveBeenCalled();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<div class="workbasket-details">
|
||||
<mat-toolbar class="workbasket-details__toolbar">
|
||||
<h4 class="workbasket-details__title">{{workbasket.name}}
|
||||
<h4 class="workbasket-details__title">
|
||||
<span class="workbasket-details__title-name">{{workbasket.name}}</span>
|
||||
<span class="workbasket-details__title-badge" *ngIf="!workbasket.workbasketId"> {{ badgeMessage }}</span>
|
||||
</h4>
|
||||
<span class="workbasket-details__spacer"></span>
|
||||
|
|
@ -13,7 +14,7 @@
|
|||
<button mat-stroked-button class="workbasket-details__button" matTooltip="Revert changes to previous saved state"
|
||||
(click)="onRestore()">
|
||||
Undo Changes
|
||||
<mat-icon class="button__green-blue md-20">restore</mat-icon>
|
||||
<mat-icon class="workbasket-details__button-aquamarine md-20">restore</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-stroked-button [matMenuTriggerFor]="buttonMenu" matTooltip="More actions" class="action-toolbar__button"
|
||||
|
|
@ -24,17 +25,17 @@
|
|||
<mat-menu #buttonMenu="matMenu">
|
||||
<button mat-menu-item class="workbasket-details__dropdown"
|
||||
matTooltip="Copy current values to create new workbasket" (click)="onCopy()">
|
||||
<mat-icon class="button__green-blue">content_copy</mat-icon>
|
||||
<mat-icon class="workbasket-details__button-aquamarine">content_copy</mat-icon>
|
||||
<span>Copy</span>
|
||||
</button>
|
||||
<button mat-menu-item class="workbasket-details__dropdown"
|
||||
matTooltip="Remove this workbasket as distribution target" (click)="onRemoveAsDistributionTarget()">
|
||||
<mat-icon class="button__red">remove_circle_outline</mat-icon>
|
||||
<mat-icon class="workbasket-details__button-red">remove_circle_outline</mat-icon>
|
||||
<span>Remove as distribution target</span>
|
||||
</button>
|
||||
<button mat-menu-item class="workbasket-details__dropdown" matTooltip="Delete this workbasket"
|
||||
(click)="onRemoveWorkbasket()">
|
||||
<mat-icon class="button__red">delete</mat-icon>
|
||||
<mat-icon class="workbasket-details__button-red">delete</mat-icon>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
<button mat-menu-item class="workbasket-details__dropdown" style="border-bottom-style: none;"
|
||||
|
|
|
|||
|
|
@ -1,32 +1,47 @@
|
|||
@import 'src/theme/_colors.scss';
|
||||
|
||||
.workbasket-details__toolbar {
|
||||
.workbasket-details {
|
||||
&__toolbar {
|
||||
background-color: white;
|
||||
padding: 16px 36px 12px 24px;
|
||||
}
|
||||
.workbasket-details__title {
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 1.5rem;
|
||||
padding: 4px;
|
||||
}
|
||||
.workbasket-details__title-badge {
|
||||
}
|
||||
|
||||
&__title-name {
|
||||
display: block;
|
||||
max-width: 392px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__title-badge {
|
||||
background-color: $brown;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.workbasket-details__spacer {
|
||||
}
|
||||
|
||||
&__spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.workbasket-details__button {
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.workbasket-details__save-button {
|
||||
}
|
||||
|
||||
&__save-button {
|
||||
background-color: $aquamarine;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.button__green-blue {
|
||||
&__button-aquamarine {
|
||||
color: $aquamarine;
|
||||
}
|
||||
|
||||
&__button-red {
|
||||
color: $invalid;
|
||||
}
|
||||
}
|
||||
|
||||
.button__red {
|
||||
color: $invalid;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,4 @@
|
|||
<div *ngIf="workbasket" id="wb-information">
|
||||
<!--
|
||||
<div class="panel-heading">
|
||||
<div class="pull-right btn-group">
|
||||
<button type="button" (click)="onSubmit()" data-toggle="tooltip" title="Save"
|
||||
class="btn btn-default btn-primary">
|
||||
<span class="material-icons md-20">save</span>
|
||||
</button>
|
||||
<button type="button" (click)="onUndo()" data-toggle="tooltip" title="Undo Changes"
|
||||
class="btn btn-default">
|
||||
<span class="material-icons md-20 blue">undo</span>
|
||||
</button>
|
||||
<button type="button" (click)="removeDistributionTargets()" data-toggle="tooltip"
|
||||
title="Remove workbasket as distribution target"
|
||||
class="btn btn-default">
|
||||
<span class="material-icons md-20 red">remove_circle_outline</span>
|
||||
</button>
|
||||
<button type="button" (click)="copyWorkbasket()" data-toggle="tooltip" title="Copy"
|
||||
class="btn btn-default">
|
||||
<span class="material-icons md-20 green-blue">content_copy</span>
|
||||
</button>
|
||||
<button type="button" (click)="removeWorkbasket()" data-toggle="tooltip" title="Remove"
|
||||
class="btn btn-default">
|
||||
<span class="material-icons md-20 red">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
<h4 class="panel-header">{{workbasket.name}}
|
||||
<span *ngIf="!workbasket.workbasketId" class="badge warning"> {{badgeMessage}}</span>
|
||||
</h4>
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
<div class="workbasket-information-wrapper">
|
||||
<ng-form #WorkbasketForm="ngForm">
|
||||
|
|
@ -54,7 +23,7 @@
|
|||
(input)="validateInputOverflow(key, 64, $event)">
|
||||
</mat-form-field>
|
||||
<div *ngIf="inputOverflowMap.get(key.name)" class="error">{{lengthError}}</div>
|
||||
<taskana-shared-field-error-display [displayError]="!isFieldValid('workbasket.key')"
|
||||
<taskana-shared-field-error-display *ngIf="action != 3" [displayError]="!isFieldValid('workbasket.key')"
|
||||
[validationTrigger]="this.toggleValidationMap.get('workbasket.key')" errorMessage="* Key is required">
|
||||
</taskana-shared-field-error-display>
|
||||
|
||||
|
|
@ -113,7 +82,7 @@
|
|||
<mat-form-field appearance="outline" style="width: 100%">
|
||||
<mat-label>Description</mat-label>
|
||||
<label for="workbasket-description"></label>
|
||||
<textarea matInput cdkTextareaAutosize cdkAutosizeMinRows="5" cdkAutosizeMaxRows="10" maxlength="255"
|
||||
<textarea matInput cdkTextareaAutosize cdkAutosizeMinRows="7" cdkAutosizeMaxRows="7" maxlength="255"
|
||||
id="workbasket-description" placeholder="Description" [(ngModel)]="workbasket.description"
|
||||
name="workbasket.description" #description="ngModel"
|
||||
(input)="validateInputOverflow(description, 255)"></textarea>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<div *ngIf="dataSource" class="typeahead">
|
||||
<form>
|
||||
<mat-form-field class="typeahead__form" appearance="outline">
|
||||
<mat-label *ngIf="!isFirst">
|
||||
{{dataSource.selected?.name ? 'Name: ' + dataSource.selected?.name : placeHolderMessage}}</mat-label>
|
||||
<mat-label *ngIf="isFirst">
|
||||
{{dataSource.selected?.name}}</mat-label>
|
||||
<mat-label>
|
||||
{{dataSource.selected?.name && placeHolderMessage !== 'Owner' ? dataSource.selected?.name : placeHolderMessage}}
|
||||
</mat-label>
|
||||
<input #inputTypeAhead [required]="isRequired" class="typeahead__form-input align" matInput type="text"
|
||||
[matAutocomplete]="auto" placeholder="{{placeHolderMessage}}" [(ngModel)]="value" name="accessId"
|
||||
(ngModelChange)="initializeDataSource()" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue