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 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>
<input
formControlName="projectName"
@ -16,7 +16,7 @@
/>
</div>
<div class="red-input-group required">
<div class="red-input-group required w-400">
<mat-form-field floatLabel="always">
<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">
@ -27,7 +27,7 @@
</mat-form-field>
</div>
<div class="red-input-group">
<div class="red-input-group w-400">
<label translate="project-listing.add-edit-dialog.form.description.label"></label>
<textarea
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">
<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-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">
{{ userService.getNameForId(userId) }}
</mat-option>

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

@ -16,7 +16,7 @@
</div>
</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>
<mat-select formControlName="reason" class="full-width" [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate">
<mat-option *ngFor="let option of legalOptions" [value]="option">
@ -25,17 +25,17 @@
</mat-select>
</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>
<input type="text" [value]="redactionForm.get('reason').value?.legalBasis" disabled />
</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>
<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 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>
<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">
<form (submit)="saveDictionary()" [formGroup]="dictionaryForm">
<div class="dialog-header heading-l">
{{ (dictionary ? 'add-edit-dictionary.title.edit' : 'add-edit-dictionary.title.new') | translate: { name: dictionary?.type | humanize } }}
</div>
<div class="dialog-header heading-l">
{{ (dictionary ? 'add-edit-dictionary.title.edit' : 'add-edit-dictionary.title.new') | translate: { name: dictionary?.type | humanize } }}
</div>
<form (submit)="saveDictionary()" [formGroup]="dictionaryForm">
<div class="dialog-content">
<ng-container *ngIf="!!dictionary">
<div class="red-input-group mb-14">
@ -19,15 +19,9 @@
<span class="hint" translate="add-edit-dictionary.form.name-hint"></span>
</div>
<div class="red-input-group required">
<div class="red-input-group required w-75">
<label translate="add-edit-dictionary.form.rank"></label>
<input
formControlName="rank"
class="w-75"
name="rank"
type="number"
placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}"
/>
<input formControlName="rank" name="rank" type="number" placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}" />
</div>
<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="left-container">
<div class="red-input-group">
<input
[class.with-matches]="searchText.length > 0"
type="text"
[(ngModel)]="searchText"
(keyup)="searchChanged(searchText)"
#inputElement
placeholder="{{ 'dictionary-overview.search' | translate }}"
/>
<div class="actions-bar">
<div class="red-input-group flex-1 mr-32">
<input
[class.with-matches]="searchText.length > 0"
type="text"
[(ngModel)]="searchText"
(keyup)="searchChanged(searchText)"
#inputElement
placeholder="{{ 'dictionary-overview.search' | translate }}"
/>
<div class="input-icons">
<div class="no-input" *ngIf="searchText.length === 0">
<mat-icon svgIcon="red:search"></mat-icon>
</div>
<div class="with-input" *ngIf="searchText.length > 0">
<div class="search-match-text">
{{ currentMatch + '/' + searchPositions.length }}
<div class="input-icons">
<div class="no-input" *ngIf="searchText.length === 0">
<mat-icon svgIcon="red:search"></mat-icon>
</div>
<div class="with-input" *ngIf="searchText.length > 0">
<div class="search-match-text">
{{ 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>
<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 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 class="editor-container">
<ace-editor
#editorComponent
@ -94,7 +101,7 @@
<div class="changes-box" *ngIf="hasChanges">
<redaction-icon-button
*ngIf="permissionsService.isAdmin()"
icon="red:check"
icon="red:check-alt"
(action)="saveEntries()"
text="dictionary-overview.save-changes"
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);
padding: 15px;
@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 {
@ -42,37 +88,3 @@
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 {
static readonly MIN_WORD_LENGTH: number = 3;
public compareActive = false;
@ViewChild('editorComponent')
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="heading-xl" [translate]="'watermark-screen.title'"></div>
<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>
<textarea
redactionHasScrollbar
@ -58,14 +58,14 @@
</div>
</div>
<div class="red-input-group required">
<div class="red-input-group required w-75">
<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 class="red-input-group required">
<div class="red-input-group required w-75">
<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>
</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'"
></redaction-filter>
<form [formGroup]="searchForm">
<div class="red-input-group">
<input [placeholder]="'project-listing.search' | translate" class="w-250 with-icon mt-0" formControlName="query" name="query" type="text" />
<div class="red-input-group w-250">
<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>
</div>
</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 _fileManagementControllerService: FileManagementControllerService
) {
this.appStateService.reset();
this.searchForm = this._formBuilder.group({
query: ['']
});
@ -72,7 +73,6 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
}
public ngOnInit(): void {
this.appStateService.reset();
this.projectAutoUpdateTimer = timer(0, 10000)
.pipe(
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'"
></redaction-filter>
<form [formGroup]="searchForm">
<div class="red-input-group">
<input
[placeholder]="'project-overview.search' | translate"
formControlName="query"
name="query"
type="text"
class="w-250 with-icon mt-0"
/>
<div class="red-input-group w-250">
<input [placeholder]="'project-overview.search' | translate" formControlName="query" name="query" type="text" class="with-icon mt-0" />
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div>
</form>

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

@ -560,7 +560,8 @@
},
"search": "Search...",
"save-changes": "Save Changes",
"revert-changes": "Revert"
"revert-changes": "Revert",
"compare": "Compare"
},
"dictionary-listing": {
"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"?>
<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">
<title>Case Sensitive</title>
<g id="Case-Sensitive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-3" transform="translate(0.000000, 18.000000)" fill="currentColor">
<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>
<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>
<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>5331E3A6-DD6D-43B9-9CA0-C8B876D10B59</title>
<g id="Settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="02.3-Dictionary-Details" transform="translate(-1111.000000, -204.000000)">
<rect x="0" y="0" width="1440" height="705"></rect>
<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>
</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 {
position: absolute;
background: rgba($orange-1, 0.4);
background: rgba($primary, 0.1);
z-index: 20;
}
@ -83,8 +83,12 @@
justify-content: space-between;
bottom: 40px;
border-radius: 8px;
padding: 16px;
padding: 16px 32px 16px 16px;
background-color: $white;
box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
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-mixins';
form {
.red-input-group:not(first-of-type) {
margin-top: 24px;
}
}
.red-input-group {
display: flex;
flex-direction: column;
margin-top: 24px;
position: relative;
height: fit-content;
@ -96,42 +101,14 @@
color: $grey-1;
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 {
max-width: 300px;
width: 300px;
&.hex-color-input {
width: 150px;
max-width: 150px;
}
.hex-color-input {
width: 150px;
max-width: 150px;
}
mat-select {
width: 400px;
max-width: 400px;
.mat-select-trigger {
height: 32px;
}
@ -146,8 +123,6 @@
padding-top: 7px;
padding-bottom: 7px;
@include scroll-bar;
width: 400px;
max-width: 400px;
&.has-scrollbar {
border-top-right-radius: 0;
@ -165,6 +140,7 @@
&.mat-checkbox-layout {
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;
&.cancel {
cursor: pointer;
&:hover {
opacity: 1;
}