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

Full screen working, missing icons

Browse Source
This commit is contained in:
Adina Țeudan 2020-11-27 22:04:25 +02:00
parent f1485b26c4
commit 81f540f883
7 changed files with 136 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -4,6 +4,7 @@ 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',
@ -15,6 +16,8 @@ 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
) {}

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

@ -66,6 +66,12 @@
<div class="vertical-line"></div>
<redaction-file-actions (actionPerformed)="fileActionPerformed($event)" *ngIf="viewReady"></redaction-file-actions>
<redaction-circle-button
(action)="fullScreenService.toggleFullScreen()"
icon="red:plus"
tooltip="common.fullscreen"
tooltipPosition="before"
></redaction-circle-button>
<redaction-circle-button
[routerLink]="['/ui/projects/' + appStateService.activeProjectId]"
class="ml-8"
@ -76,7 +82,7 @@
</div>
</div>
<div class="flex red-content-inner">
<div class="flex red-content-inner" [class.fullscreen]="fullScreenService.fullScreen">
<div class="left-container">
<redaction-pdf-viewer
(annotationSelected)="handleAnnotationSelected($event)"
@ -91,6 +97,13 @@
<div class="right-fixed-container">
<div class="right-title heading" translate="file-preview.tabs.annotations.label">
<redaction-circle-button
*ngIf="fullScreenService.fullScreen"
(action)="fullScreenService.toggleFullScreen()"
icon="red:plus"
tooltip="common.fullscreen"
tooltipPosition="before"
></redaction-circle-button>
<redaction-filter
(filtersChanged)="filtersChanged($event)"
[chevron]="true"

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

@ -4,11 +4,21 @@
redaction-pdf-viewer {
position: absolute;
width: calc(100vw - #{$right-container-width});
height: calc(100vh - 110px);
top: 110px;
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;
@ -48,7 +58,8 @@ redaction-pdf-viewer {
}
.right-content {
height: calc(100vh - 110px - 72px);
height: calc(100vh - 110px - 71px);
transition: height linear 0.2s;
box-sizing: border-box;
display: flex;

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

@ -25,6 +25,7 @@ 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'];
@ -60,6 +61,7 @@ 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,

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

@ -0,0 +1,23 @@
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;
}
}

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

@ -24,6 +24,7 @@ body {
box-sizing: border-box;
background-color: $white;
z-index: 3;
transition: top linear 0.2s;
.filters {
gap: 2px;
@ -54,55 +55,83 @@ body {
}
}
.red-content-inner {
margin-top: 50px;
}
.red-content {
width: 100vw;
height: calc(100vh - 61px);
overflow: auto;
position: absolute;
transition: top linear 0.2s, height linear 0.2s;
top: 61px;
.left-container {
height: calc(100vh - 61px - 50px);
transition: width ease-in-out 0.1s;
.red-content-inner {
position: absolute;
top: 50px;
&.extended {
width: calc(100vw - 60px) !important;
}
}
.left-container {
transition: width linear 0.1s, height linear 0.2s;
.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;
&.extended {
width: calc(100vw - 60px) !important;
}
}
.collapsed-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 60px;
.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;
div {
display: initial;
.collapsed-wrapper {
display: none;
}
.all-caps-label {
transform: rotate(90deg) translateX(50%);
white-space: nowrap;
margin-top: 10px;
&.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;
}
}
}
}
}
&.fullscreen {
height: 100vh;
top: 0;
.page-header {
top: -51px;
}
.red-content-inner {
top: 0;
.right-fixed-container {
top: 0;
height: 100vh;
}
}
}
@ -155,10 +184,17 @@ body {
.red-top-bar {
height: 61px;
width: 100%;
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;
@ -199,12 +235,6 @@ body {
}
}
.red-content {
width: 100vw;
height: calc(100vh - 61px);
overflow: auto;
}
.hidden {
display: none !important;
}