Skip to content

Commit

Permalink
feat(admin-ui): Numerous style tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
michaelbromley committed May 14, 2019
1 parent c9325b6 commit 14ee458
Show file tree
Hide file tree
Showing 17 changed files with 122 additions and 70 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,6 @@
<ng-template vdrDialogButtons>
<button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
<button type="submit" (click)="select()" class="btn btn-primary" [disabled]="selection.length === 0">
{{ 'catalog.add-asset-to-product' | translate: { count: selection.length } }}
{{ 'catalog.add-asset-with-count' | translate: { count: selection.length } }}
</button>
</ng-template>
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
}

img {

margin: 12px;
box-shadow: 0px 0px 10px -3px rgba(0, 0, 0, 0.15)
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@
<vdr-dt-column></vdr-dt-column>
<vdr-dt-column></vdr-dt-column>
<ng-template let-facet="item">
<td class="left align-middle">{{ facet.code }}</td>
<td class="left align-middle">{{ facet.name }}</td>
<td class="left align-middle">
<td class="left align-middle" [class.private]="facet.isPrivate">{{ facet.code }}</td>
<td class="left align-middle" [class.private]="facet.isPrivate">{{ facet.name }}</td>
<td class="left align-middle" [class.private]="facet.isPrivate">
<vdr-facet-value-chip
*ngFor="let value of (facet.values | slice: 0:3)"
[facetValue]="value"
Expand All @@ -33,19 +33,19 @@
></vdr-facet-value-chip>
<vdr-chip *ngIf="facet.values.length > 3">+ {{ facet.values.length - 3 }}</vdr-chip>
</td>
<td>
<td [class.private]="facet.isPrivate">
<vdr-chip>
{{ facet.isPrivate ? ('catalog.private' | translate) : ('catalog.public' | translate) }}
</vdr-chip>
</td>
<td class="right align-middle">
<td class="right align-middle" [class.private]="facet.isPrivate">
<vdr-table-row-action
iconShape="edit"
[label]="'common.edit' | translate"
[linkTo]="['./', facet.id]"
></vdr-table-row-action>
</td>
<td class="right align-middle">
<td class="right align-middle" [class.private]="facet.isPrivate">
<clr-dropdown>
<button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
{{ 'common.actions' | translate }}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@import "variables";

td {
&.private {
background-color: $color-grey-200;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,8 @@
(pageChange)="setPageNumber($event)"
(itemsPerPageChange)="setItemsPerPage($event)"
>
<vdr-dt-column></vdr-dt-column>
<vdr-dt-column [expand]="true">{{ 'common.name' | translate }}</vdr-dt-column>
<vdr-dt-column></vdr-dt-column>
<vdr-dt-column></vdr-dt-column>
<vdr-dt-column></vdr-dt-column>
<ng-template let-result="item" #foo>
<td class="left align-middle">
<ng-template let-result="item">
<td class="left align-middle" [class.disabled]="!result.enabled">
<div class="image-placeholder">
<img
*ngIf="
Expand All @@ -61,20 +56,20 @@
</ng-template>
</div>
</td>
<td class="left align-middle">
<td class="left align-middle" [class.disabled]="!result.enabled">
{{ groupByProduct ? result.productName : result.productVariantName }}
</td>
<td class="align-middle">
<td class="align-middle" [class.disabled]="!result.enabled">
<vdr-chip *ngIf="!result.enabled">{{ 'common.disabled' | translate }}</vdr-chip>
</td>
<td class="right align-middle">
<td class="right align-middle" [class.disabled]="!result.enabled">
<vdr-table-row-action
iconShape="edit"
[label]="'common.edit' | translate"
[linkTo]="['./', result.productId]"
></vdr-table-row-action>
</td>
<td class="right align-middle">
<td class="right align-middle" [class.disabled]="!result.enabled">
<clr-dropdown>
<button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
{{ 'common.actions' | translate }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,6 @@
.search-settings-menu {
margin: 0 12px;
}
td.disabled {
background-color: $color-grey-200;
}
Original file line number Diff line number Diff line change
@@ -1,33 +1,13 @@
@import "variables";
@import "mixins";

:host {
margin-top: 6px;
display: block;
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;
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<div class="variants-list">
<div class="variant-container card" *ngFor="let variant of variants; let i = index">
<div
class="variant-container card"
*ngFor="let variant of variants; let i = index"
[class.disabled]="!formArray.get([i, 'enabled']).value"
>
<ng-container [formGroup]="formArray.at(i)">
<div class="card-block header-row">
<div class="details">
Expand All @@ -24,7 +28,6 @@
</clr-input-container>
</vdr-title-input>
</div>
<div class="flex-spacer"></div>
<div>
<clr-toggle-wrapper>
<input type="checkbox" clrToggle name="enabled" formControlName="enabled" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@
}

.variant-container {
transition: background-color 0.2s;
&.disabled {
background-color: $color-grey-200;
}
.header-row {
display: flex;
align-items: center;
Expand All @@ -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 {
Expand Down Expand Up @@ -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%
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@
</ng-container>
<vdr-dt-column>{{ 'catalog.price' | translate }}</vdr-dt-column>
<vdr-dt-column>{{ 'catalog.stock-on-hand' | translate }}</vdr-dt-column>
<vdr-dt-column>{{ 'common.enabled' | translate }}</vdr-dt-column>
<ng-template let-variant="item" let-i="index">
<ng-container [formGroup]="formArray.at(i)">
<td class="left align-middle">
<td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled']).value">
<div class="card-img">
<div class="featured-asset">
<img
Expand All @@ -22,7 +23,7 @@
</div>
</div>
</td>
<td class="left align-middle">
<td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled']).value">
<clr-input-container>
<input
clrInput
Expand All @@ -32,7 +33,7 @@
/>
</clr-input-container>
</td>
<td class="left align-middle">
<td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled']).value">
<clr-input-container>
<input
clrInput
Expand All @@ -43,9 +44,11 @@
</clr-input-container>
</td>
<ng-container *ngFor="let option of variant.options">
<td class="left align-middle">{{ option.name }}</td>
<td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled']).value">
{{ option.name }}
</td>
</ng-container>
<td class="left align-middle price">
<td class="left align-middle price" [class.disabled]="!formArray.get([i, 'enabled']).value">
<clr-input-container>
<vdr-currency-input
clrInput
Expand All @@ -54,11 +57,16 @@
></vdr-currency-input>
</clr-input-container>
</td>
<td class="left align-middle stock">
<td class="left align-middle stock" [class.disabled]="!formArray.get([i, 'enabled']).value">
<clr-input-container>
<input clrInput type="number" min="0" step="1" formControlName="stockOnHand" />
</clr-input-container>
</td>
<td class="left align-middle stock" [class.disabled]="!formArray.get([i, 'enabled']).value">
<clr-toggle-wrapper>
<input type="checkbox" clrToggle name="enabled" formControlName="enabled" />
</clr-toggle-wrapper>
</td>
</ng-container>
</ng-template>
</vdr-data-table>
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,10 @@ input {
max-width: 96px;
}
}

td {
transition: background-color 0.2s;
&.disabled {
background-color: $color-grey-200;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ thead th {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: 6px;
}

.empty-state {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,22 @@
[items]="facetValues"
[addTag]="false"
[hideSelected]="true"
groupBy="facetName"
bindValue="id"
multiple="true"
appendTo="body"
bindLabel="name"
[disabled]="disabled"
[ngModel]="value"
(change)="onChange($event)"
></ng-select>
>
<ng-template ng-label-tmp let-item="item" let-clear="clear">
<vdr-facet-value-chip
[facetValue]="item.value"
[removable]="true"
(remove)="clear(item)"
></vdr-facet-value-chip>
</ng-template>
<ng-template ng-option-tmp let-item="item">
<vdr-facet-value-chip [facetValue]="item.value" [removable]="false"></vdr-facet-value-chip>
</ng-template>
</ng-select>
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@import "variables";
@import "mixins";

:host {
::ng-deep {
@include ng-select-facet-values;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
max-width: 100%;
&:not(:focus) {
border-color: transparent !important;
background-color: transparent !important;
}
}

Expand Down
2 changes: 1 addition & 1 deletion admin-ui/src/i18n-messages/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
36 changes: 30 additions & 6 deletions admin-ui/src/styles/_mixins.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}

0 comments on commit 14ee458

Please sign in to comment.