From d2318a4e98c12a8e86cf8a391a84323f93718536 Mon Sep 17 00:00:00 2001
From: nachoparker <nacho@ownyourbits.com>
Date: Tue, 20 Feb 2018 22:16:59 +0100
Subject: [PATCH] wizard: animate side logs

---
 changelog.md                  | 10 +++++++++-
 ncp-web/index.php             |  3 +--
 ncp-web/ncp.css               |  4 ++--
 ncp-web/wizard/CSS/wizard.css | 36 ++++++++++++++++++++++++++---------
 ncp-web/wizard/JS/wizard.js   | 12 +++++++++++-
 ncp-web/wizard/index.php      |  1 +
 6 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/changelog.md b/changelog.md
index f15797eaa..604dd512c 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,13 @@
 
-[v0.46.23](https://github.com/nextcloud/nextcloudpi/commit/d0d6159) (2018-02-19) ncp-web: support for small screens
+[v0.46.27](https://github.com/nextcloud/nextcloudpi/commit/fe3b78a) (2018-02-20) wizard: animate side logs
+
+[v0.46.26](https://github.com/nextcloud/nextcloudpi/commit/c25a130) (2018-02-21) ncp-web: animate script textbox
+
+[v0.46.25](https://github.com/nextcloud/nextcloudpi/commit/7b61539) (2018-02-21) ncp-web: fix backend request without arguments
+
+[v0.46.24](https://github.com/nextcloud/nextcloudpi/commit/9846f23) (2018-02-21) ncp-web: link to wizard and Nextcloud instance
+
+[v0.46.23](https://github.com/nextcloud/nextcloudpi/commit/6fdd1ea) (2018-02-19) ncp-web: support for small screens
 
 [v0.46.22](https://github.com/nextcloud/nextcloudpi/commit/44f00b6) (2018-02-19) UFW: make it work with nc-forward-ports
 
diff --git a/ncp-web/index.php b/ncp-web/index.php
index 05cf15737..08972441d 100644
--- a/ncp-web/index.php
+++ b/ncp-web/index.php
@@ -112,6 +112,7 @@
     </div>
   </header>
 
+  <div id='overlay' class="hidden"></div>
   <div id="content-wrapper">
 	<div id="content" class="app-files" role="main">
 		<div id="app-navigation">
@@ -181,8 +182,6 @@
       </div>
   </div>
 
-  <div id='overlay' class="hidden"></div>
-
   <?php
     include ('csrf.php');
     echo '<input type="hidden" id="csrf-token" name="csrf-token" value="' . getCSRFToken() . '"/>';
diff --git a/ncp-web/ncp.css b/ncp-web/ncp.css
index 04d45ecc1..4b2980a42 100644
--- a/ncp-web/ncp.css
+++ b/ncp-web/ncp.css
@@ -1240,7 +1240,7 @@ a#versionlink:hover {
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
-  z-index: 1;
+  z-index: 10000;
   line-height: 60px;
   border-radius: 3px;
 }
@@ -1257,5 +1257,5 @@ a#versionlink:hover {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 1500;
+  z-index: 2500;
 }
diff --git a/ncp-web/wizard/CSS/wizard.css b/ncp-web/wizard/CSS/wizard.css
index 71b36fb2b..ac9b275d0 100644
--- a/ncp-web/wizard/CSS/wizard.css
+++ b/ncp-web/wizard/CSS/wizard.css
@@ -80,6 +80,20 @@ div.linkbox {
   min-width: 16px;
   min-height: 16px;
   background-image:url("../../../img/menu.svg");
+
+  position:fixed;
+  display:inline-block !important;
+  top:45px;
+  left:0;
+  width:44px;
+  height:44px;
+  z-index:2000;
+  cursor:pointer;
+  opacity:0.6
+}
+
+.menu-icon:hover,.menu-icon:focus {
+  opacity:1
 }
 
 #ncp-welcome-logo {
@@ -121,7 +135,7 @@ div.linkbox {
   bottom:0;
   height:100%;
   width:100%;
-  z-index:9000;
+  z-index:2000;
   text-align:center;
   cursor:pointer;
 }
@@ -130,16 +144,10 @@ div.linkbox {
   display:block;
   background: white;
   position:relative;
-  width:40em;
+  width:0em;
   height:100%;
 }
 
-#output-btn {
-  position:fixed;
-  top:5px;
-  left:5px;
-}
-
 td {
   width: 7em;
 }
@@ -147,4 +155,14 @@ td {
 .buttons-area label{
   margin: 0;
   font-weight: 100;
-};
+}
+
+#overlay {
+  background-color: rgba(0, 0, 0, 0.2);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1500;
+}
diff --git a/ncp-web/wizard/JS/wizard.js b/ncp-web/wizard/JS/wizard.js
index 464c2ac9b..130dd8a00 100644
--- a/ncp-web/wizard/JS/wizard.js
+++ b/ncp-web/wizard/JS/wizard.js
@@ -23,6 +23,8 @@ $(document).ready(function(){
       $('#output-wrapper').show();
       var textarea = $('#output-box');
       textarea[0].scrollTop = textarea[0].scrollHeight;
+      textarea.animate({ width: "40em" });
+      $('#overlay').show();
     }
 
     // launch an request for launch action to the backend
@@ -284,7 +286,15 @@ $(document).ready(function(){
     // close log output
 	$('.output-close').on('click', function(e){
       if( e.target.id == 'output-wrapper' )
-        $('#output-wrapper').hide();
+      {
+        $('#output-box').animate(
+          { width: "0em" },
+          { complete: function() {
+              $('#output-wrapper').hide();
+              $('#overlay').hide();
+            }
+          } );
+      }
     } );
 
     // make sure log box starts empty
diff --git a/ncp-web/wizard/index.php b/ncp-web/wizard/index.php
index be4b2e533..b96e6839d 100644
--- a/ncp-web/wizard/index.php
+++ b/ncp-web/wizard/index.php
@@ -25,6 +25,7 @@
         <link rel="icon" type="image/png" href="../img/favicon.png" />
 	</head>
 <body>
+<div id='overlay' class="ncp-hidden"></div>
 <div id="rootwizard">
 	<ul id="ncp-nav">
 		<li><a href="#tab1" data-toggle="tab">Welcome</a></li>