ux: added css annimations for dash edit views

pull/8528/head
Torkel Ödegaard 8 years ago
parent 3bea304bab
commit d47c47853a
  1. 17
      public/app/core/directives/dash_edit_link.js
  2. 2
      public/app/partials/dashboard.html
  3. 3
      public/sass/components/_sidemenu.scss
  4. 8
      public/sass/pages/_dashboard.scss

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

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

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

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

Loading…
Cancel
Save