verdnatura/salix
verdnatura
/
salix
3
5
Fork 2
Code Issues Pull Requests 68 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 './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', {
template: require('./drop-down.html'),
// controller: DropDown,
controller: DropDown,
bindings: {
items: '<',
show: '<',
selected: '='
selected: '=',
top: '<?'
},
controllerAs: 'dd'
});

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

@ -1,4 +1,4 @@
<div class="icon-menu">
<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>

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

@ -6,6 +6,7 @@ export default class IconMenu {
this.$http = $http;
this.$timeout = $timeout;
this._showDropDown = false;
this._pos = undefined;
}
get showDropDown() {
return this._showDropDown;
@ -14,6 +15,13 @@ export default class IconMenu {
this._showDropDown = value;
}
get pos() {
return this._pos;
}
set pos(value) {
this._pos = value;
}
getItems() {
this.$http.get(this.url).then(
json => {
@ -26,9 +34,10 @@ export default class IconMenu {
this.getItems();
}
this.$element.bind('mouseover', () => {
this.$element.bind('mouseover', e => {
this.$timeout(() => {
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'];

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

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

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

@ -49,7 +49,7 @@
</vn-none>
<vn-label vn-one text="ID Ticket"></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="Estado"></vn-label>
<vn-label vn-one text="Lineas"></vn-label>
@ -57,23 +57,23 @@
<vn-label vn-one text="Cajas"></vn-label>
<vn-none></vn-none>
</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-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-check model="ticket.cheched"></vn-check>
</vn-none>
<vn-one>{{::ticket.ticket}}</vn-one>
<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.state}}</vn-one>
<vn-one>{{::ticket.lines}}</vn-one>
<vn-one>{{::ticket.m3}}</vn-one>
<vn-one>{{::ticket.boxes}}</vn-one>
<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-horizontal>
<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-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 class='list list-header'>
<vn-two margin-medium-right>Población</vn-two>
<vn-one margin-medium-right>Provincia</vn-one>
<vn-one margin-medium-right>ID_Cliente</vn-one>
<vn-two>Comercial</vn-two>
</vn-horizontal>
</vn-one>
<vn-one>
<vn-horizontal class="list list-body">
<vn-one>{{ticket.city}}</vn-one>
<vn-one>{{ticket.province}}</vn-one>
<vn-one>{{ticket.client}}</vn-one>
<vn-one>{{ticket.salePerson}}</vn-one>
<vn-horizontal class='list list-body'>
<vn-two margin-medium-right>{{::ticket.city | ucwords}}</vn-two>
<vn-one margin-medium-right>{{::ticket.province | ucwords}}</vn-one>
<vn-one margin-medium-right>{{::ticket.client}}</vn-one>
<vn-two>{{::ticket.salePerson | ucwords}}</vn-two>
</vn-horizontal>
</vn-one>
</vn-vertical>

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

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

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

@ -1,5 +1,6 @@
@import "padding";
@import "margin";
@import "colors";
.form {
height: 100%;
@ -38,12 +39,12 @@ html [vn-left], .vn-left{
}
.list-header{
border-bottom: 3px solid #9D9D9D;
border-bottom: 3px solid $color-medium-grey;
font-weight: bold;
}
.list-footer{
border-top: 3px solid #9D9D9D;
border-top: 3px solid $color-medium-grey;
font-weight: bold;
}
.list > vn-one, .list > [vn-one], .list > [vn-two], .list > vn-two{
@ -54,9 +55,25 @@ html [vn-left], .vn-left{
}
.list-body{
padding: 4px 0px;
border-bottom: 1px solid #9D9D9D;
border-bottom: 1px solid $color-medium-grey;
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() {
return del(`${buildDir}/*`, {force: true});
return del([`${buildDir}/*`, `!${buildDir}/templates`], {force: true});
});
// Spliting