verdnatura/salix
verdnatura
/
salix
3
5
Fork 2
Code Issues Pull Requests 72 Releases Wiki Activity

tooltip admite plantilla html, icon-menu forzado de posicion en dropDown

This commit is contained in:
Dani Herrero 2017-06-15 07:45:01 +02:00
parent 16302e1f9a
commit 9072b100f9
9 changed files with 146 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/core/src/drop-down/drop-down.js
View File

@ -1,16 +1,27 @@
import {module} from '../module'; import {module} from '../module';
import './style.scss'; import './style.scss';
/* export default class DropDown { export default class DropDown {
}*/ constructor($element, $window) {
this.$element = $element;
this.$window = $window;
}
$onChanges(changesObj) {
if (changesObj.show && changesObj.top && changesObj.top.currentValue) {
this.$element.css('top', changesObj.top.currentValue + 'px');
}
}
}
DropDown.$inject = ['$element', '$window'];
module.component('vnDropDown', { module.component('vnDropDown', {
template: require('./drop-down.html'), template: require('./drop-down.html'),
// controller: DropDown, controller: DropDown,
bindings: { bindings: {
items: '<', items: '<',
show: '<', show: '<',
selected: '=' selected: '=',
top: '<?'
}, },
controllerAs: 'dd' controllerAs: 'dd'
}); });

2
client/core/src/icon-menu/icon-menu.html
View File

@ -1,4 +1,4 @@
<div class="icon-menu"> <div class="icon-menu">
<vn-icon-button icon="{{im.icon}}"></vn-icon-button> <vn-icon-button icon="{{im.icon}}"></vn-icon-button>
<vn-drop-down items="im.items" show="im.showDropDown" selected="im.selected"></vn-drop-down> <vn-drop-down items="im.items" show="im.showDropDown" selected="im.selected" top="im.pos.bottom"></vn-drop-down>
</div> </div>

15
client/core/src/icon-menu/icon-menu.js
View File

@ -6,6 +6,7 @@ export default class IconMenu {
this.$http = $http; this.$http = $http;
this.$timeout = $timeout; this.$timeout = $timeout;
this._showDropDown = false; this._showDropDown = false;
this._pos = undefined;
} }
get showDropDown() { get showDropDown() {
return this._showDropDown; return this._showDropDown;
@ -14,6 +15,13 @@ export default class IconMenu {
this._showDropDown = value; this._showDropDown = value;
} }
get pos() {
return this._pos;
}
set pos(value) {
this._pos = value;
}
getItems() { getItems() {
this.$http.get(this.url).then( this.$http.get(this.url).then(
json => { json => {
@ -26,9 +34,10 @@ export default class IconMenu {
this.getItems(); this.getItems();
} }
this.$element.bind('mouseover', () => { this.$element.bind('mouseover', e => {
this.$timeout(() => { this.$timeout(() => {
this.showDropDown = true; this.showDropDown = true;
this.pos = e.target.getBoundingClientRect();
}); });
}); });
@ -38,6 +47,10 @@ export default class IconMenu {
}); });
}); });
} }
$onDestroy() {
this.$element.unbind('mouseover');
this.$element.unbind('mouseout');
}
} }
IconMenu.$inject = ['$element', '$http', '$timeout']; IconMenu.$inject = ['$element', '$http', '$timeout'];

40
client/core/src/tooltip/tooltip.js
View File

@ -1,12 +1,18 @@
import {module} from '../module'; import {module} from '../module';
import './style.css'; import './style.css';
tooltip.$inject = ['$document', '$compile', '$sce', '$templateCache', '$http']; tooltip.$inject = ['$document', '$compile', '$interpolate', '$sce', '$templateCache', '$http', '$q'];
function tooltip($document, $compile, $sce, $templateCache, $http) { function tooltip($document, $compile, $interpolate, $sce, $templateCache, $http, $q) {
function getTemplate(tooltipTemplateUrl) { var promise;
function _getTemplate(tooltipTemplateUrl) {
var template = $templateCache.get(tooltipTemplateUrl); var template = $templateCache.get(tooltipTemplateUrl);
if (typeof template === 'undefined') { if (typeof template === 'undefined') {
template = $http.get(tooltipTemplateUrl).then(function onGetTemplateSuccess(response) { template = $http.get(tooltipTemplateUrl).then(function onGetTemplateSuccess(response) {
if (promise) {
promise.resolve(response.data);
}
promise = undefined;
return response.data; return response.data;
}); });
$templateCache.put(tooltipTemplateUrl, template); $templateCache.put(tooltipTemplateUrl, template);
@ -14,11 +20,23 @@ function tooltip($document, $compile, $sce, $templateCache, $http) {
return template; return template;
} }
function getTemplate(tooltipTemplateUrl) {
var _promise = $q.defer();
var template = _getTemplate(tooltipTemplateUrl);
if (template) {
_promise.resolve(template);
} else {
promise = _promise;
}
return _promise.promise;
}
return { return {
restrict: 'A', restrict: 'A',
priority: -1, priority: -1,
link: function(scope, element, attrs) { link: function(scope, element, attrs) {
var tip = $compile('<div class="mdl-shadow--2dp" ng-class="tipClass"><div class="tooltip-text">{{ text }}</div><div ng-if="isHtmlContent" ng-bind-html="htmlContent"></div><div class="tooltip-arrow"></div></div>')(scope); var tipHtml = '<div class="mdl-shadow--2dp" ng-class="tipClass"><div class="tooltip-text">{{text}}</div><div ng-if="isHtmlContent" ng-bind-html="htmlContent"></div><div class="tooltip-arrow"></div></div>';
var tip;
var tipClassName = 'tooltip'; var tipClassName = 'tooltip';
var tipActiveClassName = 'tooltip-show'; var tipActiveClassName = 'tooltip-show';
@ -28,13 +46,17 @@ function tooltip($document, $compile, $sce, $templateCache, $http) {
if (attrs.tooltipHtml) { if (attrs.tooltipHtml) {
scope.isHtmlContent = true; scope.isHtmlContent = true;
scope.htmlContent = $sce.trustAsHtml(attrs.tooltipHtml); scope.htmlContent = $sce.trustAsHtml(attrs.tooltipHtml);
_compileTip();
} else if (attrs.tooltipTemplate) { } else if (attrs.tooltipTemplate) {
var template = getTemplate(attrs.tooltipTemplate); getTemplate(attrs.tooltipTemplate).then(template => {
scope.isHtmlContent = true; scope.isHtmlContent = true;
scope.htmlContent = $sce.trustAsHtml(template); scope.htmlContent = $sce.trustAsHtml($interpolate(template)(scope));
_compileTip();
});
} else { } else {
scope.isHtmlContent = false; scope.isHtmlContent = false;
scope.htmlContent = null; scope.htmlContent = null;
_compileTip();
} }
if (attrs.tooltipPosition) { if (attrs.tooltipPosition) {
@ -43,8 +65,13 @@ function tooltip($document, $compile, $sce, $templateCache, $http) {
scope.tipClass.push('tooltip-down'); scope.tipClass.push('tooltip-down');
} }
function _compileTip() {
tip = $compile(tipHtml)(scope);
$document.find('body').append(tip); $document.find('body').append(tip);
_bindEvents();
}
function _bindEvents() {
element.bind('mouseover', function(e) { element.bind('mouseover', function(e) {
tip.addClass(tipActiveClassName); tip.addClass(tipActiveClassName);
@ -91,6 +118,7 @@ function tooltip($document, $compile, $sce, $templateCache, $http) {
tip.remove(); tip.remove();
}); });
} }
}
}; };
} }

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

@ -49,7 +49,7 @@
</vn-none> </vn-none>
<vn-label vn-one text="ID Ticket"></vn-label> <vn-label vn-one text="ID Ticket"></vn-label>
<vn-label vn-two text="Agencia"></vn-label> <vn-label vn-two text="Agencia"></vn-label>
<vn-label vn-two text="Trabajador"></vn-label> <vn-label vn-two text="Comercial"></vn-label>
<vn-label vn-one text="Hora"></vn-label> <vn-label vn-one text="Hora"></vn-label>
<vn-label vn-one text="Estado"></vn-label> <vn-label vn-one text="Estado"></vn-label>
<vn-label vn-one text="Lineas"></vn-label> <vn-label vn-one text="Lineas"></vn-label>
@ -57,23 +57,23 @@
<vn-label vn-one text="Cajas"></vn-label> <vn-label vn-one text="Cajas"></vn-label>
<vn-none></vn-none> <vn-none></vn-none>
</vn-horizontal> </vn-horizontal>
<vn-horizontal vn-one class="list list-body" ng-repeat="ticket in $ctrl.tickets track by $index"> <vn-horizontal vn-one class="list list-body" ng-repeat="ticket in $ctrl.tickets track by $index" ng-class="{warning: ticket.problems==='RIESGO'}">
<vn-none> <vn-none>
<vn-icon icon="report_problem" ng-if="ticket.problem" vn-tooltip="{{ticket.problem}}" tooltip-position="right"></vn-icon> <vn-icon margin-small-left icon="report_problem" ng-if="ticket.problems" vn-tooltip="{{::ticket.problems}}" tooltip-position="right"></vn-icon>
</vn-none> </vn-none>
<vn-none> <vn-none>
<vn-check model="ticket.cheched"></vn-check> <vn-check model="ticket.cheched"></vn-check>
</vn-none> </vn-none>
<vn-one>{{::ticket.ticket}}</vn-one> <vn-one>{{::ticket.ticket}}</vn-one>
<vn-two>{{::ticket.agency}}</vn-two> <vn-two>{{::ticket.agency}}</vn-two>
<vn-two>{{::ticket.worker | ucwords}}</vn-two> <vn-two>{{::ticket.salePerson | ucwords}}</vn-two>
<vn-one>{{::ticket.hour}}</vn-one> <vn-one>{{::ticket.hour}}</vn-one>
<vn-one>{{ticket.state}}</vn-one> <vn-one>{{ticket.state}}</vn-one>
<vn-one>{{::ticket.lines}}</vn-one> <vn-one>{{::ticket.lines}}</vn-one>
<vn-one>{{::ticket.m3}}</vn-one> <vn-one>{{::ticket.m3}}</vn-one>
<vn-one>{{::ticket.boxes}}</vn-one> <vn-one>{{::ticket.boxes}}</vn-one>
<vn-none> <vn-none>
<vn-icon icon="more" vn-tooltip tooltip-html="<vn-vertical><vn-one><vn-horizontal class='list list-header'><vn-one>Población</vn-one><vn-one>Provincia</vn-one><vn-one>ID_Cliente</vn-one><vn-one>Comercial</vn-one></vn-horizontal></vn-one><vn-one><vn-horizontal class='list list-body'><vn-one>{{ticket.city | ucwords}}</vn-one><vn-one>{{ticket.province | ucwords}}</vn-one><vn-one>{{ticket.client}}</vn-one><vn-one>{{ticket.salePerson | ucwords}}</vn-one></vn-horizontal></vn-one></vn-vertical>" tooltip-position="left"></vn-icon> <vn-icon icon="more" vn-tooltip tooltip-template="/static/templates/tooltip.locator.tpl.html" tooltip-position="left"></vn-icon>
</vn-none> </vn-none>
</vn-horizontal> </vn-horizontal>
<vn-horizontal vn-one margin-large-bottom class="list list-footer"> <vn-horizontal vn-one margin-large-bottom class="list list-footer">

24
client/production/src/index/more-info-tooltip.tpl.html
View File

@ -1,18 +1,14 @@
<vn-vertical> <vn-vertical>
<vn-one> <vn-horizontal class='list list-header'>
<vn-horizontal class="list list-header"> <vn-two margin-medium-right>Población</vn-two>
<vn-one>Población</vn-one> <vn-one margin-medium-right>Provincia</vn-one>
<vn-one>Provincia</vn-one> <vn-one margin-medium-right>ID_Cliente</vn-one>
<vn-one>ID_Cliente</vn-one> <vn-two>Comercial</vn-two>
<vn-one>Comercial</vn-one>
</vn-horizontal> </vn-horizontal>
</vn-one> <vn-horizontal class='list list-body'>
<vn-one> <vn-two margin-medium-right>{{::ticket.city | ucwords}}</vn-two>
<vn-horizontal class="list list-body"> <vn-one margin-medium-right>{{::ticket.province | ucwords}}</vn-one>
<vn-one>{{ticket.city}}</vn-one> <vn-one margin-medium-right>{{::ticket.client}}</vn-one>
<vn-one>{{ticket.province}}</vn-one> <vn-two>{{::ticket.salePerson | ucwords}}</vn-two>
<vn-one>{{ticket.client}}</vn-one>
<vn-one>{{ticket.salePerson}}</vn-one>
</vn-horizontal> </vn-horizontal>
</vn-one>
</vn-vertical> </vn-vertical>

1
client/salix/src/styles/colors.scss
View File

@ -5,3 +5,4 @@ $color-white: white;
$color-dark: #3c393b; $color-dark: #3c393b;
$color-dark-grey: #424242; $color-dark-grey: #424242;
$color-light-grey: #e6e6e6; $color-light-grey: #e6e6e6;
$color-medium-grey: #9D9D9D;

27
client/salix/src/styles/misc.scss
View File

@ -1,5 +1,6 @@
@import "padding"; @import "padding";
@import "margin"; @import "margin";
@import "colors";
.form { .form {
height: 100%; height: 100%;
@ -38,12 +39,12 @@ html [vn-left], .vn-left{
} }
.list-header{ .list-header{
border-bottom: 3px solid #9D9D9D; border-bottom: 3px solid $color-medium-grey;
font-weight: bold; font-weight: bold;
} }
.list-footer{ .list-footer{
border-top: 3px solid #9D9D9D; border-top: 3px solid $color-medium-grey;
font-weight: bold; font-weight: bold;
} }
.list > vn-one, .list > [vn-one], .list > [vn-two], .list > vn-two{ .list > vn-one, .list > [vn-one], .list > [vn-two], .list > vn-two{
@ -54,9 +55,25 @@ html [vn-left], .vn-left{
} }
.list-body{ .list-body{
padding: 4px 0px; padding: 4px 0px;
border-bottom: 1px solid #9D9D9D; border-bottom: 1px solid $color-medium-grey;
i { i {
color: #ffa410; color: $color-orange;
}
}
.list-body:last-child{
border: none;
}
.list-body.warning{
background-color: $color-orange;
color:$color-white;
font-weight: bold;
i {
color: $color-white;
}
.mdl-checkbox.is-checked .mdl-checkbox__box-outline{
border-color: $color-white;
}
.mdl-checkbox.is-checked .mdl-checkbox__tick-outline{
background-color: $color-white;
} }
} }

2
gulpfile.js
View File

@ -58,7 +58,7 @@ gulp.task('services', ['copy'], function() {
}); });
gulp.task('clean', function() { gulp.task('clean', function() {
return del(`${buildDir}/*`, {force: true}); return del([`${buildDir}/*`, `!${buildDir}/templates`], {force: true});
}); });
// Spliting // Spliting