Skip to content

N
nexpie-grafana-theme
Commit 9eabd956 by Torkel Ödegaard
Options

ux(): tweak to help popover annimation and fixed pull-right state

parent eb584146
Showing with 57 additions and 66 deletions
public/app/core/services/popover_srv.js → public/app/core/services/popover_srv.ts
define([ ///<reference path="../../headers/common.d.ts" />
'angular',
'lodash', import config from 'app/core/config';
'jquery', import _ from 'lodash';
'../core_module', import $ from 'jquery';
], import coreModule from 'app/core/core_module';
function (angular, _, $, coreModule) {
'use strict'; /** @ngInject **/
function popoverSrv($templateCache, $timeout, $q, $http, $compile) {
coreModule.default.service('popoverSrv', function($templateCache, $timeout, $q, $http, $compile) {
this.getTemplate = function(url) {
this.getTemplate = function(url) { return $q.when($templateCache.get(url) || $http.get(url, {cache: true}));
return $q.when($templateCache.get(url) || $http.get(url, {cache: true})); };
};
this.show = function(options) {
this.show = function(options) { options.scope.dismiss = function() {
var popover; var popover = options.element.data('popover');
if (popover) {
// hide other popovers popover.destroy();
$('.popover').each(function() { }
popover = $(this).prev().data('popover'); options.scope.$destroy();
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);
});
}; };
}); 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);
public/app/plugins/panel/graph/legend.popover.html
<div class="graph-legend-popover"> <div class="graph-legend-popover">
<a class="close" ng-click="dismiss();" href="">×</a> <a class="close" ng-click="dismiss();" href="">×</a>
<div class="editor-row small" style="padding-bottom: 0;"> <div class="editor-row" style="padding-bottom: 0;">
<label>Axis:</label> <label>Axis:</label>
<button ng-click="ctrl.toggleYAxis(series);dismiss();" <button ng-click="ctrl.toggleYAxis(series);dismiss();"
class="btn btn-mini" class="btn btn-small"
ng-class="{'btn-success': series.yaxis === 1 }"> ng-class="{'btn-success': series.yaxis === 1, 'btn-inverse': series.yaxis === 2}">
Left Left
</button> </button>
<button ng-click="ctrl.toggleYAxis(series);dismiss();" <button ng-click="ctrl.toggleYAxis(series);dismiss();"
class="btn btn-mini" class="btn btn-small"
ng-class="{'btn-success': series.yaxis === 2 }"> ng-class="{'btn-success': series.yaxis === 2, 'btn-inverse': series.yaxis === 1}">
Right Right
</button> </button>
</div> </div>
......
public/sass/components/_drop.scss
...@@ -3,12 +3,13 @@ $color: inherit; ...@@ -3,12 +3,13 @@ $color: inherit;
$backgroundColor: $btn-secondary-bg; $backgroundColor: $btn-secondary-bg;
$color: $text-color; $color: $text-color;
$useDropShadow: false; $useDropShadow: false;
$attachmentOffset: $popover-arrow-size; $attachmentOffset: 0%;
$easing: cubic-bezier(0, 0, 0.265, 1.55); $easing: cubic-bezier(0, 0, 0.265, 1.00);
.drop-element { .drop-element {
position: absolute; position: absolute;
display: none; display: none;
opacity: 0;
&.drop-open { &.drop-open {
display: block; display: block;
...@@ -26,3 +27,4 @@ $easing: cubic-bezier(0, 0, 0.265, 1.55); ...@@ -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-theme("help", $popover-help-bg, $popover-help-color);
@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing); @include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
public/sass/mixins/_drop_element.scss
...@@ -213,7 +213,7 @@ ...@@ -213,7 +213,7 @@
opacity: 0; opacity: 0;
.#{$themePrefix}-content { .#{$themePrefix}-content {
transition: transform 0.2s $easing; transition: transform 0.2s $easing;
transform: scale(0) translateZ(0); transform: scale(0.8) translateZ(0);
} }
&.#{$themePrefix}-open { &.#{$themePrefix}-open {
display: none; display: none;
......
public/sass/utils/_utils.scss
...@@ -45,10 +45,10 @@ button.close { ...@@ -45,10 +45,10 @@ button.close {
// Quick floats // Quick floats
.pull-right { .pull-right {
float: right; float: right !important;
} }
.pull-left { .pull-left {
float: left; float: left !important;
} }
// Toggling content // Toggling content
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment