From 9eabd956b7ee58b4adea1b94702f638f706d09fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Feb 2016 14:20:34 +0100 Subject: [PATCH] ux(): tweak to help popover annimation and fixed pull-right state --- public/app/core/services/popover_srv.js | 60 ------------------- public/app/core/services/popover_srv.ts | 49 +++++++++++++++ .../plugins/panel/graph/legend.popover.html | 10 ++-- public/sass/components/_drop.scss | 6 +- public/sass/mixins/_drop_element.scss | 2 +- public/sass/utils/_utils.scss | 4 +- 6 files changed, 61 insertions(+), 70 deletions(-) delete mode 100644 public/app/core/services/popover_srv.js create mode 100644 public/app/core/services/popover_srv.ts diff --git a/public/app/core/services/popover_srv.js b/public/app/core/services/popover_srv.js deleted file mode 100644 index 1654f7738c9..00000000000 --- a/public/app/core/services/popover_srv.js +++ /dev/null @@ -1,60 +0,0 @@ -define([ - 'angular', - 'lodash', - 'jquery', - '../core_module', -], -function (angular, _, $, coreModule) { - 'use strict'; - - coreModule.default.service('popoverSrv', function($templateCache, $timeout, $q, $http, $compile) { - - this.getTemplate = function(url) { - return $q.when($templateCache.get(url) || $http.get(url, {cache: true})); - }; - - this.show = function(options) { - var popover; - - // hide other popovers - $('.popover').each(function() { - popover = $(this).prev().data('popover'); - if (popover) { - popover.scope.$destroy(); - popover.destroy(); - } - }); - - options.scope.dismiss = function() { - popover = options.element.data('popover'); - if (popover) { - popover.destroy(); - } - options.scope.$destroy(); - }; - - this.getTemplate(options.templateUrl).then(function(result) { - $timeout(function() { - var template = _.isString(result) ? result : result.data; - - options.element.popover({ - content: template, - placement: options.placement || 'bottom', - html: true - }); - - popover = options.element.data('popover'); - popover.hasContent = function () { - return template; - }; - - popover.toggle(); - popover.scope = options.scope; - $compile(popover.$tip)(popover.scope); - }, 1); - }); - }; - - }); - -}); diff --git a/public/app/core/services/popover_srv.ts b/public/app/core/services/popover_srv.ts new file mode 100644 index 00000000000..64ff1b7af11 --- /dev/null +++ b/public/app/core/services/popover_srv.ts @@ -0,0 +1,49 @@ +/// + +import config from 'app/core/config'; +import _ from 'lodash'; +import $ from 'jquery'; +import coreModule from 'app/core/core_module'; + +/** @ngInject **/ +function popoverSrv($templateCache, $timeout, $q, $http, $compile) { + + this.getTemplate = function(url) { + return $q.when($templateCache.get(url) || $http.get(url, {cache: true})); + }; + + this.show = function(options) { + + options.scope.dismiss = function() { + var popover = options.element.data('popover'); + if (popover) { + popover.destroy(); + } + options.scope.$destroy(); + }; + + this.getTemplate(options.templateUrl).then(function(result) { + $timeout(function() { + var template = _.isString(result) ? result : result.data; + + + options.element.popover({ + content: template, + placement: options.placement || 'bottom', + html: true + }); + + var popover = options.element.data('popover'); + popover.hasContent = function () { + return template; + }; + + popover.toggle(); + popover.scope = options.scope; + $compile(popover.$tip)(popover.scope); + }, 1); + }); + }; +} + +coreModule.service('popoverSrv', popoverSrv); diff --git a/public/app/plugins/panel/graph/legend.popover.html b/public/app/plugins/panel/graph/legend.popover.html index e2b85a8dab4..f9cf16a3e87 100644 --- a/public/app/plugins/panel/graph/legend.popover.html +++ b/public/app/plugins/panel/graph/legend.popover.html @@ -1,16 +1,16 @@
× -
+
diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index 7a256f8efab..5edaf2ee421 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -3,12 +3,13 @@ $color: inherit; $backgroundColor: $btn-secondary-bg; $color: $text-color; $useDropShadow: false; -$attachmentOffset: $popover-arrow-size; -$easing: cubic-bezier(0, 0, 0.265, 1.55); +$attachmentOffset: 0%; +$easing: cubic-bezier(0, 0, 0.265, 1.00); .drop-element { position: absolute; display: none; + opacity: 0; &.drop-open { display: block; @@ -26,3 +27,4 @@ $easing: cubic-bezier(0, 0, 0.265, 1.55); @include drop-theme("help", $popover-help-bg, $popover-help-color); @include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing); + diff --git a/public/sass/mixins/_drop_element.scss b/public/sass/mixins/_drop_element.scss index b4bd2f1a51e..143574ad147 100644 --- a/public/sass/mixins/_drop_element.scss +++ b/public/sass/mixins/_drop_element.scss @@ -213,7 +213,7 @@ opacity: 0; .#{$themePrefix}-content { transition: transform 0.2s $easing; - transform: scale(0) translateZ(0); + transform: scale(0.8) translateZ(0); } &.#{$themePrefix}-open { display: none; diff --git a/public/sass/utils/_utils.scss b/public/sass/utils/_utils.scss index 3d8c08ed603..efccb434d48 100644 --- a/public/sass/utils/_utils.scss +++ b/public/sass/utils/_utils.scss @@ -45,10 +45,10 @@ button.close { // Quick floats .pull-right { - float: right; + float: right !important; } .pull-left { - float: left; + float: left !important; } // Toggling content