From 8723c85d7b9732a2f6cbb3f9615b84a0ac4166cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 26 Nov 2020 20:40:03 +0200 Subject: [PATCH 1/3] Bolder active annotation and page border --- .../file-preview-screen/file-preview-screen.component.scss | 6 +++--- .../file/page-indicator/page-indicator.component.scss | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss index 94c6eed1f..76a4067df 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss @@ -86,14 +86,14 @@ redaction-pdf-viewer { .annotation { border-bottom: 1px solid $separator; - padding: 10px; + padding: 10px 10px 10px 6px; font-size: 11px; line-height: 14px; cursor: pointer; position: relative; display: flex; flex-direction: column; - border-left: 2px solid transparent; + border-left: 4px solid transparent; .details { display: flex; @@ -113,7 +113,7 @@ redaction-pdf-viewer { } &.active { - border-left: 2px solid $primary; + border-left: 4px solid $primary; } } } diff --git a/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.scss b/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.scss index 61792a685..8ccf2c3cc 100644 --- a/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.scss +++ b/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.scss @@ -3,16 +3,16 @@ .page-wrapper { color: $grey-1; position: relative; - padding: 12px; + padding: 12px 14px 12px 8px; cursor: pointer; - border-left: 2px solid transparent; + border-left: 4px solid transparent; &:hover { background-color: $grey-2; } &.active { - border-left: 2px solid $red-1; + border-left: 4px solid $red-1; } mat-icon { From 8aa2ec4f9210a83757113f3d8690969197ed3454 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 26 Nov 2020 20:47:13 +0200 Subject: [PATCH 2/3] Fixed breadcrumb arrows --- .../app/screens/base-screen/base-screen.component.html | 8 ++------ .../app/screens/base-screen/base-screen.component.scss | 9 ++++----- 2 files changed, 6 insertions(+), 11 deletions(-) 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 6bef2bfea..6b58f9763 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,15 +20,11 @@
-
- -
+ {{ appStateService.activeProject.project.projectName }} -
- -
+ Date: Thu, 26 Nov 2020 22:11:03 +0200 Subject: [PATCH 3/3] Collapsible project details --- apps/red-ui/src/app/icons/icons.module.ts | 2 + .../project-details.component.html | 20 +++++++- .../project-details.component.scss | 5 ++ .../project-details.component.ts | 1 + .../project-overview-screen.component.html | 5 +- .../project-overview-screen.component.ts | 5 ++ apps/red-ui/src/assets/i18n/en.json | 5 +- .../src/assets/icons/general/collapse.svg | 16 +++++++ .../src/assets/icons/general/expand.svg | 16 +++++++ .../src/assets/styles/red-page-layout.scss | 46 +++++++++++++++++-- 10 files changed, 112 insertions(+), 9 deletions(-) create mode 100644 apps/red-ui/src/assets/icons/general/collapse.svg create mode 100644 apps/red-ui/src/assets/icons/general/expand.svg diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index 67eb0bd25..1519a8993 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -21,6 +21,7 @@ export class IconsModule { 'calendar', 'check', 'close', + 'collapse', 'comment', 'comment-fill', 'document', @@ -29,6 +30,7 @@ export class IconsModule { 'edit', 'entries', 'error', + 'expand', 'folder', 'info', 'lightning', diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html index 664f65a7f..0c9c85e1a 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html @@ -1,5 +1,21 @@ -
- {{ appStateService.activeProject.project.projectName }} +
+ +
+
+ +
+
{{ appStateService.activeProject.project.projectName }}
+
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss index 5b557b11c..f05663d58 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss @@ -1,5 +1,10 @@ @import '../../../../assets/styles/red-variables'; +.header-wrapper { + display: flex; + flex-direction: row; +} + .members-container { gap: 5px; } diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts index 672885fcc..cccc80a0f 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts @@ -19,6 +19,7 @@ export class ProjectDetailsComponent implements OnInit { @Input() public filters: { needsWorkFilters: FilterModel[]; statusFilters: FilterModel[] }; @Output() public filtersChanged = new EventEmitter(); @Output() public openAssignProjectMembersDialog = new EventEmitter(); + @Output() public toggleCollapse = new EventEmitter(); constructor( public readonly appStateService: AppStateService, 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 6042f1339..50637a647 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 @@ -71,7 +71,7 @@
-
+
@@ -227,12 +227,13 @@
-
+
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts index fd9dafee0..75b049a0e 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts @@ -34,6 +34,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { public statusFilters: FilterModel[]; public peopleFilters: FilterModel[]; public needsWorkFilters: FilterModel[]; + public collapsedDetails = false; displayedFiles: FileStatusWrapper[] = []; @@ -307,4 +308,8 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { this.reloadProjects(); }); } + + public toggleCollapsedDetails() { + this.collapsedDetails = !this.collapsedDetails; + } } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index fc8a63ef4..60cd5cfcd 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -128,6 +128,7 @@ } }, "project-details": { + "title": "Project Details", "dialog": { "title": "Project Details", "info": { @@ -140,7 +141,9 @@ }, "owner": "Owner", "members": "Members", - "assign-members": "Assign Members" + "assign-members": "Assign Members", + "expand": "Show Details", + "collapse": "Hide Details" }, "project-overview": { "header-actions": { diff --git a/apps/red-ui/src/assets/icons/general/collapse.svg b/apps/red-ui/src/assets/icons/general/collapse.svg new file mode 100644 index 000000000..c4760c50a --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/collapse.svg @@ -0,0 +1,16 @@ + + + 5B0A44C3-61D4-4E26-9E1A-B63DF5709D7D + + + + + + + + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/expand.svg b/apps/red-ui/src/assets/icons/general/expand.svg new file mode 100644 index 000000000..eb38ed7ab --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/expand.svg @@ -0,0 +1,16 @@ + + + AED16F82-54B2-4F74-8F6F-39C215879618 + + + + + + + + + + + + + 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 a630c4b06..5adeaa5eb 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -45,12 +45,54 @@ body { margin-top: 50px; } +.left-container { + height: calc(100vh - 61px - 50px); + transition: width ease-in-out 0.1s; + + &.extended { + width: calc(100vw - 60px) !important; + } +} + .right-fixed-container { border-left: 1px solid $grey-4; background: $white; position: fixed; right: 0; z-index: 2; + transition: width ease-in-out 0.1s; + + .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; + } + } + } } .flex { @@ -83,10 +125,6 @@ body { margin-top: 20px; } -.left-container { - height: calc(100vh - 61px - 50px); -} - .break-20 { height: 20px; background: transparent;