Implement vertical toolbar

app/index.html

@@ -19,7 +19,8 @@
     <div class="loading-container" data-bind="css: { loaded: true }">
       <div class="loading-circle" data-bind="css: { loaded: true }"></div>
     </div>
-    <div id="container" style="display: none" data-bind="visible: true">
+    <div id="container" style="display: none" data-bind="visible: true,
+                                                         css: { minimal: minimalView }">
       <!-- ko with: connectDialog --> 
       <div class="connect-dialog dialog" data-bind="visible: visible() && !joinOnly()">
           <div class="dialog-header">
@@ -171,9 +172,12 @@
       <script type="text/html" id="channel-tag">
         <span class="channel-tag" data-bind="text: name"></span>
       </script>
-      <div class="toolbar">
-        <img class="handle-horizontal" src="/svg/handle_horizontal.svg">
-        <img class="handle-vertical" src="/svg/handle_horizontal.svg">
+      <div class="toolbar" data-bind="css: { 'toolbar-horizontal': toolbarHorizontal(),
+                                             'toolbar-vertical': !toolbarHorizontal() }">
+        <img class="handle-horizontal" src="/svg/handle_horizontal.svg"
+             data-bind="click: toggleToolbarOrientation">
+        <img class="handle-vertical" src="/svg/handle_vertical.svg"
+             data-bind="click: toggleToolbarOrientation">
         <img class="tb-connect" data-bind="visible: !connectDialog.joinOnly(),
                                            click: connectDialog.show"
                       rel="connect" src="/svg/applications-internet.svg">
@@ -326,9 +330,12 @@
         <!-- /ko -->
         <!-- /ko -->
       </script>
-      <div class="channel-root-container" data-bind="if: root">
+      <div class="channel-root-container" data-bind="if: root, visible: !minimalView()">
         <div class="channel-root" data-bind="template: {name: 'channel', data: root}"></div>
       </div>
+      <div class="channel-root-container" data-bind="if: thisUser, visible: minimalView()">
+        <div class="channel-root" data-bind="template: {name: 'channel', data: thisUser().channel}"></div>
+      </div>
     </div>
   </body>
   <link rel="stylesheet" type="text/css" href="/main.css">

app/index.js

@@ -132,6 +132,7 @@ class Settings {
     this.voiceMode = load('voiceMode') || 'vad'
     this.pttKey = load('pttKey') || 'ctrl + shift'
     this.vadLevel = load('vadLevel') || 0.3
+    this.toolbarVertical = load('toolbarVertical') || false
   }
 
   save () {
@@ -139,6 +140,7 @@ class Settings {
     save('voiceMode', this.voiceMode)
     save('pttKey', this.pttKey)
     save('vadLevel', this.vadLevel)
+    save('toolbarVertical', this.toolbarVertical)
   }
 }
 
@@ -151,10 +153,12 @@ class GlobalBindings {
     this.connectionInfo = new ConnectionInfo()
     this.commentDialog = new CommentDialog()
     this.settingsDialog = ko.observable()
+    this.minimalView = ko.observable(false)
     this.log = ko.observableArray()
     this.thisUser = ko.observable()
     this.root = ko.observable()
     this.messageBox = ko.observable('')
+    this.toolbarHorizontal = ko.observable(!this.settings.toolbarVertical)
     this.selected = ko.observable()
     this.selfMute = ko.observable()
     this.selfDeaf = ko.observable()
@@ -165,6 +169,12 @@ class GlobalBindings {
       }
     })
 
+    this.toggleToolbarOrientation = () => {
+      this.toolbarHorizontal(!this.toolbarHorizontal())
+      this.settings.toolbarVertical = !this.toolbarHorizontal()
+      this.settings.save()
+    }
+
     this.select = element => {
       this.selected(element)
     }
@@ -591,6 +601,15 @@ class GlobalBindings {
       var homepage = require('../package.json').homepage
       window.open(homepage, '_blank').focus()
     }
+
+    this.updateSize = () => {
+      this.minimalView(window.innerWidth < 320)
+      if (this.minimalView()) {
+        this.toolbarHorizontal(window.innerWidth < window.innerHeight)
+      } else {
+        this.toolbarHorizontal(!this.settings.toolbarVertical)
+      }
+    }
   }
 }
 var ui = new GlobalBindings()
@@ -626,6 +645,9 @@ window.onload = function () {
   ko.applyBindings(ui)
 }
 
+window.onresize = () => ui.updateSize()
+ui.updateSize()
+
 function log () {
   console.log.apply(console, arguments)
   var args = []

themes/MetroMumbleLight/main.css

@@ -5,13 +5,7 @@ html, body {
   height: 100%
 }
 #container {
-  height: 98%;
-  margin: 0 1% 0 1%;
-}
-#container::before {
-  display: block;
-  content: "";
-  height: 1%;
+  height: 100%;
 }
 .channel-root-container {
   text-size: 16px;
@@ -19,17 +13,35 @@ html, body {
   background-color: white;
   border: 1px solid lightgray;
   float: left;
-  width: calc(60% - 6px);
-  height: calc(100% - 38px);
   border-radius: 3px;
   overflow-x: hidden;
   overflow-y: auto;
 }
+.toolbar-horizontal ~ .channel-root-container {
+  margin-top: 2px;
+  width: calc(59% - 6px);
+  height: calc(98% - 38px);
+}
+.toolbar-vertical ~ .channel-root-container {
+  margin-top: 1%;
+  width: calc(59% - 6px);
+  height: calc(98% - 6px);
+}
 .chat {
   margin-right: 2px;
   float: left;
-  width: 40%;
-  height: calc(100% - 38px);
+}
+.toolbar-horizontal ~ .chat {
+  margin-top: 2px;
+  margin-left: 1%;
+  width: 39%;
+  height: calc(98% - 38px);
+}
+.toolbar-vertical ~ .chat {
+  margin-top: 1%;
+  margin-left: 2px;
+  width: calc(39% - 36px);
+  height: calc(98% - 4px);
 }
 .log {
   background-color: white;
@@ -139,7 +151,8 @@ html, body {
   z-index: 100;
 }
 .toolbar {
-  height: 36px;
+  display: flex;
+  align-items: center;
 }
 .toolbar img {
   height: 28px;
@@ -156,17 +169,52 @@ html, body {
   border: 1px solid #bbb;
   background-color: white;
 }
+.toolbar-horizontal {
+  flex-direction: row;
+  height: 36px;
+  margin-top: 4px;
+  margin-left: 1%;
+  padding-left: 5px;
+}
+.toolbar-vertical {
+  flex-direction: column;
+  width: 36px;
+  margin-top: 1%;
+  margin-left: 4px;
+  padding-top: 5px;
+  float: left;
+}
+.toolbar-horizontal > * {
+  margin-right: 5px;
+}
+.toolbar-vertical > * {
+  margin-bottom: 5px;
+}
 .divider {
   display: inline-block;
+}
+.toolbar-horizontal .divider {
   height: 32px;
   border-left: 1px lightgray solid;
 }
-.handle-horizontal {
+.toolbar-vertical .divider {
+  width: 32px;
+  border-top: 1px lightgray solid;
+}
+.toolbar-horizontal .handle-horizontal {
   width: auto !important;
   border: none !important;
   background-color: #eee !important;
 }
-.handle-vertical {
+.toolbar-horizontal .handle-vertical {
+  display: none;
+}
+.toolbar-vertical .handle-vertical {
+  height: auto !important;
+  border: none !important;
+  background-color: #eee !important;
+}
+.toolbar-vertical .handle-horizontal {
   display: none;
 }
 .channel-icon .channel-icon-active {
@@ -307,3 +355,67 @@ form {
   width: 400px;
   left: calc(50% - 200px);
 }
+
+
+/****************/
+/* Minimal view */
+/****************/
+
+.minimal .toolbar-horizontal ~ .channel-root-container {
+  width: calc(98% - 6px);
+}
+.minimal .toolbar-vertical ~ .channel-root-container {
+  width: calc(98% - 42px);
+}
+.minimal .handle-horizontal {
+  display: none;
+}
+.minimal .handle-vertical {
+  display: none;
+}
+.minimal .divider {
+  display: none;
+}
+.minimal .tb-connect {
+  display: none;
+}
+.minimal .tb-information {
+  display: none;
+}
+.minimal .tb-record {
+  display: none;
+}
+.minimal .tb-comment {
+  display: none;
+}
+.minimal .tb-settings {
+  display: none;
+}
+.minimal .tb-sourcecode {
+  display: none;
+}
+.minimal .chat {
+  display: none;
+}
+.minimal .channel-wrapper {
+  display: none;
+}
+.minimal .channel {
+  display: none;
+}
+.minimal .user-tree {
+  display: none;
+}
+.minimal .user-wrapper {
+  margin-left: 0px;
+}
+.minimal .user {
+  margin-left: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  border: none;
+  height: 19px;
+}
+.minimal .user-status {
+  height: 19px;
+}