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-14 16:52:16 +02:00
parent 40f41c70ec
commit 4b73e3893e
17 changed files with 163 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,8 +7,13 @@
<div class="dialog-content">
<div class="red-input-group required">
<label translate="project-listing.add-edit-dialog.form.name"></label>
<input formControlName="projectName" name="projectName" type="text" />
<label translate="project-listing.add-edit-dialog.form.name.label"></label>
<input
formControlName="projectName"
name="projectName"
type="text"
[placeholder]="'project-listing.add-edit-dialog.form.name.placeholder' | translate"
/>
</div>
<div class="red-input-group required" *ngIf="!project">
@ -23,8 +28,16 @@
</div>
<div class="red-input-group">
<label translate="project-listing.add-edit-dialog.form.description"></label>
<textarea formControlName="description" name="description" type="text" rows="5"></textarea>
<label translate="project-listing.add-edit-dialog.form.description.label"></label>
<textarea
#textarea
[class.has-scrollbar]="hasScrollbar"
formControlName="description"
name="description"
type="text"
rows="5"
[placeholder]="'project-listing.add-edit-dialog.form.description.placeholder' | translate"
></textarea>
</div>
<div class="due-date">

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

@ -1,4 +1,4 @@
import { Component, Inject } from '@angular/core';
import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Project } from '@redaction/red-ui-http';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@ -14,6 +14,7 @@ import * as moment from 'moment';
export class AddEditProjectDialogComponent {
public projectForm: FormGroup;
public hasDueDate = true;
@ViewChild('textarea') private _textarea: ElementRef;
constructor(
private readonly _appStateService: AppStateService,
@ -29,6 +30,10 @@ export class AddEditProjectDialogComponent {
this.hasDueDate = !!this.project?.dueDate;
}
public get hasScrollbar() {
return this._textarea?.nativeElement.clientHeight < this._textarea?.nativeElement.scrollHeight;
}
public get changed() {
if (!this.project) {
return true;

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

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

5
apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.scss
View File

@ -7,6 +7,11 @@
.search-container {
width: 560px;
margin-top: 16px;
input {
width: 100%;
max-width: 100%;
}
}
.members-list {

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

@ -32,7 +32,7 @@
<div class="red-input-group" [class.required]="!isDocumentAdmin">
<label translate="manual-annotation.dialog.content.comment"></label>
<textarea formControlName="comment" name="comment" type="text" rows="4"></textarea>
<textarea #textarea [class.has-scrollbar]="hasScrollbar" class="w-300" formControlName="comment" name="comment" type="text" rows="4"></textarea>
</div>
<div class="red-input-group required" *ngIf="isDictionaryRequest">

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

@ -1,4 +1,4 @@
import { Component, Inject, OnInit } from '@angular/core';
import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AppStateService } from '../../state/app-state.service';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@ -31,6 +31,8 @@ export class ManualAnnotationDialogComponent implements OnInit {
legalOptions: LegalBasisOption[] = [];
@ViewChild('textarea') private _textarea: ElementRef;
constructor(
private readonly _appStateService: AppStateService,
private readonly _userService: UserService,
@ -77,6 +79,10 @@ export class ManualAnnotationDialogComponent implements OnInit {
}
}
public get hasScrollbar() {
return this._textarea?.nativeElement.clientHeight < this._textarea?.nativeElement.scrollHeight;
}
handleAddRedaction() {
this._enhanceManualRedaction(this.manualRedactionEntryWrapper.manualRedactionEntry);
this._manualAnnotationService.addAnnotation(this.manualRedactionEntryWrapper.manualRedactionEntry).subscribe(

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

@ -6,7 +6,7 @@
<div class="dialog-content">
<div class="first-row">
<div class="red-input-group required w-300">
<div class="red-input-group required">
<label translate="add-edit-dictionary.form.name"></label>
<input
formControlName="type"
@ -17,7 +17,7 @@
/>
</div>
<div class="red-input-group required w-150">
<div class="red-input-group required">
<label translate="add-edit-dictionary.form.color"></label>
<input
class="hex-color-input"
@ -32,11 +32,16 @@
[colorPicker]="dictionaryForm.get('hexColor').value"
[cpOutputFormat]="'hex'"
(colorPickerChange)="dictionaryForm.get('hexColor').setValue($event)"
></div>
>
<mat-icon
svgIcon="red:color-picker"
*ngIf="!dictionaryForm.get('hexColor').value || dictionaryForm.get('hexColor').value?.length === 0"
></mat-icon>
</div>
</div>
</div>
<div class="red-input-group required w-150">
<div class="red-input-group required">
<label translate="add-edit-dictionary.form.rank"></label>
<input formControlName="rank" name="rank" type="number" placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}" />
</div>

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

@ -1,15 +1,5 @@
@import '../../../../../assets/styles/red-variables';
.w-300 {
max-width: 300px;
width: 300px;
}
.w-150 {
max-width: 150px;
width: 150px;
}
.first-row {
display: flex;
@ -33,7 +23,3 @@
transition: background-color 0.25s ease;
color: $white;
}
.hex-color-input {
padding-right: 40px;
}

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

@ -22,47 +22,60 @@
<div class="right-container">
<div class="heading-xl" [translate]="'watermark-screen.title'"></div>
<form [formGroup]="configForm" (keyup)="configChanged()">
<div class="red-input-group">
<div class="red-input-group required">
<label translate="watermark-screen.form.text"></label>
<textarea formControlName="text" name="text" type="text" rows="10"></textarea>
<textarea
#textarea
formControlName="text"
[class.has-scrollbar]="hasScrollbar"
(mousemove)="triggerChanges()"
class="w-full"
name="text"
type="text"
rows="10"
></textarea>
</div>
<div class="red-input-group">
<div class="red-input-group required w-150">
<label translate="watermark-screen.form.color"></label>
<input
formControlName="hexColor"
class="hex-color-input"
name="hexColor"
type="text"
placeholder="{{ 'add-edit-dictionary.form.color-placeholder' | translate }}"
/>
<div
class="input-icon"
[style.background]="configForm.get('hexColor').value"
[colorPicker]="configForm.get('hexColor').value"
[cpOutputFormat]="'hex'"
(colorPickerChange)="configForm.get('hexColor').setValue($event); configChanged()"
>
<mat-icon svgIcon="red:color-picker"></mat-icon>
<mat-icon
*ngIf="!configForm.get('hexColor')?.value || configForm.get('hexColor').value?.length === 0"
svgIcon="red:color-picker"
></mat-icon>
</div>
</div>
<div class="red-input-group">
<div class="red-input-group required">
<label translate="watermark-screen.form.opacity"></label>
<input formControlName="opacity" name="opacity" type="number" (change)="configChanged()" />
<input class="w-75" formControlName="opacity" name="opacity" type="number" (change)="configChanged()" />
</div>
<div class="red-input-group">
<div class="red-input-group required">
<label translate="watermark-screen.form.font-size"></label>
<input formControlName="fontSize" name="fontSize" type="number" (change)="configChanged()" />
<input class="w-75" formControlName="fontSize" name="fontSize" type="number" (change)="configChanged()" />
</div>
</form>
<div class="actions-container">
<button color="primary" mat-flat-button (click)="save()" [disabled]="!changed" class="red-button">
<button color="primary" mat-flat-button (click)="save()" [disabled]="configForm.invalid || !changed" class="red-button">
{{ 'watermark-screen.action.save' | translate }}
</button>
<div class="all-caps-label pointer cancel" (click)="revert()" [translate]="'watermark-screen.action.revert'"></div>
<div class="all-caps-label pointer cancel" [class.disabled]="!changed" (click)="revert()" [translate]="'watermark-screen.action.revert'"></div>
</div>
</div>
</div>

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

@ -12,6 +12,11 @@
width: 353px;
min-width: 353px;
padding: 25px;
overflow: visible;
&:hover {
overflow: visible;
}
.heading-xl {
margin-bottom: 24px;
@ -27,3 +32,8 @@
}
}
}
.w-150 {
max-width: 150px;
width: 150px;
}

18
apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts
View File

@ -5,7 +5,7 @@ import { AppStateService } from '../../../state/app-state.service';
import { FileDownloadService } from '../../file/service/file-download.service';
import { environment } from '../../../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { debounce } from '../../../utils/debounce';
import { WatermarkControllerService, WatermarkModel } from '@redaction/red-ui-http';
import { NotificationService, NotificationType } from '../../../notification/notification.service';
@ -36,6 +36,8 @@ export class WatermarkScreenComponent implements OnInit {
@ViewChild('viewer', { static: true })
private _viewer: ElementRef;
@ViewChild('textarea') private _textarea: ElementRef;
public viewReady = false;
public configForm: FormGroup;
@ -100,6 +102,12 @@ export class WatermarkScreenComponent implements OnInit {
this.configChanged();
}
public triggerChanges() {}
public get hasScrollbar() {
return this._textarea?.nativeElement.clientHeight < this._textarea?.nativeElement.scrollHeight;
}
private _loadViewer() {
WebViewer(
{
@ -154,10 +162,10 @@ export class WatermarkScreenComponent implements OnInit {
private _initForm() {
this.configForm = this._formBuilder.group({
text: null,
hexColor: null,
opacity: null,
fontSize: null
text: [null, Validators.required],
hexColor: [null, Validators.required],
opacity: [null, Validators.required],
fontSize: [null, Validators.required]
});
}
}

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

@ -23,7 +23,7 @@
></redaction-filter>
<form [formGroup]="searchForm">
<div class="red-input-group">
<input [placeholder]="'project-listing.search' | translate" formControlName="query" name="query" type="text" class="with-icon mt-0" />
<input [placeholder]="'project-listing.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>
</div>
</form>

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

@ -24,7 +24,13 @@
></redaction-filter>
<form [formGroup]="searchForm">
<div class="red-input-group">
<input [placeholder]="'project-overview.search' | translate" formControlName="query" name="query" type="text" class="with-icon mt-0" />
<input
[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>
</div>
</form>

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

@ -100,11 +100,17 @@
}
},
"add-edit-dialog": {
"header-new": "New Project",
"header-new": "Create Project",
"header-edit": "Edit Project",
"form": {
"description": "Description",
"name": "Name",
"name": {
"label": "Project Name",
"placeholder": "Enter Name"
},
"description": {
"label": "Description",
"placeholder": "Enter Description"
},
"due-date": "Due Date",
"template": "Project Template"
},

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

@ -19,6 +19,9 @@
border-bottom-right-radius: 7px;
cursor: pointer;
transition: background-color 0.25s ease;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background: $grey-6;
@ -85,10 +88,41 @@
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;
}
}
mat-select {
width: 220px;
width: 400px;
max-width: 400px;
.mat-select-trigger {
height: 32px;
@ -100,10 +134,17 @@
}
textarea {
resize: none;
resize: vertical;
padding-top: 7px;
padding-bottom: 7px;
@include no-scroll-bar();
@include scroll-bar;
width: 400px;
max-width: 400px;
&.has-scrollbar {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
label {

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

@ -32,7 +32,6 @@
/* Track */
&::-webkit-scrollbar-track {
background: $grey-2;
//background: red;
}
/* Handle */

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

@ -57,8 +57,15 @@ pre {
line-height: 14px;
transition: opacity 0.2s;
&.cancel:hover {
opacity: 1;
&.cancel {
&:hover {
opacity: 1;
}
&.disabled {
opacity: 0.3;
cursor: default;
}
}
}