From f97e5235948eb7d3c6c568de170903808ffba881 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 22 Oct 2020 23:50:21 +0300 Subject: [PATCH] Sort by added on & removed material icons font --- apps/red-ui/src/app/icons/icons.module.ts | 4 +-- .../base-screen/base-screen.component.html | 10 +++---- .../file-preview-screen.component.html | 18 ++++++++----- .../project-overview-screen.component.html | 9 ++++++- .../project-overview-screen.component.ts | 6 +++++ apps/red-ui/src/assets/i18n/en.json | 3 +++ .../src/assets/icons/general/arrow-down.svg | 13 +++------ .../src/assets/icons/general/arrow-right.svg | 3 +++ .../src/assets/icons/general/arrow-up.svg | 13 +++------ .../assets/icons/general/drop-down-arrow.svg | 7 ----- apps/red-ui/src/assets/styles/red-button.scss | 8 +++++- apps/red-ui/src/assets/styles/red-menu.scss | 5 +++- .../src/assets/styles/red-page-layout.scss | 27 +++++++++++-------- apps/red-ui/src/assets/styles/red-tables.scss | 12 +++++++++ apps/red-ui/src/assets/styles/red-theme.scss | 1 - 15 files changed, 84 insertions(+), 55 deletions(-) mode change 100755 => 100644 apps/red-ui/src/assets/icons/general/arrow-down.svg create mode 100644 apps/red-ui/src/assets/icons/general/arrow-right.svg delete mode 100644 apps/red-ui/src/assets/icons/general/drop-down-arrow.svg diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index 9e14e6299..3520ceb22 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -14,8 +14,8 @@ export class IconsModule { private sanitizer: DomSanitizer ) { const icons = [ - 'add', 'analyse', 'arrow-down', 'arrow-up', 'assign', 'calendar', 'check', - 'close', 'document', 'double-chevron-right', 'download', + 'add', 'analyse', 'arrow-down', 'arrow-up', 'arrow-right', 'assign', 'calendar', + 'check', 'close', 'document', 'double-chevron-right', 'download', 'edit', 'error', 'folder', 'info', 'lightning', 'logout', 'menu', 'pages', 'plus', 'preview', 'refresh', 'report', 'secret', 'sort-asc', 'sort-desc', 'status', 'trash', 'user', 'check-alt' 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 46735ddb7..da5a7c2f3 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 @@ -16,18 +16,18 @@ mat-menu-item>{{appStateService.activeFile.filename}} -
+
- arrow_right +
{{appStateService.activeProject.project.projectName}}
- arrow_right +
@@ -39,9 +39,9 @@
- 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 3a283814e..9c9370bbe 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 @@ -31,10 +31,10 @@
-
-
@@ -91,9 +91,15 @@
- arrow_drop_down + - arrow_right +
+
-
+
+ +
+ + +
+
- - - - - - - - - + + + diff --git a/apps/red-ui/src/assets/icons/general/arrow-right.svg b/apps/red-ui/src/assets/icons/general/arrow-right.svg new file mode 100644 index 000000000..c6aecfcd4 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/red-ui/src/assets/icons/general/arrow-up.svg b/apps/red-ui/src/assets/icons/general/arrow-up.svg index 27d76d583..b4d9d527d 100644 --- a/apps/red-ui/src/assets/icons/general/arrow-up.svg +++ b/apps/red-ui/src/assets/icons/general/arrow-up.svg @@ -1,10 +1,3 @@ - - - - - - - - - - + + + diff --git a/apps/red-ui/src/assets/icons/general/drop-down-arrow.svg b/apps/red-ui/src/assets/icons/general/drop-down-arrow.svg deleted file mode 100644 index a54482c0e..000000000 --- a/apps/red-ui/src/assets/icons/general/drop-down-arrow.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - down - - - - \ 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 e4f7953e4..0c98d8078 100644 --- a/apps/red-ui/src/assets/styles/red-button.scss +++ b/apps/red-ui/src/assets/styles/red-button.scss @@ -19,6 +19,7 @@ .mat-button-wrapper { display: flex; align-items: center; + gap: 6px; } } @@ -28,8 +29,13 @@ .mat-button, .mat-flat-button, .mat-icon-button { gap: 6px; - + mat-icon { width: 14px; } } + +.arrow-button mat-icon { + width: 9px; + margin-left: 3px; +} diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss index dc12d76f7..5b10ac247 100644 --- a/apps/red-ui/src/assets/styles/red-menu.scss +++ b/apps/red-ui/src/assets/styles/red-menu.scss @@ -12,9 +12,12 @@ .arrow-wrapper { width: 24px; + text-align: center; mat-icon { - width: 14px; + width: 9px; + height: 9px; + margin: 0; } } 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 05c217ee7..e003252a3 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -172,19 +172,24 @@ html, body { } } - .breadcrumb { - text-decoration: none; - color: $accent; - font-weight: 600; - @include line-clamp(1); - min-width: 25px; + .breadcrumbs-container { + display: flex; + gap: 8px; - &:last-child { - color: $primary; - } + .breadcrumb { + text-decoration: none; + color: $accent; + font-weight: 600; - .mat-icon { - vertical-align: middle; + &:last-child { + color: $primary; + @include line-clamp(1); + } + + .mat-icon { + vertical-align: middle; + width: 6px; + } } } diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index c977794f9..f331982d7 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -20,10 +20,22 @@ display: flex; text-transform: uppercase; border-bottom: 1px solid rgba(226, 228, 233, 0.9); + align-items: center; > div { padding: 8px 16px; font-weight: 600; + display: flex; + align-items: center; + gap: 6px; + } + + .sort-arrows-container { + mat-icon { + display: block; + width: 6px; + height: 11px; + } } } diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index 74b2b37d5..0ec469e00 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -1,6 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500;600;700&display=swap'); -@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); @import '~ngx-toastr/toastr'; @import "red-material-theme"; @import "red-page-layout";