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-15 18:46:15 +02:00
parent 5990d5498b
commit 470c89e0fd
10 changed files with 88 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,15 +5,28 @@
</div>
<div class="dialog-content">
<div class="first-row">
<div class="red-input-group required">
<ng-container *ngIf="!!dictionary">
<div class="red-input-group mb-14">
<label translate="add-edit-dictionary.form.name"></label>
{{ dictionary.label }}
</div>
</ng-container>
<div class="first-row">
<div class="red-input-group required" *ngIf="!dictionary">
<label translate="add-edit-dictionary.form.name"></label>
<input formControlName="type" name="type" type="text" placeholder="{{ 'add-edit-dictionary.form.name-placeholder' | translate }}" />
<span class="hint" translate="add-edit-dictionary.form.name-hint"></span>
</div>
<div class="red-input-group required">
<label translate="add-edit-dictionary.form.rank"></label>
<input
formControlName="type"
name="type"
type="text"
[attr.disabled]="!!dictionary || null"
placeholder="{{ 'add-edit-dictionary.form.name-placeholder' | translate }}"
formControlName="rank"
class="w-75"
name="rank"
type="number"
placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}"
/>
</div>
@ -41,11 +54,6 @@
</div>
</div>
<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>
<div class="red-input-group slider-row">
<mat-button-toggle-group name="hint" formControlName="hint" appearance="legacy">
<mat-button-toggle [value]="false"> {{ 'add-edit-dictionary.form.redaction' | translate }}</mat-button-toggle>

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

@ -4,7 +4,7 @@
display: flex;
> *:not(last-child) {
margin-right: 24px;
margin-right: 16px;
}
.red-input-group {
@ -23,3 +23,7 @@
transition: background-color 0.25s ease;
color: $white;
}
.mb-14 {
margin-bottom: 14px;
}

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

@ -70,7 +70,7 @@
<div class="search-match-text">
{{ currentMatch + '/' + searchPositions.length }}
</div>
<mat-icon svgIcon="red:arrow-down" class="transform-180 pointer" (click)="previousSearchMatch()"></mat-icon>
<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>

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

@ -199,13 +199,13 @@
<strong><span translate="content"></span>: </strong>{{ annotation.content }}
</div>
</div>
<redaction-annotation-actions
(annotationsChanged)="annotationsChangedByReviewAction(true, annotation)"
[annotation]="annotation"
[canPerformAnnotationActions]="canPerformAnnotationActions"
></redaction-annotation-actions>
</div>
<redaction-comments [annotation]="annotation"></redaction-comments>
<redaction-annotation-actions
(annotationsChanged)="annotationsChangedByReviewAction(true, annotation)"
[annotation]="annotation"
[canPerformAnnotationActions]="canPerformAnnotationActions"
></redaction-annotation-actions>
</div>
</div>
</div>

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

@ -94,13 +94,13 @@
font-size: 11px;
line-height: 14px;
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
border-left: 4px solid transparent;
.details {
display: flex;
position: relative;
}
redaction-type-annotation-icon {

4
apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html
View File

@ -3,8 +3,8 @@
<div class="title">
{{ 'upload-status.dialog.title' | translate: { p1: uploadService.files.length } }}
</div>
<div *ngIf="!collapsed" class="collapse-icon transform-180">
<mat-icon svgIcon="red:arrow-up"></mat-icon>
<div *ngIf="!collapsed" class="collapse-icon">
<mat-icon svgIcon="red:arrow-down"></mat-icon>
</div>
<div *ngIf="collapsed" class="collapse-icon">
<mat-icon svgIcon="red:arrow-up"></mat-icon>

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

@ -528,6 +528,7 @@
"form": {
"name": "Dictionary Name",
"name-placeholder": "Enter Name",
"name-hint": "Cannot be edited after saving.",
"rank": "Rank",
"rank-placeholder": "1000",
"color": "Hex Color",

2
apps/red-ui/src/assets/icons/general/arrow-down.svg
View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>9A0E7FCD-AD02-40D9-BEF9-48F61351C288</title>
<title>arrow-down</title>
<g id="Styleguide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Styleguide-Buttons" transform="translate(-469.000000, -757.000000)">
<rect x="0" y="0" width="904" height="906"></rect>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 772 B

After

Width:  |  Height:  |  Size: 746 B

49
apps/red-ui/src/assets/icons/general/arrow-up.svg
View File

@ -1,7 +1,46 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>sort-up</title>
<g id="sort-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Fill-1" fill="currentColor" transform="translate(3.000000, 3.000000) rotate(-180.000000) translate(-3.000000, -3.000000) " points="3 5 6 1 -1.33216355e-14 1"></polygon>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="14px"
height="14px"
viewBox="0 0 14 14"
version="1.1"
id="svg101">
<defs
id="defs105" />
<title
id="title92">arrow-up</title>
<g
id="Styleguide"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd">
<g
id="Styleguide-Buttons"
transform="translate(-469.000000, -757.000000)">
<rect
x="0"
y="0"
width="904"
height="906"
id="rect94" />
<rect
id="Rectangle"
x="359"
y="747"
width="134"
height="34"
rx="17" />
<g
id="right"
transform="rotate(180,241.5,385.5)"
fill="currentColor">
<polygon
id="Fill-1"
points="4,5 7,9 10,5 " />
</g>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 497 B

After

Width:  |  Height:  |  Size: 962 B

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

@ -6,6 +6,14 @@
flex-direction: column;
margin-top: 24px;
position: relative;
height: fit-content;
.hint {
margin-top: 5px;
font-size: 11px;
line-height: 14px;
opacity: 0.7;
}
.input-icon {
position: absolute;