From 3806e9e5917dafc970f07074de20378c61d45435 Mon Sep 17 00:00:00 2001 From: Dani Herrero Date: Thu, 8 Jun 2017 09:29:03 +0200 Subject: [PATCH 1/2] nueva directiva vn-tooltip --- client/core/src/components.js | 1 + client/core/src/tooltip/style.css | 61 +++++++++++++++++++++ client/core/src/tooltip/tooltip.js | 74 ++++++++++++++++++++++++++ client/production/src/index/index.html | 17 +++++- client/production/src/index/style.scss | 9 ++-- gulpfile.js | 9 ++-- 6 files changed, 162 insertions(+), 9 deletions(-) create mode 100644 client/core/src/tooltip/style.css create mode 100644 client/core/src/tooltip/tooltip.js diff --git a/client/core/src/components.js b/client/core/src/components.js index 2c8a09630..fc5c92d34 100644 --- a/client/core/src/components.js +++ b/client/core/src/components.js @@ -14,6 +14,7 @@ import './title/title'; import './subtitle/subtitle'; import './spinner/spinner'; import './snackbar/snackbar'; +import './tooltip/tooltip'; export {NAME as BUTTON, directive as ButtonDirective} from './button/button'; export {NAME as BUTTON_MDL, factory as buttonMdl} from './button/button.mdl'; diff --git a/client/core/src/tooltip/style.css b/client/core/src/tooltip/style.css new file mode 100644 index 000000000..a85131357 --- /dev/null +++ b/client/core/src/tooltip/style.css @@ -0,0 +1,61 @@ +[vn-tooltip]{ + cursor: help; +} +.tooltip { + display: none; + position: fixed; + background-color: #fff; + padding: 15px; + max-width: 250px; + color: #222; + z-index: 999; + border: 2px solid #A7A7A7; + border-radius: 5px; + text-align: justify; +} + +.tooltip-show { + display: inherit; +} + +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; +} + +.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; +} \ No newline at end of file diff --git a/client/core/src/tooltip/tooltip.js b/client/core/src/tooltip/tooltip.js new file mode 100644 index 000000000..e84836f6e --- /dev/null +++ b/client/core/src/tooltip/tooltip.js @@ -0,0 +1,74 @@ +import {module} from '../module'; +import './style.css'; + +tooltip.$inject = ['$document', '$compile']; +function tooltip($document, $compile) { + return { + restrict: 'A', + scope: true, + link: function(scope, element, attrs) { + var tip = $compile('
{{ text }}
')(scope); + var tipClassName = 'tooltip'; + var tipActiveClassName = 'tooltip-show'; + + scope.tipClass = [tipClassName]; + scope.text = attrs.vnTooltip; + + if (attrs.tooltipPosition) { + scope.tipClass.push('tooltip-' + attrs.tooltipPosition); + } else { + scope.tipClass.push('tooltip-down'); + } + + $document.find('body').append(tip); + + element.bind('mouseover', function(e) { + tip.addClass(tipActiveClassName); + + let pos = e.target.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); + } + + tip.css('top', offset.top + 'px'); + tip.css('left', offset.left + 'px'); + }); + + element.bind('mouseout', function() { + tip.removeClass(tipActiveClassName); + }); + + tip.bind('mouseover', function() { + tip.addClass(tipActiveClassName); + }); + + tip.bind('mouseout', function() { + tip.removeClass(tipActiveClassName); + }); + + element.on('$destroy', function() { + tip.remove(); + }); + } + }; +} + +module.directive('vnTooltip', tooltip); diff --git a/client/production/src/index/index.html b/client/production/src/index/index.html index 7ab9356a2..9d9a62bf6 100644 --- a/client/production/src/index/index.html +++ b/client/production/src/index/index.html @@ -51,7 +51,9 @@ - + + + @@ -66,6 +68,19 @@ + + : + {{index.model.length}} + + + + + + + + + + \ No newline at end of file diff --git a/client/production/src/index/style.scss b/client/production/src/index/style.scss index d6f8d50e0..b4013d510 100644 --- a/client/production/src/index/style.scss +++ b/client/production/src/index/style.scss @@ -13,14 +13,15 @@ vn-production-index { border-top: 3px solid #9D9D9D; font-weight: bold; } - .list > vn-one{ - text-align: center; - } - .list > [vn-one]{ + .list > vn-one, .list > [vn-one], .list > [vn-two], .list > vn-two{ text-align: center; } .list-body{ padding: 4px 0px; border-bottom: 1px solid #9D9D9D; + + i { + color: #ffa410; + } } } \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 07d99c182..b1a8968c0 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -36,9 +36,9 @@ gulp.task('client', ['clean'], function() { gulp.task('copy', function() { var streams = []; - for (i=0; i < services.services.length; i++) { + for (i = 0; i < services.services.length; i++) { var service = services.services[i]; - for (j=0; j < services.files.length; j++) { + for (j = 0; j < services.files.length; j++) { var file = services.files[j]; streams.push(gulp.src("./services/service/models/" + file) .pipe(gulp.dest(service + "/common/models/"))); @@ -52,14 +52,15 @@ gulp.task('services', ['copy'], function() { require('./services/salix/server/server.js').start(); require('./services/mailer/server.js').start(); - for (i=0; i < services.services.length; i++) { + for (i = 0; i < services.services.length; i++) { require(services.services[i] + "/server/server.js").start(); } }); +/* Nota (dani): Comentado para que no me borre el mock del Localizador gulp.task('clean', function() { return del(`${buildDir}/*`, {force: true}); -}); +}); */ // Spliting From 491241398a60cd1b73fa6c935b2dcc173b14ea1c Mon Sep 17 00:00:00 2001 From: Dani Herrero Date: Thu, 8 Jun 2017 10:05:11 +0200 Subject: [PATCH 2/2] localizador y tooltip arreglo estilos --- client/core/src/tooltip/style.css | 5 ++--- client/core/src/tooltip/tooltip.js | 2 +- client/production/src/index/index.html | 26 +++++++++++++------------- client/production/src/index/index.js | 1 + client/production/src/index/style.scss | 4 +++- 5 files changed, 20 insertions(+), 18 deletions(-) diff --git a/client/core/src/tooltip/style.css b/client/core/src/tooltip/style.css index a85131357..943a92c9c 100644 --- a/client/core/src/tooltip/style.css +++ b/client/core/src/tooltip/style.css @@ -7,10 +7,9 @@ background-color: #fff; padding: 15px; max-width: 250px; - color: #222; + color: #424242; z-index: 999; - border: 2px solid #A7A7A7; - border-radius: 5px; + border: 1px solid #A7A7A7; text-align: justify; } diff --git a/client/core/src/tooltip/tooltip.js b/client/core/src/tooltip/tooltip.js index e84836f6e..1ea5df24a 100644 --- a/client/core/src/tooltip/tooltip.js +++ b/client/core/src/tooltip/tooltip.js @@ -7,7 +7,7 @@ function tooltip($document, $compile) { restrict: 'A', scope: true, link: function(scope, element, attrs) { - var tip = $compile('
{{ text }}
')(scope); + var tip = $compile('
{{ text }}
')(scope); var tipClassName = 'tooltip'; var tipActiveClassName = 'tooltip-show'; diff --git a/client/production/src/index/index.html b/client/production/src/index/index.html index 9d9a62bf6..49c24f3bf 100644 --- a/client/production/src/index/index.html +++ b/client/production/src/index/index.html @@ -1,5 +1,5 @@ - + Localizador @@ -50,27 +50,27 @@ - + - + - + - {{::item.id}} - {{::item.agency.id}} - {{::item.employee.name}} - {{::item.hour}} - {{::item.state.name}} - {{::item.lines}} - {{::item.meters}} - {{::item.boxes}} + {{ticket.id}} + {{ticket.agency.id}} + {{ticket.employee.name}} + {{ticket.hour}} + {{ticket.state.name}} + {{ticket.lines}} + {{ticket.meters}} + {{ticket.boxes}} : - {{index.model.length}} + {{$ctrl.tickets.length}} diff --git a/client/production/src/index/index.js b/client/production/src/index/index.js index 73a40ed8b..a901c863c 100644 --- a/client/production/src/index/index.js +++ b/client/production/src/index/index.js @@ -5,6 +5,7 @@ export default class ProductionIndex { constructor() { this.model = {}; this.checkAll = false; + this.tickets = []; } search(index) { index.filter.search = this.model.search; diff --git a/client/production/src/index/style.scss b/client/production/src/index/style.scss index b4013d510..0571afb44 100644 --- a/client/production/src/index/style.scss +++ b/client/production/src/index/style.scss @@ -3,7 +3,9 @@ vn-production-index { height: 20px; padding: 0 6px; } - + .icon-square{ + height: 36px; + } .list-header{ border-bottom: 3px solid #9D9D9D; font-weight: bold;