From 024f251a39e1ebc812bd06832d70c0a8e6888b11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 1 Dec 2020 03:05:38 +0200 Subject: [PATCH] Redo layout --- .../dictionary-listing-screen.component.html | 4 +- .../dictionary-listing-screen.component.scss | 10 +- .../base-screen/base-screen.component.html | 6 +- .../base-screen/base-screen.component.ts | 3 - .../file-preview-screen.component.html | 11 +- .../file-preview-screen.component.scss | 37 ++--- .../file-preview-screen.component.ts | 9 +- .../project-listing-screen.component.html | 4 +- .../project-listing-screen.component.scss | 9 +- .../project-overview-screen.component.html | 4 +- .../project-overview-screen.component.scss | 12 +- .../src/app/utils/full-screen.service.ts | 23 ---- apps/red-ui/src/assets/styles/red-grid.scss | 3 +- apps/red-ui/src/assets/styles/red-mixins.scss | 4 + .../src/assets/styles/red-page-layout.scss | 129 +++++++----------- apps/red-ui/src/assets/styles/red-tables.scss | 5 +- .../src/assets/styles/red-variables.scss | 5 - 17 files changed, 104 insertions(+), 174 deletions(-) delete mode 100644 apps/red-ui/src/app/utils/full-screen.service.ts diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html index 5e66aedfa..c54c4eaa8 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html @@ -3,7 +3,7 @@
-
+
@@ -70,7 +70,7 @@
-
+
+
-
- -
+ diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts b/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts index df11389e7..25e165587 100644 --- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts +++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts @@ -4,7 +4,6 @@ import { AppStateService } from '../../state/app-state.service'; import { LanguageService } from '../../i18n/language.service'; import { PermissionsService } from '../../common/service/permissions.service'; import { UserPreferenceService } from '../../common/service/user-preference.service'; -import { FullScreenService } from '../../utils/full-screen.service'; @Component({ selector: 'redaction-base-screen', @@ -16,8 +15,6 @@ export class BaseScreenComponent { public readonly appStateService: AppStateService, public readonly permissionsService: PermissionsService, public readonly userPreferenceService: UserPreferenceService, - public readonly fullScreenService: FullScreenService, - private readonly _languageService: LanguageService, private readonly _userService: UserService ) {} 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 cf5ce909b..bba493f78 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 @@ -67,7 +67,7 @@
-
+
+
-
+
; + public fullScreen = false; @ViewChild(PdfViewerComponent) private _viewerComponent: PdfViewerComponent; @ViewChild('annotationsElement') private _annotationsElement: ElementRef; @@ -61,7 +61,6 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { public readonly appStateService: AppStateService, public readonly permissionsService: PermissionsService, public readonly userPreferenceService: UserPreferenceService, - public readonly fullScreenService: FullScreenService, private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _activatedRoute: ActivatedRoute, private readonly _dialogService: DialogService, @@ -253,6 +252,10 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { } } + public toggleFullScreen() { + this.fullScreen = !this.fullScreen; + } + @HostListener('window:keyup', ['$event']) handleKeyEvent($event: KeyboardEvent) { console.log('handle', $event.key); @@ -261,7 +264,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { } if (['f', 'F'].includes($event.key)) { - this.fullScreenService.toggleFullScreen(); + this.toggleFullScreen(); return; } 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 36f5ca4b0..00a1fc082 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 @@ -37,7 +37,7 @@ >
-
+
@@ -157,7 +157,7 @@
-
+
-
+
@@ -237,7 +237,7 @@
-
+
{ - if (route instanceof NavigationStart) { - if (route.url.indexOf('file') === -1) { - this.fullScreen = false; - } - } - }); - } - - public toggleFullScreen() { - this.fullScreen = !this.fullScreen; - } -} diff --git a/apps/red-ui/src/assets/styles/red-grid.scss b/apps/red-ui/src/assets/styles/red-grid.scss index 4cebb435f..7d606d86c 100644 --- a/apps/red-ui/src/assets/styles/red-grid.scss +++ b/apps/red-ui/src/assets/styles/red-grid.scss @@ -8,10 +8,11 @@ align-items: center; z-index: 1; position: sticky; - top: 50px; + top: 0; gap: 10px; border-bottom: 1px solid $separator; box-sizing: border-box; + @include inset-shadow; .actions { display: flex; diff --git a/apps/red-ui/src/assets/styles/red-mixins.scss b/apps/red-ui/src/assets/styles/red-mixins.scss index d011a9dd1..83dc2a6c9 100644 --- a/apps/red-ui/src/assets/styles/red-mixins.scss +++ b/apps/red-ui/src/assets/styles/red-mixins.scss @@ -20,3 +20,7 @@ background: transparent; /* Chrome/Safari/Webkit */ } } + +@mixin inset-shadow { + box-shadow: inset 0 4px 3px -2px $grey-4; +} 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 5306079da..424fb48f3 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -1,4 +1,5 @@ @import 'red-variables'; +@import 'red-mixins'; html, body { @@ -17,14 +18,9 @@ body { align-items: center; padding: 0 24px; height: 50px; - box-shadow: 0 2px 4px 0 $grey-4; - position: fixed; - top: 61px; width: 100vw; box-sizing: border-box; background-color: $white; - z-index: 3; - transition: top linear 0.2s; .filters { gap: 2px; @@ -55,83 +51,67 @@ body { } } -.red-content { - width: 100vw; - height: calc(100vh - 61px); - overflow: auto; +.red-content-inner { + display: flex; + flex-direction: row; position: absolute; - transition: top linear 0.2s, height linear 0.2s; - top: 61px; + bottom: 0; + width: 100%; + height: calc(100% - 110px); + z-index: 1; + transition: height ease-in-out 0.2s; - .red-content-inner { - position: absolute; - top: 50px; + &.fullscreen { + height: 100%; + } - .left-container { - transition: width linear 0.1s, height linear 0.2s; + .left-container { + width: 100%; - &.extended { - width: calc(100vw - 60px) !important; - } - } - - .right-fixed-container { - border-left: 1px solid $grey-4; - background: $white; - position: fixed; - right: 0; - top: 111px; - z-index: 2; - transition: width linear 0.1s, top linear 0.2s, height linear 0.2s; - - .collapsed-wrapper { - display: none; - } - - &.collapsed { - padding-left: 0 !important; - padding-right: 0 !important; - width: 60px !important; - display: flex; - - div:not(.collapsed-wrapper) { - display: none; - } - - .collapsed-wrapper { - display: flex; - flex-direction: column; - align-items: center; - width: 60px; - - div { - display: initial; - } - - .all-caps-label { - transform: rotate(90deg) translateX(50%); - white-space: nowrap; - margin-top: 10px; - } - } - } + &.extended { + width: calc(100vw - 60px) !important; } } - &.fullscreen { - height: 100vh; - top: 0; + .right-container { + border-left: 1px solid $grey-4; + background: $white; + z-index: 1; + overflow-y: scroll; + @include no-scroll-bar(); + @include inset-shadow; + transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s; - .page-header { - top: -51px; + .collapsed-wrapper { + display: none; } - .red-content-inner { - top: 0; + &.collapsed { + padding-left: 0 !important; + padding-right: 0 !important; + width: 60px !important; + min-width: 60px; + display: flex; - .right-fixed-container { - top: 0; - height: 100vh; + div:not(.collapsed-wrapper) { + display: none; + } + + .collapsed-wrapper { + display: flex; + flex-direction: column; + align-items: center; + width: 60px; + + div { + display: initial; + } + + .all-caps-label { + transform: rotate(90deg) translateX(50%); + white-space: nowrap; + margin-top: 10px; + } } } } @@ -184,17 +164,10 @@ body { .red-top-bar { height: 61px; - position: absolute; width: 100vw; max-height: 61px; display: flex; flex-direction: column; - top: 0; - transition: top linear 0.2s; - - &.fullscreen { - top: -61px; - } .top-bar-row { height: 60px; diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index d3370acd9..bd1e23eb8 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -5,7 +5,7 @@ redaction-table-col-name, .select-oval-placeholder { background-color: $white; position: sticky; - top: 100px; + top: 50px; z-index: 1; } @@ -16,6 +16,9 @@ redaction-table-col-name, .grid-container { display: grid; + max-height: 100%; + overflow-y: scroll; + @include no-scroll-bar(); .placeholder-bottom-border { border-bottom: 1px solid $separator; diff --git a/apps/red-ui/src/assets/styles/red-variables.scss b/apps/red-ui/src/assets/styles/red-variables.scss index de9150e16..d21f0c0d2 100644 --- a/apps/red-ui/src/assets/styles/red-variables.scss +++ b/apps/red-ui/src/assets/styles/red-variables.scss @@ -27,8 +27,3 @@ $light: $white; $dark: $black; $separator: rgba(226, 228, 233, 0.9); - -$right-container-inside-width: 340px; -$right-container-horizontal-padding: 24px; -$right-container-vertical-padding: 16px; -$right-container-width: calc(#{$right-container-inside-width} + 2 *#{$right-container-horizontal-padding} + 1px);