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

Default colors

Browse Source
This commit is contained in:
Adina Țeudan 2021-08-30 15:20:02 +03:00
parent c11c9414f0
commit 1bd8f6ed60
4 changed files with 68 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
View File

@ -20,36 +20,31 @@
<redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
<div class="content-container">
<iqser-table-header
[hasEmptyColumn]="true"
[tableColumnConfigs]="tableColumnConfigs"
[tableHeaderLabel]="tableHeaderLabel"
></iqser-table-header>
<cdk-virtual-scroll-viewport [itemSize]="80" iqserHasScrollbar>
<div *cdkVirtualFor="let color of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
<div>
<div [translate]="translations[color.key]" class="table-item-title heading"></div>
</div>
<div class="color-wrapper">
<div [ngStyle]="{ 'background-color': color.value }" class="color-square"></div>
</div>
<div class="actions-container">
<div class="action-buttons">
<iqser-circle-button
(action)="openEditColorDialog($event, color)"
*ngIf="currentUser.isAdmin"
[tooltip]="'default-colors-screen.action.edit' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:edit"
></iqser-circle-button>
</div>
</div>
<div class="scrollbar-placeholder"></div>
</div>
</cdk-virtual-scroll-viewport>
<iqser-table [actionsTemplate]="actionsTemplate" [itemSize]="80" emptyColumnWidth="2fr"></iqser-table>
</div>
</div>
</section>
<ng-template #nameTemplate let-color="entity">
<div class="cell">
<div [translate]="translations[color.key]" class="table-item-title heading"></div>
</div>
</ng-template>
<ng-template #colorTemplate let-color="entity">
<div class="cell color-wrapper">
<div [ngStyle]="{ 'background-color': color.value }" class="color-square"></div>
</div>
</ng-template>
<ng-template #actionsTemplate let-color="entity">
<div class="action-buttons">
<iqser-circle-button
(action)="openEditColorDialog($event, color)"
*ngIf="currentUser.isAdmin"
[tooltip]="'default-colors-screen.action.edit' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:edit"
></iqser-circle-button>
</div>
</ng-template>

32
apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss
View File

@ -1,26 +1,16 @@
.content-container cdk-virtual-scroll-viewport {
::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: 2fr 1fr 2fr 11px;
.table-item {
> div:not(.scrollbar-placeholder) {
padding-left: 24px;
}
.color-wrapper {
align-items: center;
.color-square {
width: 16px;
height: 16px;
min-width: 16px;
}
}
}
:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
&:not(.scrollbar-placeholder) {
padding-left: 24px;
}
&.has-scrollbar:hover ::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: 2fr 1fr 2fr;
&.color-wrapper {
align-items: center;
.color-square {
width: 16px;
height: 16px;
min-width: 16px;
}
}
}

27
apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { AppStateService } from '@state/app-state.service';
import { Colors, DictionaryControllerService } from '@redaction/red-ui-http';
import { ActivatedRoute } from '@angular/router';
@ -18,20 +18,16 @@ interface ListItem extends Listable {
templateUrl: './default-colors-screen.component.html',
styleUrls: ['./default-colors-screen.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [...DefaultListingServices]
providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => DefaultColorsScreenComponent) }]
})
export class DefaultColorsScreenComponent extends ListingComponent<ListItem> implements OnInit {
@ViewChild('nameTemplate', { static: true }) nameTemplate: TemplateRef<never>;
@ViewChild('colorTemplate', { static: true }) colorTemplate: TemplateRef<never>;
readonly circleButtonTypes = CircleButtonTypes;
readonly currentUser = this._userService.currentUser;
readonly translations = defaultColorsTranslations;
readonly tableHeaderLabel = _('default-colors-screen.table-header.title');
readonly tableColumnConfigs: TableColumnConfig<ListItem>[] = [
{
label: _('default-colors-screen.table-col-names.key'),
sortByKey: 'key'
},
{ label: _('default-colors-screen.table-col-names.color'), class: 'flex-center' }
];
tableColumnConfigs: TableColumnConfig<ListItem>[];
protected readonly _primaryKey = 'key';
private _colorsObj: Colors;
@ -49,6 +45,7 @@ export class DefaultColorsScreenComponent extends ListingComponent<ListItem> imp
}
async ngOnInit() {
this._configureTableColumns();
await this._loadColors();
}
@ -68,6 +65,18 @@ export class DefaultColorsScreenComponent extends ListingComponent<ListItem> imp
);
}
private _configureTableColumns() {
this.tableColumnConfigs = [
{
label: _('default-colors-screen.table-col-names.key'),
sortByKey: 'key',
template: this.nameTemplate,
width: '2fr'
},
{ label: _('default-colors-screen.table-col-names.color'), class: 'flex-center', template: this.colorTemplate }
];
}
private async _loadColors() {
this._loadingService.start();
const data = await this._dictionaryControllerService.getColors(this._appStateService.activeDossierTemplateId).toPromise();

30
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
View File

@ -87,21 +87,19 @@
</ng-template>
<ng-template #actionsTemplate let-user="entity">
<div class="actions-container">
<div class="action-buttons">
<iqser-circle-button
(action)="openAddEditUserDialog($event, user)"
[tooltip]="'user-listing.action.edit' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:edit"
></iqser-circle-button>
<iqser-circle-button
(action)="openDeleteUsersDialog([user], $event)"
[disabled]="user.id === userService.currentUser.id"
[tooltip]="'user-listing.action.delete' | translate"
[type]="circleButtonTypes.dark"
icon="red:trash"
></iqser-circle-button>
</div>
<div class="action-buttons">
<iqser-circle-button
(action)="openAddEditUserDialog($event, user)"
[tooltip]="'user-listing.action.edit' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:edit"
></iqser-circle-button>
<iqser-circle-button
(action)="openDeleteUsersDialog([user], $event)"
[disabled]="user.id === userService.currentUser.id"
[tooltip]="'user-listing.action.delete' | translate"
[type]="circleButtonTypes.dark"
icon="red:trash"
></iqser-circle-button>
</div>
</ng-template>