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

Redo layout

Browse Source
This commit is contained in:
Adina Țeudan 2020-12-01 03:05:38 +02:00
parent a35f7751ce
commit 024f251a39
17 changed files with 104 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
View File

@ -3,7 +3,7 @@
<div class="section" translate="dictionaries"></div>
</div>
<div class="flex red-content-inner">
<div class="red-content-inner">
<div class="left-container">
<div class="grid-container">
<div class="header-item span-4">
@ -70,7 +70,7 @@
</div>
</div>
<div class="right-fixed-container">
<div class="right-container">
<redaction-simple-doughnut-chart
[config]="chartData"
[strokeWidth]="15"

10
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss
View File

@ -2,8 +2,6 @@
@import '../../../../assets/styles/red-mixins';
.left-container {
width: calc(100vw - 353px);
.grid-container {
grid-template-columns: auto 1fr 1fr 2fr;
@ -43,12 +41,10 @@
}
}
.right-fixed-container {
overflow-y: scroll;
@include no-scroll-bar();
.right-container {
display: flex;
width: calc(353px);
height: calc(100vh - 110px - 2 * 50px);
width: 353px;
min-width: 353px;
justify-content: center;
padding: 50px 0;
}

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

@ -1,4 +1,4 @@
<div class="red-top-bar" [class.fullscreen]="fullScreenService.fullScreen">
<div class="red-top-bar">
<div class="top-bar-row">
<div class="menu visible-lt-lg">
<button [matMenuTriggerFor]="menuNav" mat-flat-button>
@ -64,6 +64,4 @@
</div>
<div class="divider"></div>
</div>
<div class="red-content" [class.fullscreen]="fullScreenService.fullScreen">
<router-outlet></router-outlet>
</div>
<router-outlet></router-outlet>

3
apps/red-ui/src/app/screens/base-screen/base-screen.component.ts
View File

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

11
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -67,7 +67,7 @@
<redaction-file-actions (actionPerformed)="fileActionPerformed($event)" *ngIf="viewReady"></redaction-file-actions>
<redaction-circle-button
(action)="fullScreenService.toggleFullScreen()"
(action)="toggleFullScreen()"
icon="red:fullscreen"
tooltip="file-preview.fullscreen"
tooltipPosition="before"
@ -82,8 +82,9 @@
</div>
</div>
<div class="flex red-content-inner" [class.fullscreen]="fullScreenService.fullScreen">
<div class="red-content-inner" [class.fullscreen]="fullScreen">
<div class="left-container">
<div class="overlay-shadow"></div>
<redaction-pdf-viewer
(keyUp)="handleKeyEvent($event)"
(annotationSelected)="handleAnnotationSelected($event)"
@ -96,7 +97,7 @@
></redaction-pdf-viewer>
</div>
<div class="right-fixed-container">
<div class="right-container">
<div class="right-title heading" translate="file-preview.tabs.annotations.label">
<div>
<redaction-filter
@ -107,8 +108,8 @@
></redaction-filter>
<redaction-circle-button
*ngIf="fullScreenService.fullScreen"
(action)="fullScreenService.toggleFullScreen()"
*ngIf="fullScreen"
(action)="toggleFullScreen()"
icon="red:exit-fullscreen"
tooltip="file-preview.exit-fullscreen"
tooltipPosition="before"

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

@ -1,24 +1,6 @@
@import '../../../../assets/styles/red-variables';
@import '../../../../assets/styles/red-mixins';
redaction-pdf-viewer {
position: absolute;
width: calc(100vw - #{$right-container-width});
height: calc(100vh - 111px);
transition: height linear 0.2s;
z-index: 2;
}
.red-content-inner.fullscreen {
redaction-pdf-viewer {
height: 100vh;
}
.right-content {
height: calc(100vh - 71px) !important;
}
}
.vertical-line {
width: 1px;
height: 30px;
@ -37,10 +19,20 @@ redaction-pdf-viewer {
align-items: center;
}
.right-fixed-container {
.left-container {
position: relative;
.overlay-shadow {
@include inset-shadow;
position: absolute;
width: 100%;
height: 50px;
}
}
.right-container {
padding: 0;
width: $right-container-width;
box-sizing: border-box;
width: 350px;
min-width: 350px;
.right-title {
height: 70px;
@ -66,8 +58,7 @@ redaction-pdf-viewer {
}
.right-content {
height: calc(100vh - 110px - 71px);
transition: height linear 0.2s;
height: calc(100% - 72px);
box-sizing: border-box;
display: flex;

9
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -25,7 +25,6 @@ import { PermissionsService } from '../../../common/service/permissions.service'
import { Subscription, timer } from 'rxjs';
import { processFilters } from '../../../common/filter/utils/filter-utils';
import { UserPreferenceService } from '../../../common/service/user-preference.service';
import { FullScreenService } from '../../../utils/full-screen.service';
const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'f', 'F'];
@ -39,6 +38,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
private _activeViewer: 'ANNOTATED' | 'REDACTED' = 'ANNOTATED';
private instance: WebViewerInstance;
private _dialogRef: MatDialogRef<any>;
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;
}

4
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -37,7 +37,7 @@
></redaction-icon-button>
</div>
<div class="flex red-content-inner">
<div class="red-content-inner">
<div class="left-container">
<div class="grid-container">
<div class="header-item span-4">
@ -157,7 +157,7 @@
</div>
</div>
<div class="right-fixed-container">
<div class="right-container">
<redaction-project-listing-details
[projectsChartData]="projectsChartData"
[documentsChartData]="translateChartService.translateStatus(documentsChartData)"

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

@ -2,8 +2,6 @@
@import '../../../assets/styles/red-variables';
.left-container {
width: calc(100vw - #{$right-container-width} - 90px);
.grid-container {
grid-template-columns: 2fr 1fr 1fr auto;
}
@ -17,9 +15,8 @@
}
}
.right-fixed-container {
.right-container {
display: flex;
width: calc(430px + 2 * #{$right-container-horizontal-padding});
height: calc(100vh - 110px);
padding: 0;
width: 466px;
min-width: 466px;
}

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

@ -88,7 +88,7 @@
<input #fileInput (change)="uploadFiles($event.target['files'])" class="file-upload-input" multiple="true" type="file" />
</div>
</div>
<div class="flex red-content-inner">
<div class="red-content-inner">
<div class="left-container" [class.extended]="collapsedDetails">
<div class="grid-container">
<div class="header-item span-7">
@ -237,7 +237,7 @@
</div>
</div>
<div class="right-fixed-container" [class.collapsed]="collapsedDetails">
<div class="right-container" [class.collapsed]="collapsedDetails">
<redaction-project-details
#projectDetailsComponent
(openAssignProjectMembersDialog)="openAssignProjectMembersDialog()"

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

@ -63,15 +63,9 @@
}
}
.left-container {
width: calc(100vw - 313px - 16px - 24px);
}
.right-fixed-container {
overflow-y: scroll;
@include no-scroll-bar();
height: calc(100vh - 110px - 2 * 16px);
width: 313px;
.right-container {
width: 350px;
min-width: 350px;
padding: 16px 16px 16px 24px;
}

23
apps/red-ui/src/app/utils/full-screen.service.ts
View File

@ -1,23 +0,0 @@
import { Injectable } from '@angular/core';
import { NavigationStart, Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class FullScreenService {
public fullScreen = false;
constructor(private readonly _router: Router) {
this._router.events.subscribe((route) => {
if (route instanceof NavigationStart) {
if (route.url.indexOf('file') === -1) {
this.fullScreen = false;
}
}
});
}
public toggleFullScreen() {
this.fullScreen = !this.fullScreen;
}
}

3
apps/red-ui/src/assets/styles/red-grid.scss
View File

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

4
apps/red-ui/src/assets/styles/red-mixins.scss
View File

@ -20,3 +20,7 @@
background: transparent; /* Chrome/Safari/Webkit */
}
}
@mixin inset-shadow {
box-shadow: inset 0 4px 3px -2px $grey-4;
}

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

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

5
apps/red-ui/src/assets/styles/red-tables.scss
View File

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

5
apps/red-ui/src/assets/styles/red-variables.scss
View File

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