Redesign UI and add first-party Docker runtime support

ts/base_ts.ts

@@ -5,6 +5,7 @@ var SEARCH_MAPPING = new Object()
 var UNDO = new Object()
 var SERVER_CONNECTION = false
 var WS_AVAILABLE = false
+var ACTIVE_MENU_ID:string = ""
 
 
 // Menü
@@ -51,7 +52,44 @@ function showElement(elmID, type) {
     case false: cssClass = "none"; break;
   }
 
-  document.getElementById(elmID).className = cssClass;
+  var element = document.getElementById(elmID)
+  if (element == null) {
+    return
+  }
+
+  element.className = cssClass;
+}
+
+function setConnectionState(state:string, text:string = "") {
+
+  var label:string = text
+  if (label == undefined || label.length == 0) {
+    switch (state) {
+      case "online":
+        label = "Connected"
+        break
+
+      case "busy":
+        label = "Syncing"
+        break
+
+      case "offline":
+        label = "Offline"
+        break
+
+      default:
+        label = "Connecting"
+        break
+    }
+  }
+
+  var indicator = document.getElementById("connection-indicator")
+  if (indicator == null) {
+    return
+  }
+
+  indicator.className = "status-" + state
+  indicator.innerText = label
 }
 
 function changeButtonAction(element, buttonID, attribute) {
@@ -379,17 +417,19 @@ function searchInMapping() {
 
 function calculateWrapperHeight() {
 
-  if (document.getElementById("box-wrapper")){
+  var elm = document.getElementById("box-wrapper");
+  var content = document.getElementById("content");
 
-    var elm = document.getElementById("box-wrapper");
+  if (elm != null && content != null){
 
-    var divs = new Array("myStreamsBox", "clientInfo", "content");
-    var elementsHeight = 0 - elm.offsetHeight;
-    for (var i = 0; i < divs.length; i++) {
-      elementsHeight = elementsHeight + document.getElementById(divs[i]).offsetHeight;
+    var contentTop = content.getBoundingClientRect().top
+    var freeSpace = window.innerHeight - contentTop - 26
+
+    if (freeSpace < 180) {
+      freeSpace = 180
     }
 
-    elm.style.height = window.innerHeight - elementsHeight + "px";
+    elm.style.height = freeSpace + "px";
 
   }