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> <mg-ajax path="/client/api/Clients/filter" options="mgIndex"></mg-ajax>
<div margin-medium> <div margin-medium>
<div style="max-width: 36em; margin: 0 auto;"> <div class="vn-list">
<vn-card> <vn-card>
<vn-horizontal pad-medium> <vn-horizontal pad-medium>
<vn-searchbar vn-one <vn-searchbar vn-one
@ -20,13 +20,13 @@
</vn-card> </vn-card>
<vn-paging index="index" total="index.model.count"></vn-paging> <vn-paging index="index" total="index.model.count"></vn-paging>
</div> </div>
<a ui-sref="create" fixed-bottom-right>
<vn-float-button icon="person_add"></vn-float-button>
</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> </div>
<a ui-sref="create" fixed-bottom-right>
<vn-float-button icon="person_add"></vn-float-button>
</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>

View File

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

View File

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

View File

@ -1,21 +1,3 @@
vn-item-client { vn-item-client {
display: block; 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)"> <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> <vn-icon icon="clear"></vn-icon>
</button> </button>
<form> <form>

View File

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

View File

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

View File

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

View File

@ -1,30 +1,14 @@
@import "../../../salix/src/styles/colors";
vn-item-product { vn-item-product {
display: block; 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 { .image {
max-width: 150px; height: 7em;
} width: 7em;
.vn-item-product-name { & > img {
font-family: vn-font-bold; max-height: 100%;
} max-width: 100%;
}
}
}

View File

@ -1,5 +1,6 @@
Items: Artículos Items: Artículos
Item: Artículo Item: Artículo
View item: Ver artículo
Category: Categoría Category: Categoría
Description: Descripción Description: Descripción
Size: Tamaño Size: Tamaño
@ -22,6 +23,7 @@ Date: Fecha
Preview: Vista previa Preview: Vista previa
Clone: Clonar Clone: Clonar
Do you want to clone this item?: ¿Desea clonar este artículo? 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 Yes, clone: Si, clonar
Value: Valor Value: Valor
Priority: Prioridad 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', vnMainMenu: 'vn-main-menu > div',
vnModuleContainer: 'vn-module-container > a', vnModuleContainer: 'vn-module-container > a',
vnSearchBar: 'vn-searchbar > form > vn-horizontal', vnSearchBar: 'vn-searchbar > form > vn-horizontal',
vnItemClient: 'vn-item-client',
vnItemProduct: 'vn-item-product',
vnFloatButton: 'vn-float-button > button', vnFloatButton: 'vn-float-button > button',
vnMenuItem: 'vn-menu-item > li > a', vnMenuItem: 'vn-menu-item > li > a',
vnAutocomplete: 'vn-autocomplete', vnAutocomplete: 'vn-autocomplete',

View File

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