ux: added css annimations for dash edit views

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

View File

@@ -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>'));
}
$compile(view)(editorScope);
setTimeout(function() {
elem.append(view);
$compile(elem.contents())(editorScope);
setTimeout(function() {
elem.addClass('dash-edit-view--open');
}, 10);
}, 10);
}
scope.$watch("dashboardViewState.state.editview", function(newValue, oldValue) {

View File

@@ -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>

View File

@@ -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;

View File

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