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;