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

add table column name component

Browse Source
This commit is contained in:
Dan Percic 2021-08-06 17:29:23 +03:00
parent 7bd24c4352
commit ad03f28a49
13 changed files with 181 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/icons/sort-asc.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="14px" version="1.1" viewBox="0 0 6 14" width="6px" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1">
<g id="Artboard" transform="translate(-1212.000000, -325.000000)">
<polygon fill="currentColor" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon>
<polygon fill="#28324180" id="Fill-1"
points="1215 330 1218 326 1212 326"
transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) "></polygon>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 669 B

11
src/assets/icons/sort-desc.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="14px" version="1.1" viewBox="0 0 6 14" width="6px" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1">
<g id="Artboard" transform="translate(-1212.000000, -325.000000)">
<polygon fill="#28324180" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon>
<polygon fill="currentColor" id="Fill-1"
points="1215 330 1218 326 1212 326"
transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) "></polygon>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 669 B

8
src/assets/styles/_buttons.scss
View File

@ -1,10 +1,4 @@
// This rebel line is crying (in WebStorm) but it actually works
@import '~/src/assets/styles/variables';
$btn-bg-hover: #e2e4e9 !default;
$btn-bg: #f0f1f4 !default;
$warn: #fdbd00 !default;
$white: white;
@import 'variables';
.mat-button,
.mat-flat-button {

20
src/assets/styles/_tables.scss Normal file
View File

@ -0,0 +1,20 @@
@import 'variables';
.table-header {
display: flex;
border-bottom: 1px solid $separator;
&.no-data:not([synced='true']) {
padding-left: 30px;
}
iqser-table-column-name:last-of-type {
> div {
padding-right: 13px;
}
}
&.selection-enabled iqser-table-column-name > div {
padding-left: 10px;
}
}

22
src/assets/styles/_texts.scss Normal file
View File

@ -0,0 +1,22 @@
.all-caps-label {
text-transform: uppercase;
opacity: 0.7;
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
line-height: 14px;
transition: opacity 0.2s;
&.cancel {
cursor: pointer;
&:hover {
opacity: 1;
}
&.disabled {
opacity: 0.3;
cursor: default;
}
}
}

8
src/assets/styles/_variables.scss Normal file
View File

@ -0,0 +1,8 @@
// This rebel line is crying (in WebStorm) but it actually works
@import '~/src/assets/styles/variables';
$btn-bg-hover: #e2e4e9 !default;
$btn-bg: #f0f1f4 !default;
$warn: #fdbd00 !default;
$white: white !default;
$separator: rgba(226, 228, 233, 0.9) !default;

2
src/assets/styles/common.scss
View File

@ -1 +1,3 @@
@import 'buttons';
@import 'texts';
@import 'tables';

2
src/index.ts
View File

@ -19,3 +19,5 @@ export * from './lib/sorting/sorting.service';
export * from './lib/sorting/models/sorting-option.model';
export * from './lib/sorting/models/sorting-order.type';
export * from './lib/search/search.service';
export * from './lib/tables/models/table-column-config.model';
export * from './lib/tables/table-column-name/table-column-name.component';

5
src/lib/common-ui.module.ts
View File

@ -10,6 +10,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { RoundCheckboxComponent } from './inputs/round-checkbox/round-checkbox.component';
import { SortByPipe } from './sorting/sort-by.pipe';
import { HumanizePipe } from './utils/pipes/humanize.pipe';
import { TableColumnNameComponent } from './tables/table-column-name/table-column-name.component';
const buttons = [IconButtonComponent, ChevronButtonComponent, CircleButtonComponent];
@ -17,7 +18,7 @@ const inputs = [RoundCheckboxComponent];
const matModules = [MatIconModule, MatButtonModule, MatTooltipModule];
const components = [...buttons, ...inputs];
const components = [...buttons, ...inputs, TableColumnNameComponent];
const pipes = [SortByPipe, HumanizePipe];
@ -28,7 +29,7 @@ const pipes = [SortByPipe, HumanizePipe];
})
export class CommonUiModule {
constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) {
const icons = ['arrow-down'];
const icons = ['arrow-down', 'sort-asc', 'sort-desc'];
for (const icon of icons) {
_iconRegistry.addSvgIconInNamespace('iqser', icon, _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${icon}.svg`));

11
src/lib/tables/models/table-column-config.model.ts Normal file
View File

@ -0,0 +1,11 @@
import { KeysOf } from '../../utils/types/utility-types';
export interface TableColumnConfig<T extends object> {
readonly column?: KeysOf<T>;
readonly label: string;
readonly withSort?: boolean;
readonly class?: string;
readonly leftIcon?: string;
readonly rightIcon?: string;
readonly rightIconTooltip?: string;
}

14
src/lib/tables/table-column-name/table-column-name.component.html Normal file
View File

@ -0,0 +1,14 @@
<div (click)="withSort && sortingService?.toggleSort(column)" [class.pointer]="withSort" [ngClass]="class">
<mat-icon *ngIf="!!leftIcon" [svgIcon]="leftIcon"></mat-icon>
<span class="all-caps-label">{{ label }}</span>
<mat-icon *ngIf="!!rightIcon" [matTooltip]="rightIconTooltip" [svgIcon]="rightIcon" matTooltipPosition="above"></mat-icon>
<ng-container *ngIf="sortingService?.sortingOption$ | async as sortingOption">
<div *ngIf="withSort" [class.force-display]="sortingOption.column === column" class="sort-arrows-container">
<mat-icon *ngIf="sortingOption.order === sortingOrders.asc" svgIcon="iqser:sort-asc"></mat-icon>
<mat-icon *ngIf="sortingOption.order === sortingOrders.desc" svgIcon="iqser:sort-desc"></mat-icon>
</div>
</ng-container>
</div>

51
src/lib/tables/table-column-name/table-column-name.component.scss Normal file
View File

@ -0,0 +1,51 @@
@import '../../../assets/styles/common';
:host {
display: flex;
height: 30px;
flex: 1;
> div {
align-items: center;
display: flex;
width: 100%;
line-height: 11px;
padding: 0 24px;
> mat-icon {
width: 10px;
height: 10px;
margin-right: 6px;
opacity: 0.7;
&:not(:first-child) {
margin-left: 6px;
}
}
}
.flex-end {
min-width: 58px;
}
.sort-arrows-container {
display: none;
color: $primary;
margin-left: 8px;
mat-icon {
height: 14px;
width: 6px;
}
}
&:hover {
.sort-arrows-container {
display: initial;
}
}
.sort-arrows-container.force-display {
display: initial;
}
}

25
src/lib/tables/table-column-name/table-column-name.component.ts Normal file
View File

@ -0,0 +1,25 @@
import { ChangeDetectionStrategy, Component, Input, Optional } from '@angular/core';
import { SortingOrders } from '../../sorting/models/sorting-order.type';
import { Required } from '../../utils/decorators/required.decorator';
import { KeysOf } from '../../utils/types/utility-types';
import { SortingService } from '../../sorting/sorting.service';
@Component({
selector: 'iqser-table-column-name',
templateUrl: './table-column-name.component.html',
styleUrls: ['./table-column-name.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TableColumnNameComponent<T extends object> {
readonly sortingOrders = SortingOrders;
@Input() @Required() label!: string;
@Input() column?: KeysOf<T>;
@Input() withSort = false;
@Input() class?: string;
@Input() leftIcon?: string;
@Input() rightIcon?: string;
@Input() rightIconTooltip?: string;
constructor(@Optional() readonly sortingService: SortingService<T>) {}
}