#82 Non-generated files removed from generated directory, vnTooltip refactor

client/client/src/address-edit/address-edit.html

@@ -87,7 +87,6 @@
                         pointer 
                         medium-grey
                         vn-tooltip="Remove note"
-                        tooltip-position = "left"
                         icon="remove_circle_outline"
                         ng-click="$ctrl.removeObservation($index)">
                     </vn-icon>  
@@ -99,7 +98,6 @@
                 pointer
                 vn-bind="+"
                 vn-tooltip="Add note"
-                tooltip-position = "right"
                 icon="add_circle"
                 ng-if="observationsTypes.model.length > $ctrl.observations.length" 
                 ng-click="$ctrl.addObservation()">

client/client/src/addresses/addresses.html

@@ -7,16 +7,24 @@
                 ng-class="{'bg-dark-item': address.isDefaultAddress,'bg-opacity-item': !address.isActive && !address.isDefaultAddress}">
                 <vn-horizontal style="align-items: center;">
                     <vn-none pad-medium-h>
-                        <i class="material-icons" orange ng-if="address.isDefaultAddress">star</i>
+                        <i class="material-icons"
-                        <i class="material-icons" orange
+                            orange
-                            vn-tooltip="Active first to set as default" 
+                            ng-if="address.isDefaultAddress">
-                            tooltip-position="left"  
+                            star
-                            ng-if="!address.isActive">star_border</i>
+                        </i>
-                        <i class="material-icons pointer" orange
+                        <i class="material-icons"
+                            orange
+                            ng-if="!address.isActive"
+                            vn-tooltip="Active first to set as default">
+                            star_border
+                        </i>
+                        <i class="material-icons pointer"
+                            orange
                             ng-if="address.isActive && !address.isDefaultAddress" 
                             vn-tooltip="Set as default"
-                            tooltip-position="left" 
+                            ng-click="$ctrl.setDefault(address)">
-                            ng-click="$ctrl.setDefault(address)">star_border</i>
+                            star_border
+                        </i>
                     </vn-none>
                     <vn-one border-solid-right>
                         <div><b>{{::address.nickname}}</b></div>

client/client/src/credit-classification-list/credit-classification-list.html

@@ -8,7 +8,6 @@
                         <i class="material-icons pointer" 
                             ng-if="!classification.finished" 
                             vn-tooltip="Close contract"
-                            tooltip-position="left" 
                             ng-click="$ctrl.closeContract(classification)">lock_outline</i>
                     </vn-none>
                     <vn-one border-solid-right>
@@ -35,7 +34,7 @@
                         </vn-horizontal>
                     </vn-vertical>
                     <a vn-auto ui-sref="clientCard.creditInsurance.list({classificationId: {{classification.id}}})">
-                        <vn-icon-button icon="desktop_windows" vn-tooltip="List classifications" tooltip-position="left"></vn-icon-button>
+                        <vn-icon-button icon="desktop_windows" vn-tooltip="List classifications"></vn-icon-button>
                     </a>
                 </vn-horizontal>
             </vn-one>
@@ -44,7 +43,6 @@
     <vn-float-button
         ng-if="$ctrl.canCreateNew()"
         vn-tooltip="New contract"
-        tooltip-position="left"
         fixed-bottom-right
         ui-sref="clientCard.creditClassification.create"
         icon="add"

client/client/src/credit-insurance-list/credit-insurance-list.html

@@ -26,6 +26,6 @@
     <!-- <vn-auto-paging vn-one margin-large-top index="index" total="index.model.count" items="$ctrl.instances"></vn-auto-paging> -->
 </vn-vertical>
 <a ui-sref="clientCard.creditInsurance.create({classificationId: {{index.params.classificationId}}})" 
-    fixed-bottom-right vn-tooltip="New classification"  vn-bind="+" tooltip-position="left" ng-if="!$ctrl.isClosed">
+    fixed-bottom-right vn-tooltip="New classification"  vn-bind="+" ng-if="!$ctrl.isClosed">
     <vn-float-button icon="add"></vn-float-button>
 </a>

client/client/src/descriptor/descriptor.html

@@ -29,31 +29,26 @@
     <vn-horizontal pad-medium-bottom class="footer">
         <vn-icon
             vn-tooltip="Client inactive"
-            tooltip-position = "right"
             icon="icon-disabled"
             ng-class="{bright: $ctrl.client.isActive == false}">
         </vn-icon>
         <vn-icon
             vn-tooltip="Client Frozen"
-            tooltip-position = "right"
             icon="icon-frozen"
             ng-class="{bright: $ctrl.client.isFreezed == true}">
         </vn-icon>
         <vn-icon
             vn-tooltip="Web Account inactive"
-            tooltip-position = "right"
             icon="icon-noweb"
             ng-class="{bright: $ctrl.client.account.active == false}">
         </vn-icon>
         <vn-icon
             vn-tooltip="Client has debt"
-            tooltip-position = "right"
             icon="icon-risk"
             ng-class="{bright: $ctrl.clientDebt < 0}">
         </vn-icon>
         <vn-icon
             vn-tooltip="Client not checked"
-            tooltip-position = "right"
             icon="icon-no036"
             ng-class="{bright: $ctrl.client.isTaxDataChecked == false}">
     </vn-icon>

client/core/src/components/step-control/step-control.html

@@ -3,7 +3,6 @@
         <section class="step" ng-repeat="step in $ctrl._steps track by $index">
             <section class="circle" 
                 vn-tooltip="{{::step.name}}"
-                tooltip-position="down"
                 ng-click="$ctrl.currentState = step.state"
                 ng-class="{active: step.state == $ctrl.currentState}">
             </section>

client/core/src/components/textfield/textfield.html

@@ -16,8 +16,7 @@
     <div class="mdl-chip__action">
         <i class="material-icons"
             ng-if="$ctrl.hasInfo"
-            vn-tooltip="{{$ctrl.info}}"
+            vn-tooltip="{{$ctrl.info}}">
-            tooltip-position="up">
             info_outline
         </i>
         <i class="material-icons pointer"

client/core/src/components/tooltip/style.css

@@ -1,60 +0,0 @@
-.tooltip {
-    display: none;
-    position: fixed;
-    background-color: #fff;
-    padding: 20px;
-    color: #424242;
-    z-index: 999;
-    border: 1px solid #A7A7A7;
-    text-align: justify;
-}
-
-.tooltip-show {
-    display: inherit;
-}
-
-.tooltip-arrow {
-    position: absolute;
-    width: 0;
-    height: 0; 
-}
-
-.tooltip-text{
-    max-width: 320px;
-}
-
-.tooltip-down .tooltip-arrow {
-    top: -15px;
-    left: 50%;
-    margin-left: -10px;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-bottom: 15px solid #A7A7A7;
-}
-
-.tooltip-up .tooltip-arrow {
-    bottom: -15px;
-    left: 50%;
-    margin-left: -10px;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-top: 15px solid #A7A7A7;
-}
-
-.tooltip-right .tooltip-arrow {
-    left: -15px;
-    top: 50%;
-    margin-top: -10px;
-    border-top: 10px solid transparent;
-    border-bottom: 10px solid transparent;
-    border-right: 15px solid #A7A7A7;
-}
-
-.tooltip-left .tooltip-arrow {
-    right: -15px;
-    top: 50%;
-    margin-top: -10px;
-    border-top: 10px solid transparent;
-    border-bottom: 10px solid transparent;
-    border-left: 15px solid #A7A7A7;
-}

client/core/src/components/tooltip/style.scss

@@ -0,0 +1,23 @@
+.vn-tooltip {
+    display: none;
+    position: fixed;
+    z-index: 150;
+    background-color: #333;
+    color: white;
+    border-radius: .2em;
+
+    &.show {
+        display: inherit;
+    }
+    &.text {
+        max-width: 320px;
+        padding: 15px;
+    }
+    & > .arrow {
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-color: transparent;
+    }
+}

client/core/src/components/tooltip/tooltip.html

@@ -0,0 +1,3 @@
+<div>
+    <div class="body" ng-transclude></div>
+</div>

client/core/src/components/tooltip/tooltip.js

@@ -1,159 +1,250 @@
 import ngModule from '../../module';
-import './style.css';
+import Component from '../../lib/component';
+import './style.scss';
 
-tooltip.$inject = ['$document', '$compile', '$interpolate', '$sce', '$templateCache', '$http', '$q'];
+let positions = ['left', 'right', 'up', 'down'];
-function tooltip($document, $compile, $interpolate, $sce, $templateCache, $http, $q) {
-    var promise;
 
-    function _getTemplate(tooltipTemplateUrl) {
+/**
-        var template = $templateCache.get(tooltipTemplateUrl);
+ * A simple tooltip.
-        if (typeof template === 'undefined') {
+ *
-            template = $http.get(tooltipTemplateUrl).then(function onGetTemplateSuccess(response) {
+ * @property {String} position The relative position to the parent
-                if (promise) {
+ */
-                    promise.resolve(response.data);
+export default class Tooltip extends Component {
-                }
+    constructor($element, $scope, $timeout) {
-                promise = undefined;
+        super($element, $scope);
-                return response.data;
+        this.$timeout = $timeout;
-            });
+        $element.addClass('vn-tooltip mdl-shadow--4dp');
-            $templateCache.put(tooltipTemplateUrl, template);
+        this.position = 'down';
-        }
-        return template;
     }
 
-    function getTemplate(tooltipTemplateUrl) {
+    /**
-        var _promise = $q.defer();
+     * Shows the tooltip.
-        var template = _getTemplate(tooltipTemplateUrl);
+     *
-        if (template) {
+     * @param {HTMLElement} parent The parent element
-            _promise.resolve(template);
+     */
+    show(parent) {
+        this.parent = parent;
+        this.$element.addClass('show');
+        this.relocate();
+        this.relocateTimeout = this.$timeout(() => this.relocate(), 200);
+    }
+
+    /**
+     * Hides the tooltip.
+     */
+    hide() {
+        this.$element.removeClass('show');
+
+        if (this.relocateTimeout) {
+            this.$timeout.cancel(this.relocateTimeout);
+            this.relocateTimeout = null;
+        }
+    }
+
+    /**
+     * Repositions the tooltip acording to it's own size and parent location.
+     */
+    relocate() {
+        let axis;
+        let position = this.position;
+
+        if (positions.indexOf(position) == -1)
+            position = 'down';
+
+        switch (position) {
+        case 'right':
+        case 'left':
+            axis = 'x';
+            break;
+        default:
+            axis = 'y';
+        }
+
+        let arrowSize = 10;
+        let tipMargin = arrowSize;
+        let rect = this.parent.getBoundingClientRect();
+        let tipRect = this.element.getBoundingClientRect();
+
+        let tipComputed = this.window.getComputedStyle(this.element, null);
+        let bgColor = tipComputed.getPropertyValue('background-color');
+
+        let min = tipMargin;
+        let maxTop = window.innerHeight - tipRect.height - tipMargin;
+        let maxLeft = window.innerWidth - tipRect.width - tipMargin;
+
+        // Coordinates
+
+        let top;
+        let left;
+
+        function calcCoords() {
+            top = rect.top;
+            left = rect.left;
+
+            if (axis == 'x')
+                top += rect.height / 2 - tipRect.height / 2;
+            else
+                left += rect.width / 2 - tipRect.width / 2;
+
+            switch (position) {
+            case 'right':
+                left += arrowSize + rect.width;
+                break;
+            case 'left':
+                left -= arrowSize + tipRect.width;
+                break;
+            case 'up':
+                top -= arrowSize + tipRect.height;
+                break;
+            default:
+                top += arrowSize + rect.height;
+            }
+        }
+        calcCoords();
+
+        let axisOverflow =
+            axis == 'x' && (left < min || left > maxLeft) ||
+            axis == 'y' && (top < min || top > maxTop);
+
+        function switchPosition(position) {
+            switch (position) {
+            case 'right':
+                return 'left';
+            case 'left':
+                return 'right';
+            case 'up':
+                return 'down';
+            default:
+                return 'up';
+            }
+        }
+
+        if (axisOverflow) {
+            position = switchPosition(position);
+            calcCoords();
+        }
+
+        // Overflow
+
+        function range(coord, min, max) {
+            return Math.min(Math.max(coord, min), max);
+        }
+
+        if (axis == 'x')
+            top = range(top, min, maxTop);
+        else
+            left = range(left, min, maxLeft);
+
+        let style = this.element.style;
+        style.top = `${top}px`;
+        style.left = `${left}px`;
+
+        // Arrow position
+
+        if (this.arrow)
+            this.element.removeChild(this.arrow);
+
+        let arrow = document.createElement('div');
+        arrow.className = 'arrow';
+        arrow.style.borderWidth = `${arrowSize}px`;
+
+        let arrowStyle = arrow.style;
+
+        if (axis == 'x') {
+            let arrowTop = (rect.top + rect.height / 2) - top - arrowSize;
+            arrowStyle.top = `${arrowTop}px`;
         } else {
-            promise = _promise;
+            let arrowLeft = (rect.left + rect.width / 2) - left - arrowSize;
+            arrowStyle.left = `${arrowLeft}px`;
         }
-        return _promise.promise;
+
+        let arrowCoord = `${-tipMargin}px`;
+
+        switch (position) {
+        case 'right':
+            arrowStyle.left = arrowCoord;
+            arrowStyle.borderRightColor = bgColor;
+            arrowStyle.borderLeftWidth = 0;
+            break;
+        case 'left':
+            arrowStyle.right = arrowCoord;
+            arrowStyle.borderLeftColor = bgColor;
+            arrowStyle.borderRightWidth = 0;
+            break;
+        case 'up':
+            arrowStyle.bottom = arrowCoord;
+            arrowStyle.borderTopColor = bgColor;
+            arrowStyle.borderBottomWidth = 0;
+            break;
+        default:
+            arrowStyle.top = arrowCoord;
+            arrowStyle.borderBottomColor = bgColor;
+            arrowStyle.borderTopWidth = 0;
+        }
+
+        this.element.appendChild(arrow);
+        this.arrow = arrow;
     }
 
+    $destroy() {
+        this.hide();
+    }
+}
+Tooltip.$inject = ['$element', '$scope', '$timeout'];
+
+ngModule.component('vnTooltip', {
+    template: require('./tooltip.html'),
+    controller: Tooltip,
+    transclude: true,
+    bindings: {
+        position: '@?'
+    }
+});
+
+directive.$inject = ['$document', '$compile', '$templateRequest'];
+export function directive($document, $compile, $templateRequest) {
     return {
         restrict: 'A',
-        priority: -1,
+        link: function($scope, $element, $attrs) {
-        link: function($scope, element, attrs) {
+            let tooltip;
-            let tipHtml = '<div class="mdl-shadow--2dp" ng-class="tipClass"><div class="tooltip-text" translate>{{::text}}</div><div ng-if="isHtmlContent" ng-bind-html="htmlContent"></div><div class="tooltip-arrow"></div></div>';
+            let $tooltip;
-            let tip;
+            let $tooltipScope;
-            let tipClassName = 'tooltip';
-            let tipActiveClassName = 'tooltip-show';
-            let scope = $scope.$new();
 
-            scope.tipClass = [tipClassName];
+            if ($attrs.tooltipId) {
-            scope.text = attrs.vnTooltip || '';
+                let tooltipKey = kebabToCamel($attrs.tooltipId);
-
+                tooltip = $scope[tooltipKey];
-            if (attrs.tooltipHtml) {
+                if (!(tooltip instanceof Tooltip))
-                scope.isHtmlContent = true;
+                    throw new Error(`vnTooltip id should reference a tooltip instance`);
-                scope.htmlContent = $sce.trustAsHtml(attrs.tooltipHtml);
-                _compileTip();
-            } else if (attrs.tooltipTemplate) {
-                getTemplate(attrs.tooltipTemplate).then(template => {
-                    scope.isHtmlContent = true;
-                    scope.htmlContent = $sce.trustAsHtml($interpolate(template)(scope));
-                    _compileTip();
-                });
             } else {
-                scope.isHtmlContent = false;
+                $tooltipScope = $scope.$new();
-                scope.htmlContent = null;
+                $tooltipScope.text = $attrs.vnTooltip;
-                _compileTip();
+                let template = `<vn-tooltip class="text"><span translate>{{::text}}</span></vn-tooltip>`;
+                $tooltip = $compile(template)($tooltipScope);
+                $document.find('body').append($tooltip);
+                tooltip = $tooltip[0].$ctrl;
             }
 
-            if (attrs.tooltipPosition) {
+            if ($attrs.tooltipPosition)
-                scope.tipClass.push('tooltip-' + attrs.tooltipPosition);
+                tooltip.position = $attrs.tooltipPosition;
-            } else {
-                scope.tipClass.push('tooltip-down');
-            }
 
-            function _compileTip() {
+            $element[0].title = '';
-                tip = $compile(tipHtml)(scope);
+            $element.on('mouseover', function(event) {
-                $document.find('body').append(tip);
+                if (event.defaultPrevented) return;
-                _bindEvents();
+                event.preventDefault();
-            }
+                tooltip.show($element[0]);
+            });
+            $element.on('mouseout', function() {
+                tooltip.hide();
+            });
+            $element.on('$destroy', function() {
+                tooltip.hide();
 
-            function _bindEvents() {
+                if ($tooltip) {
-                element.bind('mouseover', function(e) {
+                    $tooltip.remove();
-                    _showTooltip(e);
+                    $tooltipScope.$destroy();
-                });
-
-                element.on('mouseout', function() {
-                    _hideTooltip();
-                });
-
-                tip.on('mouseover', function(e) {
-                    _showTooltip(e);
-                });
-
-                tip.on('mouseout', function() {
-                    _hideTooltip();
-                });
-
-                element.on('$destroy', function() {
-                    tip.remove();
-                    scope.$destroy();
-                });
-            }
-
-            function _calculatePosition(e) {
-                let pos = element[0].getBoundingClientRect();
-                let tipPos = tip[0].getBoundingClientRect();
-                let offset = {top: 0, left: 0};
-                let tipWidth = tipPos.width || tipPos.right - tipPos.left;
-                let tipHeight = tipPos.height || tipPos.bottom - tipPos.top;
-                let elWidth = pos.width || pos.right - pos.left;
-                let elHeight = pos.height || pos.bottom - pos.top;
-                let tipOffset = 10;
-
-                if (tip.hasClass('tooltip-right')) {
-                    offset.top = pos.top - (tipHeight / 2) + (elHeight / 2);
-                    offset.left = pos.right + tipOffset;
-                } else if (tip.hasClass('tooltip-left')) {
-                    offset.top = pos.top - (tipHeight / 2) + (elHeight / 2);
-                    offset.left = pos.left - tipWidth - tipOffset;
-                } else if (tip.hasClass('tooltip-down')) {
-                    offset.top = pos.top + elHeight + tipOffset;
-                    offset.left = pos.left - (tipWidth / 2) + (elWidth / 2);
-                } else {
-                    offset.top = pos.top - tipHeight - tipOffset;
-                    offset.left = pos.left - (tipWidth / 2) + (elWidth / 2);
                 }
-                // outsides
+            });
-                if (offset.left + tipPos.width > window.innerWidth) { // right outside
-                    let diffLeft = (offset.left + tipPos.width) - window.innerWidth;
-                    offset.left -= diffLeft + 10;
-
-                    let arrow = tip[0].querySelector('.tooltip-arrow');
-                    if (arrow) {
-                        angular.element(arrow).css('margin-left', diffLeft + 'px');
-                    }
-                } else if (offset.left < 10) { // left outside
-                    offset.left = 10;
-                    let arrow = tip[0].querySelector('.tooltip-arrow');
-                    if (arrow) {
-                        angular.element(arrow).css('margin-left', '10px');
-                    }
-                }
-                if (offset.top > window.innerHeight) { // down outside
-                    offset.top = pos.top - tipHeight - tipOffset;
-                } else if (offset.top < 10) { // top outside
-                    offset.top = pos.top + elHeight + tipOffset;
-                }
-
-                tip.css('top', offset.top + 'px');
-                tip.css('left', offset.left + 'px');
-            }
-
-            function _showTooltip(e) {
-                tip.addClass(tipActiveClassName);
-                _calculatePosition(e);
-            }
-
-            function _hideTooltip() {
-                tip.removeClass(tipActiveClassName);
-            }
         }
     };
 }
-
+ngModule.directive('vnTooltip', directive);
-ngModule.directive('vnTooltip', tooltip);

client/core/src/directives/dialog.js

@@ -8,7 +8,7 @@ import {kebabToCamel} from '../lib/string';
  *
  * @return {Object} The directive
  */
-export function directive() {
+export default function directive() {
     return {
         restrict: 'A',
         link: function($scope, $element, $attrs) {

client/core/src/directives/on-error-src.js

@@ -1,14 +1,20 @@
 import ngModule from '../module';
+import noImage from './no-image.png';
 
-function onErrorSrc() {
+/**
+ * Sets a default image when there is an error loading
+ * the original image.
+ *
+ * @return {Object} The directive
+ */
+export default function onErrorSrc() {
     return {
         restrict: 'A',
         link: (scope, element, attrs) => {
-            let imgError = '/static/images/no-image200x200.png';
+            let imgError = noImage;
             element.bind('error', function() {
-                if (attrs.src != imgError) {
+                if (attrs.src != imgError)
                     attrs.$set('src', imgError);
-                }
             });
         }
     };

client/item/src/barcode/barcode.html

@@ -15,7 +15,6 @@
                     pointer
                     medium-grey
                     vn-tooltip="Remove barcode"
-                    tooltip-position="left"
                     icon="remove_circle_outline"
                     ng-click="$ctrl.removeBarcode($index)">
                 </vn-icon>
@@ -25,7 +24,7 @@
                 vn-acl="buyer, replenisher"
                 vn-tooltip="Add barcode"
                 vn-bind="+"
-                tooltip-position="right" icon="add_circle"
+                icon="add_circle"
                 ng-click="$ctrl.addBarcode()">
             </vn-icon-button>
         </vn-one>

client/item/src/niche/niche.html

@@ -40,7 +40,6 @@
                 pointer
                 medium-grey
                 vn-tooltip="Remove niche"
-                tooltip-position="left"
                 icon="remove_circle_outline"
                 ng-click="$ctrl.removeNiche($index)">
             </vn-icon>
@@ -50,7 +49,7 @@
                 vn-acl="buyer, replenisher"
                 vn-tooltip="Add niche"
                 vn-bind="+"
-                tooltip-position="right" icon="add_circle"
+                icon="add_circle"
                 ng-click="$ctrl.addNiche()">
             </vn-icon-button>
         </vn-one>

client/item/src/tags/tags.html

@@ -53,7 +53,6 @@
                     pointer
                     medium-grey
                     vn-tooltip="Remove tag"
-                    tooltip-position="left"
                     icon="remove_circle_outline"
                     ng-click="$ctrl.removeItemTag($index)">
                 </vn-icon>
@@ -62,7 +61,6 @@
             <vn-icon-button
                 vn-bind="+"
                 vn-tooltip="Add tag"
-                tooltip-position="right"
                 icon="add_circle"
                 ng-click="$ctrl.addItemTag()">
             </vn-icon-button>

client/locator/src/locator-table/locator-table.html

@@ -1,60 +1,55 @@
 <vn-vertical>
-        <vn-grid-header on-order="$ctrl.onOrder(field, order)">
+    <vn-grid-header on-order="$ctrl.onOrder(field, order)">
-            <vn-column-header vn-one pad-medium-h>
+        <vn-column-header vn-one pad-medium-h>
-                <vn-multi-check 
+            <vn-multi-check 
-                    check-all="$ctrl.checkAll" 
+                check-all="$ctrl.checkAll" 
-                    models="$ctrl.routes" 
+                models="$ctrl.routes" 
-                    options="[{id:'all',name:'Todos'},{id:'any',name:'Ninguno'}, {id:'error', name:'Con problema'}, {id:'no-error', name:'Sin problema'}]"
+                options="[{id:'all',name:'Todos'},{id:'any',name:'Ninguno'}, {id:'error', name:'Con problema'}, {id:'no-error', name:'Sin problema'}]">
-                    ></vn-multi-check>
+            </vn-multi-check>
-            </vn-column-header>
+        </vn-column-header>
-            <vn-column-header vn-two pad-medium-h field="zoneFk" text="Zona"></vn-column-header>
+        <vn-column-header vn-two pad-medium-h field="zoneFk" text="Zona"></vn-column-header>
-            <vn-column-header vn-two pad-medium-h field="postalcode" text="Postal Code"></vn-column-header>
+        <vn-column-header vn-two pad-medium-h field="postalcode" text="Postal Code"></vn-column-header>
-            <vn-column-header vn-two pad-medium-h field="order" text="Order" default-order="DESC"></vn-column-header>
+        <vn-column-header vn-two pad-medium-h field="order" text="Order" default-order="DESC"></vn-column-header>
-            <vn-column-header vn-two pad-medium-h field="preparado" text="Preparado"></vn-column-header>
+        <vn-column-header vn-two pad-medium-h field="preparado" text="Preparado"></vn-column-header>
-            <vn-column-header vn-two pad-medium-h field="entrada" text="Entrada"></vn-column-header>
+        <vn-column-header vn-two pad-medium-h field="entrada" text="Entrada"></vn-column-header>
-            <vn-column-header vn-two pad-medium-h field="ticket" text="Ticket"></vn-column-header>
+        <vn-column-header vn-two pad-medium-h field="ticket" text="Ticket"></vn-column-header>
-            <vn-column-header vn-two pad-medium-h field="routeFk" text="ID de ruta"></vn-column-header>
+        <vn-column-header vn-two pad-medium-h field="routeFk" text="ID de ruta"></vn-column-header>
-            <vn-column-header vn-two pad-medium-h field="alias" text="Alias"></vn-column-header>
+        <vn-column-header vn-two pad-medium-h field="alias" text="Alias"></vn-column-header>
-            <vn-column-header vn-two pad-medium-h field="bultos" text="Bultos"></vn-column-header>
+        <vn-column-header vn-two pad-medium-h field="bultos" text="Bultos"></vn-column-header>
-            <vn-column-header vn-two pad-medium-h field="m3" text="m3"></vn-column-header>
+        <vn-column-header vn-two pad-medium-h field="m3" text="m3"></vn-column-header>
-        </vn-grid-header>
+    </vn-grid-header>
-        <vn-one class="list list-content">
+    <vn-one class="list list-content">
-            <vn-vertical 
+        <vn-vertical 
-                class="list list-element text-center" 
+            class="list list-element text-center" 
-                ng-repeat="route in $ctrl.pageTable.model track by route.id"
+            ng-repeat="route in $ctrl.pageTable.model track by route.id"
-                ng-class="{warning: route.error, success: route.success}"
+            ng-class="{warning: route.error, success: route.success}">
-                >
+            <vn-horizontal>
-                <vn-horizontal>
+                <vn-one pad-medium-h></vn-one>
-                    <vn-one pad-medium-h></vn-one>
+                <vn-two pad-medium-h>{{::route.zoneFk}}</vn-two>
-                    <vn-two pad-medium-h>{{::route.zoneFk}}</vn-two>
+                <vn-two pad-medium-h>{{::route.postalcode}}</vn-two>
-                    <vn-two pad-medium-h>{{::route.postalcode}}</vn-two>
+                <vn-two pad-medium-h>{{::route.order}}</vn-two>
-                    <vn-two pad-medium-h>{{::route.order}}</vn-two>
+                <vn-two pad-medium-h>{{::route.preparado}}</vn-two>
-                    <vn-two pad-medium-h>{{::route.preparado}}</vn-two>
+                <vn-two pad-medium-h>{{::route.entrada}}</vn-two>
-                    <vn-two pad-medium-h>{{::route.entrada}}</vn-two>
+                <vn-two pad-medium-h>{{::route.ticket}}</vn-two>
-                    <vn-two pad-medium-h>{{::route.ticket}}</vn-two>
+                <vn-two pad-medium-h>{{::route.routeFk}}</vn-two>
-                    <vn-two pad-medium-h>{{::route.routeFk}}</vn-two>
+                <vn-two pad-medium-h>{{::route.alias}}</vn-two>
-                    <vn-two pad-medium-h>{{::route.alias}}</vn-two>
+                <vn-two pad-medium-h>{{::route.bultos}}</vn-two>
-                    <vn-two pad-medium-h>{{::route.bultos}}</vn-two>
+                <vn-two pad-medium-h>{{::route.m3}}</vn-two>
-                    <vn-two pad-medium-h>{{::route.m3}}</vn-two>
+            </vn-horizontal>
-                </vn-horizontal>
+            <vn-horizontal margin-small-top>
-                <vn-horizontal margin-small-top>
+                <vn-none pad-medium-h margin--small-top>
-                    <vn-none pad-medium-h margin--small-top>
+                    <vn-check model="route.checked"></vn-check>
-                        <vn-check model="route.checked"></vn-check>
+                </vn-none>
-                    </vn-none>
+                <vn-none pad-medium-h></vn-none>
-                    <vn-none pad-medium-h></vn-none>
+                <vn-one text-left pad-small border-solid>
-                    <vn-one text-left pad-small border-solid>
+                    <strong translate>Address</strong>: {{::route.address}}
-                        <strong translate>Address</strong>: {{::route.address}}
+                </vn-one>
-                    </vn-one>
+            </vn-horizontal>
-                    <vn-none pad-medium-h>
+        </vn-vertical>
-                            <vn-icon icon="more" vn-tooltip tooltip-template="/static/templates/tooltip.routes.tpl.html" tooltip-position="left"></vn-icon>
+    </vn-one>
-                    </vn-none>
+    <vn-horizontal vn-one class="list list-footer">
-                </vn-horizontal>
+    </vn-horizontal>
-            </vn-vertical>
+    <vn-one>
-        </vn-one>
+        <vn-paging page-change="$ctrl.paginate()" index="$ctrl.pageTable"  total="$ctrl.totalFilter"></vn-paging>
-        <vn-horizontal vn-one class="list list-footer">
+    </vn-one>
-
-        </vn-horizontal>
-        <vn-one>
-          <vn-paging page-change="$ctrl.paginate()" index="$ctrl.pageTable"  total="$ctrl.totalFilter"></vn-paging>
-        </vn-one>
 </vn-vertical>

client/production/src/production-table/production-table.html

@@ -2,7 +2,11 @@
     <vn-grid-header on-order="$ctrl.onOrder(field, order)">
         <vn-none min-none></vn-none>
         <vn-column-header vn-none min-none>
-            <vn-multi-check check-all="$ctrl.checkAll" 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
+                check-all="$ctrl.checkAll"
+                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-column-header>
         <vn-column-header vn-one pad-medium-h field="ticketFk" text="Ticket ID"></vn-column-header>
         <vn-column-header vn-two pad-medium-h field="agency" text="Agency"></vn-column-header>
@@ -19,7 +23,12 @@
     <vn-one class="list list-content">
         <vn-horizontal vn-one class="list list-element text-center" ng-repeat="ticket in $ctrl.pageTable.model" ng-class="{warning: ticket.problem==='RIESGO'}">
             <vn-none>
-                <vn-icon margin-small-left 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.problem"
+                    vn-tooltip="{{ticket.problem}}">
+                </vn-icon>
             </vn-none>
             <vn-none>
                 <vn-check model="ticket.checked"></vn-check>
@@ -35,7 +44,27 @@
             <vn-one pad-medium-h>{{::ticket.m3}}</vn-one>
             <vn-one pad-medium-h>{{::ticket.boxes}}</vn-one>
             <vn-none>
-                <vn-icon icon="more" vn-tooltip tooltip-template="/static/templates/tooltip.locator.tpl.html" tooltip-position="left"></vn-icon>
+                <vn-icon
+                    icon="more"
+                    vn-tooltip
+                    vn-tooltip-id="more-tooltip">
+                </vn-icon>
+                <vn-tooltip position="left" id="more-tooltip">
+                    <vn-vertical>
+                        <vn-horizontal class="list list-header">
+                            <vn-one margin-medium-right translate>Town</vn-one>
+                            <vn-one margin-medium-right translate>Province</vn-one>
+                            <vn-two margin-medium-right translate>Client ID</vn-two>
+                            <vn-two translate>Worker</vn-two>
+                        </vn-horizontal>
+                        <vn-horizontal  class="list list-element">
+                            <vn-one margin-medium-right>{{::ticket.city | ucwords}}</vn-one>
+                            <vn-one margin-medium-right>{{::ticket.province | ucwords}}</vn-one>
+                            <vn-two margin-medium-right>{{::ticket.client | ucwords}}</vn-two>
+                            <vn-two>{{::ticket.worker | ucwords}}</vn-two>
+                        </vn-horizontal>
+                    </vn-vertical>
+                </vn-tooltip>
             </vn-none>
         </vn-horizontal>
     </vn-one>
@@ -57,7 +86,7 @@
         <vn-one pad-medium-h></vn-one>
         <vn-none></vn-none>
     </vn-horizontal>
-        <vn-one>
+    <vn-one>
-            <vn-paging page-change="$ctrl.pageTickets()" index="$ctrl.pageTable"  total="$ctrl.totalFilter"></vn-paging>
+        <vn-paging page-change="$ctrl.pageTickets()" index="$ctrl.pageTable"  total="$ctrl.totalFilter"></vn-paging>
-        </vn-one>
+    </vn-one>
 </vn-vertical>

client/ticket/src/note/ticket-observation.html

@@ -40,7 +40,6 @@
                         pointer
                         medium-grey
                         vn-tooltip="Remove note"
-                        tooltip-position="left"
                         icon="remove_circle_outline"
                         ng-click="$ctrl.removeObservation($index)">
                     </vn-icon>
@@ -50,7 +49,7 @@
         <vn-one>
             <vn-icon-button
                 pointer vn-tooltip="Add note"
-                tooltip-position="right" icon="add_circle"
+                icon="add_circle"
                 vn-bind="+"
                 ng-if="observationTypes.model.length  > $ctrl.ticketObservations.length"
                 ng-click="$ctrl.addObservation()">

client/ticket/src/package/index/package.html

@@ -44,7 +44,6 @@
                         pointer 
                         medium-grey
                         vn-tooltip="Remove package"
-                        tooltip-position = "left"
                         icon="remove_circle_outline"
                         ng-click="$ctrl.removePackage($index)">
                     </vn-icon>  
@@ -55,7 +54,6 @@
             <vn-icon-button
                 pointer 
                 vn-tooltip="Add package"
-                tooltip-position = "right"
                 vn-bind="+"
                 icon="add_circle"
                 ng-click="$ctrl.addPackage()">

client/ticket/src/sale/sale.html

@@ -19,7 +19,6 @@
                     disabled="!$ctrl.isChecked"
                     ng-click="$ctrl.onRemoveLinesClick()" 
                     vn-tooltip="Remove lines"
-                    tooltip-position="right"
                     icon="delete">
                 </vn-button>
             </vn-tool-bar>

services/nginx/.gitignore

@@ -1,4 +1,2 @@
 static/*
 temp/*
-!static/templates
-!static/images

services/nginx/static/templates/tooltip.locator.tpl.html

@@ -1,14 +0,0 @@
-<vn-vertical>
-    <vn-horizontal class="list list-header">
-        <vn-one margin-medium-right translate>Town</vn-one>
-        <vn-one margin-medium-right translate>Province</vn-one>
-        <vn-two margin-medium-right translate>Client ID</vn-two>
-        <vn-two translate>Worker</vn-two>
-    </vn-horizontal>
-    <vn-horizontal  class="list list-element">
-        <vn-one margin-medium-right>{{::ticket.city | ucwords}}</vn-one>
-        <vn-one margin-medium-right>{{::ticket.province | ucwords}}</vn-one>
-        <vn-two margin-medium-right>{{::ticket.client | ucwords}}</vn-two>
-        <vn-two>{{::ticket.worker | ucwords}}</vn-two>
-    </vn-horizontal>
-</vn-vertical>

services/nginx/static/templates/tooltip.routes.tpl.html

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