Hugely improve button appearance

bus-stop · Sep 30, 2018 · f588e7c · f588e7c
1 parent 41a9940
commit f588e7c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 31 deletions.
diff --git a/lib/view.coffee b/lib/view.coffee
@@ -26,15 +26,14 @@ class TerminationView extends View
   @content: ->
     @div class: 'termination terminal-view', outlet: 'terminationView', =>
       @div class: 'panel-divider', outlet: 'panelDivider'
-      @div class: 'btn-toolbar', outlet:'toolbar', =>
-        @button outlet: 'closeBtn', class: 'btn inline-block-tight right', click: 'destroy', =>
-          @span class: 'icon icon-x'
-        @button outlet: 'hideBtn', class: 'btn inline-block-tight right', click: 'hide', =>
-          @span class: 'icon icon-chevron-down'
-        @button outlet: 'maximizeBtn', class: 'btn inline-block-tight right', click: 'maximize', =>
-          @span class: 'icon icon-screen-full'
-        @button outlet: 'inputBtn', class: 'btn inline-block-tight left', click: 'inputDialog', =>
-          @span class: 'icon icon-keyboard'
+      @section class: 'input-block', =>
+        @div class: 'btn-toolbar', =>
+          @div class: 'btn-group', =>
+            @button outlet: 'inputBtn', class: 'btn icon icon-keyboard', click: 'inputDialog'
+          @div class: 'btn-group right', =>
+            @button outlet: 'hideBtn', class: 'btn icon icon-chevron-down', click: 'hide'
+            @button outlet: 'maximizeBtn', class: 'btn icon icon-screen-full', click: 'maximize'
+            @button outlet: 'closeBtn', class: 'btn icon icon-x', click: 'destroy'
       @div class: 'xterm', outlet: 'xterm'
 
   @getFocusedTerminal: ->

diff --git a/styles/termination.less b/styles/termination.less
@@ -27,11 +27,6 @@
   }
 
   &.terminal-view {
-    display: -webkit-flex;
-    height: 100%;
-    flex-direction: column;
-    align-items: center;
-    flex-wrap: nowrap;
 
     .panel-divider {
       order: 1;
@@ -48,25 +43,18 @@
       width: 100%;
     }
 
-    .btn-toolbar {
-      order: 2;
-      flex: 0 0 auto;
-      width: 100%;
-      padding: 4px 2px 4px 2px;
+    .input-block{
+      padding: 0.375em;
 
-      .left {
-        float: left;
-      }
-      .right {
-        float: right;
-      }
+      .btn-toolbar {
+        padding: 0.375em;
 
-      .btn {
-        top: 0;
-        height: auto;
-        line-height: normal;
-        padding: 0;
-        margin: 0 5px;
+        .left {
+          float: left;
+        }
+        .right {
+          float: right;
+        }
       }
     }
 
@@ -115,6 +103,10 @@
   }
 
   &.status-bar {
+    position: relative;
+    vertical-align: middle;
+    // display: inline;
+    height: @status-bar-height;
      display: -webkit-flex;
     -webkit-user-select: none;
     margin: 0 10px;