Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Collapsible project details

Browse Source
This commit is contained in:
Adina Țeudan 2020-11-26 22:11:03 +02:00
parent 8aa2ec4f92
commit 1e8382018d
10 changed files with 112 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/icons/icons.module.ts
View File

@ -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',

20
apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
View File

@ -1,5 +1,21 @@
<div class="heading-xl mt-8">
{{ appStateService.activeProject.project.projectName }}
<div class="collapsed-wrapper mt-8">
<redaction-circle-button
(action)="toggleCollapse.emit()"
icon="red:expand"
tooltip="project-details.expand"
tooltipPosition="before"
></redaction-circle-button>
<div class="all-caps-label" translate="project-details.title"></div>
</div>
<div class="header-wrapper mt-8">
<div class="heading-xl flex-1">{{ appStateService.activeProject.project.projectName }}</div>
<redaction-circle-button
(action)="toggleCollapse.emit()"
icon="red:collapse"
tooltip="project-details.collapse"
tooltipPosition="before"
></redaction-circle-button>
</div>
<div class="mt-24">

5
apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss
View File

@ -1,5 +1,10 @@
@import '../../../../assets/styles/red-variables';
.header-wrapper {
display: flex;
flex-direction: row;
}
.members-container {
gap: 5px;
}

1
apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts
View File

@ -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,

5
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
View File

@ -71,7 +71,7 @@
</div>
</div>
<div class="flex red-content-inner">
<div class="left-container">
<div class="left-container" [class.extended]="collapsedDetails">
<div class="grid-container">
<div class="header-item span-4">
<div class="select-all-container">
@ -227,12 +227,13 @@
</div>
</div>
<div class="right-fixed-container">
<div class="right-fixed-container" [class.collapsed]="collapsedDetails">
<redaction-project-details
#projectDetailsComponent
(openAssignProjectMembersDialog)="openAssignProjectMembersDialog()"
[filters]="detailsContainerFilters"
(filtersChanged)="filtersChanged($event)"
(toggleCollapse)="toggleCollapsedDetails()"
></redaction-project-details>
</div>
</div>

5
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
View File

@ -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;
}
}

5
apps/red-ui/src/assets/i18n/en.json
View File

@ -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": {

16
apps/red-ui/src/assets/icons/general/collapse.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>5B0A44C3-61D4-4E26-9E1A-B63DF5709D7D</title>
<g id="Projects-&amp;-Documents" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="04.-Document-Hover" transform="translate(-1400.000000, -137.000000)">
<rect x="0" y="0" width="1440" height="980"></rect>
<g id="Project-details" transform="translate(1111.000000, 127.000000)" fill="currentColor" fill-rule="nonzero">
<g id="Group-6" transform="translate(279.000000, 0.000000)">
<g id="status" transform="translate(10.000000, 10.000000)">
<polygon id="Path" points="9.17 3.5 8.19 4.48 9.94 6.3 1.4 6.3 1.4 7.7 9.94 7.7 8.19 9.52 9.17 10.5 12.6 7"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1006 B

16
apps/red-ui/src/assets/icons/general/expand.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>AED16F82-54B2-4F74-8F6F-39C215879618</title>
<g id="Projects-&amp;-Documents" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="04.-Collapsed-Details" transform="translate(-1403.000000, -137.000000)">
<rect x="0" y="0" width="1440" height="980"></rect>
<rect id="Rectangle" x="1380" y="111" width="60" height="1500"></rect>
<g id="Group-6" transform="translate(1393.000000, 127.000000)">
<rect id="Rectangle" x="0" y="0" width="34" height="34" rx="17"></rect>
<g id="status" transform="translate(17.000000, 17.000000) scale(-1, 1) translate(-17.000000, -17.000000) translate(10.000000, 10.000000)" fill="currentColor" fill-rule="nonzero">
<polygon id="Path" points="9.17 3.5 8.19 4.48 9.94 6.3 1.4 6.3 1.4 7.7 9.94 7.7 8.19 9.52 9.17 10.5 12.6 7"></polygon>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

46
apps/red-ui/src/assets/styles/red-page-layout.scss
View File

@ -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;