#82 Non-generated files removed from generated directory, vnTooltip refactor
This commit is contained in:
parent
63cd55cd66
commit
2f1e5b4fb4
|
@ -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()">
|
||||
|
|
|
@ -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" orange
|
||||
vn-tooltip="Active first to set as default"
|
||||
tooltip-position="left"
|
||||
ng-if="!address.isActive">star_border</i>
|
||||
<i class="material-icons pointer" orange
|
||||
<i class="material-icons"
|
||||
orange
|
||||
ng-if="address.isDefaultAddress">
|
||||
star
|
||||
</i>
|
||||
<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)">star_border</i>
|
||||
ng-click="$ctrl.setDefault(address)">
|
||||
star_border
|
||||
</i>
|
||||
</vn-none>
|
||||
<vn-one border-solid-right>
|
||||
<div><b>{{::address.nickname}}</b></div>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -16,8 +16,7 @@
|
|||
<div class="mdl-chip__action">
|
||||
<i class="material-icons"
|
||||
ng-if="$ctrl.hasInfo"
|
||||
vn-tooltip="{{$ctrl.info}}"
|
||||
tooltip-position="up">
|
||||
vn-tooltip="{{$ctrl.info}}">
|
||||
info_outline
|
||||
</i>
|
||||
<i class="material-icons pointer"
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
<div>
|
||||
<div class="body" ng-transclude></div>
|
||||
</div>
|
|
@ -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;
|
||||
}
|
||||
return _promise.promise;
|
||||
let arrowLeft = (rect.left + rect.width / 2) - left - arrowSize;
|
||||
arrowStyle.left = `${arrowLeft}px`;
|
||||
}
|
||||
|
||||
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 = '<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 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 = `<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) {
|
||||
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();
|
||||
}
|
||||
|
||||
function _bindEvents() {
|
||||
element.bind('mouseover', function(e) {
|
||||
_showTooltip(e);
|
||||
$element[0].title = '';
|
||||
$element.on('mouseover', function(event) {
|
||||
if (event.defaultPrevented) return;
|
||||
event.preventDefault();
|
||||
tooltip.show($element[0]);
|
||||
});
|
||||
|
||||
element.on('mouseout', function() {
|
||||
_hideTooltip();
|
||||
$element.on('mouseout', function() {
|
||||
tooltip.hide();
|
||||
});
|
||||
$element.on('$destroy', function() {
|
||||
tooltip.hide();
|
||||
|
||||
tip.on('mouseover', function(e) {
|
||||
_showTooltip(e);
|
||||
if ($tooltip) {
|
||||
$tooltip.remove();
|
||||
$tooltipScope.$destroy();
|
||||
}
|
||||
});
|
||||
|
||||
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', tooltip);
|
||||
ngModule.directive('vnTooltip', directive);
|
||||
|
|
|
@ -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) {
|
||||
|
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -4,8 +4,8 @@
|
|||
<vn-multi-check
|
||||
check-all="$ctrl.checkAll"
|
||||
models="$ctrl.routes"
|
||||
options="[{id:'all',name:'Todos'},{id:'any',name:'Ninguno'}, {id:'error', name:'Con problema'}, {id:'no-error', name:'Sin problema'}]"
|
||||
></vn-multi-check>
|
||||
options="[{id:'all',name:'Todos'},{id:'any',name:'Ninguno'}, {id:'error', name:'Con problema'}, {id:'no-error', name:'Sin problema'}]">
|
||||
</vn-multi-check>
|
||||
</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>
|
||||
|
@ -22,8 +22,7 @@
|
|||
<vn-vertical
|
||||
class="list list-element text-center"
|
||||
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-one pad-medium-h></vn-one>
|
||||
<vn-two pad-medium-h>{{::route.zoneFk}}</vn-two>
|
||||
|
@ -45,14 +44,10 @@
|
|||
<vn-one text-left pad-small border-solid>
|
||||
<strong translate>Address</strong>: {{::route.address}}
|
||||
</vn-one>
|
||||
<vn-none pad-medium-h>
|
||||
<vn-icon icon="more" vn-tooltip tooltip-template="/static/templates/tooltip.routes.tpl.html" tooltip-position="left"></vn-icon>
|
||||
</vn-none>
|
||||
</vn-horizontal>
|
||||
</vn-vertical>
|
||||
</vn-one>
|
||||
<vn-horizontal vn-one class="list list-footer">
|
||||
|
||||
</vn-horizontal>
|
||||
<vn-one>
|
||||
<vn-paging page-change="$ctrl.paginate()" index="$ctrl.pageTable" total="$ctrl.totalFilter"></vn-paging>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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()">
|
||||
|
|
|
@ -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()">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,4 +1,2 @@
|
|||
static/*
|
||||
temp/*
|
||||
!static/templates
|
||||
!static/images
|
Binary file not shown.
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
Before Width: | Height: | Size: 7.9 KiB |
|
@ -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>
|
|
@ -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>
|
Loading…
Reference in New Issue