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

New tabs design

Browse Source
This commit is contained in:
Adina Țeudan 2021-03-15 15:29:09 +02:00
parent 9eb7c5fe83
commit 30de74e858
16 changed files with 94 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -99,7 +99,7 @@ import { HasScrollbarDirective } from './utils/has-scrollbar.directive';
import { RuleSetsListingScreenComponent } from './screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component';
import { AddEditRuleSetDialogComponent } from './screens/admin/rule-sets-listing-screen/add-edit-rule-set-dialog/add-edit-rule-set-dialog.component';
import { RuleSetActionsComponent } from './components/rule-set-actions/rule-set-actions.component';
import { RuleSetViewSwitchComponent } from './components/rule-set-view-switch/rule-set-view-switch.component';
import { TabsComponent } from './components/rule-set-view-switch/tabs.component';
import { MatSliderModule } from '@angular/material/slider';
import { PendingChangesGuard } from './utils/can-deactivate.guard';
import { OverwriteFilesDialogComponent } from './dialogs/overwrite-files-dialog/overwrite-files-dialog.component';
@ -370,7 +370,7 @@ const matImports = [
FileDownloadBtnComponent,
ProjectListingActionsComponent,
RuleSetActionsComponent,
RuleSetViewSwitchComponent,
TabsComponent,
LicenseInformationScreenComponent,
DefaultColorsScreenComponent,
EditColorDialogComponent,

10
apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.html
View File

@ -1,10 +0,0 @@
<div>
<div class="red-input-group slider-row">
<mat-button-toggle-group [value]="screen" (change)="switchView($event)" appearance="legacy">
<mat-button-toggle [value]="'dictionaries'"> {{ 'dictionaries' | translate }}</mat-button-toggle>
<mat-button-toggle [value]="'rules'" *ngIf="userPreferenceService.areDevFeaturesEnabled"> {{ 'rule-editor' | translate }}</mat-button-toggle>
<mat-button-toggle [value]="'default-colors'"> {{ 'default-colors' | translate }}</mat-button-toggle>
<mat-button-toggle [value]="'watermark'"> {{ 'watermark' | translate }}</mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>

0
apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.scss
View File

10
apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.html Normal file
View File

@ -0,0 +1,10 @@
<ng-container *ngFor="let tab of tabs">
<div
class="red-tab"
*ngIf="!tab.onlyDevMode || userPreferenceService.areDevFeaturesEnabled"
(click)="switchView(tab.screen)"
[class.active]="tab.screen === screen"
>
{{ tab.label || tab.screen | translate }}
</div>
</ng-container>

3
apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
display: flex;
}

19
apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.ts → apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.ts
View File

@ -4,13 +4,20 @@ import { AppStateService } from '../../state/app-state.service';
import { UserPreferenceService } from '../../common/service/user-preference.service';
@Component({
selector: 'redaction-rule-set-view-switch',
templateUrl: './rule-set-view-switch.component.html',
styleUrls: ['./rule-set-view-switch.component.scss']
selector: 'redaction-tabs',
templateUrl: './tabs.component.html',
styleUrls: ['./tabs.component.scss']
})
export class RuleSetViewSwitchComponent implements OnInit {
export class TabsComponent implements OnInit {
@Input() public screen: 'rules' | 'dictionaries' | 'watermark' | 'default-colors';
public tabs: { screen: string; onlyDevMode?: boolean; label?: string }[] = [
{ screen: 'dictionaries' },
{ screen: 'rules', onlyDevMode: true, label: 'rule-editor' },
{ screen: 'default-colors' },
{ screen: 'watermark' }
];
constructor(
public readonly userPreferenceService: UserPreferenceService,
private readonly _router: Router,
@ -19,7 +26,7 @@ export class RuleSetViewSwitchComponent implements OnInit {
ngOnInit(): void {}
public switchView($event) {
this._router.navigate(['ui/admin/project-templates/' + this._appStateService.activeRuleSetId + '/' + $event.value]);
public switchView(screen: string) {
this._router.navigate(['ui/admin/project-templates/' + this._appStateService.activeRuleSetId + '/' + screen]);
}
}

2
apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.html
View File

@ -2,7 +2,7 @@
<div class="page-header">
<redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
<redaction-rule-set-view-switch [screen]="'default-colors'"></redaction-rule-set-view-switch>
<redaction-tabs [screen]="'default-colors'"></redaction-tabs>
<div class="flex-1 actions">
<redaction-rule-set-actions></redaction-rule-set-actions>

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

@ -2,7 +2,7 @@
<div class="page-header">
<redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
<redaction-rule-set-view-switch [screen]="'dictionaries'"></redaction-rule-set-view-switch>
<redaction-tabs [screen]="'dictionaries'"></redaction-tabs>
<div class="flex-1 actions">
<redaction-rule-set-actions> </redaction-rule-set-actions>

2
apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
View File

@ -2,7 +2,7 @@
<div class="page-header">
<redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
<redaction-rule-set-view-switch [screen]="'rules'"></redaction-rule-set-view-switch>
<redaction-tabs [screen]="'rules'"></redaction-tabs>
<div class="flex-1 actions">
<redaction-rule-set-actions></redaction-rule-set-actions>

2
apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
View File

@ -2,7 +2,7 @@
<div class="page-header">
<redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
<redaction-rule-set-view-switch [screen]="'watermark'"></redaction-rule-set-view-switch>
<redaction-tabs [screen]="'watermark'"></redaction-tabs>
<div class="actions flex-1">
<redaction-circle-button

4
apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss
View File

@ -51,10 +51,10 @@
transition: background-color 0.2s;
&.disabled {
cursor: default;
cursor: not-allowed;
}
&:hover:not(.disabled) {
&:not(.disabled):not(.active):hover {
background-color: darken($grey-6, 2);
}

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

@ -1,20 +1,31 @@
<section *ngIf="appStateService.activeFile" [class.fullscreen]="fullScreen">
<div class="page-header">
<div class="flex-1">
<div class="red-input-group slider-row">
<mat-button-toggle-group [value]="viewMode" (change)="switchView($event)" appearance="legacy">
<mat-button-toggle [value]="'STANDARD'">
<div [matTooltip]="'file-preview.standard-tooltip' | translate">{{ 'file-preview.standard' | translate }}</div>
</mat-button-toggle>
<mat-button-toggle [value]="'DELTA'" [disabled]="!canSwitchToDeltaView">
<div [matTooltip]="'file-preview.delta-tooltip' | translate">{{ 'file-preview.delta' | translate }}</div>
</mat-button-toggle>
<mat-button-toggle [value]="'REDACTED'" [disabled]="canNotSwitchToRedactedView">
<div [matTooltip]="'file-preview.redacted-tooltip' | translate">
{{ 'file-preview.redacted' | translate }}
</div>
</mat-button-toggle>
</mat-button-toggle-group>
<div class="flex flex-1">
<div
class="red-tab"
[matTooltip]="'file-preview.standard-tooltip' | translate"
[class.active]="viewMode === 'STANDARD'"
(click)="switchView('STANDARD')"
>
{{ 'file-preview.standard' | translate }}
</div>
<div
class="red-tab"
[matTooltip]="'file-preview.delta-tooltip' | translate"
[class.active]="viewMode === 'DELTA'"
[class.disabled]="!canSwitchToDeltaView"
(click)="canSwitchToDeltaView && switchView('DELTA')"
>
{{ 'file-preview.delta' | translate }}
</div>
<div
class="red-tab"
[matTooltip]="'file-preview.redacted-tooltip' | translate"
[class.active]="viewMode === 'REDACTED'"
[class.disabled]="!canSwitchToRedactedView"
(click)="canSwitchToRedactedView && switchView('REDACTED')"
>
{{ 'file-preview.redacted' | translate }}
</div>
</div>

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

@ -89,8 +89,8 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
return this._instance?.docViewer?.getCurrentPage();
}
get canNotSwitchToRedactedView() {
return this.permissionsService.fileRequiresReanalysis();
get canSwitchToRedactedView() {
return !this.permissionsService.fileRequiresReanalysis();
}
get canSwitchToDeltaView() {
@ -715,8 +715,8 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
}
}
switchView($event: MatButtonToggleChange) {
this.viewMode = $event.value;
switchView(viewMode: ViewMode) {
this.viewMode = viewMode;
this.updateViewMode();
}

29
apps/red-ui/src/assets/styles/red-tabs.scss Normal file
View File

@ -0,0 +1,29 @@
@import './red-variables';
.red-tab {
&:not(:last-child) {
margin-right: 2px;
}
height: 30px;
line-height: 30px;
padding: 0 14px;
border-radius: 17px;
transition: background-color 0.2s;
cursor: pointer;
&:not(.disabled):not(.active):hover {
background-color: $grey-6;
}
&.active {
background-color: rgba($primary, 0.1);
font-weight: 600;
color: $primary;
}
&.disabled {
color: rgba($grey-1, 0.3);
cursor: not-allowed;
}
}

1
apps/red-ui/src/assets/styles/red-theme.scss
View File

@ -26,3 +26,4 @@
@import 'red-slider';
@import 'red-loading';
@import 'red-progress-bar';
@import 'red-tabs';

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

@ -12,11 +12,6 @@
color: $grey-7;
}
}
.mat-button-toggle:not(:first-of-type):not(:last-of-type) {
border-left: 1px solid $white;
border-right: 1px solid $white;
}
}
.mat-button-toggle-disabled {