diff --git a/admin-ui/src/app/catalog/components/asset-picker-dialog/asset-picker-dialog.component.html b/admin-ui/src/app/catalog/components/asset-picker-dialog/asset-picker-dialog.component.html index f7e2bf9a4a..710545bb3e 100644 --- a/admin-ui/src/app/catalog/components/asset-picker-dialog/asset-picker-dialog.component.html +++ b/admin-ui/src/app/catalog/components/asset-picker-dialog/asset-picker-dialog.component.html @@ -37,6 +37,6 @@ {{ 'common.cancel' | translate }} - {{ 'catalog.add-asset-to-product' | translate: { count: selection.length } }} + {{ 'catalog.add-asset-with-count' | translate: { count: selection.length } }} diff --git a/admin-ui/src/app/catalog/components/asset-preview/asset-preview.component.scss b/admin-ui/src/app/catalog/components/asset-preview/asset-preview.component.scss index 35435a3ae9..b7f335af39 100644 --- a/admin-ui/src/app/catalog/components/asset-preview/asset-preview.component.scss +++ b/admin-ui/src/app/catalog/components/asset-preview/asset-preview.component.scss @@ -21,7 +21,8 @@ } img { - + margin: 12px; + box-shadow: 0px 0px 10px -3px rgba(0, 0, 0, 0.15) } } diff --git a/admin-ui/src/app/catalog/components/facet-list/facet-list.component.html b/admin-ui/src/app/catalog/components/facet-list/facet-list.component.html index 99d58898a2..e315dc44c5 100644 --- a/admin-ui/src/app/catalog/components/facet-list/facet-list.component.html +++ b/admin-ui/src/app/catalog/components/facet-list/facet-list.component.html @@ -22,9 +22,9 @@ - {{ facet.code }} - {{ facet.name }} - + {{ facet.code }} + {{ facet.name }} + 3">+ {{ facet.values.length - 3 }} - + {{ facet.isPrivate ? ('catalog.private' | translate) : ('catalog.public' | translate) }} - + - + {{ 'common.actions' | translate }} diff --git a/admin-ui/src/app/catalog/components/facet-list/facet-list.component.scss b/admin-ui/src/app/catalog/components/facet-list/facet-list.component.scss index e69de29bb2..e3dca4aa1b 100644 --- a/admin-ui/src/app/catalog/components/facet-list/facet-list.component.scss +++ b/admin-ui/src/app/catalog/components/facet-list/facet-list.component.scss @@ -0,0 +1,7 @@ +@import "variables"; + +td { + &.private { + background-color: $color-grey-200; + } +} diff --git a/admin-ui/src/app/catalog/components/product-list/product-list.component.html b/admin-ui/src/app/catalog/components/product-list/product-list.component.html index 61b04401d1..d9210e814c 100644 --- a/admin-ui/src/app/catalog/components/product-list/product-list.component.html +++ b/admin-ui/src/app/catalog/components/product-list/product-list.component.html @@ -39,13 +39,8 @@ (pageChange)="setPageNumber($event)" (itemsPerPageChange)="setItemsPerPage($event)" > - - {{ 'common.name' | translate }} - - - - - + + - + {{ groupByProduct ? result.productName : result.productVariantName }} - + {{ 'common.disabled' | translate }} - + - + {{ 'common.actions' | translate }} diff --git a/admin-ui/src/app/catalog/components/product-list/product-list.component.scss b/admin-ui/src/app/catalog/components/product-list/product-list.component.scss index f015c2a81c..734e61fb30 100644 --- a/admin-ui/src/app/catalog/components/product-list/product-list.component.scss +++ b/admin-ui/src/app/catalog/components/product-list/product-list.component.scss @@ -24,3 +24,6 @@ .search-settings-menu { margin: 0 12px; } +td.disabled { + background-color: $color-grey-200; +} diff --git a/admin-ui/src/app/catalog/components/product-search-input/product-search-input.component.scss b/admin-ui/src/app/catalog/components/product-search-input/product-search-input.component.scss index 75702d9cb9..71bc2d19a8 100644 --- a/admin-ui/src/app/catalog/components/product-search-input/product-search-input.component.scss +++ b/admin-ui/src/app/catalog/components/product-search-input/product-search-input.component.scss @@ -1,4 +1,5 @@ @import "variables"; +@import "mixins"; :host { margin-top: 6px; @@ -6,28 +7,7 @@ width: 100%; ::ng-deep { - - .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value { - background: none; - margin: 0; - } - - .ng-dropdown-panel-items div.ng-option:last-child { - display: none; - } - - .ng-dropdown-panel .ng-dropdown-header { - border: none; - padding: 0; - } - - .ng-select.ng-select-multiple .ng-select-container .ng-value-container { - padding: 0; - } - - .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder { - padding-left: 8px; - } + @include ng-select-facet-values; } } diff --git a/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html b/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html index 274c20e6a1..10eef85609 100644 --- a/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html +++ b/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html @@ -1,5 +1,9 @@ - + @@ -24,7 +28,6 @@ - diff --git a/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.scss b/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.scss index be8c954571..890278c37e 100644 --- a/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.scss +++ b/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.scss @@ -18,6 +18,10 @@ } .variant-container { + transition: background-color 0.2s; + &.disabled { + background-color: $color-grey-200; + } .header-row { display: flex; align-items: center; @@ -30,15 +34,24 @@ .details { display: flex; + flex: 1; height: 36px; - // margin-left: 12px; - > div { - margin-right: 12px; + margin-right: 12px; + + .name { + flex: 1; + ::ng-deep .clr-control-container { + width: 100%; + input.clr-input { + min-width: 100%; + } + } } .sku { width: 160px; margin-right: 20px; + flex: 0; } ::ng-deep .name input { @@ -85,12 +98,3 @@ color: $color-grey-400; } } - -@media screen and (max-width: $breakpoint-small){ - .details { - flex-direction: column; - ::ng-deep .clr-control-container, ::ng-deep input { - width: 100% - } - } -} diff --git a/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.html b/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.html index 6de349e2c4..9ab421d71f 100644 --- a/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.html +++ b/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.html @@ -7,9 +7,10 @@ {{ 'catalog.price' | translate }} {{ 'catalog.stock-on-hand' | translate }} + {{ 'common.enabled' | translate }} - + - + - + - {{ option.name }} + + {{ option.name }} + - + - + + + + + + diff --git a/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.scss b/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.scss index eba9f956da..d30832e72d 100644 --- a/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.scss +++ b/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.scss @@ -13,3 +13,10 @@ input { max-width: 96px; } } + +td { + transition: background-color 0.2s; + &.disabled { + background-color: $color-grey-200; + } +} diff --git a/admin-ui/src/app/shared/components/data-table/data-table.component.scss b/admin-ui/src/app/shared/components/data-table/data-table.component.scss index b6c8faa639..eef0e68fdc 100644 --- a/admin-ui/src/app/shared/components/data-table/data-table.component.scss +++ b/admin-ui/src/app/shared/components/data-table/data-table.component.scss @@ -20,6 +20,7 @@ thead th { display: flex; align-items: baseline; justify-content: space-between; + margin-top: 6px; } .empty-state { diff --git a/admin-ui/src/app/shared/components/facet-value-selector/facet-value-selector.component.html b/admin-ui/src/app/shared/components/facet-value-selector/facet-value-selector.component.html index f2dd698f40..b5e2fb2102 100644 --- a/admin-ui/src/app/shared/components/facet-value-selector/facet-value-selector.component.html +++ b/admin-ui/src/app/shared/components/facet-value-selector/facet-value-selector.component.html @@ -2,7 +2,6 @@ [items]="facetValues" [addTag]="false" [hideSelected]="true" - groupBy="facetName" bindValue="id" multiple="true" appendTo="body" @@ -10,4 +9,15 @@ [disabled]="disabled" [ngModel]="value" (change)="onChange($event)" -> +> + + + + + + + diff --git a/admin-ui/src/app/shared/components/facet-value-selector/facet-value-selector.component.scss b/admin-ui/src/app/shared/components/facet-value-selector/facet-value-selector.component.scss index e69de29bb2..d4f0a1c2f2 100644 --- a/admin-ui/src/app/shared/components/facet-value-selector/facet-value-selector.component.scss +++ b/admin-ui/src/app/shared/components/facet-value-selector/facet-value-selector.component.scss @@ -0,0 +1,8 @@ +@import "variables"; +@import "mixins"; + +:host { + ::ng-deep { + @include ng-select-facet-values; + } +} diff --git a/admin-ui/src/app/shared/components/title-input/title-input.component.scss b/admin-ui/src/app/shared/components/title-input/title-input.component.scss index 167bcfbcbd..f3e274f16f 100644 --- a/admin-ui/src/app/shared/components/title-input/title-input.component.scss +++ b/admin-ui/src/app/shared/components/title-input/title-input.component.scss @@ -10,6 +10,7 @@ max-width: 100%; &:not(:focus) { border-color: transparent !important; + background-color: transparent !important; } } diff --git a/admin-ui/src/i18n-messages/en.json b/admin-ui/src/i18n-messages/en.json index 08e1780cdf..f08be8cf6b 100644 --- a/admin-ui/src/i18n-messages/en.json +++ b/admin-ui/src/i18n-messages/en.json @@ -23,7 +23,7 @@ }, "catalog": { "add-asset": "Add asset", - "add-asset-to-product": "Add {count, plural, 0 {assets} one {1 asset} other {{count} assets}} to product", + "add-asset-with-count": "Add {count, plural, 0 {assets} one {1 asset} other {{count} assets}}", "add-facet-value": "Add facet value", "add-facets": "Add facets", "assets-selected-count": "{ count } assets selected", diff --git a/admin-ui/src/styles/_mixins.scss b/admin-ui/src/styles/_mixins.scss index 490bf15c44..c1c65073d4 100644 --- a/admin-ui/src/styles/_mixins.scss +++ b/admin-ui/src/styles/_mixins.scss @@ -1,8 +1,32 @@ @mixin no-select { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +@mixin ng-select-facet-values { + .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value { + background: none; + margin: 0; + } + + .ng-dropdown-panel-items div.ng-option:last-child { + display: none; + } + + .ng-dropdown-panel .ng-dropdown-header { + border: none; + padding: 0; + } + + .ng-select.ng-select-multiple .ng-select-container .ng-value-container { + padding: 0; + } + + .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder { + padding-left: 8px; + } }