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

Dictionary listing UI updates

Browse Source
This commit is contained in:
Adina Țeudan 2020-11-26 15:21:01 +02:00
parent 532e1d15ec
commit d67a0424ce
12 changed files with 167 additions and 38 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

@ -27,6 +27,7 @@ export class IconsModule {
'double-chevron-right',
'download',
'edit',
'entries',
'error',
'folder',
'info',

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

@ -6,28 +6,64 @@
<div class="flex red-content-inner">
<div class="left-container">
<div class="grid-container">
<div class="header-item span-2">
<div class="header-item span-4">
<div class="select-all-container">
<div
(click)="toggleSelectAll()"
[class.active]="areAllDictsSelected"
class="select-oval always-visible"
*ngIf="!areAllDictsSelected && !areSomeDictsSelected"
></div>
<mat-icon *ngIf="areAllDictsSelected" (click)="toggleSelectAll()" class="selection-icon active" svgIcon="red:radio-selected"></mat-icon>
<mat-icon
*ngIf="areSomeDictsSelected && !areAllDictsSelected"
(click)="toggleSelectAll()"
class="selection-icon"
svgIcon="red:radio-indeterminate"
></mat-icon>
</div>
<span class="all-caps-label">
{{ 'project-listing.table-header.title' | translate: { length: 0 } }}
{{ 'dictionary-listing.table-header.title' | translate: { length: 0 } }}
</span>
</div>
<redaction-table-col-name label="project-listing.table-col-names.name" column="project.projectName"></redaction-table-col-name>
<redaction-table-col-name label="project-listing.table-col-names.needs-work"></redaction-table-col-name>
<!-- Table column names-->
<div class="select-oval-placeholder placeholder-bottom-border"></div>
<redaction-table-col-name
label="dictionary-listing.table-col-names.type"
column="name"
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
></redaction-table-col-name>
<redaction-table-col-name label="dictionary-listing.table-col-names.analyzed" class="flex-center"></redaction-table-col-name>
<div class="placeholder-bottom-border"></div>
<!-- Table lines -->
<div class="table-item" *ngFor="let dict of displayedDictionaries | sortBy: sortingOption.order:sortingOption.column">
<div class="pr-0" (click)="toggleDictSelected($event, dict)">
<div *ngIf="!isDictSelected(dict)" class="select-oval"></div>
<mat-icon class="selection-icon active" *ngIf="isDictSelected(dict)" svgIcon="red:radio-selected"></mat-icon>
</div>
<div class="table-item" *ngFor="let dict of displayedDictionaries">
<div>
<div class="table-item-title heading">
{{ dict.name }}
</div>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:document"></mat-icon>
{{ dict.entries }}
<div class="color-square" [ngStyle]="{ 'background-color': dict.hexColor }"></div>
<div>
<div class="table-item-title heading">
{{ dict.name }}
</div>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:entries"></mat-icon>
{{ dict.entries }}
</div>
</div>
</div>
</div>
<div>2</div>
<div class="analyzed">2</div>
<div></div>
</div>
</div>
</div>

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

@ -4,11 +4,41 @@
width: calc(100vw - 353px);
.grid-container {
grid-template-columns: 1fr 2fr;
}
grid-template-columns: auto 1fr 1fr 2fr;
.stats-subtitle {
margin-top: 6px;
.header-item {
padding: 0 24px 0 10px;
}
redaction-table-col-name::ng-deep {
> div {
padding-left: 10px;
}
}
.table-item {
> div {
display: flex;
flex-direction: row;
padding-left: 10px;
align-items: center;
justify-content: flex-start;
}
.color-square {
width: 16px;
height: 16px;
margin-right: 16px;
}
.analyzed {
justify-content: center;
}
}
.stats-subtitle {
margin-top: 4px;
}
}
}

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

@ -2,11 +2,12 @@ import { Component, OnInit } from '@angular/core';
import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component';
import { Dictionary, DictionaryControllerService } from '@redaction/red-ui-http';
import { TranslateChartService } from '../../../utils/translate-chart.service';
import { SortingService } from '../../../utils/sorting.service';
import { SortingOption, SortingService } from '../../../utils/sorting.service';
import { DialogService } from '../../../dialogs/dialog.service';
import { AppStateService } from '../../../state/app-state.service';
import { groupBy } from '../../../utils/functions';
import { StatusSorter } from '../../../common/sorters/status-sorter';
import { FileStatusWrapper } from '../../file/model/file-status.wrapper';
@Component({
selector: 'redaction-dictionary-listing-screen',
@ -21,11 +22,12 @@ export class DictionaryListingScreenComponent implements OnInit {
{ id: '2', name: 'Hint only', entries: 120, type: 'hint', hexColor: '#0000ff' }
];
public displayedDictionaries: any[];
public selectedDictionariesIds: string[] = [];
constructor(
public readonly appStateService: AppStateService,
private readonly _dialogService: DialogService,
public readonly sortingService: SortingService,
private readonly _sortingService: SortingService,
public readonly appStateService: AppStateService,
public readonly translateChartService: TranslateChartService
) {}
@ -46,4 +48,42 @@ export class DictionaryListingScreenComponent implements OnInit {
});
}
}
public get sortingOption(): SortingOption {
return this._sortingService.getSortingOption('dictionary-listing');
}
public toggleSort($event) {
this._sortingService.toggleSort('dictionary-listing', $event);
}
toggleDictSelected($event: MouseEvent, dict: any) {
$event.stopPropagation();
const idx = this.selectedDictionariesIds.indexOf(dict.id);
if (idx === -1) {
this.selectedDictionariesIds.push(dict.id);
} else {
this.selectedDictionariesIds.splice(idx, 1);
}
}
public toggleSelectAll() {
if (this.areSomeDictsSelected) {
this.selectedDictionariesIds = [];
} else {
this.selectedDictionariesIds = this.displayedDictionaries.map((dict) => dict.id);
}
}
public get areAllDictsSelected() {
return this.displayedDictionaries.length !== 0 && this.selectedDictionariesIds.length === this.displayedDictionaries.length;
}
public get areSomeDictsSelected() {
return this.selectedDictionariesIds.length > 0;
}
public isDictSelected(dict: any) {
return this.selectedDictionariesIds.indexOf(dict.id) !== -1;
}
}

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

@ -72,7 +72,7 @@
</div>
<div class="flex red-content-inner">
<div class="left-container">
<div class="grid-container bulk-select">
<div class="grid-container">
<div class="header-item span-4">
<div class="select-all-container">
<div
@ -106,7 +106,7 @@
</div>
<!-- Table column names-->
<div class="select-oval-placeholder"></div>
<div class="select-oval-placeholder placeholder-bottom-border"></div>
<redaction-table-col-name
(toggleSort)="toggleSort($event)"

4
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
View File

@ -8,10 +8,6 @@
.grid-container {
grid-template-columns: 3fr 2fr 1fr 1fr 2fr auto;
&.bulk-select {
grid-template-columns: auto 3fr 2fr 1fr 1fr 2fr auto;
}
.header-item {
padding: 0 24px 0 10px;
}

9
apps/red-ui/src/app/utils/sorting.service.ts
View File

@ -5,18 +5,21 @@ export class SortingOption {
column: string;
}
type Screen = 'project-listing' | 'project-overview' | 'dictionary-listing';
@Injectable({
providedIn: 'root'
})
export class SortingService {
private _options: { [key: string]: SortingOption } = {
'project-listing': { column: 'project.projectName', order: 'asc' },
'project-overview': { column: 'filename', order: 'asc' }
'project-overview': { column: 'filename', order: 'asc' },
'dictionary-listing': { column: 'name', order: 'asc' }
};
constructor() {}
public toggleSort(screen: 'project-listing' | 'project-overview', column: string) {
public toggleSort(screen: Screen, column: string) {
if (this._options[screen].column === column) {
const currentOrder = this._options[screen].order;
this._options[screen].order = currentOrder === 'asc' ? 'desc' : 'asc';
@ -25,7 +28,7 @@ export class SortingService {
}
}
public getSortingOption(screen: 'project-listing' | 'project-overview') {
public getSortingOption(screen: Screen) {
return this._options[screen];
}
}

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

@ -472,6 +472,14 @@
"charts": {
"types": "Types"
}
},
"table-header": {
"title": "{{length}} dictionaries"
},
"table-col-names": {
"type": "Type",
"analyzed": "Analyzed"
}
}
},
"dictionaries": "Dictionaries"
}

17
apps/red-ui/src/assets/icons/general/entries.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<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>D2E1BFB9-9086-46E0-98F5-F3E2898811B0</title>
<g id="Settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="01.-Dictionaries" transform="translate(-72.000000, -241.000000)">
<rect x="0" y="0" width="1440" height="705"></rect>
<g id="Dictionary" transform="translate(0.000000, 193.000000)">
<rect id="Rectangle" x="0" y="0" width="1086" height="80"></rect>
<g id="Group-16" transform="translate(72.000000, 46.000000)" fill="currentColor" fill-rule="nonzero">
<g id="status" transform="translate(0.000000, 2.000000)">
<path d="M5,7.5 L5,8.5 L0,8.5 L0,7.5 L5,7.5 Z M10,5.5 L10,6.5 L0,6.5 L0,5.5 L10,5.5 Z M10,3.5 L10,4.5 L0,4.5 L0,3.5 L10,3.5 Z M10,1.5 L10,2.5 L0,2.5 L0,1.5 L10,1.5 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

7
apps/red-ui/src/assets/styles/red-grid.scss
View File

@ -19,17 +19,10 @@
gap: 25px;
}
&.span-2 {
grid-column-end: span 2;
}
&.span-3 {
grid-column-end: span 3;
}
&.span-7 {
grid-column-end: span 7;
}
&.span-4 {
grid-column-end: span 4;
}

5
apps/red-ui/src/assets/styles/red-page-layout.scss
View File

@ -62,6 +62,11 @@ body {
justify-content: flex-end;
}
.flex-center {
display: flex;
justify-content: center;
}
.flex-1 {
flex: 1;
}

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

@ -17,7 +17,7 @@ redaction-table-col-name,
.grid-container {
display: grid;
.select-oval-placeholder {
.placeholder-bottom-border {
border-bottom: 1px solid $separator;
}