verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 57 Releases Wiki Activity

estilos en vnMultiCheck

This commit is contained in:
Dani Herrero 2017-06-26 14:41:08 +02:00
parent 8b6e7fdc40
commit 4480431a08
4 changed files with 45 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/core/src/multi-check/multi-check.html
View File

@ -1,7 +1,19 @@
<vn-none class="multi-check {{$ctrl.className}}" tabindex="-1" ng-blur="$ctrl.showDropDown = false">
<vn-horizontal>
<vn-check vn-none model="$ctrl.checkAll"></vn-check>
<vn-icon vn-none icon="keyboard_arrow_down" ng-click="$ctrl.showDropDown = true"></vn-icon>
<vn-vertical vn-none class="multi-check {{$ctrl.className}}" tabindex="-1" ng-blur="$ctrl.showDropDown = false">
<vn-one>
<vn-horizontal>
<vn-none class="primaryCheckbox" ng-if="$ctrl.checkAll===0">
<vn-icon vn-none icon="check_box_outline_blank" ng-click="$ctrl.checkAll = 1"></vn-icon>
</vn-none>
<vn-none class="primaryCheckbox color" ng-if="$ctrl.checkAll===1">
<vn-icon vn-none icon="check_box" ng-click="$ctrl.checkAll = 0"></vn-icon>
</vn-none>
<vn-none class="primaryCheckbox color" ng-if="$ctrl.checkAll===2">
<vn-icon vn-none icon="indeterminate_check_box" ng-click="$ctrl.checkAll = 0"></vn-icon>
</vn-none>
<vn-icon vn-none class="arrow_down" icon="keyboard_arrow_down" ng-click="$ctrl.showDropDown = true"></vn-icon>
</vn-horizontal>
</vn-one>
<vn-one>
<vn-drop-down vn-none items="$ctrl.options" show="$ctrl.showDropDown" selected="$ctrl.type"></vn-drop-down>
</vn-horizontal>
</vn-none>
</vn-one>
</vn-vertical>

18
client/core/src/multi-check/multi-check.js
View File

@ -2,11 +2,8 @@ import {module} from '../module';
import './multi-check.scss';
export default class MultiCheck {
constructor($element, $document, $timeout) {
this.$element = $element;
this.$document = $document;
this.$timeout = $timeout;
this._checkAll = false;
constructor() {
this._checkAll = 0;
this.type = {};
this.labelType = null;
this.showDropDown = false;
@ -30,7 +27,7 @@ export default class MultiCheck {
checked = el[this.labelType] ? true : false;
}
} else {
checked = this.checkAll;
checked = this.checkAll === 1;
}
el.checked = checked;
}
@ -42,29 +39,28 @@ export default class MultiCheck {
switch (this.type.id) {
case 'all':
this.labelType = null;
this.checkAll = true;
this.checkAll = 1;
break;
case 'any':
this.labelType = null;
this.checkAll = false;
this.checkAll = 0;
break;
default:
this.labelType = this.type.id;
this.checkAll = false;
this.checkAll = 2;
break;
}
this.type = {};
}
}
}
MultiCheck.$inject = ['$element', '$document', '$timeout'];
MultiCheck.$inject = [];
module.component('vnMultiCheck', {
template: require('./multi-check.html'),
controller: MultiCheck,
bindings: {
options: '<',
container: '@',
models: '=',
className: '@?'
}

22
client/core/src/multi-check/multi-check.scss
View File

@ -1,7 +1,4 @@
vn-multi-check {
vn-drop-down{
margin-top: 23px;
}
vn-icon{
cursor: pointer;
}
@ -9,4 +6,23 @@ vn-multi-check {
outline: none;
border: none;
}
.primaryCheckbox {
vn-icon{
font-size: 22px;
margin-left: -4px;
i{
color: rgba(0,0,0,.54);
}
}
&.color {
i{
color: rgb(255,152,0);
}
}
}
.arrow_down{
i{
padding-top: 8px;
}
}
}

2
client/production/src/index/index.html
View File

@ -53,7 +53,7 @@
<vn-grid-header on-order="$ctrl.onOrder(field, order)">
<vn-none min-none></vn-none>
<vn-colum-header vn-none min-none>
<vn-multi-check container=".list-content" models="$ctrl.tickets" options="[{id:'all',name:'Todos'},{id:'any',name:'Ninguno'},{id:'problem',name:'Con incidencia'},{id:'no-problem',name:'Sin incidencia'}]"></vn-multi-check>
<vn-multi-check models="$ctrl.tickets" options="[{id:'all',name:'Todos'},{id:'any',name:'Ninguno'},{id:'problem',name:'Con incidencia'},{id:'no-problem',name:'Sin incidencia'}]"></vn-multi-check>
</vn-colum-header>
<vn-colum-header vn-one pad-medium-h field="ticketFk" text="ID Ticket"></vn-colum-header>
<vn-colum-header vn-two pad-medium-h field="agency" text="Agency"></vn-colum-header>