Refine version control action UI

minahlee · minahlee · commit bbca1ba2ae32 · 2016-06-21T01:40:00.000-07:00
diff --git a/zeppelin-web/src/app/notebook/notebook-actionBar.html b/zeppelin-web/src/app/notebook/notebook-actionBar.html
@@ -61,32 +61,34 @@ <h3>
               tooltip-placement="bottom" tooltip="Export the notebook">
         <i class="fa fa-download"></i>
       </button>
-        <ul class="dropdown-menu" role="menu" style="width:250px">
-          <li>
-            <div class="cron-preset-container">
-              <div>
-                <input type="text"
-                       dropdown-input
-                       placeholder="commit message"
-                       id="note.checkpoint.message"
-                       ng-model="note.checkpoint.message"/>
-                <button type="button"
-                  class="btn btn-default btn-xs"
-                  ng-hide="viewOnly"
-                  ng-click="checkpointNotebook(note.checkpoint.message)"
-                  tooltip-placement="bottom" tooltip="Commit the notebook">Commit
-                </button>
-              </div>
+      <button type="button"
+              class="btn btn-default btn-xs dropdown-toggle"
+              ng-hide="viewOnly"
+              data-toggle="dropdown"
+              tooltip-placement="bottom" tooltip="Version control">
+        <i class="fa fa-file-code-o"></i>
+      </button>
+      <ul class="dropdown-menu" role="menu" style="width:250px">
+        <li>
+          <div class="commit-container">
+            <div>
+              <input type="text"
+                     dropdown-input
+                     placeholder="commit message"
+                     id="note.checkpoint.message"
+                     style="width: 145px;"
+                     ng-model="note.checkpoint.message"/>
+              <button type="button"
+                      class="btn btn-default btn-xs"
+                      ng-hide="viewOnly"
+                      ng-click="checkpointNotebook(note.checkpoint.message)"
+                      style="margin-left: 4px;"
+                      tooltip-placement="bottom" tooltip="Commit the notebook">Commit
+              </button>
             </div>
-          </li>
-        </ul>
-        <button type="button"
-                class="btn btn-default btn-xs dropdown-toggle"
-                ng-hide="viewOnly"
-                data-toggle="dropdown"
-                tooltip-placement="bottom" tooltip="Version control">
-          <i class="fa fa-file-code-o"></i>
-        </button>
+          </div>
+        </li>
+      </ul>
     </span>
 
 <!-- put the delete action by itself for your protection -->
diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css
@@ -210,6 +210,19 @@
   border: 0;
 }
 
+.commit-container {
+  padding: 10px 20px 6px 20px;
+  font-weight: normal;
+  word-wrap: break-word;
+  white-space: initial;
+}
+
+/* overwrite bootstrap css for version control button */
+.btn-group > .btn + .dropdown-toggle {
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
 .cron-preset-container {
   padding: 10px 20px 0 20px;
   font-weight: normal;
