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

Dictionary Edit Progress

Browse Source
This commit is contained in:
Timo 2020-12-02 11:01:36 +02:00
parent b43a0395cb
commit 8a85b1b07d
7 changed files with 81 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,7 @@ export class IconsModule {
'collapse',
'color-picker',
'comment',
'case-sensitive',
'comment-fill',
'document',
'double-chevron-right',

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

@ -86,6 +86,10 @@
<mat-icon svgIcon="red:entries"></mat-icon>
{{ dict.entries?.length }}
</div>
<div *ngIf="!dict.caseInsensitive">
<mat-icon svgIcon="red:case-sensitive"></mat-icon>
{{ 'dictionary-listing.case-sensitive' | translate }}
</div>
</div>
</div>
</div>

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

@ -69,6 +69,32 @@
</div>
</div>
<div class="right-container"></div>
<div class="right-container">
<div class="dictionary-header">
<div class="color-box" [style.backgroundColor]="dictionary.hexColor"></div>
<div class="heading-xl">
{{ dictionary.type }}
</div>
</div>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:entries"></mat-icon>
{{ initialDictionaryEntries?.length }}
</div>
</div>
<div class="small-label stats-subtitle">
<div *ngIf="!dictionary.caseInsensitive">
<mat-icon svgIcon="red:case-sensitive"></mat-icon>
{{ 'dictionary-listing.case-sensitive' | translate }}
</div>
</div>
<div class="indicator">
<redaction-dictionary-annotation-icon [dictionaryKey]="dictionary.hint ? 'hint' : 'redaction'"></redaction-dictionary-annotation-icon>
<div class="large-label">
{{ (dictionary.hint ? 'hint' : 'redaction') | translate }}
</div>
</div>
</div>
</div>
</section>

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

@ -19,11 +19,9 @@
}
.right-container {
display: flex;
width: 353px;
min-width: 353px;
justify-content: center;
padding: 50px 0;
padding: 24px;
}
.changes-box {
@ -33,10 +31,39 @@
align-items: center;
justify-content: space-between;
bottom: 40px;
right: 40px;
right: 403px;
border-radius: 8px;
padding: 16px;
background-color: #ffffff;
background-color: $white;
box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
z-index: 5000;
}
ace-editor {
box-sizing: border-box;
border: 1px solid $grey-5;
border-radius: 8px;
background-color: $white;
}
.dictionary-header {
display: flex;
align-items: center;
margin-bottom: 16px;
.color-box {
width: 16px;
height: 16px;
margin-right: 16px;
}
}
.indicator {
margin-top: 16px;
display: flex;
align-items: center;
redaction-dictionary-annotation-icon {
margin-right: 8px;
}
}

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

@ -507,6 +507,7 @@
"delete": "Delete Dictionary",
"edit": "Edit Dictionary"
},
"case-sensitive": "Case Sensitive",
"add-new": "New Dictionary",
"stats": {
"charts": {

10
apps/red-ui/src/assets/icons/general/case-sensitive.svg Normal file
View File

@ -0,0 +1,10 @@
<?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>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 744 B

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

@ -58,6 +58,12 @@ a {
line-height: 14px;
}
.large-label {
color: $grey-1;
font-size: 13px;
line-height: 16px;
}
.clamp-1 {
@include line-clamp(1);
}