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

Pull request #47: Ui updates

Browse Source 
Merge in RED/ui from ui-updates to master

* commit '1e8382018d2fbfbe9cc5d2063feaa89c6ba824a7':
  Collapsible project details
  Fixed breadcrumb arrows
  Bolder active annotation and page border
This commit is contained in:
Timo Bejan 2020-11-26 21:19:42 +01:00
commit ce56fe5f1b
14 changed files with 124 additions and 26 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',

8
apps/red-ui/src/app/screens/base-screen/base-screen.component.html
View File

@ -20,15 +20,11 @@
</div>
<div class="menu flex-2 visible-lg breadcrumbs-container">
<a class="breadcrumb" routerLink="/ui/projects" translate="top-bar.navigation-items.projects"></a>
<div *ngIf="appStateService.activeProject" class="breadcrumb">
<mat-icon svgIcon="red:arrow-right"></mat-icon>
</div>
<mat-icon *ngIf="appStateService.activeProject" svgIcon="red:arrow-right"></mat-icon>
<a *ngIf="appStateService.activeProject" class="breadcrumb" [routerLink]="'/ui/projects/' + appStateService.activeProjectId">
{{ appStateService.activeProject.project.projectName }}
</a>
<div *ngIf="appStateService.activeFile" class="breadcrumb">
<mat-icon svgIcon="red:arrow-right"></mat-icon>
</div>
<mat-icon svgIcon="red:arrow-right" *ngIf="appStateService.activeFile"></mat-icon>
<a
*ngIf="appStateService.activeFile"
class="breadcrumb"

9
apps/red-ui/src/app/screens/base-screen/base-screen.component.scss
View File

@ -3,7 +3,7 @@
.breadcrumbs-container {
display: flex;
gap: 8px;
gap: 6px;
.breadcrumb {
text-decoration: none;
@ -16,11 +16,10 @@
color: $primary;
@include line-clamp(1);
}
}
.mat-icon {
vertical-align: middle;
width: 6px;
}
mat-icon {
width: 16px;
}
}

6
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
View File

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

6
apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.scss
View File

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

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;