diff --git a/client/client/src/address-edit/address-edit.html b/client/client/src/address-edit/address-edit.html index ab464f6a94..dc7218e8e4 100644 --- a/client/client/src/address-edit/address-edit.html +++ b/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)"> @@ -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()"> diff --git a/client/client/src/addresses/addresses.html b/client/client/src/addresses/addresses.html index bac2f70c80..e6a1d1b5b2 100644 --- a/client/client/src/addresses/addresses.html +++ b/client/client/src/addresses/addresses.html @@ -7,16 +7,24 @@ ng-class="{'bg-dark-item': address.isDefaultAddress,'bg-opacity-item': !address.isActive && !address.isDefaultAddress}"> - star - star_border - + star + + + star_border + + star_border + vn-tooltip="Set as default" + ng-click="$ctrl.setDefault(address)"> + star_border +
{{::address.nickname}}
diff --git a/client/client/src/credit-classification-list/credit-classification-list.html b/client/client/src/credit-classification-list/credit-classification-list.html index 378bb051d8..28fbe76347 100644 --- a/client/client/src/credit-classification-list/credit-classification-list.html +++ b/client/client/src/credit-classification-list/credit-classification-list.html @@ -7,8 +7,7 @@ lock_outline @@ -35,7 +34,7 @@ - + @@ -43,8 +42,7 @@ --> + fixed-bottom-right vn-tooltip="New classification" vn-bind="+" ng-if="!$ctrl.isClosed"> \ No newline at end of file diff --git a/client/client/src/descriptor/descriptor.html b/client/client/src/descriptor/descriptor.html index 7e76550df5..183255921f 100644 --- a/client/client/src/descriptor/descriptor.html +++ b/client/client/src/descriptor/descriptor.html @@ -29,31 +29,26 @@ diff --git a/client/core/src/components/step-control/step-control.html b/client/core/src/components/step-control/step-control.html index 356584bc34..0ca3586765 100644 --- a/client/core/src/components/step-control/step-control.html +++ b/client/core/src/components/step-control/step-control.html @@ -2,8 +2,7 @@
diff --git a/client/core/src/components/textfield/textfield.html b/client/core/src/components/textfield/textfield.html index 97501ae8ab..fe69149a3b 100644 --- a/client/core/src/components/textfield/textfield.html +++ b/client/core/src/components/textfield/textfield.html @@ -16,8 +16,7 @@
+ vn-tooltip="{{$ctrl.info}}"> info_outline .arrow { + position: absolute; + width: 0; + height: 0; + border-style: solid; + border-color: transparent; + } +} diff --git a/client/core/src/components/tooltip/tooltip.html b/client/core/src/components/tooltip/tooltip.html new file mode 100644 index 0000000000..e2c9e19ce6 --- /dev/null +++ b/client/core/src/components/tooltip/tooltip.html @@ -0,0 +1,3 @@ +
+
+
\ No newline at end of file diff --git a/client/core/src/components/tooltip/tooltip.js b/client/core/src/components/tooltip/tooltip.js index 052e302672..a907f03e70 100644 --- a/client/core/src/components/tooltip/tooltip.js +++ b/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']; -function tooltip($document, $compile, $interpolate, $sce, $templateCache, $http, $q) { - var promise; +let positions = ['left', 'right', 'up', 'down']; - 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); - } - return template; +/** + * A simple tooltip. + * + * @property {String} position The relative position to the parent + */ +export default class Tooltip extends Component { + constructor($element, $scope, $timeout) { + super($element, $scope); + this.$timeout = $timeout; + $element.addClass('vn-tooltip mdl-shadow--4dp'); + this.position = 'down'; } - function getTemplate(tooltipTemplateUrl) { - var _promise = $q.defer(); - var template = _getTemplate(tooltipTemplateUrl); - if (template) { - _promise.resolve(template); + /** + * Shows the tooltip. + * + * @param {HTMLElement} parent The parent element + */ + 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) { - let tipHtml = '
{{::text}}
'; - let tip; - let tipClassName = 'tooltip'; - let tipActiveClassName = 'tooltip-show'; - let scope = $scope.$new(); + link: function($scope, $element, $attrs) { + let tooltip; + let $tooltip; + let $tooltipScope; - scope.tipClass = [tipClassName]; - scope.text = attrs.vnTooltip || ''; - - if (attrs.tooltipHtml) { - scope.isHtmlContent = true; - 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(); - }); + if ($attrs.tooltipId) { + let tooltipKey = kebabToCamel($attrs.tooltipId); + tooltip = $scope[tooltipKey]; + if (!(tooltip instanceof Tooltip)) + throw new Error(`vnTooltip id should reference a tooltip instance`); } else { - scope.isHtmlContent = false; - scope.htmlContent = null; - _compileTip(); + $tooltipScope = $scope.$new(); + $tooltipScope.text = $attrs.vnTooltip; + let template = `{{::text}}`; + $tooltip = $compile(template)($tooltipScope); + $document.find('body').append($tooltip); + tooltip = $tooltip[0].$ctrl; } - if (attrs.tooltipPosition) { - scope.tipClass.push('tooltip-' + attrs.tooltipPosition); - } else { - scope.tipClass.push('tooltip-down'); - } + if ($attrs.tooltipPosition) + tooltip.position = $attrs.tooltipPosition; - function _compileTip() { - tip = $compile(tipHtml)(scope); - $document.find('body').append(tip); - _bindEvents(); - } + $element[0].title = ''; + $element.on('mouseover', function(event) { + if (event.defaultPrevented) return; + event.preventDefault(); + tooltip.show($element[0]); + }); + $element.on('mouseout', function() { + tooltip.hide(); + }); + $element.on('$destroy', function() { + tooltip.hide(); - function _bindEvents() { - element.bind('mouseover', function(e) { - _showTooltip(e); - }); - - 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); + if ($tooltip) { + $tooltip.remove(); + $tooltipScope.$destroy(); } - // 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', tooltip); +ngModule.directive('vnTooltip', directive); diff --git a/client/core/src/directives/dialog.js b/client/core/src/directives/dialog.js index 7e51a8e9ef..fcbbebd972 100644 --- a/client/core/src/directives/dialog.js +++ b/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) { diff --git a/services/nginx/static/images/no-image200x200.png b/client/core/src/directives/no-image.png similarity index 100% rename from services/nginx/static/images/no-image200x200.png rename to client/core/src/directives/no-image.png diff --git a/client/core/src/directives/on-error-src.js b/client/core/src/directives/on-error-src.js index 1462063d65..094064aad1 100644 --- a/client/core/src/directives/on-error-src.js +++ b/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); - } }); } }; diff --git a/client/item/src/barcode/barcode.html b/client/item/src/barcode/barcode.html index 20d00d9af3..ad9ec7f4cb 100644 --- a/client/item/src/barcode/barcode.html +++ b/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)"> @@ -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()"> diff --git a/client/item/src/niche/niche.html b/client/item/src/niche/niche.html index d21220f2c9..f432498c39 100644 --- a/client/item/src/niche/niche.html +++ b/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)"> @@ -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()"> diff --git a/client/item/src/tags/tags.html b/client/item/src/tags/tags.html index 19a2f3eaef..f8fe5fa509 100644 --- a/client/item/src/tags/tags.html +++ b/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)"> @@ -62,7 +61,6 @@ diff --git a/client/locator/src/locator-table/locator-table.html b/client/locator/src/locator-table/locator-table.html index 79fbcce450..2e211bf54c 100644 --- a/client/locator/src/locator-table/locator-table.html +++ b/client/locator/src/locator-table/locator-table.html @@ -1,60 +1,55 @@ - - - - - - - - - - - - - - - - - - - - {{::route.zoneFk}} - {{::route.postalcode}} - {{::route.order}} - {{::route.preparado}} - {{::route.entrada}} - {{::route.ticket}} - {{::route.routeFk}} - {{::route.alias}} - {{::route.bultos}} - {{::route.m3}} - - - - - - - - Address: {{::route.address}} - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + {{::route.zoneFk}} + {{::route.postalcode}} + {{::route.order}} + {{::route.preparado}} + {{::route.entrada}} + {{::route.ticket}} + {{::route.routeFk}} + {{::route.alias}} + {{::route.bultos}} + {{::route.m3}} + + + + + + + + Address: {{::route.address}} + + + + + + + + + \ No newline at end of file diff --git a/client/production/src/production-table/production-table.html b/client/production/src/production-table/production-table.html index e874107221..524f0b38d1 100644 --- a/client/production/src/production-table/production-table.html +++ b/client/production/src/production-table/production-table.html @@ -2,7 +2,11 @@ - + + @@ -19,7 +23,12 @@ - + + @@ -35,7 +44,27 @@ {{::ticket.m3}} {{::ticket.boxes}} - + + + + + + Town + Province + Client ID + Worker + + + {{::ticket.city | ucwords}} + {{::ticket.province | ucwords}} + {{::ticket.client | ucwords}} + {{::ticket.worker | ucwords}} + + + @@ -57,7 +86,7 @@ - - - + + + \ No newline at end of file diff --git a/client/ticket/src/note/ticket-observation.html b/client/ticket/src/note/ticket-observation.html index e3c09e80a4..d42a46e175 100644 --- a/client/ticket/src/note/ticket-observation.html +++ b/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)"> @@ -50,7 +49,7 @@ diff --git a/client/ticket/src/package/index/package.html b/client/ticket/src/package/index/package.html index 7116c81ed4..785eeb3b2d 100644 --- a/client/ticket/src/package/index/package.html +++ b/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)"> @@ -55,7 +54,6 @@ diff --git a/client/ticket/src/sale/sale.html b/client/ticket/src/sale/sale.html index 245509ce85..548adb42fd 100644 --- a/client/ticket/src/sale/sale.html +++ b/client/ticket/src/sale/sale.html @@ -18,8 +18,7 @@ diff --git a/services/nginx/.gitignore b/services/nginx/.gitignore index c68eb0b100..185616dcda 100644 --- a/services/nginx/.gitignore +++ b/services/nginx/.gitignore @@ -1,4 +1,2 @@ static/* -temp/* -!static/templates -!static/images \ No newline at end of file +temp/* \ No newline at end of file diff --git a/services/nginx/static/images/icon_client.png b/services/nginx/static/images/icon_client.png deleted file mode 100644 index 8858ec7ae4..0000000000 Binary files a/services/nginx/static/images/icon_client.png and /dev/null differ diff --git a/services/nginx/static/images/icon_item.png b/services/nginx/static/images/icon_item.png deleted file mode 100644 index ff660fb23e..0000000000 Binary files a/services/nginx/static/images/icon_item.png and /dev/null differ diff --git a/services/nginx/static/images/icon_production.png b/services/nginx/static/images/icon_production.png deleted file mode 100644 index 85d680ce78..0000000000 Binary files a/services/nginx/static/images/icon_production.png and /dev/null differ diff --git a/services/nginx/static/templates/tooltip.locator.tpl.html b/services/nginx/static/templates/tooltip.locator.tpl.html deleted file mode 100644 index be0877ab8c..0000000000 --- a/services/nginx/static/templates/tooltip.locator.tpl.html +++ /dev/null @@ -1,14 +0,0 @@ - - - Town - Province - Client ID - Worker - - - {{::ticket.city | ucwords}} - {{::ticket.province | ucwords}} - {{::ticket.client | ucwords}} - {{::ticket.worker | ucwords}} - - \ No newline at end of file diff --git a/services/nginx/static/templates/tooltip.routes.tpl.html b/services/nginx/static/templates/tooltip.routes.tpl.html deleted file mode 100644 index 71e8be8d0b..0000000000 --- a/services/nginx/static/templates/tooltip.routes.tpl.html +++ /dev/null @@ -1,14 +0,0 @@ - - - Población - Provincia - ID_Cliente - Comercial - - - {{::ticket.city | ucwords}} - {{::ticket.province | ucwords}} - {{::ticket.client | ucwords}} - {{::ticket.worker | ucwords}} - - \ No newline at end of file