From 8a947555a5fb589e96c3919bc9ee55774a087e4b 2015-03-25 18:07:36
From: Min RK <benjaminrk@gmail.com>
Date: 2015-03-25 18:07:36
Subject: [PATCH] Backport PR #7933: Move dynamic buttons to the left and upload button to the right.

Requested by @ellisonbg .

Before:
![old](https://cloud.githubusercontent.com/assets/3292874/6454809/aa541ee4-c101-11e4-979f-707df477cdc2.PNG)

...

---

diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index 56d6f31..f505adb 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -8621,10 +8621,8 @@ span#login_widget > .button .badge,
   width: 12ex;
   margin-right: -12ex;
 }
-.alternate_upload .input-overlay {
-  display: inline-block;
-  font-weight: bold;
-  line-height: 1em;
+.alternate_upload .btn-upload {
+  height: 22px;
 }
 /**
  * Primary styles
@@ -8657,6 +8655,7 @@ ul.breadcrumb span {
   padding-top: 1px;
 }
 .dynamic-buttons {
+  padding-top: 3px;
   display: inline-block;
 }
 .list_toolbar [class*="span"] {
@@ -8940,6 +8939,10 @@ ul#new-menu {
 .shutdown-button {
   display: none;
 }
+.dynamic-instructions {
+  display: inline-block;
+  padding-top: 4px;
+}
 /*!
 *
 * IPython text editor webapp
diff --git a/IPython/html/static/tree/js/notebooklist.js b/IPython/html/static/tree/js/notebooklist.js
index f2f1de8..bb716a0 100644
--- a/IPython/html/static/tree/js/notebooklist.js
+++ b/IPython/html/static/tree/js/notebooklist.js
@@ -493,6 +493,13 @@ define([
         }
         // Update total counter
         $('#counter-select-all').html(checked===0 ? '&nbsp;' : checked);
+
+        // If at aleast on item is selected, hide the selection instructions.
+        if (checked > 0) {
+            $('.dynamic-instructions').hide();
+        } else {
+            $('.dynamic-instructions').show();
+        }
     };
 
     NotebookList.prototype.add_link = function (model, item) {
diff --git a/IPython/html/static/tree/less/altuploadform.less b/IPython/html/static/tree/less/altuploadform.less
index bc107ff..be608cf 100644
--- a/IPython/html/static/tree/less/altuploadform.less
+++ b/IPython/html/static/tree/less/altuploadform.less
@@ -1,29 +1,26 @@
 /* We need an invisible input field on top of the sentense*/
 /* "Drag file onto the list ..." */
 
-.alternate_upload
-{
+.alternate_upload {
     background-color:none;
     display: inline;
-}
 
-.alternate_upload.form
-{
-    padding: 0;
-    margin:0;
-}
+    &.form
+    {
+        padding: 0;
+        margin:0;
+    }
 
-.alternate_upload input.fileinput
-{
-    display: inline;
-    opacity: 0;
-    z-index: 2;
-    width: 12ex;
-    margin-right: -12ex;
-}
+    input.fileinput
+    {
+        display: inline;
+        opacity: 0;
+        z-index: 2;
+        width: 12ex;
+        margin-right: -12ex;
+    }
 
-.alternate_upload .input-overlay {
-    display: inline-block;
-    font-weight: bold;
-    line-height:1em;
+    .btn-upload {
+        height: @btn_mini_height;
+    }
 }
diff --git a/IPython/html/static/tree/less/tree.less b/IPython/html/static/tree/less/tree.less
index ba2236e..e75587f 100644
--- a/IPython/html/static/tree/less/tree.less
+++ b/IPython/html/static/tree/less/tree.less
@@ -49,6 +49,7 @@ ul.breadcrumb {
 }
 
 .dynamic-buttons {
+    padding-top: @dashboard_tb_pad - 1px;
     display: inline-block;
 }
 
@@ -321,3 +322,8 @@ ul#new-menu {
 .shutdown-button {
     display: none;
 }
+
+.dynamic-instructions {
+    display: inline-block;
+    padding-top: @dashboard_tb_pad;
+}
diff --git a/IPython/html/templates/tree.html b/IPython/html/templates/tree.html
index fa22adc..498b7de 100644
--- a/IPython/html/templates/tree.html
+++ b/IPython/html/templates/tree.html
@@ -25,24 +25,26 @@ data-terminals-available="{{terminals_available}}"
         <div id="notebooks" class="tab-pane active">
           <div id="notebook_toolbar" class="row">
             <div class="col-sm-8 no-padding">
-              <form id='alternate_upload'  class='alternate_upload'>
-                <span id="notebook_list_info">
-                To import a notebook, drag the file onto the listing below or
-                <span class="input-overlay">
-                <input type="file" name="datafile" class="fileinput" multiple='multiple'>
-                click here.
-                </span>
-                </span>
-              </form>
+              <div class="dynamic-instructions">
+                Select items to perform actions on them.
+              </div>
+              <div class="dynamic-buttons">
+                  <button title="Duplicate selected" class="duplicate-button btn btn-default btn-xs">Duplicate</button>
+                  <button title="Rename selected" class="rename-button btn btn-default btn-xs">Rename</button>
+                  <button title="Shutdown selected notebook(s)" class="shutdown-button btn btn-default btn-xs btn-warning">Shutdown</button>
+                  <button title="Deleted selected" class="delete-button btn btn-default btn-xs btn-danger"><i class="fa fa-trash"></i></button>
+              </div>
             </div>
             <div class="col-sm-4 no-padding tree-buttons">
               <div class="pull-right">
-                <div class="dynamic-buttons">
-                    <button title="Duplicate selected" class="duplicate-button btn btn-default btn-xs">Duplicate</button>
-                    <button title="Rename selected" class="rename-button btn btn-default btn-xs">Rename</button>
-                    <button title="Shutdown selected notebook(s)" class="shutdown-button btn btn-default btn-xs btn-warning">Shutdown</button>
-                    <button title="Deleted selected" class="delete-button btn btn-default btn-xs btn-danger"><i class="fa fa-trash"></i></button>
-                </div>
+                <form id='alternate_upload'  class='alternate_upload'>
+                  <span id="notebook_list_info">
+                  <span class="btn btn-xs btn-default btn-upload">
+                  <input  title="Click to browse for a file to upload." type="file" name="datafile" class="fileinput" multiple='multiple'>
+                  Upload
+                  </span>
+                  </span>
+                </form>
                 <div id="new-buttons" class="btn-group">
                   <button class="dropdown-toggle btn btn-default btn-xs" data-toggle="dropdown">
                   <span>New</span>