Styles fixed

This commit is contained in:
Juan Ferrer 2019-02-21 10:10:38 +01:00
parent 8c401b6921
commit e42da544cd
8 changed files with 83 additions and 95 deletions

View File

@ -23,7 +23,7 @@ export default {
clientsIndex: {
searchClientInput: `${components.vnTextfield}`,
searchButton: `vn-searchbar vn-icon[icon="search"]`,
searchResult: `vn-item-client a`,
searchResult: `vn-client-index .vn-list-item`,
createClientButton: `${components.vnFloatButton}`,
othersButton: `vn-left-menu li[name="Others"] > a`
},

View File

@ -152,43 +152,45 @@ vn-tool-bar {
.vn-list {
max-width: 36em;
margin: 0 auto;
}
a.vn-list-item {
@extend %clickable;
}
.vn-list-item {
padding: $pad-medium;
border-bottom: $border-thin solid $color-spacer;
display: block;
text-decoration: none;
color: inherit;
& > vn-horizontal {
& > vn-one {
overflow: hidden;
}
& > .buttons {
align-items: center;
vn-icon {
opacity: .4;
color: $color-main;
margin-left: .5em;
transition: opacity 250ms ease-out;
font-size: 2em;
&:hover {
opacity: 1;
a.vn-list-item {
@extend %clickable;
}
.vn-list-item {
border-bottom: $border-thin solid $color-spacer;
display: block;
text-decoration: none;
color: inherit;
& > vn-horizontal {
padding: $pad-medium;
& > vn-one {
overflow: hidden;
}
& > .buttons {
align-items: center;
vn-icon {
opacity: .4;
color: $color-main;
margin-left: .5em;
transition: opacity 250ms ease-out;
font-size: 2em;
&:hover {
opacity: 1;
}
}
}
}
}
}
vn-empty-rows.vn-list-item {
text-align: center;
padding: 1.5em;
box-sizing: border-box;
vn-empty-rows {
display: block;
text-align: center;
padding: 1.5em;
box-sizing: border-box;
}
}
/** START - FORM ELEMENTS DISABLED **/

View File

@ -17,11 +17,42 @@
</vn-searchbar>
</vn-card>
<vn-card margin-medium-v>
<vn-item-client
class="searchResult"
<a
ng-repeat="client in clients track by client.id"
client="::client">
</vn-item-client>
ui-sref="client.card.summary({ id: {{::client.id}} })"
translate-attr="{title: 'View client'}"
class="vn-list-item searchResult">
<vn-horizontal ng-click="$ctrl.onClick($event)">
<vn-one>
<h6>{{::client.name}}</h6>
<vn-label-value label="Id"
value="{{::client.id}}">
</vn-label-value>
<vn-label-value label="Phone"
value="{{::client.phone | phone}}">
</vn-label-value>
<vn-label-value label="Town/City"
value="{{::client.city}}">
</vn-label-value>
<vn-label-value label="Email"
value="{{::client.email}}">
</vn-label-value>
</vn-one>
<vn-horizontal class="buttons">
<vn-icon
ng-click="$ctrl.openSummary(client, $event)"
vn-tooltip="Preview"
icon="desktop_windows">
</vn-icon>
</vn-horizontal>
</vn-horizontal>
</a>
<vn-empty-rows translate ng-if="model.data.length === 0">
No results
</vn-empty-rows>
<vn-empty-rows translate ng-if="model.data === null">
Enter a new search
</vn-empty-rows>
</vn-card>
<vn-pagination model="model"></vn-pagination>
</div>

View File

@ -1,5 +1,4 @@
import ngModule from '../module';
import './item-client';
export default class Controller {
constructor($scope, $stateParams) {
@ -33,7 +32,13 @@ export default class Controller {
}
}
openSummary(client) {
onClick(event) {
if (event.defaultPrevented)
event.stopImmediatePropagation();
}
openSummary(client, event) {
event.preventDefault();
this.clientSelected = client;
this.$.dialogSummaryClient.show();
}

View File

@ -1,29 +0,0 @@
<a
ui-sref="client.card.summary({ id: {{::$ctrl.client.id}} })"
translate-attr="{title: 'View client'}"
class="vn-list-item">
<vn-horizontal ng-click="$ctrl.onClick($event)">
<vn-one>
<h6>{{::$ctrl.client.name}}</h6>
<vn-label-value label="Id"
value="{{::$ctrl.client.id}}">
</vn-label-value>
<vn-label-value label="Phone"
value="{{::$ctrl.client.phone | phone}}">
</vn-label-value>
<vn-label-value label="Town/City"
value="{{::$ctrl.client.city}}">
</vn-label-value>
<vn-label-value label="Email"
value="{{::$ctrl.client.email}}">
</vn-label-value>
</vn-one>
<vn-horizontal class="buttons">
<vn-icon
ng-click="$ctrl.preview($event)"
vn-tooltip="Preview"
icon="desktop_windows">
</vn-icon>
</vn-horizontal>
</vn-horizontal>
</a>

View File

@ -1,24 +0,0 @@
import ngModule from '../module';
class Controller {
onClick(event) {
if (event.defaultPrevented)
event.stopImmediatePropagation();
}
preview(event) {
event.preventDefault();
this.list.openSummary(this.client);
}
}
ngModule.component('vnItemClient', {
template: require('./item-client.html'),
controller: Controller,
bindings: {
client: '<'
},
require: {
list: '^vnClientIndex'
}
});

View File

@ -1,3 +0,0 @@
vn-item-client {
display: block;
}

View File

@ -48,6 +48,12 @@
</vn-horizontal>
</vn-horizontal>
</a>
<vn-empty-rows translate ng-if="model.data.length === 0">
No results
</vn-empty-rows>
<vn-empty-rows translate ng-if="model.data === null">
Enter a new search
</vn-empty-rows>
</vn-card>
<vn-pagination model="model"></vn-pagination>
</div>