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/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 @@
-
add_box
@@ -178,6 +178,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 @@
-
+ (click)="deleteValue(prop, i)">
delete
@@ -60,7 +60,10 @@
-
+
add_box
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
+}