From 21dae27c0e9592e5e1e20151dad8afa5a28d5412 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 22 Feb 2021 21:35:39 +0200 Subject: [PATCH] Upload overlay UI --- .../overwrite-files-dialog.component.html | 8 +- .../overwrite-files-dialog.component.scss | 13 +- apps/red-ui/src/app/icons/icons.module.ts | 2 + .../upload-status-overlay.component.html | 98 ++++++------- .../upload-status-overlay.component.scss | 134 ++++++++++++++++-- apps/red-ui/src/assets/i18n/en.json | 12 +- .../assets/icons/general/status-collapse.svg | 37 +++++ .../assets/icons/general/status-expand.svg | 43 ++++++ apps/red-ui/src/assets/styles/red-button.scss | 14 +- .../src/assets/styles/red-progress-bar.scss | 16 +++ apps/red-ui/src/assets/styles/red-tables.scss | 2 +- apps/red-ui/src/assets/styles/red-theme.scss | 2 +- .../styles/red-upload-download-overlay.scss | 90 ------------ 13 files changed, 302 insertions(+), 169 deletions(-) create mode 100644 apps/red-ui/src/assets/icons/general/status-collapse.svg create mode 100644 apps/red-ui/src/assets/icons/general/status-expand.svg create mode 100644 apps/red-ui/src/assets/styles/red-progress-bar.scss delete mode 100644 apps/red-ui/src/assets/styles/red-upload-download-overlay.scss diff --git a/apps/red-ui/src/app/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html b/apps/red-ui/src/app/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html index ae902db3d..169cc1350 100644 --- a/apps/red-ui/src/app/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html +++ b/apps/red-ui/src/app/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html @@ -3,15 +3,15 @@

-
-
{{ 'overwrite-files-dialog.options.remember' | translate }} +
-
-
+
+ +
diff --git a/apps/red-ui/src/app/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.scss b/apps/red-ui/src/app/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.scss index 4ffdaa104..31723a2a3 100644 --- a/apps/red-ui/src/app/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.scss +++ b/apps/red-ui/src/app/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.scss @@ -1,3 +1,12 @@ -.dialog-actions > div:not(:last-child) { - margin-right: 32px; +mat-checkbox { + margin-top: 11px; + font-weight: 600; +} + +.dialog-actions > *:not(:last-child) { + margin-right: 16px; +} + +.cancel { + margin-left: 8px; } diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index 2265d2d5c..2da675192 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -61,6 +61,8 @@ export class IconsModule { 'sort-asc', 'sort-desc', 'status', + 'status-expand', + 'status-collapse', 'template', 'thumb-down', 'trash', diff --git a/apps/red-ui/src/app/upload-download/upload-status-overlay/upload-status-overlay.component.html b/apps/red-ui/src/app/upload-download/upload-status-overlay/upload-status-overlay.component.html index ac06bfc03..6ae8060f4 100644 --- a/apps/red-ui/src/app/upload-download/upload-status-overlay/upload-status-overlay.component.html +++ b/apps/red-ui/src/app/upload-download/upload-status-overlay/upload-status-overlay.component.html @@ -1,66 +1,56 @@ -
-
-
+
+
+
{{ 'upload-status.dialog.title' | translate: { len: uploadService.files.length } }}
-
- -
-
- -
-
- -
+ + +
-
-
-
-
- {{ uploadService.groupedFiles[projectId][0].projectName }} ({{ - uploadService.groupedFiles[projectId].length - }}) -
-
+
+
+
+ {{ uploadService.groupedFiles[projectId][0].projectName }} +
+
+
-
+
{{ model.file?.name }}
-
{{ model.progress }}%
-
- -
-
- -
+
{{ model.progress }}%
-
-
- {{ model.error.message }} -
+
+ {{ model.error?.message }} +
+
-
-
- -
-
- -
-
+
+ +
+ +
+
+
-
- +
+
diff --git a/apps/red-ui/src/app/upload-download/upload-status-overlay/upload-status-overlay.component.scss b/apps/red-ui/src/app/upload-download/upload-status-overlay/upload-status-overlay.component.scss index f5d3da988..a0f95ff94 100644 --- a/apps/red-ui/src/app/upload-download/upload-status-overlay/upload-status-overlay.component.scss +++ b/apps/red-ui/src/app/upload-download/upload-status-overlay/upload-status-overlay.component.scss @@ -2,16 +2,132 @@ @import '../../../assets/styles/red-mixins'; .red-upload-download-overlay { - right: 10px; -} + background: $white; + position: fixed; + bottom: 20px; + right: 20px; + box-shadow: 0 3px 12px 5px rgba(40, 50, 65, 0.14); + border-radius: 8px; + overflow: hidden; + width: 400px; -.project-name-wrapper { - display: flex; - padding: 8px 20px 8px 8px; - background-color: $grey-4; - font-weight: 600; + .red-upload-download-header { + display: flex; + flex-direction: row; + align-items: center; + position: relative; + padding: 16px 14px 16px 16px; + cursor: pointer; - .project-name { - @include line-clamp(1); + color: $grey-1; + font-size: 13px; + font-weight: 600; + line-height: 16px; + + mat-icon { + height: 13px; + color: $grey-1; + + &.collapse-icon { + height: 15px; + } + } + + &.expanded { + border-bottom: 1px solid $separator; + } + } + + .upload-download-list { + overflow: auto; + @include scroll-bar; + max-height: 260px; + + > div:not(:first-child) { + .project-name-wrapper { + border-top: 1px solid $separator; + } + } + + .project-name-wrapper { + display: flex; + padding: 4px 16px; + background-color: $grey-2; + + > span { + @include line-clamp(1); + } + } + + .upload-download-list-item { + padding: 10px 16px 12px 16px; + font-size: 11px; + line-height: 14px; + border-top: 1px solid $separator; + position: relative; + + .upload-download-line { + display: flex; + justify-content: flex-start; + align-items: center; + + .upload-download-item-name { + @include line-clamp(1); + + &.complete { + text-decoration: underline; + } + } + + .progress { + margin-left: 10px; + font-weight: 600; + } + } + + .upload-download-progress { + margin-top: 8px; + } + + &.error { + background-color: rgba($primary, 0.1); + padding-right: 100px; + + .error-message { + margin-top: 2px; + color: $primary; + } + } + + .actions { + display: none; + position: absolute; + align-items: center; + top: 0; + right: 0; + height: 100%; + + &.error { + display: flex; + } + + &:not(.error) { + background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, $grey-2 35%); + padding-left: 60px; + } + + mat-icon { + height: 13px; + margin-right: 20px; + } + } + + &:not(.error):hover { + background-color: $grey-2; + .actions { + display: flex; + } + } + } } } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 5470c558f..8b3b68aa8 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -736,13 +736,13 @@ "pending-changes-guard": "WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.", "reset-filters": "Reset Filters", "overwrite-files-dialog": { - "title": "File already exists!", - "question": "{{filename}} already exists. What do you want to do?", + "title": "Document already exists!", + "question": "{{filename}} already exists. Choose how to proceed:", "options": { - "overwrite": "Overwrite", - "skip": "Skip", - "cancel": "Cancel", - "remember": "Apply for all uploads" + "overwrite": "Replace existing document", + "skip": "Keep existing document", + "cancel": "Cancel all uploads", + "remember": "Remember choice and don't ask me again" } }, "license-info-screen": { diff --git a/apps/red-ui/src/assets/icons/general/status-collapse.svg b/apps/red-ui/src/assets/icons/general/status-collapse.svg new file mode 100644 index 000000000..b05ef0e3f --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/status-collapse.svg @@ -0,0 +1,37 @@ + + + B14B1060-4D9C-4EEC-845D-CFA8258D2E16 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/status-expand.svg b/apps/red-ui/src/assets/icons/general/status-expand.svg new file mode 100644 index 000000000..a9420fe0d --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/status-expand.svg @@ -0,0 +1,43 @@ + + + 98CDF1EA-D4BC-4B4A-A707-D85244677FBB + + + + + + + + + + + + + + + + + Description + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss index 3d880de3d..0dce4a455 100644 --- a/apps/red-ui/src/assets/styles/red-button.scss +++ b/apps/red-ui/src/assets/styles/red-button.scss @@ -31,10 +31,20 @@ opacity: 0 !important; } -.mat-flat-button.mat-primary, -.mat-button.primary { +.mat-flat-button, +.mat-button { padding: 0 14px; transition: background-color 0.2s, color 0.2s; + + background-color: $grey-6; + + &:not(.mat-button-disabled):hover { + background-color: $grey-4; + } +} + +.mat-flat-button.mat-primary, +.mat-button.primary { background-color: $red-1; &.mat-button-disabled { diff --git a/apps/red-ui/src/assets/styles/red-progress-bar.scss b/apps/red-ui/src/assets/styles/red-progress-bar.scss new file mode 100644 index 000000000..71f52195e --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-progress-bar.scss @@ -0,0 +1,16 @@ +@import 'red-variables'; + +.mat-progress-bar { + height: 6px; + border-radius: 3px; + + .mat-progress-bar-buffer { + background-color: $grey-4; + } + + &.green { + .mat-progress-bar-fill::after { + background-color: $green-2; + } + } +} diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index d179632fd..55fae57bc 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -63,7 +63,7 @@ cdk-virtual-scroll-viewport { padding-left: 100px; padding-right: 24px; z-index: 1; - background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, #f4f5f7 35%); + background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, $grey-2 35%); mat-icon { width: 14px; diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index 59e474830..f7531a252 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -24,5 +24,5 @@ @import 'red-breadcrumbs'; @import 'red-editor'; @import 'red-slider'; -@import 'red-upload-download-overlay'; @import 'red-loading'; +@import 'red-progress-bar'; diff --git a/apps/red-ui/src/assets/styles/red-upload-download-overlay.scss b/apps/red-ui/src/assets/styles/red-upload-download-overlay.scss deleted file mode 100644 index 55f1cdacf..000000000 --- a/apps/red-ui/src/assets/styles/red-upload-download-overlay.scss +++ /dev/null @@ -1,90 +0,0 @@ -@import 'red-variables'; - -.red-upload-download-overlay { - background: white; - position: fixed; - bottom: 10px; - border: 2px solid $grey-1; - - .upload-download-list { - max-height: 216px; - max-width: 400px; - overflow: auto; - } - - .red-upload-download-header { - display: flex; - flex-direction: row; - align-items: center; - position: relative; - padding: 10px; - background: $grey-1; - color: $white; - width: 380px; - cursor: pointer; - - mat-icon { - color: $white; - } - } - - .collapse-icon { - transform: translate(0, 2px); - - mat-icon { - width: 20px; - } - } - - .close-icon { - position: absolute; - right: 10px; - color: $white; - } - - .upload-download-list-item { - padding: 8px; - - mat-icon { - width: 16px; - } - - .upload-download-line { - display: flex !important; - height: 20px; - position: relative; - justify-content: flex-start; - align-items: center; - - .upload-download-item-name { - text-overflow: ellipsis; - overflow: hidden; - display: block; - white-space: nowrap; - padding-right: 50px; - - &.error { - color: $red-1; - padding-right: 60px; - padding-top: 4px; - } - } - - .upload-download-progress { - position: absolute; - right: 0; - width: 50px; - display: flex; - justify-content: space-evenly; - - &.error { - color: $red-1; - } - - &.ok { - color: $blue-1; - } - } - } - } -}