From 854aff2d47bc601019239d4b855bde3b20b01d06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= Date: Tue, 7 Sep 2021 09:19:04 +0200 Subject: [PATCH] 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 --- .../progress-indicator.component.html | 44 +++++-- .../progress-indicator.component.scss | 124 ++---------------- .../progress-indicator.component.spec.ts | 18 +-- .../progress-indicator.component.ts | 8 +- .../add-value/add-value.component.html | 20 +-- .../display-edit/display-edit.component.html | 24 ++-- .../properties/properties.component.html | 7 +- .../properties/properties.component.scss | 22 ---- .../select-properties.component.html | 13 +- .../select-properties.component.scss | 10 -- src/assets/style/_elements.scss | 4 +- src/assets/style/_responsive.scss | 2 +- src/assets/style/_viewer.scss | 90 ++----------- src/assets/style/main.scss | 3 +- 14 files changed, 110 insertions(+), 279 deletions(-) diff --git a/src/app/main/action/progress-indicator/progress-indicator.component.html b/src/app/main/action/progress-indicator/progress-indicator.component.html index 847cc13cc1..bd9da293e8 100644 --- a/src/app/main/action/progress-indicator/progress-indicator.component.html +++ b/src/app/main/action/progress-indicator/progress-indicator.component.html @@ -19,15 +19,39 @@
-
-
-
-
-
-
-
-
-
-
+ + + + +
+ diff --git a/src/app/main/action/progress-indicator/progress-indicator.component.scss b/src/app/main/action/progress-indicator/progress-indicator.component.scss index 52168ece0b..ab120d493d 100644 --- a/src/app/main/action/progress-indicator/progress-indicator.component.scss +++ b/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); - } -} - diff --git a/src/app/main/action/progress-indicator/progress-indicator.component.spec.ts b/src/app/main/action/progress-indicator/progress-indicator.component.spec.ts index ecf2c1343d..d1723d45a6 100644 --- a/src/app/main/action/progress-indicator/progress-indicator.component.spec.ts +++ b/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'); }); }); diff --git a/src/app/main/action/progress-indicator/progress-indicator.component.ts b/src/app/main/action/progress-indicator/progress-indicator.component.ts index 0023a3a363..8ba2fe4503 100644 --- a/src/app/main/action/progress-indicator/progress-indicator.component.ts +++ b/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'); } } diff --git a/src/app/workspace/resource/operations/add-value/add-value.component.html b/src/app/workspace/resource/operations/add-value/add-value.component.html index 2df68ed401..c2977a37b4 100644 --- a/src/app/workspace/resource/operations/add-value/add-value.component.html +++ b/src/app/workspace/resource/operations/add-value/add-value.component.html @@ -20,17 +20,19 @@
- - diff --git a/src/app/workspace/resource/operations/display-edit/display-edit.component.html b/src/app/workspace/resource/operations/display-edit/display-edit.component.html index a50aa647ec..5c9972851a 100644 --- a/src/app/workspace/resource/operations/display-edit/display-edit.component.html +++ b/src/app/workspace/resource/operations/display-edit/display-edit.component.html @@ -59,18 +59,20 @@
- -
diff --git a/src/app/workspace/resource/properties/properties.component.html b/src/app/workspace/resource/properties/properties.component.html index 28f645283c..3b0d333ba2 100644 --- a/src/app/workspace/resource/properties/properties.component.html +++ b/src/app/workspace/resource/properties/properties.component.html @@ -138,7 +138,7 @@

-
- The resource {{resource?.res.resourceClassLabel}} has no defined - properties. + + The resource {{resource?.res.resourceClassLabel}} has no defined properties. + diff --git a/src/app/workspace/resource/properties/properties.component.scss b/src/app/workspace/resource/properties/properties.component.scss index d11f3c2d4e..013d4f14da 100644 --- a/src/app/workspace/resource/properties/properties.component.scss +++ b/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 { diff --git a/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.html b/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.html index b59744c822..bfdb1a8a10 100644 --- a/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.html +++ b/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.html @@ -48,11 +48,11 @@
-
@@ -60,7 +60,10 @@
-
diff --git a/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.scss b/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.scss index f54c0aefd1..79dadb5baa 100644 --- a/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.scss +++ b/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.scss @@ -1,13 +1,3 @@ -// buttons -.create { - cursor: pointer; - border: none; - padding: 0em; - outline: none; - background-color: transparent; - color: #000000; -} - // grid .properties-container { display: grid; diff --git a/src/assets/style/_elements.scss b/src/assets/style/_elements.scss index fa3c2ce526..20df00b813 100644 --- a/src/assets/style/_elements.scss +++ b/src/assets/style/_elements.scss @@ -107,12 +107,12 @@ a, } // override dsp-ui search panel style - .dsp-search-panel .mobile-only .dsp-fulltext-search-button { + .app-search-panel .mobile-only .app-fulltext-search-button { height: $header-height; border-radius: 0; margin-top: 4px; } - .dsp-fulltext-search-mobile-panel .dsp-fulltext-search-button { + .app-fulltext-search-mobile-panel .app-fulltext-search-button { height: auto !important; border-radius: $border-radius !important; margin-top: 0 !important; diff --git a/src/assets/style/_responsive.scss b/src/assets/style/_responsive.scss index 7e29b841f5..0273ba7414 100644 --- a/src/assets/style/_responsive.scss +++ b/src/assets/style/_responsive.scss @@ -38,7 +38,7 @@ $grid-breakpoints: ( // mobile device: bigger than phone @media (min-width: map-get($grid-breakpoints, phone)) { // override dsp-ui search panel style - .dsp-fulltext-search.desktop-only { + .app-fulltext-search.desktop-only { display: inline-flex !important; } .advanced-expert-buttons { diff --git a/src/assets/style/_viewer.scss b/src/assets/style/_viewer.scss index 487cdee173..c08a92735b 100644 --- a/src/assets/style/_viewer.scss +++ b/src/assets/style/_viewer.scss @@ -68,61 +68,6 @@ grid-column-start: 1; grid-column-end: 2; position: relative; - - .action-bubble { - position: absolute; - right: 0; - top: -20px; - border: 1px solid #e4e4e4; - border-radius: 10px; - padding: 0 1px; - background-color: #e4e4e4; - z-index: 2; - box-shadow: #949494 1px 4px 5px 0px; - - .button-container { - - button.mat-button-disabled { - - .mat-icon { - color: #aaaaaa; - } - - } - - button { - cursor: pointer; - border: none; - padding: 2px; - outline: none; - background-color: transparent; - color: #000000; - margin: 0 2px; - border-radius: 10px; - transition: background-color ease-out 0.5s; - min-width: inherit; - line-height: normal; - - .material-icons { - font-size: 18px; - } - - .mat-icon { - width: 18px; - height: 18px; - vertical-align: middle; - } - } - - button.info { - cursor: default; - } - - button:hover { - background-color: #c7c7c7; - } - } - } } .value-component.highlighted { @@ -134,6 +79,14 @@ grid-row-end: auto; grid-column-start: 2; grid-column-end: 3; + display: inline-flex; +} + +.value-action { + .material-icons, + .mat-icon { + font-size: 18px; + } } .mat-error { @@ -143,32 +96,6 @@ grid-column-end: end; } -button.save, -button.cancel { - cursor: pointer; - border: none; - padding: 0em; - margin-left: 1em; - outline: none; - background-color: transparent; - color: #000000; -} - -button.save:disabled { - color: #adadad; - cursor: default; -} - -button.save .material-icons, -button.cancel .material-icons { - font-size: 18px; -} - -button.save .mat-icon, -button.cancel .mat-icon { - font-size: 18px; -} - .deletion-dialog .title { font-weight: bold; font-size: 18px; @@ -196,7 +123,6 @@ button.cancel .mat-icon { min-width: 80%; } - .ck-content code { font-family: monospace !important; } diff --git a/src/assets/style/main.scss b/src/assets/style/main.scss index f6674a6f1e..9010d5d800 100644 --- a/src/assets/style/main.scss +++ b/src/assets/style/main.scss @@ -2,6 +2,7 @@ @import "theme"; @import "layout"; @import "elements"; +@import "viewer"; body { font-family: Roboto, "Helvetica Neue", sans-serif; @@ -40,4 +41,4 @@ body { /* Support for IE. */ font-feature-settings: 'liga'; -} \ No newline at end of file +}