diff --git a/src/assets/icons/sort-asc.svg b/src/assets/icons/sort-asc.svg new file mode 100644 index 0000000..8121847 --- /dev/null +++ b/src/assets/icons/sort-asc.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/src/assets/icons/sort-desc.svg b/src/assets/icons/sort-desc.svg new file mode 100644 index 0000000..f9211f8 --- /dev/null +++ b/src/assets/icons/sort-desc.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss index 2c2b8e9..4dbce64 100644 --- a/src/assets/styles/_buttons.scss +++ b/src/assets/styles/_buttons.scss @@ -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 { diff --git a/src/assets/styles/_tables.scss b/src/assets/styles/_tables.scss new file mode 100644 index 0000000..746631d --- /dev/null +++ b/src/assets/styles/_tables.scss @@ -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; + } +} diff --git a/src/assets/styles/_texts.scss b/src/assets/styles/_texts.scss new file mode 100644 index 0000000..87477b0 --- /dev/null +++ b/src/assets/styles/_texts.scss @@ -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; + } + } +} diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss new file mode 100644 index 0000000..a78bd55 --- /dev/null +++ b/src/assets/styles/_variables.scss @@ -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; diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss index 46e81fc..0a34c3b 100644 --- a/src/assets/styles/common.scss +++ b/src/assets/styles/common.scss @@ -1 +1,3 @@ @import 'buttons'; +@import 'texts'; +@import 'tables'; diff --git a/src/index.ts b/src/index.ts index af05163..28de618 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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'; diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts index f7a0ae0..4961fd7 100644 --- a/src/lib/common-ui.module.ts +++ b/src/lib/common-ui.module.ts @@ -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`)); diff --git a/src/lib/tables/models/table-column-config.model.ts b/src/lib/tables/models/table-column-config.model.ts new file mode 100644 index 0000000..83762f4 --- /dev/null +++ b/src/lib/tables/models/table-column-config.model.ts @@ -0,0 +1,11 @@ +import { KeysOf } from '../../utils/types/utility-types'; + +export interface TableColumnConfig { + readonly column?: KeysOf; + readonly label: string; + readonly withSort?: boolean; + readonly class?: string; + readonly leftIcon?: string; + readonly rightIcon?: string; + readonly rightIconTooltip?: string; +} diff --git a/src/lib/tables/table-column-name/table-column-name.component.html b/src/lib/tables/table-column-name/table-column-name.component.html new file mode 100644 index 0000000..0e43b6e --- /dev/null +++ b/src/lib/tables/table-column-name/table-column-name.component.html @@ -0,0 +1,14 @@ +
+ + + {{ label }} + + + + +
+ + +
+ +
diff --git a/src/lib/tables/table-column-name/table-column-name.component.scss b/src/lib/tables/table-column-name/table-column-name.component.scss new file mode 100644 index 0000000..87a10b1 --- /dev/null +++ b/src/lib/tables/table-column-name/table-column-name.component.scss @@ -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; + } +} diff --git a/src/lib/tables/table-column-name/table-column-name.component.ts b/src/lib/tables/table-column-name/table-column-name.component.ts new file mode 100644 index 0000000..7caabe8 --- /dev/null +++ b/src/lib/tables/table-column-name/table-column-name.component.ts @@ -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 { + readonly sortingOrders = SortingOrders; + + @Input() @Required() label!: string; + @Input() column?: KeysOf; + @Input() withSort = false; + @Input() class?: string; + @Input() leftIcon?: string; + @Input() rightIcon?: string; + @Input() rightIconTooltip?: string; + + constructor(@Optional() readonly sortingService: SortingService) {} +}