Browse Source

ux: added css annimations for dash edit views

Torkel Ödegaard 8 years ago
parent
commit
d47c47853a

+ 13 - 4
public/app/core/directives/dash_edit_link.js

@@ -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(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) {
         scope.$watch("dashboardViewState.state.editview", function(newValue, oldValue) {

+ 1 - 1
public/app/partials/dashboard.html

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

+ 1 - 2
public/sass/components/_sidemenu.scss

@@ -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;
-  //transform: translate3d(0, -100%, 0);
+  z-index: 1000;
   opacity: 0;
   opacity: 0;
   visibility: hidden;
   visibility: hidden;
 
 

+ 8 - 0
public/sass/pages/_dashboard.scss

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