IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: added css annimations for dash edit views

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-06-02 15:29:25 +02:00
parent 3bea304bab
commit d47c47853a
4 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/core/directives/dash_edit_link.js
View File

@@ -1,8 +1,9 @@
define([ define([
'jquery', 'jquery',
'angular',
'../core_module', '../core_module',
], ],
function ($, coreModule) { function ($, angular, coreModule) {
'use strict'; 'use strict';
var editViewMap = { var editViewMap = {
@@ -47,6 +48,7 @@ function ($, coreModule) {
elem.empty(); elem.empty();
lastEditor = null; lastEditor = null;
editorScope = null; editorScope = null;
elem.removeClass('dash-edit-view--open');
if (editview) { if (editview) {
var urlParams = $location.search(); var urlParams = $location.search();
@@ -74,11 +76,18 @@ function ($, coreModule) {
var view = payload.src; var view = payload.src;
if (view.indexOf('.html') > 0) { if (view.indexOf('.html') > 0) {
view = $('<div class="tabbed-view" ng-include="' + "'" + view + "'" + '"></div>'); view = angular.element(document.createElement('div'));
view.append($('<div class="tabbed-view" ng-include="' + "'" + payload.src + "'" + '"></div>'));
} }
elem.append(view); $compile(view)(editorScope);
$compile(elem.contents())(editorScope);
setTimeout(function() {
elem.append(view);
setTimeout(function() {
elem.addClass('dash-edit-view--open');
}, 10);
}, 10);
} }
scope.$watch("dashboardViewState.state.editview", function(newValue, oldValue) { scope.$watch("dashboardViewState.state.editview", function(newValue, oldValue) {

2
public/app/partials/dashboard.html
View File

@@ -2,7 +2,7 @@
<dashnav dashboard="dashboard"></dashnav> <dashnav dashboard="dashboard"></dashnav>
<div class="dashboard-container"> <div class="dashboard-container">
<div dash-editor-view></div> <div dash-editor-view class="dash-edit-view"></div>
<div class="clearfix"></div> <div class="clearfix"></div>
<dashboard-submenu ng-if="dashboard.meta.submenuEnabled" dashboard="dashboard"></dashboard-submenu> <dashboard-submenu ng-if="dashboard.meta.submenuEnabled" dashboard="dashboard"></dashboard-submenu>

3
public/sass/components/_sidemenu.scss
View File

@@ -8,8 +8,7 @@
left: 0; left: 0;
width: $side-menu-width; width: $side-menu-width;
background-color: rgba($side-menu-bg,$side-menu-opacity); background-color: rgba($side-menu-bg,$side-menu-opacity);
z-index: 101; z-index: 1000;
//transform: translate3d(0, -100%, 0);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;

8
public/sass/pages/_dashboard.scss
View File

@@ -256,3 +256,11 @@ div.flot-text {
} }
} }
.dash-edit-view {
opacity: 0;
&--open{
opacity: 1;
transition: opacity 200ms ease-in-out;
}
}