From 88859a4aaf56937172fb80d8e022f521c90ae076 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 15 Oct 2020 21:45:34 +0300 Subject: [PATCH 1/2] Text styles --- .../file-preview-screen.component.html | 32 +++++++++---------- .../project-listing-screen.component.html | 8 ++--- .../project-overview-screen.component.html | 22 ++++++------- apps/red-ui/src/assets/styles/red-button.scss | 15 +++++++-- .../src/assets/styles/red-text-styles.scss | 10 ++++-- 5 files changed, 52 insertions(+), 35 deletions(-) diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html index e8481b793..6c014418b 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html @@ -46,7 +46,7 @@
-
-
+
-
-
@@ -84,9 +84,9 @@ [ngClass]="{ active: item.pageNumber === activeViewerPage, hidden: !showQuickNavigationItem(item) }" (click)="selectPage(item.pageNumber)" > -
{{ item.pageNumber }}
+
{{ item.pageNumber }}
+ [ngClass]="{ hidden: !showAnnotations(item, key)}" class="page-stats small-label">
{{ filters[key].symbol }}
{{item[key]}}
@@ -97,7 +97,7 @@
-
-
-
+
{{appStateService.activeFile.numberOfPages}}
@@ -154,21 +154,21 @@
-
+
-
+
{{appStateService.activeFile.added | date:'medium'}}
-
+
-
+
{{user.name}}
-
+
-
+
{{appStateService.activeFile.lastUpdated | date:'medium'}}
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html index db5058065..91cb48dd9 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html @@ -14,12 +14,10 @@
-
-
- + {{'project-listing.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }}
@@ -34,6 +32,8 @@
+
+
{{pw.project.projectName}}
-
+
{{documentCount(pw)}}
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index e705dc45e..762f2c0e9 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -20,7 +20,7 @@
- + {{'project-overview.table-header.title.label'| translate:{length: appStateService.activeProject?.files.length || 0} }}
@@ -36,11 +36,11 @@
-
-
-
-
-
+
+
+
+
+
-
+
{{ fileStatus.added | date:'d MMM. yyyy, hh:mm a' }}
-
+
Timo Bejan
-
+
@@ -101,7 +101,7 @@
-
+
{{ appStateService.activeProject.files.length }}
@@ -130,7 +130,7 @@
-
+
diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss index 013149c7d..58a4dfa9e 100644 --- a/apps/red-ui/src/assets/styles/red-button.scss +++ b/apps/red-ui/src/assets/styles/red-button.scss @@ -2,8 +2,19 @@ .mat-button, .mat-flat-button { font-family: Inter, sans-serif !important; - font-weight: 400 !important; - border-radius: 25px !important; + border-radius: 17px !important; + font-size: 13px !important; + height: 34px; + display: flex !important; + align-items: center; + + &.mat-primary { + font-weight: 500 !important; + } + + &:not(.mat-primary) { + font-weight: 400 !important; + } .mat-button-wrapper { display: flex; diff --git a/apps/red-ui/src/assets/styles/red-text-styles.scss b/apps/red-ui/src/assets/styles/red-text-styles.scss index 9922075cf..57c14662a 100644 --- a/apps/red-ui/src/assets/styles/red-text-styles.scss +++ b/apps/red-ui/src/assets/styles/red-text-styles.scss @@ -29,7 +29,7 @@ a { font-weight: 600; } -.subheading { +.all-caps-label { text-transform: uppercase; opacity: 0.7; font-size: 11px; @@ -38,12 +38,18 @@ a { line-height: 14px; } -.subtitle { +.small-label { opacity: 0.7; font-size: 11px; line-height: 14px; } +.medium-label { + font-size: 11px; + font-weight: 500; + line-height: 14px; +} + .clamp-1 { @include line-clamp(1); } From 4c3c3fc17222c97d15b501613aeb064a69c2f829 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Fri, 16 Oct 2020 00:34:31 +0300 Subject: [PATCH 2/2] Added icons & some other updates --- .../status-bar/status-bar.component.scss | 1 + apps/red-ui/src/app/icons/icons.module.ts | 162 +++--------------- .../base-screen/base-screen.component.html | 6 +- .../file-preview-screen.component.html | 4 +- .../project-listing-screen.component.html | 55 ++++-- .../project-listing-screen.component.scss | 32 ++-- .../project-overview-screen.component.html | 107 +++++++----- .../project-overview-screen.component.scss | 30 ++-- .../upload-status-overlay.component.scss | 1 - apps/red-ui/src/assets/i18n/en.json | 7 +- .../src/assets/icons/general/analyse.svg | 7 + .../{arrow_down.svg => arrow-down.svg} | 0 .../general/{arrow_up.svg => arrow-up.svg} | 0 .../src/assets/icons/general/assign.svg | 7 + .../src/assets/icons/general/bar_chart.svg | 50 ------ .../src/assets/icons/general/calendar.svg | 40 +---- .../general/{check_icon.svg => check.svg} | 0 .../general/{close_icon.svg => close.svg} | 0 .../src/assets/icons/general/document.svg | 7 + .../{download_icon.svg => download.svg} | 0 apps/red-ui/src/assets/icons/general/edit.svg | 7 + .../src/assets/icons/general/edit_icon.svg | 13 -- .../general/{error_icon.svg => error.svg} | 0 .../red-ui/src/assets/icons/general/files.svg | 13 -- .../src/assets/icons/general/folder.svg | 7 + apps/red-ui/src/assets/icons/general/idea.svg | 1 - .../src/assets/icons/general/lightning.svg | 7 + .../general/{logout_icon.svg => logout.svg} | 0 .../icons/general/{plus_icon.svg => plus.svg} | 0 .../general/{preview_icon.svg => preview.svg} | 0 .../src/assets/icons/general/report.svg | 7 + .../{sort-ascending.svg => sort-asc.svg} | 0 .../{sort-descending.svg => sort-desc.svg} | 0 .../red-ui/src/assets/icons/general/stats.svg | 14 -- .../src/assets/icons/general/status.svg | 7 + .../red-ui/src/assets/icons/general/trash.svg | 7 + .../src/assets/icons/general/trash_icon.svg | 12 -- apps/red-ui/src/assets/icons/general/user.svg | 17 +- apps/red-ui/src/assets/styles/red-button.scss | 13 ++ .../src/assets/styles/red-components.scss | 1 - apps/red-ui/src/assets/styles/red-dialog.scss | 1 - .../src/assets/styles/red-page-layout.scss | 15 +- apps/red-ui/src/assets/styles/red-tables.scss | 39 ++--- 43 files changed, 286 insertions(+), 411 deletions(-) create mode 100644 apps/red-ui/src/assets/icons/general/analyse.svg rename apps/red-ui/src/assets/icons/general/{arrow_down.svg => arrow-down.svg} (100%) rename apps/red-ui/src/assets/icons/general/{arrow_up.svg => arrow-up.svg} (100%) create mode 100644 apps/red-ui/src/assets/icons/general/assign.svg delete mode 100644 apps/red-ui/src/assets/icons/general/bar_chart.svg rename apps/red-ui/src/assets/icons/general/{check_icon.svg => check.svg} (100%) rename apps/red-ui/src/assets/icons/general/{close_icon.svg => close.svg} (100%) create mode 100644 apps/red-ui/src/assets/icons/general/document.svg rename apps/red-ui/src/assets/icons/general/{download_icon.svg => download.svg} (100%) create mode 100644 apps/red-ui/src/assets/icons/general/edit.svg delete mode 100755 apps/red-ui/src/assets/icons/general/edit_icon.svg rename apps/red-ui/src/assets/icons/general/{error_icon.svg => error.svg} (100%) delete mode 100644 apps/red-ui/src/assets/icons/general/files.svg create mode 100644 apps/red-ui/src/assets/icons/general/folder.svg delete mode 100644 apps/red-ui/src/assets/icons/general/idea.svg create mode 100644 apps/red-ui/src/assets/icons/general/lightning.svg rename apps/red-ui/src/assets/icons/general/{logout_icon.svg => logout.svg} (100%) rename apps/red-ui/src/assets/icons/general/{plus_icon.svg => plus.svg} (100%) rename apps/red-ui/src/assets/icons/general/{preview_icon.svg => preview.svg} (100%) create mode 100644 apps/red-ui/src/assets/icons/general/report.svg rename apps/red-ui/src/assets/icons/general/{sort-ascending.svg => sort-asc.svg} (100%) rename apps/red-ui/src/assets/icons/general/{sort-descending.svg => sort-desc.svg} (100%) delete mode 100644 apps/red-ui/src/assets/icons/general/stats.svg create mode 100644 apps/red-ui/src/assets/icons/general/status.svg create mode 100644 apps/red-ui/src/assets/icons/general/trash.svg delete mode 100755 apps/red-ui/src/assets/icons/general/trash_icon.svg diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.scss b/apps/red-ui/src/app/components/status-bar/status-bar.component.scss index 6e071c74c..8acab4c5a 100644 --- a/apps/red-ui/src/app/components/status-bar/status-bar.component.scss +++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.scss @@ -4,6 +4,7 @@ flex: 1; display: flex; width: 100%; + min-width: 12px; &.small { .rectangle { diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index a4567806a..0e45e19d7 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -1,7 +1,7 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {MatIconModule, MatIconRegistry} from '@angular/material/icon'; -import {DomSanitizer} from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatIconModule, MatIconRegistry } from '@angular/material/icon'; +import { DomSanitizer } from '@angular/platform-browser'; @NgModule({ imports: [CommonModule, MatIconModule], @@ -13,145 +13,23 @@ export class IconsModule { private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer ) { - iconRegistry.addSvgIconInNamespace( - 'red', - 'calendar', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/calendar.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'files', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/files.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'user', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/user.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'stats', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/stats.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'drop-down', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/drop-down-arrow.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'plus', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/plus_icon.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'close', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/close_icon.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'edit', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/edit_icon.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'delete', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/trash_icon.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'logout', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/logout_icon.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'preview', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/preview_icon.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'sort-asc', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/sort-ascending.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'sort-desc', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/sort-descending.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'menu', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/menu.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'chevron-right', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/double-chevron-right.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'info', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/info.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'refresh', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/refresh.svg') - ); - - iconRegistry.addSvgIconInNamespace( - 'red', - 'arrow-down', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/arrow_down.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'arrow-up', - sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/arrow_up.svg') - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'error', - sanitizer.bypassSecurityTrustResourceUrl( - '/assets/icons/general/error_icon.svg' - ) - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'check', - sanitizer.bypassSecurityTrustResourceUrl( - '/assets/icons/general/check_icon.svg' - ) - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'idea', - sanitizer.bypassSecurityTrustResourceUrl( - '/assets/icons/general/idea.svg' - ) - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'secret', - sanitizer.bypassSecurityTrustResourceUrl( - '/assets/icons/general/secret.svg' - ) - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'pages', - sanitizer.bypassSecurityTrustResourceUrl( - '/assets/icons/general/pages.svg' - ) - ); - iconRegistry.addSvgIconInNamespace( - 'red', - 'bar-chart', - sanitizer.bypassSecurityTrustResourceUrl( - '/assets/icons/general/bar_chart.svg' - ) - ); + const icons = [ + 'add', 'analyse', 'arrow-down', 'arrow-up', 'assign', 'calendar', 'check', + 'close', 'document', 'double-chevron-right', 'download', 'drop-down-arrow', + 'edit', 'error', 'folder', 'info', 'lightning', 'logout', 'menu', 'pages', + 'plus', 'preview', 'refresh', 'report', 'secret', 'sort-asc', 'sort-desc', + 'status', 'trash', 'user' + ]; + for (const icon of icons) { + iconRegistry.addSvgIconInNamespace( + 'red', + icon, + sanitizer.bypassSecurityTrustResourceUrl( + `/assets/icons/general/${icon}.svg` + ) + ); + } } diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html index 457ccdc1c..4ee93847d 100644 --- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html @@ -20,14 +20,14 @@
- +
{{appStateService.activeProject.project.projectName}}
- +
@@ -43,7 +43,7 @@ diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html index 6c014418b..b5a729533 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html @@ -118,7 +118,7 @@
@@ -145,7 +145,7 @@ {{appStateService.activeFile.numberOfPages}}
- + {{annotations.length}}
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html index 91cb48dd9..62c49abe6 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html @@ -1,11 +1,24 @@
-
-
-
-
-
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
- + {{documentCount(pw)}}
@@ -67,18 +80,22 @@ >
-
-
- - - -
+
+ + + + + +
@@ -93,7 +110,7 @@
- +
{{totalPages}}
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss index eb738bf55..d542b2092 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss @@ -1,13 +1,5 @@ @import "../../../assets/styles/red-mixins"; -.stats-subtitle { - margin-top: 6px; -} - -.stats-bar { - width: 160px; -} - .add-project-btn { mat-icon { width: 14px; @@ -16,6 +8,23 @@ } } +.left-container { + width: calc(100vw - #{$right-container-width} - 130px); + + .table-item:hover { + .stats-bar { + display: none; + } + } + + .stats-subtitle { + margin-top: 6px; + } + + .stats-bar, .action-buttons { + width: 160px; + } +} .right-fixed-container { display: flex; @@ -31,7 +40,7 @@ .project-stats-container { width: fit-content; - + .project-stats-item { display: flex; width: fit-content; @@ -44,13 +53,8 @@ mat-icon { height: 16px; - width: 16px; margin-top: 2px; } } } } - -.left-container { - width: calc(100vw - #{$right-container-width} - 130px); -} diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index 762f2c0e9..3797dd911 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -2,14 +2,27 @@ [innerHTML]="'project-overview.no-project.label' | translate:{projectId: projectId}" class="heading-l">
-
-
-
-
-
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
@@ -21,7 +34,7 @@
- {{'project-overview.table-header.title.label'| translate:{length: appStateService.activeProject?.files.length || 0} }} + {{'project-overview.table-header.title.label'| translate:{ length: appStateService.activeProject?.files.length || 0 } }}
@@ -36,80 +49,92 @@
-
-
-
-
-
+
+
+
+
+
-
+
{{ fileStatus.filename }}
-
+
{{ fileStatus.added | date:'d MMM. yyyy, hh:mm a' }}
-
- Timo Bejan +
+
R
+
S
-
+
-
-
- -
+
+
-
-
- - -
+
+ + + + + + + +
- - -
- {{ appStateService.activeProject.files.length }} + + {{ appStateService.activeProject.files.length }}
- 1 + + 1
- {{ appStateService.activeProject.project.date | date:'d MMM. yyyy' }} + + {{ appStateService.activeProject.project.date | date:'d MMM. yyyy' }}
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss index ca6ca4ac8..11cad4cba 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss @@ -8,19 +8,27 @@ min-width: 60px; } -.status-container { - display: flex; - justify-content: flex-end; - width: 40px; - - .status-bar-wrapper { - width: 40px; +.table-item { + .needs-work { + display: flex; + flex-direction: row; + gap: 4px; } -} -.table-header redaction-status-bar { - width: 100%; - padding-bottom: 10px; + .status-container { + display: flex; + justify-content: flex-end; + } + + &:hover { + .assigned-to, .status-container { + display: none; + } + + .action-buttons { + margin-left: 32px; + } + } } .project-details-container { diff --git a/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.scss b/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.scss index 0b123e2cc..f53363389 100644 --- a/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.scss +++ b/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.scss @@ -49,7 +49,6 @@ section { mat-icon { width: 16px; - height: 16px; } .upload-line { diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 52aeb5636..1e4509e72 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -126,6 +126,9 @@ "due-date": { "label": "Due Date" }, + "created-on": { + "label": "Created On" + }, "project": { "label": "Project" }, @@ -264,8 +267,8 @@ "added-on": { "label": "Added on" }, - "added-by": { - "label": "Added by" + "needs-work": { + "label": "Needs work" }, "assigned-to": { "label": "Assigned to" diff --git a/apps/red-ui/src/assets/icons/general/analyse.svg b/apps/red-ui/src/assets/icons/general/analyse.svg new file mode 100644 index 000000000..6e737af33 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/analyse.svg @@ -0,0 +1,7 @@ + + + analyse + + + + \ No newline at end of file diff --git a/apps/red-ui/src/assets/icons/general/arrow_down.svg b/apps/red-ui/src/assets/icons/general/arrow-down.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/arrow_down.svg rename to apps/red-ui/src/assets/icons/general/arrow-down.svg diff --git a/apps/red-ui/src/assets/icons/general/arrow_up.svg b/apps/red-ui/src/assets/icons/general/arrow-up.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/arrow_up.svg rename to apps/red-ui/src/assets/icons/general/arrow-up.svg diff --git a/apps/red-ui/src/assets/icons/general/assign.svg b/apps/red-ui/src/assets/icons/general/assign.svg new file mode 100644 index 000000000..2883771e0 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/assign.svg @@ -0,0 +1,7 @@ + + + assign + + + + \ No newline at end of file diff --git a/apps/red-ui/src/assets/icons/general/bar_chart.svg b/apps/red-ui/src/assets/icons/general/bar_chart.svg deleted file mode 100644 index 41cecdd3b..000000000 --- a/apps/red-ui/src/assets/icons/general/bar_chart.svg +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/red-ui/src/assets/icons/general/calendar.svg b/apps/red-ui/src/assets/icons/general/calendar.svg index 690f2b259..2a4e3a2a4 100644 --- a/apps/red-ui/src/assets/icons/general/calendar.svg +++ b/apps/red-ui/src/assets/icons/general/calendar.svg @@ -1,31 +1,9 @@ - - - - - - - - + + + calendar + + + + + + \ No newline at end of file diff --git a/apps/red-ui/src/assets/icons/general/check_icon.svg b/apps/red-ui/src/assets/icons/general/check.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/check_icon.svg rename to apps/red-ui/src/assets/icons/general/check.svg diff --git a/apps/red-ui/src/assets/icons/general/close_icon.svg b/apps/red-ui/src/assets/icons/general/close.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/close_icon.svg rename to apps/red-ui/src/assets/icons/general/close.svg diff --git a/apps/red-ui/src/assets/icons/general/document.svg b/apps/red-ui/src/assets/icons/general/document.svg new file mode 100644 index 000000000..946686b4f --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/document.svg @@ -0,0 +1,7 @@ + + + document + + + + \ No newline at end of file diff --git a/apps/red-ui/src/assets/icons/general/download_icon.svg b/apps/red-ui/src/assets/icons/general/download.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/download_icon.svg rename to apps/red-ui/src/assets/icons/general/download.svg diff --git a/apps/red-ui/src/assets/icons/general/edit.svg b/apps/red-ui/src/assets/icons/general/edit.svg new file mode 100644 index 000000000..c3cabc52f --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/edit.svg @@ -0,0 +1,7 @@ + + + edit + + + + \ No newline at end of file diff --git a/apps/red-ui/src/assets/icons/general/edit_icon.svg b/apps/red-ui/src/assets/icons/general/edit_icon.svg deleted file mode 100755 index 459c5c855..000000000 --- a/apps/red-ui/src/assets/icons/general/edit_icon.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - diff --git a/apps/red-ui/src/assets/icons/general/error_icon.svg b/apps/red-ui/src/assets/icons/general/error.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/error_icon.svg rename to apps/red-ui/src/assets/icons/general/error.svg diff --git a/apps/red-ui/src/assets/icons/general/files.svg b/apps/red-ui/src/assets/icons/general/files.svg deleted file mode 100644 index 4234a53f8..000000000 --- a/apps/red-ui/src/assets/icons/general/files.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - diff --git a/apps/red-ui/src/assets/icons/general/folder.svg b/apps/red-ui/src/assets/icons/general/folder.svg new file mode 100644 index 000000000..94215f133 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/folder.svg @@ -0,0 +1,7 @@ + + + folder + + + + \ No newline at end of file diff --git a/apps/red-ui/src/assets/icons/general/idea.svg b/apps/red-ui/src/assets/icons/general/idea.svg deleted file mode 100644 index 4cdd9debd..000000000 --- a/apps/red-ui/src/assets/icons/general/idea.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/red-ui/src/assets/icons/general/lightning.svg b/apps/red-ui/src/assets/icons/general/lightning.svg new file mode 100644 index 000000000..28f8fcc49 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/lightning.svg @@ -0,0 +1,7 @@ + + + due + + + + \ No newline at end of file diff --git a/apps/red-ui/src/assets/icons/general/logout_icon.svg b/apps/red-ui/src/assets/icons/general/logout.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/logout_icon.svg rename to apps/red-ui/src/assets/icons/general/logout.svg diff --git a/apps/red-ui/src/assets/icons/general/plus_icon.svg b/apps/red-ui/src/assets/icons/general/plus.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/plus_icon.svg rename to apps/red-ui/src/assets/icons/general/plus.svg diff --git a/apps/red-ui/src/assets/icons/general/preview_icon.svg b/apps/red-ui/src/assets/icons/general/preview.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/preview_icon.svg rename to apps/red-ui/src/assets/icons/general/preview.svg diff --git a/apps/red-ui/src/assets/icons/general/report.svg b/apps/red-ui/src/assets/icons/general/report.svg new file mode 100644 index 000000000..b4a3c120b --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/report.svg @@ -0,0 +1,7 @@ + + + report + + + + \ No newline at end of file diff --git a/apps/red-ui/src/assets/icons/general/sort-ascending.svg b/apps/red-ui/src/assets/icons/general/sort-asc.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/sort-ascending.svg rename to apps/red-ui/src/assets/icons/general/sort-asc.svg diff --git a/apps/red-ui/src/assets/icons/general/sort-descending.svg b/apps/red-ui/src/assets/icons/general/sort-desc.svg similarity index 100% rename from apps/red-ui/src/assets/icons/general/sort-descending.svg rename to apps/red-ui/src/assets/icons/general/sort-desc.svg diff --git a/apps/red-ui/src/assets/icons/general/stats.svg b/apps/red-ui/src/assets/icons/general/stats.svg deleted file mode 100644 index d6a198b7c..000000000 --- a/apps/red-ui/src/assets/icons/general/stats.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - diff --git a/apps/red-ui/src/assets/icons/general/status.svg b/apps/red-ui/src/assets/icons/general/status.svg new file mode 100644 index 000000000..39ce9e2ec --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/status.svg @@ -0,0 +1,7 @@ + + + status + + + + \ No newline at end of file diff --git a/apps/red-ui/src/assets/icons/general/trash.svg b/apps/red-ui/src/assets/icons/general/trash.svg new file mode 100644 index 000000000..254482033 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/trash.svg @@ -0,0 +1,7 @@ + + + trash + + + + \ No newline at end of file diff --git a/apps/red-ui/src/assets/icons/general/trash_icon.svg b/apps/red-ui/src/assets/icons/general/trash_icon.svg deleted file mode 100755 index 7145a2809..000000000 --- a/apps/red-ui/src/assets/icons/general/trash_icon.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - diff --git a/apps/red-ui/src/assets/icons/general/user.svg b/apps/red-ui/src/assets/icons/general/user.svg index 5d1a85a26..50a4bdbcc 100644 --- a/apps/red-ui/src/assets/icons/general/user.svg +++ b/apps/red-ui/src/assets/icons/general/user.svg @@ -1,10 +1,7 @@ - - - - - - + + + user + + + + \ No newline at end of file diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss index 58a4dfa9e..6af5fd357 100644 --- a/apps/red-ui/src/assets/styles/red-button.scss +++ b/apps/red-ui/src/assets/styles/red-button.scss @@ -29,3 +29,16 @@ .mat-button[aria-expanded="true"], .mat-button.overlay { background: rgba($primary, 0.1); } + +.icon-button { + display: flex; + flex-direction: row-reverse; + gap: 6px; + align-items: center; + cursor: pointer; + + mat-icon { + width: 14px; + color: $accent; + } +} diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss index 571d0e406..0ffb1d62c 100644 --- a/apps/red-ui/src/assets/styles/red-components.scss +++ b/apps/red-ui/src/assets/styles/red-components.scss @@ -72,7 +72,6 @@ mat-icon { width: 10px; - height: 10px; margin-right: 4px; } } diff --git a/apps/red-ui/src/assets/styles/red-dialog.scss b/apps/red-ui/src/assets/styles/red-dialog.scss index d9df8879e..21841a121 100644 --- a/apps/red-ui/src/assets/styles/red-dialog.scss +++ b/apps/red-ui/src/assets/styles/red-dialog.scss @@ -9,7 +9,6 @@ mat-icon { width: 12px; - height: 12px; } } diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss index 4e92e58e2..7303933c5 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -47,8 +47,7 @@ html, body { mat-icon { cursor: pointer; - width: 20px; - height: 20px; + width: 14px; &:hover { color: $primary; @@ -85,6 +84,18 @@ html, body { flex: 3; } +.flex-4 { + flex: 4; +} + +.flex-5 { + flex: 5; +} + +.flex-6 { + flex: 6; +} + .mt-5 { margin-top: 5px; } diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index 192f26a48..6f147f25c 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -21,7 +21,7 @@ text-transform: uppercase; > div { - padding: 8px 24px; + padding: 8px 16px; font-weight: 600; border-bottom: 1px solid rgba(226, 228, 233, 0.9); } @@ -33,8 +33,8 @@ height: 80px; border-bottom: 1px solid rgba(226, 228, 233, 0.9); - > div:not(.on-hover) { - padding: 0 24px; + > div { + padding: 0 16px; } .table-item-title { @@ -42,38 +42,21 @@ @include line-clamp(1); } - .on-hover-wrapper { - width: 0; - height: 0; - padding: 0 !important; - align-self: flex-start; - - .on-hover { - position: relative; - right: 142px; - height: 80px; - width: 142px; - background: linear-gradient(90deg, rgba(249, 250, 251, 0) 0%, #F9FAFB 100%); - display: none; - justify-content: flex-end; - align-items: center; - - div { - margin-right: 12px; - } - } + .action-buttons { + display: none; } - &:hover { background-color: #F9FAFB; - .on-hover { + .action-buttons { display: flex; - } + align-items: center; + justify-content: flex-end; - .rectangle { - background-color: $grey-4 !important; + mat-icon { + width: 14px; + } } } }