Improve sidebar animation.

ABI-Software · May 16, 2019 · 54e229c · 54e229c
1 parent e733ca7
commit 54e229c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 8 deletions.
diff --git a/src/snippets/managerSidebar.html b/src/snippets/managerSidebar.html
@@ -1,4 +1,4 @@
-<div class="w3-sidebar w3-bar-block w3-animate-left sidebar" id="managerSidebar">
+<div class="w3-bar-block sidebar leftShow" id="managerSidebar">
   <button class="w3-bar-item w3-button w3-large" id="sidebarClose">Close &times;</button>
 
   <button class="w3-bar-item w3-button sidebar-topbutton" id="addManager">+ Add Manager</button>
@@ -8,8 +8,8 @@
 
 </div>
 
-<div>
-  <button id="sidebarOpen" class="w3-button w3-white w3-xxlarge" style="z-index:20000000;opacity:0.9;display:block;'">&#9776;</button>
+<div style="z-index:200000">
+  <button id="sidebarOpen" class="w3-button w3-white w3-xxlarge" style="opacity:0.9;display:block;'">&#9776;</button>
 </div>
 
 <div id="rename-form" title="Rename Module">

diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
@@ -56,17 +56,54 @@
 .sidebar-module:hover {background-color: #b2d8ff  !important;}
 
 .sidebar {
-	display:none;
 	z-index:20000000;
-	opacity:0.9;
 	color: #fff;
 	background-color:#00357d;
-	height: 100%;
 	position:relative!important;
+	opacity: 0;
+  	visibility: hidden; /* Show the snackbar */
+  	overflow: auto;
 }
 
 .sidebar-topbutton {
 	border-radius: 5px;
 }
 
 .sidebar-topbutton:hover {background-color: #b2d8ff  !important;}
+
+.sidebar.leftShow {
+  opacity: 0.9;
+  visibility: visible;
+  display:block;
+  -webkit-animation: leftin 0.5s;
+  animation: leftin 0.5s;
+  height:100%;
+}
+
+.sidebar.leftHide {
+  -webkit-animation: leftout 0.5s;
+  animation: leftout 0.5s;
+  height:0%;
+}
+
+/* Animations to fade the snackbar in and out */
+@-webkit-keyframes leftin {
+  from {left: -30px; opacity: 0;height:0%;} 
+  to {left: 0px; opacity: 0.9;height:100%;}
+}
+
+@keyframes leftin {
+  from {left: -30px; opacity: 0;height:0%;}
+  to {left: 0px; opacity: 0.9;height:100%;}
+}
+
+@-webkit-keyframes leftout {
+  from {left: 0px; opacity: 0.9;height:100%;visibility:visible;} 
+  to {left: -30px; opacity: 0;height:0%;visibility:hidden;}
+}
+
+@keyframes leftout {
+  from {left: 0px; opacity: 0.9;visibility: visible;height:100%}
+  to {left: -30px; opacity: 0;visibility: hidden;height:0%}
+}
+
diff --git a/src/ui/ManagerSidebar.js b/src/ui/ManagerSidebar.js
@@ -205,12 +205,14 @@ var ManagerSidebar = function(parentIn) {
   var _this = this;
 
   this.open = function() {
-    sidebarEle.style.display = "block";
+    //sidebarEle.style.display = "block";
+    sidebarEle.className = sidebarEle.className.replace(" leftHide", " leftShow");
     jelem.find("#sidebarOpen")[0].style.display = "none";
   }
 
   this.close = function() {
-    sidebarEle.style.display = "none";
+    //sidebarEle.style.display = "none";
+	sidebarEle.className = sidebarEle.className.replace(" leftShow", " leftHide");
     jelem.find("#sidebarOpen")[0].style.display = "block";
   }