diff --git a/src/lib/listing/services/listing.service.ts b/src/lib/listing/services/listing.service.ts index ef856d5..4f348fd 100644 --- a/src/lib/listing/services/listing.service.ts +++ b/src/lib/listing/services/listing.service.ts @@ -5,7 +5,7 @@ import { FilterService, getFilteredEntities } from '../../filtering'; import { SearchService } from '../../search'; import { IListable } from '../models'; import { EntitiesService } from './entities.service'; -import { any, getLength, log, shareDistinctLast, shareLast } from '../../utils'; +import { any, getLength, shareDistinctLast, shareLast } from '../../utils'; @Injectable() export class ListingService { @@ -99,7 +99,6 @@ export class ListingService { isSelected$(entity: E): Observable { return this._selected$.pipe( any(selectedId => selectedId === entity.id), - log(), shareDistinctLast(), ); } diff --git a/src/lib/listing/table-content/table-content.component.scss b/src/lib/listing/table-content/table-content.component.scss index e15102d..3ad7b2c 100644 --- a/src/lib/listing/table-content/table-content.component.scss +++ b/src/lib/listing/table-content/table-content.component.scss @@ -20,12 +20,7 @@ .table-item { display: contents; - > *:not(.selection-column):not(.scrollbar-placeholder) { - display: contents; - } - - > iqser-table-item - &.disabled > div, + &.disabled > iqser-table-item > div, &.disabled .cell { background-color: var(--iqser-grey-2); color: var(--iqser-disabled); @@ -35,36 +30,6 @@ } } - .table-item-title { - font-weight: 600; - @include mixins.line-clamp(1); - width: fit-content; - max-width: 100%; - } - - .action-buttons { - position: absolute; - display: none; - right: -11px; - top: 0; - height: 100%; - width: fit-content; - flex-direction: row; - align-items: center; - padding-left: 100px; - padding-right: 21px; - z-index: 1; - background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-grey-2) 35%); - - mat-icon { - width: 14px; - } - - iqser-circle-button:not(:last-child) { - margin-right: 2px; - } - } - input, mat-select { margin-top: 0; @@ -76,12 +41,12 @@ } .action-buttons { - display: flex; + display: flex !important; } } &:hover:not(.disabled) { - > div, + .cell, > * > div { background-color: var(--iqser-not-disabled-table-item); } @@ -92,16 +57,14 @@ &:hover { overflow-y: auto !important; - &.has-scrollbar { - .table-item { - .action-buttons { - right: 0; - padding-right: 13px; - } + &.has-scrollbar .table-item::ng-deep { + .action-buttons { + right: 0; + padding-right: 13px; + } - .scrollbar-placeholder { - display: none; - } + .scrollbar-placeholder { + display: none !important; } } } diff --git a/src/lib/listing/table-content/table-item/table-item.component.html b/src/lib/listing/table-content/table-item/table-item.component.html index d06cba6..2a34876 100644 --- a/src/lib/listing/table-content/table-item/table-item.component.html +++ b/src/lib/listing/table-content/table-item/table-item.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/lib/listing/table-content/table-item/table-item.component.scss b/src/lib/listing/table-content/table-item/table-item.component.scss index 881031c..854f246 100644 --- a/src/lib/listing/table-content/table-item/table-item.component.scss +++ b/src/lib/listing/table-content/table-item/table-item.component.scss @@ -1,45 +1,82 @@ -:host { +@use '../../../../assets/styles/common-mixins' as mixins; + +:host::ng-deep { display: contents; -} -> div, -.cell { - display: flex; - flex-direction: column; - justify-content: center; - position: relative; - box-sizing: border-box; - border-bottom: 1px solid var(--iqser-separator); - height: var(--itemSize); - padding: 0 10px; + > *:not(.selection-column):not(.scrollbar-placeholder) { + display: contents; + } - &.center { - align-items: center; + > div, + .cell { + display: flex; + flex-direction: column; justify-content: center; - } -} + position: relative; + box-sizing: border-box; + border-bottom: 1px solid var(--iqser-separator); + height: var(--itemSize); + padding: 0 10px; -.cell { - min-width: 110px; - - &:first-of-type { - padding: 0 24px; - } -} - -.selection-column { - padding-right: 0 !important; - - iqser-round-checkbox .wrapper { - opacity: 0; - transition: opacity 0.2s; - - &.active { - opacity: 1; + &.center { + align-items: center; + justify-content: center; } } - & + * > .cell:first-of-type { - padding: 0 10px; + .cell { + min-width: 110px; + + &:first-of-type { + padding: 0 24px; + } + } + + .selection-column { + padding-right: 0 !important; + + iqser-round-checkbox .wrapper { + opacity: 0; + transition: opacity 0.2s; + + &.active { + opacity: 1; + } + } + + & + * > .cell:first-of-type { + padding: 0 10px; + } + } + + + .table-item-title { + font-weight: 600; + @include mixins.line-clamp(1); + width: fit-content; + max-width: 100%; + } + + .action-buttons { + position: absolute; + display: none !important; + right: -11px; + top: 0; + height: 100%; + width: fit-content; + flex-direction: row; + align-items: center; + padding-left: 100px; + padding-right: 21px; + z-index: 1; + background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-grey-2) 35%); + + mat-icon { + width: 14px; + } + + iqser-circle-button:not(:last-child) { + margin-right: 2px; + } } }