refactor: fix style in resource, search-panel and progress-indicator (DSP-1887)

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

@@ -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>
+

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

@@ -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;
     }
   }
+
 }
 
 //
@@ -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);
-  }
-}
-

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

@@ -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';
@@ -38,8 +37,7 @@ describe('ProgressIndicatorComponent', () => {
                 ProgressIndicatorComponent,
                 TestHostComponent
             ]
-        })
-            .compileComponents();
+        }).compileComponents();
     }));
 
 
@@ -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');
 
     });
 });

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

@@ -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');
     }
 
 }

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

@@ -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>

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

@@ -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>

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

@@ -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>
@@ -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>

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

@@ -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 {

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

@@ -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>