Style & translation fixes

This commit is contained in:
Juan Ferrer 2019-01-30 23:47:06 +01:00
parent 259079b051
commit 1dc8cafc73
34 changed files with 372 additions and 336 deletions

View File

@ -270,11 +270,11 @@ export default {
warehouseAutocomplete: 'vn-item-diary vn-autocomplete[field="$ctrl.warehouseFk"]',
},
ticketSummary: {
sale: 'vn-ticket-summary [name="sales"] table > tbody > tr',
firstSaleItemId: 'vn-ticket-summary [name="sales"] table > tbody > tr > td:nth-child(2) > span',
sale: 'vn-ticket-summary [name="sales"] vn-table > div > vn-tbody > vn-tr',
firstSaleItemId: 'vn-ticket-summary [name="sales"] vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(2) > span',
popoverDiaryButton: 'vn-ticket-summary vn-item-descriptor-popover vn-item-descriptor vn-icon[icon="icon-transaction"]',
firstSaleQuantity: 'vn-ticket-summary [name="sales"] table > tbody > tr > td:nth-child(4)',
firstSaleDiscount: 'vn-ticket-summary [name="sales"] table > tbody > tr > td:nth-child(6)'
firstSaleQuantity: 'vn-ticket-summary [name="sales"] vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(4)',
firstSaleDiscount: 'vn-ticket-summary [name="sales"] vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(6)'
},
ticketsIndex: {
newTicketButton: 'vn-ticket-index > a',

View File

@ -6,7 +6,7 @@
icon="remove"
ng-click="$ctrl.remove()"
tabindex="-1"
title="Remove number">
translate-attr="{title: 'Remove'}">
</vn-icon-button>
</div>
<div class="infix">
@ -29,7 +29,7 @@
icon="add"
ng-click="$ctrl.add()"
tabindex="-1"
title="Add number">
translate-attr="{title: 'Add'}">
</vn-icon-button>
<i class="material-icons"
ng-if="$ctrl.hasInfo"

View File

@ -3,16 +3,22 @@
<img src="./logo.svg" alt="Logo"></img>
</a>
<vn-icon
ng-if="$ctrl.showMenuButton"
ng-if="$ctrl.showLeftMenuButton"
class="show-menu"
icon="menu"
ng-click="$ctrl.showMenu()">
ng-click="$ctrl.showLeftMenu()">
</vn-icon>
<div class="main-title" translate>
{{$ctrl.$state.current.description}}
</div>
<vn-spinner enable="$ctrl.vnApp.loading"></vn-spinner>
<vn-main-menu></vn-main-menu>
<vn-icon
ng-if="$ctrl.rightMenu"
class="show-menu"
icon="menu"
ng-click="$ctrl.showRightMenu()">
</vn-icon>
</vn-topbar>
<div ui-view
class="main-view"
@ -21,7 +27,7 @@
</div>
<div
class="background"
ng-class="{shown: $ctrl.menuShown}"
ng-click="$ctrl.hideMenu()">
ng-class="{shown: $ctrl.leftMenuShown || $ctrl.rightMenuShown}"
ng-click="$ctrl.hideMenus()">
</div>
<vn-snackbar vn-id="snackbar"></vn-snackbar>

View File

@ -12,8 +12,8 @@ export default class App {
$transitions.onStart({}, transition => {
let state = transition.targetState().name();
this.showMenuButton = state.split('.').length >= 3;
if (this.menuShown) this.hideMenu();
this.showLeftMenuButton = state.split('.').length >= 3;
this.hideMenus();
});
}
@ -30,22 +30,31 @@ export default class App {
return state && state != 'login';
}
get leftBlock() {
return this.$element[0].querySelector('.left-block');
get leftMenu() {
return this.$element[0].querySelector('.left-menu');
}
showMenu() {
let leftBlock = this.leftBlock;
if (!leftBlock) return;
leftBlock.classList.add('shown');
this.menuShown = true;
showLeftMenu() {
if (!this.leftMenu) return;
this.leftMenu.classList.add('shown');
this.leftMenuShown = true;
}
hideMenu() {
this.menuShown = false;
let leftBlock = this.leftBlock;
if (!leftBlock) return;
leftBlock.classList.remove('shown');
showRightMenu() {
if (!this.rightMenu) return;
this.rightMenu.classList.add('shown');
this.rightMenuShown = true;
}
hideMenus() {
if (this.leftMenuShown) {
this.leftMenu.classList.remove('shown');
this.leftMenuShown = false;
}
if (this.rightMenuShown) {
this.rightMenu.classList.remove('shown');
this.rightMenuShown = false;
}
}
showMessage(message) {

View File

@ -27,7 +27,7 @@ vn-app {
padding: .3em;
}
& > .logo > img {
height: 1.6em;
height: 1.4em;
display: block;
}
& > .show-menu {
@ -58,26 +58,6 @@ vn-app {
&.padding {
padding-top: $topbar-height;
}
.index-block {
@extend .margin-medium;
}
vn-main-block {
display: block;
margin: 0 auto;
padding-left: $menu-width;
.left-block {
position: fixed;
z-index: 5;
top: $topbar-height;
left: 0;
bottom: 0;
width: $menu-width;
min-width: $menu-width;
background-color: white;
box-shadow: 0 .1em .2em rgba(1, 1, 1, .2);
overflow: auto;
}
.content-block {
@extend .margin-medium;
@ -87,12 +67,32 @@ vn-app {
}
}
}
.right-block {
vn-main-block {
display: block;
margin: 0 auto;
padding-left: $menu-width;
%side-menu {
display: block;
position: fixed;
z-index: 5;
bottom: 0;
width: $menu-width;
min-width: $menu-width;
padding-left: 1em;
background-color: white;
box-shadow: 0 .1em .2em rgba(1, 1, 1, .2);
overflow: auto;
}
.left-menu {
@extend %side-menu;
top: $topbar-height;
left: 0;
}
.right-menu {
@extend %side-menu;
top: $topbar-height;
right: 0;
}
}
}
& > .background {
@ -118,22 +118,6 @@ vn-app {
}
}
& > .main-view {
.index-block {
margin-left: 0;
margin-right: 0;
}
vn-main-block {
padding-left: 0;
.left-block {
top: 0;
transform: translateZ(0) translateX(-$menu-width);
transition: transform 200ms ease-out;
&.shown {
transform: translateZ(0) translateX(0);
}
}
.content-block {
margin-left: 0;
margin-right: 0;
@ -142,6 +126,25 @@ vn-app {
flex-direction: column;
}
}
vn-main-block {
padding-left: 0;
%side-menu-mobile {
top: 0;
transition: transform 200ms ease-out;
&.shown {
transform: translateZ(0) translateX(0);
}
}
.left-menu {
@extend %side-menu-mobile;
transform: translateZ(0) translateX(-$menu-width);
}
.right-menu {
@extend %side-menu-mobile;
transform: translateZ(0) translateX($menu-width);
}
}
}
& > .background.shown {

View File

@ -28,6 +28,8 @@ Order by: Ordenar por
Order: Orden
Ascendant: Ascendente
Descendant: Descendente
Add: Añadir
Remove: Quitar
# Modules

View File

@ -1,5 +1,5 @@
<vn-main-block>
<div class="left-block">
<div class="left-menu">
<vn-zone-descriptor zone="$ctrl.zone"></vn-zone-descriptor>
<vn-left-menu></vn-left-menu>
</div>

View File

@ -5,8 +5,8 @@
form="form"
save="post">
</vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()" margin-medium>
<div style="max-width: 50em; margin: 0 auto;">
<div class="content-block">
<form name="form" ng-submit="$ctrl.onSubmit()" compact>
<vn-card pad-large>
<vn-horizontal>
<vn-textfield vn-two vn-focus
@ -66,5 +66,5 @@
<vn-submit label="Create"></vn-submit>
<vn-button ui-sref="zone.index" label="Cancel"></vn-button>
</vn-button-bar>
</div>
</form>
</form>
</div>

View File

@ -6,7 +6,7 @@
data="zones"
auto-load="false">
</vn-crud-model>
<div class="index-block">
<div class="content-block">
<div class="vn-list">
<vn-card pad-medium-h>
<vn-searchbar

View File

@ -1,5 +1,5 @@
<vn-main-block>
<div class="left-block">
<div class="left-menu">
<vn-claim-descriptor claim="$ctrl.claim"></vn-claim-descriptor>
<vn-left-menu></vn-left-menu>
</div>

View File

@ -6,7 +6,7 @@
data="claims"
auto-load="false">
</vn-crud-model>
<div class="index-block">
<div class="content-block">
<div class="vn-list">
<vn-card pad-medium-h>
<vn-searchbar

View File

@ -1,5 +1,5 @@
<vn-main-block>
<div class="left-block">
<div class="left-menu">
<vn-client-descriptor client="$ctrl.client"></vn-client-descriptor>
<vn-left-menu></vn-left-menu>
</div>

View File

@ -5,8 +5,8 @@
form="form"
save="post">
</vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()" margin-medium>
<div style="max-width: 50em; margin: 0 auto;">
<div class="content-block">
<form name="form" ng-submit="$ctrl.onSubmit()" compact>
<vn-card pad-large>
<vn-horizontal>
<vn-textfield vn-two label="Comercial Name" field="$ctrl.client.name" vn-focus></vn-textfield>
@ -87,5 +87,5 @@
<vn-submit label="Create"></vn-submit>
<vn-button ui-sref="client.index" label="Cancel"></vn-button>
</vn-button-bar>
</div>
</form>
</form>
</div>

View File

@ -6,7 +6,7 @@
data="clients"
auto-load="false">
</vn-crud-model>
<div class="index-block">
<div class="content-block">
<div class="vn-list">
<vn-card pad-medium-h>
<vn-searchbar

View File

@ -1,5 +1,5 @@
<vn-main-block>
<div class="left-block">
<div class="left-menu">
<vn-item-descriptor item="$ctrl.item"></vn-item-descriptor>
<vn-left-menu></vn-left-menu>
</div>

View File

@ -5,8 +5,8 @@
form="form"
save="post">
</vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()" margin-medium>
<div compact>
<div class="content-block">
<form name="form" ng-submit="$ctrl.onSubmit()" compact>
<vn-card pad-large>
<vn-horizontal>
<vn-textfield
@ -61,5 +61,5 @@
>Cancel
</button>
</vn-button-bar>
</div>
</form>
</form>
</div>

View File

@ -6,7 +6,7 @@
data="items"
auto-load="false">
</vn-crud-model>
<div class="index-block">
<div class="content-block">
<div class="vn-list">
<vn-card pad-medium-h>
<vn-searchbar

View File

@ -1,5 +1,5 @@
<vn-main-block>
<div class="left-block">
<div class="left-menu">
<vn-order-descriptor order="$ctrl.order"></vn-order-descriptor>
<vn-left-menu></vn-left-menu>
</div>

View File

@ -5,13 +5,12 @@
limit="50"
data="items" on-data-change="$ctrl.onDataChange()" >
</vn-crud-model>
<vn-horizontal>
<vn-vertical vn-one>
<div class="items">
<vn-card>
<vn-vertical>
<vn-horizontal class="catalog-header" pad-medium-h>
<vn-one ng-if="model.moreRows">
<span translate>More than</span> {{model.limit}} <span translate>results</span></vn-one>
<span translate>More than</span> {{model.limit}} <span translate>results</span>
</vn-one>
<vn-one>
<vn-horizontal>
<vn-autocomplete vn-id="field" vn-one
@ -94,16 +93,13 @@
No results
</vn-one>
</vn-horizontal>
</vn-vertical>
</vn-card>
<vn-pagination margin-small-v model="model"></vn-pagination>
</vn-vertical>
<vn-auto class="right-block">
<vn-catalog-filter order="$ctrl.order"></vn-catalog-filter>
</vn-auto>
</vn-horizontal>
</div>
<vn-catalog-filter
class="right-menu"
order="$ctrl.order">
</vn-catalog-filter>
<vn-order-prices-popover
vn-id="pricesPopover"
order="$ctrl.order">

View File

@ -125,5 +125,5 @@ ngModule.component('vnOrderCatalog', {
controller: Controller,
bindings: {
order: '<',
},
}
});

View File

@ -8,13 +8,18 @@ vn-order-catalog {
vn-one:first-child {
padding-top: 2em;
}
vn-one:nth-child(2) {
padding-top: 0.5em;
}
span {
color: $secondary-font-color
}
}
& > .items {
padding-right: 16em;
@media screen and (max-width: 800px) {
padding-right: 0;
}
}
}

View File

@ -1,5 +1,5 @@
<div margin-medium>
<div style="max-width: 70em; margin: 0 auto;" >
<div class="content-block">
<div compact>
<vn-card pad-large>
<vn-order-create-card vn-id="card" on-save=""></vn-order-create-card>
</vn-card>

View File

@ -1,17 +1,14 @@
<vn-crud-model
vn-id="model"
url="/order/api/ItemCategories"
data="categories" auto-load="true">
data="categories"
auto-load="true">
</vn-crud-model>
<vn-horizontal>
<vn-vertical vn-one>
<vn-card >
<vn-vertical>
<vn-horizontal pad-medium class="item-category">
<vn-one margin-small-v ng-repeat="category in categories">
<div>
<vn-horizontal class="item-category">
<vn-one ng-repeat="category in categories">
<vn-icon
ng-class="{'active': $ctrl.category.id == category.id}"
pad-small
icon="{{::category.icon}}"
vn-tooltip="{{::category.name}}"
ng-click="$ctrl.category = {
@ -21,8 +18,9 @@
</vn-icon>
</vn-one>
</vn-horizontal>
<vn-horizontal pad-medium class="catalog-header">
<vn-autocomplete vn-one
<vn-horizontal class="input">
<vn-autocomplete
vn-one
vn-id="type"
data="$ctrl.itemTypes"
on-change="$ctrl.type = {
@ -45,10 +43,9 @@
</t-right-icons>
</vn-autocomplete>
</vn-horizontal>
<vn-horizontal pad-medium class="catalog-header">
<vn-one>
<vn-horizontal class="input">
<vn-textfield
vn-one
vn-id="search"
ng-keyUp="$ctrl.onSearch($event)"
label="Search tag"
@ -64,38 +61,33 @@
</i>
</t-right-icons>
</vn-textfield>
</vn-horizontal>
<vn-popover
vn-id="popover"
on-close="$ctrl.onPopoverClose()">
<vn-order-catalog-search-panel/>
</vn-popover>
</vn-one>
</vn-horizontal>
<vn-horizontal pad-medium style="flex-wrap: wrap">
<vn-horizontal class="chips" style="flex-wrap: wrap">
<vn-chip
ng-if="$ctrl.category"
vn-tooltip="Category"
on-remove="$ctrl.category = null" ellipsize>
on-remove="$ctrl.category = null"
ellipsize>
<span translate>{{$ctrl.category.value}}</span>
</vn-chip>
<vn-chip
ng-if="$ctrl.type"
vn-tooltip="Type"
on-remove="$ctrl.type = null" ellipsize>
on-remove="$ctrl.type = null"
ellipsize>
<span translate>{{$ctrl.type.value}}</span>
</vn-chip>
<vn-chip
ng-repeat="tag in $ctrl.tags"
vn-tooltip="Value"
on-remove="$ctrl.remove($index)" ellipsize>
on-remove="$ctrl.remove($index)"
ellipsize>
<span translate>{{::tag.value}}</span>
</vn-chip>
</vn-horizontal>
</vn-vertical>
</vn-card>
</vn-vertical>
</vn-horizontal>
</div>

View File

@ -2,7 +2,8 @@ import ngModule from '../module';
import './style.scss';
class Controller {
constructor($http, $scope, $state, $compile, $transitions, $window) {
constructor($element, $http, $scope, $state, $compile, $transitions) {
this.$element = $element;
this.$http = $http;
this.$scope = $scope;
this.$state = $state;
@ -13,6 +14,14 @@ class Controller {
this.tags = [];
}
$onInit() {
this.app.rightMenu = this.$element[0];
}
$onDestroy() {
this.app.rightMenu = null;
}
get order() {
return this._order;
}
@ -159,15 +168,16 @@ class Controller {
}
}
Controller.$inject = ['$http', '$scope', '$state', '$compile', '$transitions', '$window'];
Controller.$inject = ['$element', '$http', '$scope', '$state', '$compile', '$transitions'];
ngModule.component('vnCatalogFilter', {
template: require('./index.html'),
controller: Controller,
require: {
catalog: '^vnOrderCatalog',
app: '^vnApp'
},
bindings: {
order: '<',
},
}
});

View File

@ -17,7 +17,7 @@ describe('Order', () => {
$state.params.category = '{"id": 1, "value": "My Category"}';
$state.params.type = '{"id": 1, "value": "My type"}';
$state.current.name = 'my.current.state';
controller = $componentController('vnCatalogFilter', {$scope, $state});
controller = $componentController('vnCatalogFilter', {$element: null, $scope, $state});
controller.catalog = {
$scope: $scope,
getOrderBy: () => {

View File

@ -1,31 +1,44 @@
@import "colors";
@import "padding";
vn-catalog-filter {
vn-catalog-filter > div {
& > .input {
@extend .pad-medium-h;
border-color: $lines;
border-bottom: 1px solid rgba($lines, 0.5);
}
.item-category {
@extend .pad-small;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
vn-icon {
& > vn-one {
@extend .pad-small;
min-width: 33.33%;
text-align: center;
box-sizing: border-box;
& > vn-icon {
@extend .pad-small;
background-color: $secondary-font-color;
border-radius: 50%;
cursor: pointer;
i:before {
&.active {
background-color: $main-01;
color: #FFF
}
& > i:before {
font-size: 32pt;
width: 1em;
height: 1em;
}
}
vn-icon.active {
background-color: $main-01;
color: #FFF
}
& > vn-one {
width: 33.33%;
text-align: center
}
.chips {
flex-wrap: wrap;
@extend .pad-medium;
}
}

View File

@ -5,7 +5,7 @@
limit="20"
data="orders" auto-load="false">
</vn-crud-model>
<div class="index-block">
<div class="content-block">
<div class="vn-list">
<vn-card pad-medium-h>
<vn-searchbar auto-load="false"

View File

@ -1,5 +1,5 @@
<vn-main-block>
<div class="left-block">
<div class="left-menu">
<vn-ticket-descriptor ticket="$ctrl.ticket"></vn-ticket-descriptor>
<vn-left-menu></vn-left-menu>
</div>

View File

@ -1,5 +1,5 @@
<div margin-medium>
<div style="max-width: 70em; margin: 0 auto;" >
<div class="content-block">
<div compact>
<vn-card pad-large>
<vn-ticket-create-card vn-id="card" on-save=""></vn-ticket-create-card>
</vn-card>

View File

@ -6,7 +6,7 @@
order="shipped ASC"
auto-load="false">
</vn-crud-model>
<div class="index-block">
<div class="content-block">
<div class="vn-list">
<vn-card pad-medium-h>
<vn-horizontal>

View File

@ -52,21 +52,21 @@
</vn-one>
<vn-auto name="sales">
<h4 translate>Sale</h4>
<table class="vn-grid">
<thead>
<tr>
<th></th>
<th number translate>Item</th>
<th translate>Description</th>
<th number translate>Quantity</th>
<th number translate>Price</th>
<th number translate>Discount</th>
<th number translate>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="sale in $ctrl.summary.sales track by sale.id">
<td>
<vn-table class="vn-grid">
<vn-thead>
<vn-tr>
<vn-th></vn-th>
<vn-th number>Item</vn-th>
<vn-th>Description</vn-th>
<vn-th number>Quantity</vn-th>
<vn-th number>Price</vn-th>
<vn-th number>Discount</vn-th>
<vn-th number>Amount</vn-th>
</vn-tr>
</vn-thead>
<vn-tbody>
<vn-tr ng-repeat="sale in $ctrl.summary.sales track by sale.id">
<vn-td>
<a ui-sref="claim.card.basicData({id: sale.claimBeginning.claimFk})">
<vn-icon
ng-show="sale.claimBeginning.claimFk"
@ -82,25 +82,25 @@
vn-tooltip="Visible: {{::sale.visible || 0}} <br> {{::$ctrl.translate.instant('Available')}} {{::sale.available || 0}}">
</vn-icon>
<vn-icon ng-show="sale.reserved" icon="icon-reserva"></vn-icon>
</td>
<td number>
</vn-td>
<vn-td number>
<span
ng-click="$ctrl.showDescriptor($event, sale.itemFk)"
class="link" pointer>
{{sale.itemFk | zeroFill:6}}
</span>
</td>
<td><vn-fetched-tags max-length="6" item="sale.item" title="sale.concept"/></td>
<td number>{{::sale.quantity}}</td>
<td number>{{::sale.price | currency:'€':2}}</td>
<td number>{{::sale.discount}} %</td>
<td number>{{::sale.quantity * sale.price | currency:'€':2}}</td>
</tr>
<tr ng-if="!$ctrl.summary.sales" class="list list-element">
<td colspan="8" style="text-align: center" translate>No results</td>
</tr>
</tbody>
</table>
</vn-td>
<vn-td><vn-fetched-tags max-length="6" item="sale.item" title="sale.concept"/></vn-td>
<vn-td number>{{::sale.quantity}}</vn-td>
<vn-td number>{{::sale.price | currency:'€':2}}</vn-td>
<vn-td number>{{::sale.discount}} %</vn-td>
<vn-td number>{{::sale.quantity * sale.price | currency:'€':2}}</vn-td>
</vn-tr>
<vn-tr ng-if="!$ctrl.summary.sales" class="list list-element">
<vn-td colspan="8" style="text-align: center" translate>No results</vn-td>
</vn-tr>
</vn-tbody>
</vn-table>
</vn-auto>
<vn-one ng-if="$ctrl.summary.packagings.length != 0">
<h4 translate>Packages</h4>

View File

@ -6,7 +6,7 @@
data="travels"
auto-load="false">
</vn-crud-model>
<div class="index-block">
<div class="content-block">
<div class="vn-list">
<vn-card pad-medium-h>
<vn-searchbar

View File

@ -1,5 +1,5 @@
<vn-main-block>
<div class="left-block">
<div class="left-menu">
<vn-worker-descriptor worker="$ctrl.worker"></vn-worker-descriptor>
<vn-left-menu></vn-left-menu>
</div>

View File

@ -5,7 +5,7 @@
limit="20"
data="workers">
</vn-crud-model>
<div class="index-block">
<div class="content-block">
<div class="vn-list">
<vn-card pad-medium-h>
<vn-searchbar