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

UI updates

Browse Source
This commit is contained in:
Adina Țeudan 2020-12-16 14:37:06 +02:00
parent 5c17e7727e
commit 7bca8aba3e
16 changed files with 164 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
View File

@ -6,7 +6,7 @@
></div> ></div>
<div class="dialog-content"> <div class="dialog-content">
<div class="red-input-group required"> <div class="red-input-group required w-300">
<label translate="project-listing.add-edit-dialog.form.name.label"></label> <label translate="project-listing.add-edit-dialog.form.name.label"></label>
<input <input
formControlName="projectName" formControlName="projectName"
@ -16,7 +16,7 @@
/> />
</div> </div>
<div class="red-input-group required"> <div class="red-input-group required w-400">
<mat-form-field floatLabel="always"> <mat-form-field floatLabel="always">
<mat-label>{{ 'project-listing.add-edit-dialog.form.template' | translate }}</mat-label> <mat-label>{{ 'project-listing.add-edit-dialog.form.template' | translate }}</mat-label>
<mat-select value="EFSA 1 (Vertebrate Authors)" style="width: 100%;" [disabled]="project?.hasFiles"> <mat-select value="EFSA 1 (Vertebrate Authors)" style="width: 100%;" [disabled]="project?.hasFiles">
@ -27,7 +27,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="red-input-group"> <div class="red-input-group w-400">
<label translate="project-listing.add-edit-dialog.form.description.label"></label> <label translate="project-listing.add-edit-dialog.form.description.label"></label>
<textarea <textarea
redactionHasScrollbar redactionHasScrollbar

4
apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
View File

@ -3,10 +3,10 @@
<form (submit)="saveUsers()" [formGroup]="usersForm"> <form (submit)="saveUsers()" [formGroup]="usersForm">
<div class="dialog-content" [class.no-padding-bottom]="data.type === 'project'"> <div class="dialog-content" [class.no-padding-bottom]="data.type === 'project'">
<div class="red-input-group"> <div class="red-input-group w-300">
<mat-form-field floatLabel="always"> <mat-form-field floatLabel="always">
<mat-label>{{ 'assign-' + data.type + '-owner.dialog.single-user' | translate }}</mat-label> <mat-label>{{ 'assign-' + data.type + '-owner.dialog.single-user' | translate }}</mat-label>
<mat-select formControlName="singleUser" class="w-300"> <mat-select formControlName="singleUser">
<mat-option *ngFor="let userId of singleUsersSelectOptions" [value]="userId"> <mat-option *ngFor="let userId of singleUsersSelectOptions" [value]="userId">
{{ userService.getNameForId(userId) }} {{ userService.getNameForId(userId) }}
</mat-option> </mat-option>

10
apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
View File

@ -16,7 +16,7 @@
</div> </div>
</ng-container> </ng-container>
<div class="red-input-group required" *ngIf="!isDictionaryRequest"> <div class="red-input-group required w-400" *ngIf="!isDictionaryRequest">
<label translate="manual-annotation.dialog.content.reason"></label> <label translate="manual-annotation.dialog.content.reason"></label>
<mat-select formControlName="reason" class="full-width" [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate"> <mat-select formControlName="reason" class="full-width" [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate">
<mat-option *ngFor="let option of legalOptions" [value]="option"> <mat-option *ngFor="let option of legalOptions" [value]="option">
@ -25,17 +25,17 @@
</mat-select> </mat-select>
</div> </div>
<div class="red-input-group" *ngIf="!isDictionaryRequest"> <div class="red-input-group w-400" *ngIf="!isDictionaryRequest">
<label translate="manual-annotation.dialog.content.legalBasis"></label> <label translate="manual-annotation.dialog.content.legalBasis"></label>
<input type="text" [value]="redactionForm.get('reason').value?.legalBasis" disabled /> <input type="text" [value]="redactionForm.get('reason').value?.legalBasis" disabled />
</div> </div>
<div class="red-input-group" [class.required]="!isDocumentAdmin"> <div class="red-input-group w-300" [class.required]="!isDocumentAdmin">
<label translate="manual-annotation.dialog.content.comment"></label> <label translate="manual-annotation.dialog.content.comment"></label>
<textarea redactionHasScrollbar class="w-300" formControlName="comment" name="comment" type="text" rows="4"></textarea> <textarea redactionHasScrollbar formControlName="comment" name="comment" type="text" rows="4"></textarea>
</div> </div>
<div class="red-input-group required" *ngIf="isDictionaryRequest && !isFalsePositiveRequest"> <div class="red-input-group required w-300" *ngIf="isDictionaryRequest && !isFalsePositiveRequest">
<label translate="manual-annotation.dialog.content.dictionary"></label> <label translate="manual-annotation.dialog.content.dictionary"></label>
<mat-select formControlName="dictionary"> <mat-select formControlName="dictionary">

18
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
View File

@ -1,9 +1,9 @@
<section class="dialog"> <section class="dialog">
<form (submit)="saveDictionary()" [formGroup]="dictionaryForm"> <div class="dialog-header heading-l">
<div class="dialog-header heading-l"> {{ (dictionary ? 'add-edit-dictionary.title.edit' : 'add-edit-dictionary.title.new') | translate: { name: dictionary?.type | humanize } }}
{{ (dictionary ? 'add-edit-dictionary.title.edit' : 'add-edit-dictionary.title.new') | translate: { name: dictionary?.type | humanize } }} </div>
</div>
<form (submit)="saveDictionary()" [formGroup]="dictionaryForm">
<div class="dialog-content"> <div class="dialog-content">
<ng-container *ngIf="!!dictionary"> <ng-container *ngIf="!!dictionary">
<div class="red-input-group mb-14"> <div class="red-input-group mb-14">
@ -19,15 +19,9 @@
<span class="hint" translate="add-edit-dictionary.form.name-hint"></span> <span class="hint" translate="add-edit-dictionary.form.name-hint"></span>
</div> </div>
<div class="red-input-group required"> <div class="red-input-group required w-75">
<label translate="add-edit-dictionary.form.rank"></label> <label translate="add-edit-dictionary.form.rank"></label>
<input <input formControlName="rank" name="rank" type="number" placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}" />
formControlName="rank"
class="w-75"
name="rank"
type="number"
placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}"
/>
</div> </div>
<div class="red-input-group required"> <div class="red-input-group required">

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

@ -52,30 +52,37 @@
<div class="flex red-content-inner"> <div class="flex red-content-inner">
<div class="left-container"> <div class="left-container">
<div class="red-input-group"> <div class="actions-bar">
<input <div class="red-input-group flex-1 mr-32">
[class.with-matches]="searchText.length > 0" <input
type="text" [class.with-matches]="searchText.length > 0"
[(ngModel)]="searchText" type="text"
(keyup)="searchChanged(searchText)" [(ngModel)]="searchText"
#inputElement (keyup)="searchChanged(searchText)"
placeholder="{{ 'dictionary-overview.search' | translate }}" #inputElement
/> placeholder="{{ 'dictionary-overview.search' | translate }}"
/>
<div class="input-icons"> <div class="input-icons">
<div class="no-input" *ngIf="searchText.length === 0"> <div class="no-input" *ngIf="searchText.length === 0">
<mat-icon svgIcon="red:search"></mat-icon> <mat-icon svgIcon="red:search"></mat-icon>
</div> </div>
<div class="with-input" *ngIf="searchText.length > 0"> <div class="with-input" *ngIf="searchText.length > 0">
<div class="search-match-text"> <div class="search-match-text">
{{ currentMatch + '/' + searchPositions.length }} {{ currentMatch + '/' + searchPositions.length }}
</div>
<mat-icon svgIcon="red:arrow-up" class="pointer" (click)="previousSearchMatch()"></mat-icon>
<mat-icon svgIcon="red:arrow-down" class="pointer" (click)="nextSearchMatch()"></mat-icon>
<mat-icon svgIcon="red:close" (click)="searchChanged(''); inputElement.focus()" class="pointer"></mat-icon>
</div> </div>
<mat-icon svgIcon="red:arrow-up" class="pointer" (click)="previousSearchMatch()"></mat-icon>
<mat-icon svgIcon="red:arrow-down" class="pointer" (click)="nextSearchMatch()"></mat-icon>
<mat-icon svgIcon="red:close" (click)="searchChanged(''); inputElement.focus()" class="pointer"></mat-icon>
</div> </div>
</div> </div>
<div class="red-input-group mr-16">
<mat-checkbox [(ngModel)]="compareActive" color="primary"> {{ 'dictionary-overview.compare' | translate }} </mat-checkbox>
</div>
<div class="flex-1"></div>
</div> </div>
<div class="editor-container"> <div class="editor-container">
<ace-editor <ace-editor
#editorComponent #editorComponent
@ -94,7 +101,7 @@
<div class="changes-box" *ngIf="hasChanges"> <div class="changes-box" *ngIf="hasChanges">
<redaction-icon-button <redaction-icon-button
*ngIf="permissionsService.isAdmin()" *ngIf="permissionsService.isAdmin()"
icon="red:check" icon="red:check-alt"
(action)="saveEntries()" (action)="saveEntries()"
text="dictionary-overview.save-changes" text="dictionary-overview.save-changes"
type="primary" type="primary"

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

@ -13,6 +13,52 @@
width: calc(100vw - 353px); width: calc(100vw - 353px);
padding: 15px; padding: 15px;
@include inset-shadow; @include inset-shadow;
.actions-bar {
display: flex;
align-items: center;
margin-bottom: 16px;
.mr-32 {
margin-right: 32px;
}
.mr-16 {
margin-right: 16px;
//opacity: 0; // TODO: Hidden for now
}
.red-input-group {
input {
padding-right: 32px;
&.with-matches {
padding-right: 108px;
}
}
.input-icons {
position: absolute;
right: 12px;
top: 8px;
color: $grey-1;
.with-input {
display: flex;
justify-content: center;
align-items: center;
.search-match-text {
}
}
mat-icon {
max-width: 14px;
margin-left: 8px;
}
}
}
}
} }
.right-container { .right-container {
@ -42,37 +88,3 @@
margin-right: 8px; margin-right: 8px;
} }
} }
.red-input-group {
margin-bottom: 16px;
max-width: 300px;
input {
padding-right: 32px;
&.with-matches {
padding-right: 108px;
}
}
.input-icons {
position: absolute;
right: 12px;
top: 8px;
color: $grey-1;
.with-input {
display: flex;
justify-content: center;
align-items: center;
.search-match-text {
}
}
mat-icon {
max-width: 14px;
margin-left: 8px;
}
}
}

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

@ -20,6 +20,7 @@ declare var ace;
}) })
export class DictionaryOverviewScreenComponent { export class DictionaryOverviewScreenComponent {
static readonly MIN_WORD_LENGTH: number = 3; static readonly MIN_WORD_LENGTH: number = 3;
public compareActive = false;
@ViewChild('editorComponent') @ViewChild('editorComponent')
editorComponent: AceEditorComponent; editorComponent: AceEditorComponent;

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

@ -23,7 +23,7 @@
<div class="right-container"> <div class="right-container">
<div class="heading-xl" [translate]="'watermark-screen.title'"></div> <div class="heading-xl" [translate]="'watermark-screen.title'"></div>
<form [formGroup]="configForm" (keyup)="configChanged()"> <form [formGroup]="configForm" (keyup)="configChanged()">
<div class="red-input-group required"> <div class="red-input-group required w-300">
<label translate="watermark-screen.form.text"></label> <label translate="watermark-screen.form.text"></label>
<textarea <textarea
redactionHasScrollbar redactionHasScrollbar
@ -58,14 +58,14 @@
</div> </div>
</div> </div>
<div class="red-input-group required"> <div class="red-input-group required w-75">
<label translate="watermark-screen.form.opacity"></label> <label translate="watermark-screen.form.opacity"></label>
<input class="w-75" formControlName="opacity" name="opacity" type="number" (change)="configChanged()" /> <input formControlName="opacity" name="opacity" type="number" (change)="configChanged()" />
</div> </div>
<div class="red-input-group required"> <div class="red-input-group required w-75">
<label translate="watermark-screen.form.font-size"></label> <label translate="watermark-screen.form.font-size"></label>
<input class="w-75" formControlName="fontSize" name="fontSize" type="number" (change)="configChanged()" /> <input formControlName="fontSize" name="fontSize" type="number" (change)="configChanged()" />
</div> </div>
</form> </form>

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

@ -22,8 +22,8 @@
[icon]="'red:needs-work'" [icon]="'red:needs-work'"
></redaction-filter> ></redaction-filter>
<form [formGroup]="searchForm"> <form [formGroup]="searchForm">
<div class="red-input-group"> <div class="red-input-group w-250">
<input [placeholder]="'project-listing.search' | translate" class="w-250 with-icon mt-0" formControlName="query" name="query" type="text" /> <input [placeholder]="'project-listing.search' | translate" class="with-icon mt-0" formControlName="query" name="query" type="text" />
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon> <mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div> </div>
</form> </form>

2
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
View File

@ -64,6 +64,7 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
private readonly _formBuilder: FormBuilder, private readonly _formBuilder: FormBuilder,
private readonly _fileManagementControllerService: FileManagementControllerService private readonly _fileManagementControllerService: FileManagementControllerService
) { ) {
this.appStateService.reset();
this.searchForm = this._formBuilder.group({ this.searchForm = this._formBuilder.group({
query: [''] query: ['']
}); });
@ -72,7 +73,6 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
} }
public ngOnInit(): void { public ngOnInit(): void {
this.appStateService.reset();
this.projectAutoUpdateTimer = timer(0, 10000) this.projectAutoUpdateTimer = timer(0, 10000)
.pipe( .pipe(
tap(async () => { tap(async () => {

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

@ -22,14 +22,8 @@
[icon]="'red:needs-work'" [icon]="'red:needs-work'"
></redaction-filter> ></redaction-filter>
<form [formGroup]="searchForm"> <form [formGroup]="searchForm">
<div class="red-input-group"> <div class="red-input-group w-250">
<input <input [placeholder]="'project-overview.search' | translate" formControlName="query" name="query" type="text" class="with-icon mt-0" />
[placeholder]="'project-overview.search' | translate"
formControlName="query"
name="query"
type="text"
class="w-250 with-icon mt-0"
/>
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon> <mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div> </div>
</form> </form>

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

@ -560,7 +560,8 @@
}, },
"search": "Search...", "search": "Search...",
"save-changes": "Save Changes", "save-changes": "Save Changes",
"revert-changes": "Revert" "revert-changes": "Revert",
"compare": "Compare"
}, },
"dictionary-listing": { "dictionary-listing": {
"action": { "action": {

20
apps/red-ui/src/assets/icons/general/case-sensitive.svg
View File

@ -1,10 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Case Sensitive</title> <title>5331E3A6-DD6D-43B9-9CA0-C8B876D10B59</title>
<g id="Case-Sensitive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-3" transform="translate(0.000000, 18.000000)" fill="currentColor"> <g id="02.3-Dictionary-Details" transform="translate(-1111.000000, -204.000000)">
<polygon id="Fill-1" points="100 8.36744942 79.9984 8.36744942 79.9984 64 69.4984 64 69.4984 8.36744942 55 8.36744942 55 0 100 0"></polygon> <rect x="0" y="0" width="1440" height="705"></rect>
<polygon id="Fill-2" points="45 8.36744942 29.9999996 8.36744942 29.9999996 64 19.4999993 64 19.4999993 8.36744942 0 8.36744942 0 0 45 0"></polygon> <g id="Group-9" transform="translate(1086.000000, 111.000000)" fill="currentColor" opacity="0.5">
<g id="Group-8" transform="translate(25.000000, 69.000000)">
<g id="Group-19" transform="translate(0.000000, 22.000000)">
<g id="status" transform="translate(0.000000, 2.000000)">
<path d="M6.72413793,0.7 C7.00968966,0.7 7.24137931,0.931689655 7.24137931,1.21724138 L7.24137931,1.21724138 L7.24137931,2.76896552 L6.20689655,2.76896552 L6.20689655,1.73448276 L4.13793103,1.73448276 L4.13793103,8.2862069 L5.51724138,8.2862069 L5.51724138,9.32068966 L1.72413793,9.32068966 L1.72413793,8.2862069 L3.10344828,8.2862069 L3.10344828,1.73448276 L1.03448276,1.73448276 L1.03448276,2.76896552 L7.01660952e-15,2.76896552 L7.01660952e-15,1.21724138 C7.01660952e-15,0.931689655 0.231689655,0.7 0.517241379,0.7 L0.517241379,0.7 Z M8.27586207,4.14834483 L8.27586207,5.52765517 L9.82758621,5.52765517 L9.82758621,6.56213793 L8.27586207,6.56213793 L8.27586207,7.90844828 C8.27586207,8.11722931 8.44491379,8.28627586 8.65368966,8.28627586 L8.65368966,8.28627586 L10,8.28627586 L10,9.32075862 L8.65368966,9.32075862 C7.8737931,9.32075862 7.24137931,8.68834483 7.24137931,7.90844828 L7.24137931,7.90844828 L7.24137931,6.56213793 L5.86206897,6.56213793 L5.86206897,5.52765517 L7.24137931,5.52765517 L7.24137931,4.14834483 L8.27586207,4.14834483 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</g> </g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 744 B

After

Width:  |  Height:  |  Size: 2.0 KiB

8
apps/red-ui/src/assets/styles/red-editor.scss
View File

@ -3,7 +3,7 @@
.changed-row-marker { .changed-row-marker {
position: absolute; position: absolute;
background: rgba($orange-1, 0.4); background: rgba($primary, 0.1);
z-index: 20; z-index: 20;
} }
@ -83,8 +83,12 @@
justify-content: space-between; justify-content: space-between;
bottom: 40px; bottom: 40px;
border-radius: 8px; border-radius: 8px;
padding: 16px; padding: 16px 32px 16px 16px;
background-color: $white; background-color: $white;
box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3); box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
z-index: 5000; z-index: 5000;
> *:not(last-child) {
margin-right: 24px;
}
} }

74
apps/red-ui/src/assets/styles/red-input.scss
View File

@ -1,10 +1,15 @@
@import 'red-variables'; @import 'red-variables';
@import 'red-mixins'; @import 'red-mixins';
form {
.red-input-group:not(first-of-type) {
margin-top: 24px;
}
}
.red-input-group { .red-input-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 24px;
position: relative; position: relative;
height: fit-content; height: fit-content;
@ -96,42 +101,14 @@
color: $grey-1; color: $grey-1;
opacity: 0.7; opacity: 0.7;
} }
&.w-75 {
width: 75px;
max-width: 75px;
}
&.w-250 {
width: 250px;
max-width: 250px;
}
&.w-300 {
width: 300px;
max-width: 300px;
}
&.w-full {
width: 100%;
max-width: 100%;
}
} }
input { .hex-color-input {
max-width: 300px; width: 150px;
width: 300px; max-width: 150px;
&.hex-color-input {
width: 150px;
max-width: 150px;
}
} }
mat-select { mat-select {
width: 400px;
max-width: 400px;
.mat-select-trigger { .mat-select-trigger {
height: 32px; height: 32px;
} }
@ -146,8 +123,6 @@
padding-top: 7px; padding-top: 7px;
padding-bottom: 7px; padding-bottom: 7px;
@include scroll-bar; @include scroll-bar;
width: 400px;
max-width: 400px;
&.has-scrollbar { &.has-scrollbar {
border-top-right-radius: 0; border-top-right-radius: 0;
@ -165,6 +140,7 @@
&.mat-checkbox-layout { &.mat-checkbox-layout {
opacity: 1; opacity: 1;
margin-bottom: 0;
} }
} }
@ -205,4 +181,34 @@
} }
} }
} }
&.w-75 {
width: 75px;
max-width: 75px;
}
&.w-250 {
width: 250px;
max-width: 250px;
}
&.w-300 {
width: 300px;
max-width: 300px;
}
&.w-400 {
width: 400px;
max-width: 400px;
}
&.w-450 {
width: 450px;
max-width: 450px;
}
&.w-full {
width: 100%;
max-width: 100%;
}
} }

2
apps/red-ui/src/assets/styles/red-text-styles.scss
View File

@ -58,6 +58,8 @@ pre {
transition: opacity 0.2s; transition: opacity 0.2s;
&.cancel { &.cancel {
cursor: pointer;
&:hover { &:hover {
opacity: 1; opacity: 1;
} }