Skip to content

Commit

Permalink
refactor: fix style in resource, search-panel and progress-indicator …
Browse files Browse the repository at this point in the history 
…(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
  • Loading branch information
@kilchenmann
kilchenmann committed Sep 7, 2021
1 parent c956d4b commit 854aff2
Show file tree
Hide file tree
Showing 14 changed files with 110 additions and 279 deletions.
44 changes: 34 additions & 10 deletions src/app/main/action/progress-indicator/progress-indicator.component.html
View file
Expand Up @@ -19,15 +19,39 @@
<!-- default case: is loading -->
<ng-template #isLoading>
<div class="app-progress-indicator default">
<div class="line">
<div class="bounce1" [style.background-color]="color"></div>
<div class="bounce2" [style.background-color]="color"></div>
<div class="bounce3" [style.background-color]="color"></div>
</div>
<div class="line">
<div class="bounce3" [style.background-color]="color"></div>
<div class="bounce1" [style.background-color]="color"></div>
<div class="bounce2" [style.background-color]="color"></div>
</div>
<svg
class="loader"
[attr.width]="widthAndHeight"
[attr.height]="widthAndHeight"
viewBox="5 20 200 170"
preserveAspectRatio="xMidYMid meet"
version="1.1"
>
<g [attr.stroke]="color" stroke-width="11" fill="none">
<path
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
32.81003,62.109081 -1.44162,27.181075 -22.18624,51.396565 -48.36746,58.105135 -15.52706,3.91583 -31.7106,1.96603
-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
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
51.722344,-0.05393 7.48754,-0.636519 15.65102,4.272294 15.16633,12.536357 1.1481,10.695294 -10.49745,14.507204
-19.15,13.629524 -16.50044,0.8151 -33.109787,-1.33333 -49.544308,0.59021 -12.16565,1.08773 -13.682733,21.19581
-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
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
106.95264,53.816817 85.345205,51.919886 64.110062,55.225243 34.76089,60.210981 11.510586,87.802975 11.20046,117.51937
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
-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
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
21.98719,-0.34384 41.15358,21.050135 38.24546,42.865168 -1.45796,19.577435 -19.49062,35.534895 -38.98479,35.409455
-16.79472,0.69111 -33.615302,-0.015 -50.421429,0.12436 -8.946772,1.23307 -18.212835,-5.83812 -15.724838,-15.34398
0.42247,-8.60164 10.002724,-10.99166 17.091887,-10.64743 17.28209,-0.51175 34.70938,1.55524 51.88813,-0.85383
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
82.206525,79.982527 65.775345,78.124805 53.519531,88.164062 35.12557,101.2767 33.081035,130.5764 48.717405,146.60724
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
28.73172,-3.16296 53.8499,-27.19104 57.15814,-56.10834 3.4273,-23.2831 -6.49873,-47.955352 -25.6328,-61.833968
-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"
/>
</g>
</svg>
</div>
</ng-template>

124 changes: 13 additions & 111 deletions src/app/main/action/progress-indicator/progress-indicator.component.scss
View file
Expand Up @@ -15,65 +15,28 @@ $warn: rgb(244, 67, 54);
// --------------------------------------------------------------

//
// two lines with three bouncing squares each
// default progress-indicator: rolling dasch logo
//

.app-progress-indicator.default {
height: 56px;
margin-left: auto;
margin-right: auto;
padding: 24px 36px;
top: 60px;
width: 96px;

&.page-center {
left: 50%;
position: absolute;
top: 39%;
transform: translate(-50%, -50%);
}

p,
h1,
h2,
h3 {
color: #555555;
text-align: center;
}
margin: 48px auto;

.line {
.loader {
display: block;
margin: 0 auto;
text-align: center;
width: 70px;

> div {
animation: bounce-keyframes 1.4s infinite ease-in-out both;
background-color: $primary;
border-radius: 6px;
display: inline-block;
height: 18px;
width: 18px;
}

.bounce1 {
animation-delay: -.32s;
}

.bounce2 {
animation-delay: -.16s;
}
}
svg path {
stroke-dasharray: 530;
stroke-dashoffset: 530;
animation: load 3s both infinite;
}

@keyframes bounce-keyframes {

0%, 80%, 100% {
transform: scale(0);
}

40% {
transform: scale(1);
@keyframes load {
to {
stroke-dashoffset: 2120;
}
}

}

//
Expand Down Expand Up @@ -116,64 +79,3 @@ $warn: rgb(244, 67, 54);
}

}

//
// loader element
//
.loading-progress-indicator {
text-align: center;
width: 100%;

.text {
color: $primary;
font-size: 12pt;
}

.dot {
animation: dot-keyframes 1.4s infinite ease-in-out;
background-color: $primary;
border-radius: 2px;
display: inline-block;
height: 6px;
margin: 3px 6px 2px;
width: 6px;

&:nth-child(2) {
animation-delay: .16s;
}

&:nth-child(3) {
animation-delay: .32s;
}

&:nth-child(4) {
animation-delay: .48s;
}

&:nth-child(5) {
animation-delay: .64s;
}

&:nth-child(6) {
animation-delay: .8s;
}
}
}

@keyframes dot-keyframes {
0% {
opacity: .4;
transform: scale(1, 1);
}

50% {
opacity: 1;
transform: scale(1.2, 1.2);
}

100% {
opacity: .4;
transform: scale(1, 1);
}
}

18 changes: 9 additions & 9 deletions src/app/main/action/progress-indicator/progress-indicator.component.spec.ts
View file
@@ -1,6 +1,5 @@
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';

import { Component, OnInit, ViewChild } from '@angular/core';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { MatIconModule } from '@angular/material/icon';
import { By } from '@angular/platform-browser';
import { ProgressIndicatorComponent } from './progress-indicator.component';
Expand Down Expand Up @@ -38,8 +37,7 @@ describe('ProgressIndicatorComponent', () => {
ProgressIndicatorComponent,
TestHostComponent
]
})
.compileComponents();
}).compileComponents();
}));


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

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

const lineEl = divProgressElement.query(By.css('.line'));
const svgEl = divProgressElement.nativeElement.getElementsByTagName('svg');
expect(svgEl).not.toBe(null);

const bounceEl = lineEl.query(By.css('div'));
// const gEl = divProgressElement.nativeElement.getElementsByTagName('g');
const gEl = progressEl.query(By.css('g'));
// const gEl = svgEl.getElementsByTagName('g');

// expect the default progress indicator
expect(bounceEl.styles.backgroundColor).toEqual('red');
expect(bounceEl.attributes.class).toEqual('bounce1');
// // expect the default progress indicator in red
expect(gEl.attributes.stroke).toEqual('red');

});
});
8 changes: 5 additions & 3 deletions src/app/main/action/progress-indicator/progress-indicator.component.ts
View file
Expand Up @@ -30,13 +30,15 @@ export class ProgressIndicatorComponent implements OnInit {
*/
@Input() color = '#5849a7';

/**
* @ignore
*/
@Input() size: 'small' | 'large' = 'small';

widthAndHeight: string;

constructor() {
}

ngOnInit() {
this.widthAndHeight = (this.size === 'small' ? '48px' : '128px');
}

}
20 changes: 11 additions & 9 deletions src/app/workspace/resource/operations/add-value/add-value.component.html
View file
Expand Up @@ -20,17 +20,19 @@
</span>
</div>
<div class="crud-buttons">
<button class="save"
*ngIf="createModeActive"
(click)="saveAddValue()"
title="save"
[disabled]='!createValueComponent.form.valid'>
<button mat-icon-button
*ngIf="createModeActive"
class="value-action save"
title="save"
[disabled]='!createValueComponent.form.valid'
(click)="saveAddValue()">
<mat-icon>save</mat-icon>
</button>
<button class="cancel"
*ngIf="createModeActive"
(click)="cancelAddValue()"
title="cancel">
<button mat-icon-button
*ngIf="createModeActive"
class="value-action cancel"
title="cancel"
(click)="cancelAddValue()">
<mat-icon>cancel</mat-icon>
</button>
<app-progress-indicator *ngIf="submittingValue" [status]="progressIndicatorStatus" [color]="progressIndicatorColor"></app-progress-indicator>
Expand Down
24 changes: 13 additions & 11 deletions src/app/workspace/resource/operations/display-edit/display-edit.component.html
View file
Expand Up @@ -59,18 +59,20 @@
</div>
</div>
<div class="crud-buttons" *ngIf="!readOnlyValue">
<button class="save"
title="save"
*ngIf="editModeActive"
[disabled]="!displayValueComponent.form.valid"
(click)="saveEditValue()">
<mat-icon>save</mat-icon>
<button mat-icon-button
*ngIf="editModeActive"
class="value-action save"
title="save"
[disabled]="!displayValueComponent.form.valid"
(click)="saveEditValue()">
<mat-icon>save</mat-icon>
</button>
<button class="cancel"
title="cancel"
*ngIf="editModeActive"
(click)="cancelEditValue()">
<mat-icon>undo</mat-icon>
<button mat-icon-button
*ngIf="editModeActive"
class="value-action cancel"
title="cancel"
(click)="cancelEditValue()">
<mat-icon>undo</mat-icon>
</button>
</div>
</div>
7 changes: 4 additions & 3 deletions src/app/workspace/resource/properties/properties.component.html
View file
Expand Up @@ -138,7 +138,7 @@ <h3 class="label mat-title">
</div>
<!-- Add button -->
<div *ngIf="addValueIsAllowed(prop)">
<button class="create"
<button mat-icon-button class="value-action create"
(click)="showAddValueForm(prop)"
title="Add a new value">
<mat-icon>add_box</mat-icon>
Expand Down Expand Up @@ -178,6 +178,7 @@ <h3 class="label mat-subheading-1">
</div>

</div>
<ng-template #noProperties>The resource {{resource?.res.resourceClassLabel}} has no defined
properties.</ng-template>
<ng-template #noProperties>
The resource {{resource?.res.resourceClassLabel}} has no defined properties.
</ng-template>
</div>
22 changes: 0 additions & 22 deletions src/app/workspace/resource/properties/properties.component.scss
View file
Expand Up @@ -56,28 +56,6 @@
border-bottom: 1px solid rgba(33, 33, 33, 0.1);
}

// smaller buttons: add value and value info
.info,
.create {
cursor: pointer;
border: none;
padding: 0em;
outline: none;
background-color: transparent;
color: #000000;
}

.info .material-icons,
.create .material-icons {
font-size: 18px;
}

.info .mat-icon,
.create .mat-icon {
width: 18px;
height: 18px;
}

// properties container with property item and property value items

.properties-container {
Expand Down
13 changes: 8 additions & 5 deletions ...kspace/resource/resource-instance-form/select-properties/select-properties.component.html
View file
Expand Up @@ -48,19 +48,22 @@
</app-switch-properties>
</div>
<div class="buttons">
<button *ngIf="propertyValuesKeyValuePair[prop.id + '-filtered'].length !== 1"
type="button"
<button mat-icon-button
*ngIf="propertyValuesKeyValuePair[prop.id + '-filtered'].length !== 1"
class="value-action delete"
title="Delete this value"
(click)="deleteValue(prop, i)"
class="delete">
(click)="deleteValue(prop, i)">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
<!-- Add button -->
<div *ngIf="addValueIsAllowed(prop)">
<button type="button" class="create" (click)="addNewValueFormToProperty(prop)" title="Add a new value">
<button mat-icon-button
class="value-action create"
title="Add a new value"
(click)="addNewValueFormToProperty(prop)">
<mat-icon>add_box</mat-icon>
</button>
</div>
Expand Down

0 comments on commit 854aff2

Please sign in to comment.