Skip to content

Commit 854aff2

Browse files
kilchenmannkilchenmann
authored
refactor: fix style in resource, search-panel and progress-indicator (DSP-1887) (#520)
* style(search): fix search panel style * refactor(resource): use mat-button everywhere * refactor(resource): remove action-bubble style (already defined in elements.scss) * refactor(main): use correct progress indicator * refactor(resource): fix action bubble
1 parent c956d4b commit 854aff2

14 files changed

Lines changed: 110 additions & 279 deletions

‎src/app/main/action/progress-indicator/progress-indicator.component.html‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,39 @@
1919
<!-- default case: is loading -->
2020
<ng-template #isLoading>
2121
<div class="app-progress-indicator default">
22-
<div class="line">
23-
<div class="bounce1" [style.background-color]="color"></div>
24-
<div class="bounce2" [style.background-color]="color"></div>
25-
<div class="bounce3" [style.background-color]="color"></div>
26-
</div>
27-
<div class="line">
28-
<div class="bounce3" [style.background-color]="color"></div>
29-
<div class="bounce1" [style.background-color]="color"></div>
30-
<div class="bounce2" [style.background-color]="color"></div>
31-
</div>
22+
<svg
23+
class="loader"
24+
[attr.width]="widthAndHeight"
25+
[attr.height]="widthAndHeight"
26+
viewBox="5 20 200 170"
27+
preserveAspectRatio="xMidYMid meet"
28+
version="1.1"
29+
>
30+
<g [attr.stroke]="color" stroke-width="11" fill="none">
31+
<path
32+
d="m 107.19141,27.064453 c 19.40811,0.72674 40.31867,-1.456974 57.69737,9.089791 21.86918,11.995467 35.15372,37.302817
33+
32.81003,62.109081 -1.44162,27.181075 -22.18624,51.396565 -48.36746,58.105135 -15.52706,3.91583 -31.7106,1.96603
34+
-47.54641,2.56104 -12.037336,-0.47103 -24.435002,1.15224 -36.165837,-2.14642 C 47.465101,151.64804 35.68418,132.01794
35+
38.846261,113.58197 41.044909,94.96699 58.432119,80.249806 77.041016,80.271484 c 17.227977,-0.187132 34.488494,-0.150034
36+
51.722344,-0.05393 7.48754,-0.636519 15.65102,4.272294 15.16633,12.536357 1.1481,10.695294 -10.49745,14.507204
37+
-19.15,13.629524 -16.50044,0.8151 -33.109787,-1.33333 -49.544308,0.59021 -12.16565,1.08773 -13.682733,21.19581
38+
-2.229523,24.54784 12.153952,2.31023 24.624424,0.72973 36.926141,1.31316 15.925,-0.0149 33.92093,1.88492 46.94691,-9.26237
39+
15.92807,-12.50054 19.37984,-37.763607 6.74173,-53.762153 C 155.67021,58.639225 141.87544,52.91852 128.35558,53.71244
40+
106.95264,53.816817 85.345205,51.919886 64.110062,55.225243 34.76089,60.210981 11.510586,87.802975 11.20046,117.51937
41+
c -1.2978833,28.30459 18.033663,55.93384 45.060676,64.41866 14.698473,5.04904 30.459737,3.11351 45.695894,3.66939
42+
-17.420023,-0.6798 -35.760774,1.3379 -52.028837,-6.35029 C 24.919537,168.2006 8.6123975,140.39068 11.757798,113.13809
43+
13.979432,83.18657 39.693549,57.195801 69.617745,54.611051 c 20.938633,-1.884763 42.015395,-0.718245 63.009365,-0.538664
44+
21.98719,-0.34384 41.15358,21.050135 38.24546,42.865168 -1.45796,19.577435 -19.49062,35.534895 -38.98479,35.409455
45+
-16.79472,0.69111 -33.615302,-0.015 -50.421429,0.12436 -8.946772,1.23307 -18.212835,-5.83812 -15.724838,-15.34398
46+
0.42247,-8.60164 10.002724,-10.99166 17.091887,-10.64743 17.28209,-0.51175 34.70938,1.55524 51.88813,-0.85383
47+
12.33313,-1.76868 12.67077,-22.428759 0.57299,-24.843656 C 122.63021,78.92436 109.75845,80.292039 96.99706,79.912109
48+
82.206525,79.982527 65.775345,78.124805 53.519531,88.164062 35.12557,101.2767 33.081035,130.5764 48.717405,146.60724
49+
c 8.968191,9.78898 22.647018,13.18722 35.509867,12.46014 18.713198,0.019 37.488438,0.58386 56.161608,-0.70035
50+
28.73172,-3.16296 53.8499,-27.19104 57.15814,-56.10834 3.4273,-23.2831 -6.49873,-47.955352 -25.6328,-61.833968
51+
-13.91005,-10.94423 -32.05671,-13.81719 -49.28858,-13.194089 -5.14452,-0.0723 -10.28903,-0.166142 -15.43423,-0.16618 z"
52+
/>
53+
</g>
54+
</svg>
3255
</div>
3356
</ng-template>
57+

‎src/app/main/action/progress-indicator/progress-indicator.component.scss‎

Lines changed: 13 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -15,65 +15,28 @@ $warn: rgb(244, 67, 54);
1515
// --------------------------------------------------------------
1616

1717
//
18-
// two lines with three bouncing squares each
18+
// default progress-indicator: rolling dasch logo
1919
//
2020

2121
.app-progress-indicator.default {
22-
height: 56px;
23-
margin-left: auto;
24-
margin-right: auto;
25-
padding: 24px 36px;
26-
top: 60px;
27-
width: 96px;
28-
29-
&.page-center {
30-
left: 50%;
31-
position: absolute;
32-
top: 39%;
33-
transform: translate(-50%, -50%);
34-
}
35-
36-
p,
37-
h1,
38-
h2,
39-
h3 {
40-
color: #555555;
41-
text-align: center;
42-
}
22+
margin: 48px auto;
4323

44-
.line {
24+
.loader {
25+
display: block;
4526
margin: 0 auto;
46-
text-align: center;
47-
width: 70px;
48-
49-
> div {
50-
animation: bounce-keyframes 1.4s infinite ease-in-out both;
51-
background-color: $primary;
52-
border-radius: 6px;
53-
display: inline-block;
54-
height: 18px;
55-
width: 18px;
56-
}
57-
58-
.bounce1 {
59-
animation-delay: -.32s;
60-
}
61-
62-
.bounce2 {
63-
animation-delay: -.16s;
64-
}
27+
}
28+
svg path {
29+
stroke-dasharray: 530;
30+
stroke-dashoffset: 530;
31+
animation: load 3s both infinite;
6532
}
6633

67-
@keyframes bounce-keyframes {
68-
69-
0%, 80%, 100% {
70-
transform: scale(0);
71-
}
72-
73-
40% {
74-
transform: scale(1);
34+
@keyframes load {
35+
to {
36+
stroke-dashoffset: 2120;
7537
}
7638
}
39+
7740
}
7841

7942
//
@@ -116,64 +79,3 @@ $warn: rgb(244, 67, 54);
11679
}
11780

11881
}
119-
120-
//
121-
// loader element
122-
//
123-
.loading-progress-indicator {
124-
text-align: center;
125-
width: 100%;
126-
127-
.text {
128-
color: $primary;
129-
font-size: 12pt;
130-
}
131-
132-
.dot {
133-
animation: dot-keyframes 1.4s infinite ease-in-out;
134-
background-color: $primary;
135-
border-radius: 2px;
136-
display: inline-block;
137-
height: 6px;
138-
margin: 3px 6px 2px;
139-
width: 6px;
140-
141-
&:nth-child(2) {
142-
animation-delay: .16s;
143-
}
144-
145-
&:nth-child(3) {
146-
animation-delay: .32s;
147-
}
148-
149-
&:nth-child(4) {
150-
animation-delay: .48s;
151-
}
152-
153-
&:nth-child(5) {
154-
animation-delay: .64s;
155-
}
156-
157-
&:nth-child(6) {
158-
animation-delay: .8s;
159-
}
160-
}
161-
}
162-
163-
@keyframes dot-keyframes {
164-
0% {
165-
opacity: .4;
166-
transform: scale(1, 1);
167-
}
168-
169-
50% {
170-
opacity: 1;
171-
transform: scale(1.2, 1.2);
172-
}
173-
174-
100% {
175-
opacity: .4;
176-
transform: scale(1, 1);
177-
}
178-
}
179-

‎src/app/main/action/progress-indicator/progress-indicator.component.spec.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
2-
31
import { Component, OnInit, ViewChild } from '@angular/core';
2+
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
43
import { MatIconModule } from '@angular/material/icon';
54
import { By } from '@angular/platform-browser';
65
import { ProgressIndicatorComponent } from './progress-indicator.component';
@@ -38,8 +37,7 @@ describe('ProgressIndicatorComponent', () => {
3837
ProgressIndicatorComponent,
3938
TestHostComponent
4039
]
41-
})
42-
.compileComponents();
40+
}).compileComponents();
4341
}));
4442

4543

@@ -153,13 +151,15 @@ describe('ProgressIndicatorComponent', () => {
153151

154152
const divProgressElement = progressEl.query(By.css('.app-progress-indicator'));
155153

156-
const lineEl = divProgressElement.query(By.css('.line'));
154+
const svgEl = divProgressElement.nativeElement.getElementsByTagName('svg');
155+
expect(svgEl).not.toBe(null);
157156

158-
const bounceEl = lineEl.query(By.css('div'));
157+
// const gEl = divProgressElement.nativeElement.getElementsByTagName('g');
158+
const gEl = progressEl.query(By.css('g'));
159+
// const gEl = svgEl.getElementsByTagName('g');
159160

160-
// expect the default progress indicator
161-
expect(bounceEl.styles.backgroundColor).toEqual('red');
162-
expect(bounceEl.attributes.class).toEqual('bounce1');
161+
// // expect the default progress indicator in red
162+
expect(gEl.attributes.stroke).toEqual('red');
163163

164164
});
165165
});

‎src/app/main/action/progress-indicator/progress-indicator.component.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,15 @@ export class ProgressIndicatorComponent implements OnInit {
3030
*/
3131
@Input() color = '#5849a7';
3232

33-
/**
34-
* @ignore
35-
*/
33+
@Input() size: 'small' | 'large' = 'small';
34+
35+
widthAndHeight: string;
36+
3637
constructor() {
3738
}
3839

3940
ngOnInit() {
41+
this.widthAndHeight = (this.size === 'small' ? '48px' : '128px');
4042
}
4143

4244
}

‎src/app/workspace/resource/operations/add-value/add-value.component.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,19 @@
2020
</span>
2121
</div>
2222
<div class="crud-buttons">
23-
<button class="save"
24-
*ngIf="createModeActive"
25-
(click)="saveAddValue()"
26-
title="save"
27-
[disabled]='!createValueComponent.form.valid'>
23+
<button mat-icon-button
24+
*ngIf="createModeActive"
25+
class="value-action save"
26+
title="save"
27+
[disabled]='!createValueComponent.form.valid'
28+
(click)="saveAddValue()">
2829
<mat-icon>save</mat-icon>
2930
</button>
30-
<button class="cancel"
31-
*ngIf="createModeActive"
32-
(click)="cancelAddValue()"
33-
title="cancel">
31+
<button mat-icon-button
32+
*ngIf="createModeActive"
33+
class="value-action cancel"
34+
title="cancel"
35+
(click)="cancelAddValue()">
3436
<mat-icon>cancel</mat-icon>
3537
</button>
3638
<app-progress-indicator *ngIf="submittingValue" [status]="progressIndicatorStatus" [color]="progressIndicatorColor"></app-progress-indicator>

‎src/app/workspace/resource/operations/display-edit/display-edit.component.html‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -59,18 +59,20 @@
5959
</div>
6060
</div>
6161
<div class="crud-buttons" *ngIf="!readOnlyValue">
62-
<button class="save"
63-
title="save"
64-
*ngIf="editModeActive"
65-
[disabled]="!displayValueComponent.form.valid"
66-
(click)="saveEditValue()">
67-
<mat-icon>save</mat-icon>
62+
<button mat-icon-button
63+
*ngIf="editModeActive"
64+
class="value-action save"
65+
title="save"
66+
[disabled]="!displayValueComponent.form.valid"
67+
(click)="saveEditValue()">
68+
<mat-icon>save</mat-icon>
6869
</button>
69-
<button class="cancel"
70-
title="cancel"
71-
*ngIf="editModeActive"
72-
(click)="cancelEditValue()">
73-
<mat-icon>undo</mat-icon>
70+
<button mat-icon-button
71+
*ngIf="editModeActive"
72+
class="value-action cancel"
73+
title="cancel"
74+
(click)="cancelEditValue()">
75+
<mat-icon>undo</mat-icon>
7476
</button>
7577
</div>
7678
</div>

‎src/app/workspace/resource/properties/properties.component.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ <h3 class="label mat-title">
138138
</div>
139139
<!-- Add button -->
140140
<div *ngIf="addValueIsAllowed(prop)">
141-
<button class="create"
141+
<button mat-icon-button class="value-action create"
142142
(click)="showAddValueForm(prop)"
143143
title="Add a new value">
144144
<mat-icon>add_box</mat-icon>
@@ -178,6 +178,7 @@ <h3 class="label mat-subheading-1">
178178
</div>
179179

180180
</div>
181-
<ng-template #noProperties>The resource {{resource?.res.resourceClassLabel}} has no defined
182-
properties.</ng-template>
181+
<ng-template #noProperties>
182+
The resource {{resource?.res.resourceClassLabel}} has no defined properties.
183+
</ng-template>
183184
</div>

‎src/app/workspace/resource/properties/properties.component.scss‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -56,28 +56,6 @@
5656
border-bottom: 1px solid rgba(33, 33, 33, 0.1);
5757
}
5858

59-
// smaller buttons: add value and value info
60-
.info,
61-
.create {
62-
cursor: pointer;
63-
border: none;
64-
padding: 0em;
65-
outline: none;
66-
background-color: transparent;
67-
color: #000000;
68-
}
69-
70-
.info .material-icons,
71-
.create .material-icons {
72-
font-size: 18px;
73-
}
74-
75-
.info .mat-icon,
76-
.create .mat-icon {
77-
width: 18px;
78-
height: 18px;
79-
}
80-
8159
// properties container with property item and property value items
8260

8361
.properties-container {

‎src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.html‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,19 +48,22 @@
4848
</app-switch-properties>
4949
</div>
5050
<div class="buttons">
51-
<button *ngIf="propertyValuesKeyValuePair[prop.id + '-filtered'].length !== 1"
52-
type="button"
51+
<button mat-icon-button
52+
*ngIf="propertyValuesKeyValuePair[prop.id + '-filtered'].length !== 1"
53+
class="value-action delete"
5354
title="Delete this value"
54-
(click)="deleteValue(prop, i)"
55-
class="delete">
55+
(click)="deleteValue(prop, i)">
5656
<mat-icon>delete</mat-icon>
5757
</button>
5858
</div>
5959
</div>
6060
</div>
6161
<!-- Add button -->
6262
<div *ngIf="addValueIsAllowed(prop)">
63-
<button type="button" class="create" (click)="addNewValueFormToProperty(prop)" title="Add a new value">
63+
<button mat-icon-button
64+
class="value-action create"
65+
title="Add a new value"
66+
(click)="addNewValueFormToProperty(prop)">
6467
<mat-icon>add_box</mat-icon>
6568
</button>
6669
</div>

0 commit comments

Comments
 (0)