Style fixes

This commit is contained in:
Juan 2018-03-01 21:18:43 +01:00
parent 98388dde85
commit 4b12411d6b
14 changed files with 154 additions and 122 deletions

View File

@ -1,6 +1,6 @@
<mg-ajax path="/client/api/Clients/filter" options="mgIndex"></mg-ajax>
<div margin-medium>
<div style="max-width: 36em; margin: 0 auto;">
<div class="vn-list">
<vn-card>
<vn-horizontal pad-medium>
<vn-searchbar vn-one
@ -20,13 +20,13 @@
</vn-card>
<vn-paging index="index" total="index.model.count"></vn-paging>
</div>
<a ui-sref="create" fixed-bottom-right>
</div>
<a ui-sref="create" fixed-bottom-right>
<vn-float-button icon="person_add"></vn-float-button>
</a>
<vn-dialog class="dialog-summary"
</a>
<vn-dialog class="dialog-summary"
vn-id="dialog-summary-client">
<tpl-body>
<vn-client-summary client="$ctrl.clientSelected"></vn-client-summary>
</tpl-body>
</vn-dialog>
</div>
</vn-dialog>

View File

@ -1,5 +1,4 @@
import ngModule from '../module';
import './style.scss';
import './item-client';
export default class Controller {

View File

@ -1,12 +1,23 @@
<vn-horizontal pad-medium border-solid-bottom>
<a vn-one ui-sref="clientCard.basicData({ id: {{::$ctrl.client.id}} })" title="View client">
<a
ui-sref="clientCard.basicData({ id: {{::$ctrl.client.id}} })"
translate-attr="{title: 'View client'}"
class="vn-list-item"
pad-medium
border-solid-bottom>
<vn-horizontal ng-click="$ctrl.onClick($event)">
<vn-one>
<h6>{{::$ctrl.client.name}}</h6>
<div><span translate>Id</span> {{::$ctrl.client.id}}</div>
<div><span translate>Phone</span> {{::$ctrl.client.phone | phone}}</div>
<div><span translate>Town/City</span> {{::$ctrl.client.city}}</div>
<div><span translate>Email</span> {{::$ctrl.client.email}}</div>
</a>
<vn-auto>
<vn-icon ng-click="$ctrl.preview()" vn-tooltip="Preview" pad-medium-top margin-small-top icon="icon-preview"></vn-icon>
</vn-auto>
</vn-horizontal>
<div><vn-label translate>Id</vn-label> {{::$ctrl.client.id}}</div>
<div><vn-label translate>Phone</vn-label> {{::$ctrl.client.phone | phone}}</div>
<div><vn-label translate>Town/City</vn-label> {{::$ctrl.client.city}}</div>
<div><vn-label translate>Email</vn-label> {{::$ctrl.client.email}}</div>
</vn-one>
<vn-horizontal class="buttons">
<vn-icon
ng-click="$ctrl.preview($event)"
vn-tooltip="Preview"
icon="icon-preview">
</vn-icon>
</vn-horizontal>
</vn-horizontal>
</a>

View File

@ -1,7 +1,13 @@
import ngModule from '../module';
class Controller {
preview() {
onClick(event) {
if (event.defaultPrevented)
event.stopImmediatePropagation();
}
preview(event) {
event.preventDefault();
this.list.openSummary(this.client);
}
}

View File

@ -1,21 +1,3 @@
vn-item-client {
display: block;
vn-horizontal {
a {
display: block;
text-decoration: none;
color: inherit;
}
&:hover {
color: white;
background-color: #424242;
}
span {
font-size: .9em;
color: #666;
}
&:hover span {
color: #aaa;
}
}
}

View File

@ -1,5 +1,8 @@
<div ng-mousedown="$ctrl.onDialogMouseDown($event)">
<button ng-click="$ctrl.hide()" class="close" translate-attr="{title: 'Close'}">
<button
class="close"
ng-click="$ctrl.hide()"
translate-attr="{title: 'Close'}">
<vn-icon icon="clear"></vn-icon>
</button>
<form>

View File

@ -1,23 +1,35 @@
<vn-horizontal pad-medium border-solid-bottom>
<vn-auto margin-medium-right >
<img ng-src="http://verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}"
zoom-image="http://verdnatura.es/vn-image-data/catalog/900x900/{{::$ctrl.item.image}}" on-error-src/>
<a
ui-sref="item.card.summary({ id: {{$ctrl.item.id}} })"
translate-attr="{title: 'View item'}"
class="vn-list-item"
pad-medium
border-solid-bottom>
<vn-horizontal ng-click="$ctrl.onClick($event)">
<vn-auto class="image" margin-medium-right>
<img
ng-src="http://verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}"
zoom-image="http://verdnatura.es/vn-image-data/catalog/900x900/{{::$ctrl.item.image}}"
on-error-src/>
</vn-auto>
<vn-one ui-sref="item.card.summary({ id: {{$ctrl.item.id}} })">
<div><span translate>Id</span>: <b>{{::$ctrl.item.id}}</b></div>
<div><span translate>Name</span>: <b>{{::$ctrl.item.name}}</b></div>
<div><span translate>Description</span>: <b>{{::$ctrl.item.description}}</b></div>
<div><span translate>Size</span>: <b>{{::$ctrl.item.size}}</b></div>
<div><span translate>Type</span>: <b>{{::$ctrl.item.itemType.name}}</b></div>
</vn-one>
<vn-horizontal vn-auto pad-large-top>
<vn-one>
<vn-icon ng-click="$ctrl.clone()" vn-tooltip="Clone" pad-medium-top margin-medium-right margin-small-top icon="icon-clone2"></vn-icon>
</vn-one>
<vn-one>
<vn-icon ng-click="$ctrl.preview()" vn-tooltip="Preview" pad-medium-top margin-small-top icon="icon-preview"></vn-icon>
<h6 translate>{{::$ctrl.item.name}}</h6>
<div><vn-label translate>Id</vn-label> {{::$ctrl.item.id}}</div>
<div><vn-label translate>Description</vn-label> {{::$ctrl.item.description}}</div>
<div><vn-label translate>Size</vn-label> {{::$ctrl.item.size}}</div>
<div><vn-label translate>Type</vn-label> {{::$ctrl.item.itemType.name}}</div>
</vn-one>
<vn-horizontal class="buttons"s>
<vn-icon
ng-click="$ctrl.clone($event)"
vn-tooltip="Clone"
icon="icon-clone2">
</vn-icon>
<vn-icon
ng-click="$ctrl.preview($event)"
vn-tooltip="Preview"
icon="icon-preview">
</vn-icon>
</vn-horizontal>
</vn-horizontal>
</vn-horizontal>
</a>

View File

@ -5,11 +5,18 @@ class ItemProduct {
this.$http = $http;
}
clone() {
onClick(event) {
if (event.defaultPrevented)
event.stopImmediatePropagation();
}
clone(event) {
event.preventDefault();
this.ItemList.cloneItem(this.item);
}
preview() {
preview(event) {
event.preventDefault();
this.ItemList.showItemPreview(this.item);
}
}

View File

@ -1,6 +1,6 @@
<mg-ajax path="/item/api/Items/filter" options="mgIndex"></mg-ajax>
<div margin-medium>
<div style="max-width: 40em; margin: 0 auto;">
<div class="vn-list">
<vn-card>
<vn-horizontal pad-medium>
<vn-searchbar vn-one
@ -13,30 +13,25 @@
</vn-horizontal>
</vn-card>
<vn-card margin-medium-top>
<vn-auto class="item-product-link" ng-repeat="item in index.model.instances">
<vn-item-product item="item"></vn-item-product>
</vn-auto>
<vn-item-product
ng-repeat="item in index.model.instances"
item="item">
</vn-item-product>
</vn-card>
<vn-paging index="index" total="index.model.count"></vn-paging>
</div>
<a ui-sref="item.create" fixed-bottom-right>
</div>
<a ui-sref="item.create" fixed-bottom-right>
<vn-float-button icon="add"></vn-float-button>
</a>
<vn-dialog vn-id="preview" class="dialog-summary">
</a>
<vn-dialog vn-id="preview" class="dialog-summary">
<tpl-body>
<vn-item-summary item="$ctrl.itemSelected"></vn-item-summary>
</tpl-body>
</vn-dialog>
<vn-dialog
</vn-dialog>
<vn-confirm
vn-id="clone"
on-response="$ctrl.onCloneAccept(response)">
<tpl-body>
<p translate>Do you want to clone this item?</p>
</tpl-body>
<tpl-buttons>
<button response="CANCEL" translate>Cancel</button>
<button response="ACCEPT" translate>Yes, clone</button>
</tpl-buttons>
</vn-dialog>
</div>
on-response="$ctrl.onCloneAccept(response)"
question="Do you want to clone this item?"
message="All it's properties will be copied">
</vn-confirm>

View File

@ -1,30 +1,14 @@
@import "../../../salix/src/styles/colors";
vn-item-product {
display: block;
}
vn-auto.item-product-link {
display: block;
text-decoration: none;
color: inherit;
}
vn-auto.item-product-link:hover {
color: $color-white;
background-color: $color-dark;
}
vn-auto.item-product-link i{
opacity: .3;
}
vn-auto.item-product-link:hover i{
color: $color-orange;
opacity: 1;
cursor: pointer;
}
vn-item-product img {
max-width: 150px;
}
.image {
height: 7em;
width: 7em;
.vn-item-product-name {
font-family: vn-font-bold;
& > img {
max-height: 100%;
max-width: 100%;
}
}
}

View File

@ -1,5 +1,6 @@
Items: Artículos
Item: Artículo
View item: Ver artículo
Category: Categoría
Description: Descripción
Size: Tamaño
@ -22,6 +23,7 @@ Date: Fecha
Preview: Vista previa
Clone: Clonar
Do you want to clone this item?: ¿Desea clonar este artículo?
All it's properties will be copied: Todas sus propiedades serán copiadas
Yes, clone: Si, clonar
Value: Valor
Priority: Prioridad

View File

@ -144,3 +144,36 @@ vn-main-block {
}
}
}
.vn-list {
max-width: 36em;
margin: 0 auto;
}
.vn-list-item {
display: block;
text-decoration: none;
color: inherit;
&:hover {
color: white;
background-color: #424242;
vn-label {
color: #aaa;
}
}
& > vn-horizontal > .buttons {
align-items: center;
vn-icon {
opacity: .4;
color: #ffa410;
margin-left: .5em;
&:hover {
opacity: 1;
}
}
}
}

View File

@ -11,8 +11,6 @@ export default {
vnMainMenu: 'vn-main-menu > div',
vnModuleContainer: 'vn-module-container > a',
vnSearchBar: 'vn-searchbar > form > vn-horizontal',
vnItemClient: 'vn-item-client',
vnItemProduct: 'vn-item-product',
vnFloatButton: 'vn-float-button > button',
vnMenuItem: 'vn-menu-item > li > a',
vnAutocomplete: 'vn-autocomplete',

View File

@ -16,7 +16,7 @@ export default {
clientsIndex: {
searchClientInput: `${components.vnTextfield}`,
searchButton: `${components.vnSearchBar} > vn-icon-button > button`,
searchResult: `${components.vnItemClient}:nth-child(1) > vn-horizontal > a`,
searchResult: `vn-item-client a`,
createClientButton: `${components.vnFloatButton}`
},
createClientView: {
@ -145,13 +145,13 @@ export default {
},
itemsIndex: {
createItemButton: `${components.vnFloatButton}`,
searchResult: `${components.vnItemProduct} > vn-horizontal > vn-one`,
searchResultPreviewButton: `${components.vnItemProduct}:nth-child(1) > vn-horizontal > vn-horizontal > vn-one:nth-child(2) > vn-icon > i`,
searchResultCloneButton: `${components.vnItemProduct} > vn-horizontal > vn-horizontal > vn-one:nth-child(1) > vn-icon > i`,
acceptClonationAlertButton: `vn-dialog.ng-isolate-scope.vn-dialog.shown > div > form > div.buttons > tpl-buttons > button:nth-child(2)`,
searchResult: `vn-item-product a`,
searchResultPreviewButton: `vn-item-product .buttons > [icon="icon-preview"]`,
searchResultCloneButton: `vn-item-product .buttons > [icon="icon-clone2"]`,
acceptClonationAlertButton: `vn-item-list [vn-id="clone"] [response="ACCEPT"]`,
searchItemInput: `${components.vnTextfield}`,
searchButton: `${components.vnSearchBar} > vn-icon-button > button`,
closeItemSummaryPreview: 'body > vn-app > vn-vertical > vn-vertical > ui-view > vn-item-list:nth-child(1) > div > vn-dialog > div > button > vn-icon'
closeItemSummaryPreview: 'vn-item-list [vn-id="preview"] button.close'
},
itemCreateView: {
name: `${components.vnTextfield}[name="name"]`,