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

Table item mouse enter/leave & some styles

Browse Source
This commit is contained in:
Adina Țeudan 2021-08-31 16:31:17 +03:00
parent 70f3c560d3
commit af46a45b97
6 changed files with 76 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/assets/styles/_tables.scss
View File

@ -1,53 +1,3 @@
@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;
}
}
.header-item {
background-color: $btn-bg;
height: 50px;
padding: 0 24px;
display: flex;
align-items: center;
z-index: 1;
border-bottom: 1px solid $separator;
box-sizing: border-box;
> *:not(:last-child) {
margin-right: 10px;
}
.actions {
display: flex;
align-items: center;
justify-content: flex-end;
> *:not(:last-child) {
margin-right: 16px;
}
}
&.selection-enabled {
padding-left: 10px;
}
}
.scrollbar-placeholder {
width: 11px;
padding: 0 !important;

10
src/lib/listing/table-column-name/table-column-name.component.scss
View File

@ -10,7 +10,7 @@
display: flex;
width: 100%;
line-height: 11px;
padding: 0 24px;
padding: 0 10px;
> mat-icon {
width: 10px;
@ -24,6 +24,14 @@
}
}
&:first-child > div {
padding: 0 24px;
}
&:last-of-type > div {
padding: 0 13px 0 10px;
}
.flex-end {
min-width: 58px;
}

39
src/lib/listing/table-header/table-header.component.scss
View File

@ -0,0 +1,39 @@
@import '../../../assets/styles/common';
.table-header {
display: flex;
border-bottom: 1px solid $separator;
&.no-data:not([synced='true']) {
padding-left: 30px;
}
}
.header-item {
background-color: $btn-bg;
height: 50px;
display: flex;
align-items: center;
z-index: 1;
border-bottom: 1px solid $separator;
box-sizing: border-box;
padding: 0 24px;
&.selection-enabled {
padding: 0 24px 0 10px;
}
> *:not(:last-child) {
margin-right: 10px;
}
.actions {
display: flex;
align-items: center;
justify-content: flex-end;
> *:not(:last-child) {
margin-right: 16px;
}
}
}

2
src/lib/listing/table/table.component.html
View File

@ -22,6 +22,8 @@
<cdk-virtual-scroll-viewport #scrollViewport [itemSize]="itemSize" iqserHasScrollbar>
<div
(mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
(mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
*cdkVirtualFor="let entity of listingComponent.sortedDisplayedEntities$ | async; trackBy: listingComponent.trackByPrimaryKey"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="routerLinkFn && routerLinkFn(entity)"

25
src/lib/listing/table/table.component.scss
View File

@ -1,6 +1,6 @@
@import '../../../assets/styles/common';
cdk-virtual-scroll-viewport {
:host cdk-virtual-scroll-viewport {
height: calc(100vh - 50px - 31px - 111px);
overflow-y: hidden !important;
@ -23,12 +23,25 @@ cdk-virtual-scroll-viewport {
box-sizing: border-box;
border-bottom: 1px solid $separator;
height: var(--itemSize);
padding: 0 13px 0 var(--paddingLeft);
padding: 0 10px;
&.cell:first-of-type {
padding: 0 24px;
}
&.cell:last-of-type {
padding: 0 13px 0 10px;
}
&:not(.scrollbar-placeholder):not(.selection-column) {
min-width: 110px;
}
&.center {
align-items: center;
justify-content: center;
}
&.selection-column {
padding-right: 0 !important;
@ -58,7 +71,7 @@ cdk-virtual-scroll-viewport {
flex-direction: row;
align-items: center;
padding-left: 100px;
padding-right: 24px;
padding-right: 21px;
z-index: 1;
background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, $grey-2 35%);
@ -69,12 +82,6 @@ cdk-virtual-scroll-viewport {
iqser-circle-button:not(:last-child) {
margin-right: 2px;
}
&.active {
display: flex;
// compensate for scroll
padding-right: 23px;
}
}
input,

20
src/lib/listing/table/table.component.ts
View File

@ -8,7 +8,8 @@ import {
OnInit,
Output,
TemplateRef,
ViewChild
ViewChild,
ViewContainerRef
} from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { Required } from '../../utils';
@ -40,12 +41,17 @@ export class TableComponent<T extends Listable> implements OnInit {
@Output() readonly noDataAction = new EventEmitter<void>();
@Input() noMatchText?: string;
@Input() tableItemClasses?: { [key: string]: (e: T) => boolean };
@Input() itemMouseEnterFn?: (entity: T) => void;
@Input() itemMouseLeaveFn?: (entity: T) => void;
routerLinkFn?: (entity: T) => string | string[];
tableColumnConfigs!: readonly TableColumnConfig<T>[];
tableHeaderLabel?: string; // todo not optional
@ViewChild(CdkVirtualScrollViewport, { static: true }) readonly scrollViewport!: CdkVirtualScrollViewport;
constructor(@Inject(forwardRef(() => ListingComponent)) private _parent: ListingComponent<T>) {}
constructor(
@Inject(forwardRef(() => ListingComponent)) private _parent: ListingComponent<T>,
private readonly _hostRef: ViewContainerRef
) {}
get listingComponent(): ListingComponent<T> {
return this._parent;
@ -78,16 +84,15 @@ export class TableComponent<T extends Listable> implements OnInit {
}
private _setStyles(): void {
const element = this.scrollViewport.elementRef.nativeElement;
const element = this._hostRef.element.nativeElement as HTMLElement;
this._setColumnsWidth(element);
this._setItemSize(element);
this._setPadding(element);
}
private _setColumnsWidth(element: HTMLElement) {
let gridTemplateColumnsHover = '';
if (this.selectionEnabled) {
gridTemplateColumnsHover += 'auto ';
gridTemplateColumnsHover += '30px ';
}
for (const config of this.tableColumnConfigs) {
gridTemplateColumnsHover += `${config.width || '1fr'} `;
@ -102,9 +107,4 @@ export class TableComponent<T extends Listable> implements OnInit {
private _setItemSize(element: HTMLElement) {
element.style.setProperty('--itemSize', `${this.itemSize}px`);
}
private _setPadding(element: HTMLElement) {
const paddingLeft = this.selectionEnabled ? 10 : 24;
element.style.setProperty('--paddingLeft', `${paddingLeft}px`);
}
}