From 5d3e30c92d8b80200406f696b587a441c47bf453 Mon Sep 17 00:00:00 2001 From: Mark Friedrich Date: Fri, 13 Jul 2018 19:50:37 +0200 Subject: [PATCH] - removed some map css animations when switching between maps --- js/app/map/map.js | 100 +++++++----------------- js/app/ui/system_intel.js | 4 +- public/js/v1.3.6/app/map/map.js | 100 +++++++----------------- public/js/v1.3.6/app/ui/system_intel.js | 4 +- public/templates/dialog/map_manual.html | 8 +- 5 files changed, 68 insertions(+), 148 deletions(-) diff --git a/js/app/map/map.js b/js/app/map/map.js index e7fb813a..07178811 100644 --- a/js/app/map/map.js +++ b/js/app/map/map.js @@ -1240,93 +1240,45 @@ define([ return elements; }; - // if map empty (no systems), execute callback and return - // no visual effects on larger maps - if( - systemElements.length === 0 || - systemElements.length > 20 || - endpointElements.length === 0 - ){ - callback(); - return; - } + let mapElements = systemElements.add(endpointElements).add(connectorElements); // show nice animation if(show === 'show'){ - systemElements = hideElements(systemElements); - endpointElements = hideElements(endpointElements); - connectorElements = hideElements(connectorElements); - overlayElements = hideElements(overlayElements); + hideElements(systemElements); + hideElements(endpointElements); + hideElements(connectorElements); + hideElements(overlayElements); - systemElements.velocity({ + overlayElements.velocity('transition.fadeIn', { + duration: 60, + display: 'auto' + }); + + mapElements.velocity({ translateY: [ 0, -20], opacity: [ 1, 0 ] - },{ - duration: 300, + }, { + duration: 150, easing: 'easeOut', complete: function(){ - // show connections - endpointElements.velocity('transition.fadeIn', { - duration: 0 - }); - - connectorElements.velocity('transition.fadeIn', { - stagger: 30, - duration: 120, - complete: function(){ - callback(); - } - }); - - // show overlay elements (if some exist) - if(overlayElements.length > 0){ - overlayElements.delay(300).velocity('transition.fadeIn', { - stagger: 50, - duration: 180, - display: 'auto' - }); - } + callback(); } }); }else if(show === 'hide'){ - $('.mCSB_container').velocity('callout.shake', { - stagger: 0, - drag: false, - duration: 180, - display: 'auto' - }); - overlayElements.velocity('transition.fadeOut', { - stagger: 50, - drag: true, - duration: 180, + duration: 60, display: 'auto' }); - endpointElements.velocity('transition.fadeOut', { - duration: 0, - display: 'block', + mapElements.velocity({ + translateY: [ -20, 0 ], + opacity: [ 0, 1 ] + }, { + duration: 150, + easing: 'easeOut', complete: function(){ - // show connections - connectorElements.velocity('transition.fadeOut', { - stagger: 0, - drag: true, - duration: 20, - display: 'block' - }); - - systemElements.delay(100).velocity({ - translateY: [ -20, 0 ], - opacity: [ 0, 1 ] - },{ - duration: 180, - display: 'block', - easing: 'easeOut', - complete: function(){ - callback(); - } - }); + callback(); } }); } @@ -1681,6 +1633,9 @@ define([ }); headElement.on('shown', function(e, editable) { + // hide tooltip when xEditable is visible + system.toggleSystemTooltip('hide', {}); + let inputElement = editable.input.$input.select(); // "fake" timeout until dom rendered @@ -1689,6 +1644,11 @@ define([ input.select(); }, 0, inputElement); }); + + headElement.on('hidden', function(e, editable) { + // show tooltip "again" on xEditable hidden + system.toggleSystemTooltip('show', {show: true}); + }); }; /** diff --git a/js/app/ui/system_intel.js b/js/app/ui/system_intel.js index 759e0ef5..7e2c123d 100644 --- a/js/app/ui/system_intel.js +++ b/js/app/ui/system_intel.js @@ -523,7 +523,7 @@ define([ },{ targets: 7, title: 'updated', - width: 80, + width: 60, className: ['text-right', config.tableCellCounterClass].join(' '), data: 'updated.updated' },{ @@ -642,7 +642,7 @@ define([ } }); - rows.to$().find('.' + config.tableCellCounterClass + ':not([data-counter])').initTimestampCounter(); + rows.to$().find('.' + config.tableCellCounterClass + ':not([data-counter])').initTimestampCounter('d'); let animationRows = rows.to$().filter(function() { return ( diff --git a/public/js/v1.3.6/app/map/map.js b/public/js/v1.3.6/app/map/map.js index e7fb813a..07178811 100644 --- a/public/js/v1.3.6/app/map/map.js +++ b/public/js/v1.3.6/app/map/map.js @@ -1240,93 +1240,45 @@ define([ return elements; }; - // if map empty (no systems), execute callback and return - // no visual effects on larger maps - if( - systemElements.length === 0 || - systemElements.length > 20 || - endpointElements.length === 0 - ){ - callback(); - return; - } + let mapElements = systemElements.add(endpointElements).add(connectorElements); // show nice animation if(show === 'show'){ - systemElements = hideElements(systemElements); - endpointElements = hideElements(endpointElements); - connectorElements = hideElements(connectorElements); - overlayElements = hideElements(overlayElements); + hideElements(systemElements); + hideElements(endpointElements); + hideElements(connectorElements); + hideElements(overlayElements); - systemElements.velocity({ + overlayElements.velocity('transition.fadeIn', { + duration: 60, + display: 'auto' + }); + + mapElements.velocity({ translateY: [ 0, -20], opacity: [ 1, 0 ] - },{ - duration: 300, + }, { + duration: 150, easing: 'easeOut', complete: function(){ - // show connections - endpointElements.velocity('transition.fadeIn', { - duration: 0 - }); - - connectorElements.velocity('transition.fadeIn', { - stagger: 30, - duration: 120, - complete: function(){ - callback(); - } - }); - - // show overlay elements (if some exist) - if(overlayElements.length > 0){ - overlayElements.delay(300).velocity('transition.fadeIn', { - stagger: 50, - duration: 180, - display: 'auto' - }); - } + callback(); } }); }else if(show === 'hide'){ - $('.mCSB_container').velocity('callout.shake', { - stagger: 0, - drag: false, - duration: 180, - display: 'auto' - }); - overlayElements.velocity('transition.fadeOut', { - stagger: 50, - drag: true, - duration: 180, + duration: 60, display: 'auto' }); - endpointElements.velocity('transition.fadeOut', { - duration: 0, - display: 'block', + mapElements.velocity({ + translateY: [ -20, 0 ], + opacity: [ 0, 1 ] + }, { + duration: 150, + easing: 'easeOut', complete: function(){ - // show connections - connectorElements.velocity('transition.fadeOut', { - stagger: 0, - drag: true, - duration: 20, - display: 'block' - }); - - systemElements.delay(100).velocity({ - translateY: [ -20, 0 ], - opacity: [ 0, 1 ] - },{ - duration: 180, - display: 'block', - easing: 'easeOut', - complete: function(){ - callback(); - } - }); + callback(); } }); } @@ -1681,6 +1633,9 @@ define([ }); headElement.on('shown', function(e, editable) { + // hide tooltip when xEditable is visible + system.toggleSystemTooltip('hide', {}); + let inputElement = editable.input.$input.select(); // "fake" timeout until dom rendered @@ -1689,6 +1644,11 @@ define([ input.select(); }, 0, inputElement); }); + + headElement.on('hidden', function(e, editable) { + // show tooltip "again" on xEditable hidden + system.toggleSystemTooltip('show', {show: true}); + }); }; /** diff --git a/public/js/v1.3.6/app/ui/system_intel.js b/public/js/v1.3.6/app/ui/system_intel.js index 759e0ef5..7e2c123d 100644 --- a/public/js/v1.3.6/app/ui/system_intel.js +++ b/public/js/v1.3.6/app/ui/system_intel.js @@ -523,7 +523,7 @@ define([ },{ targets: 7, title: 'updated', - width: 80, + width: 60, className: ['text-right', config.tableCellCounterClass].join(' '), data: 'updated.updated' },{ @@ -642,7 +642,7 @@ define([ } }); - rows.to$().find('.' + config.tableCellCounterClass + ':not([data-counter])').initTimestampCounter(); + rows.to$().find('.' + config.tableCellCounterClass + ':not([data-counter])').initTimestampCounter('d'); let animationRows = rows.to$().filter(function() { return ( diff --git a/public/templates/dialog/map_manual.html b/public/templates/dialog/map_manual.html index f8bbd3b3..6c55eaf6 100644 --- a/public/templates/dialog/map_manual.html +++ b/public/templates/dialog/map_manual.html @@ -237,10 +237,10 @@ The "Scope" of a connection can be changed by using the context menu of a connection (more).

Connection status