moved window list to sidebar; 3-way split

css/ui.css

@@ -68,6 +68,7 @@
   background-color:#333;
   float:left;
   height:100%;
+  overflow:hidden;
 }
 div.editor {
   line-height:1.25;
@@ -83,7 +84,7 @@ div.memdump {
 }
 div.mem_info {
   position: fixed;
-  left: 51%;
+  right: 10px;
   bottom: 10px;
   background-color: #333;
   color: #66ff66;
@@ -302,7 +303,7 @@ canvas.pixelated {
 .twitter-follow-button:hover {
   color:#99ffff;
 }
-.dropdown-item-checked::before {
+.dropdown-menu .dropdown-item-checked::before {
   position: absolute;
   left: .4rem;
   content: '\2713';
@@ -361,3 +362,24 @@ div.markdown td {
 div.markdown th {
  padding:0.2em;
 }
+#sidebar {
+ float:left;
+}
+#sidebar ul {
+  list-style-type:none;
+  padding:1em;
+}
+#sidebar a {
+  color:#ddffdd;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  overflow:hidden;
+  display:block;
+}
+#sidebar a:focus {
+  text-decoration:none;
+}
+#sidebar .dropdown-item-checked {
+  font-weight:bold;
+  background-color:#333;
+}

index.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
 <style type="text/css" media="screen">
 body {
-  overflow: hidden !important;
+  overflow: hidden;
   font-size: 11px;
 }
 .pixeditback {
@@ -128,15 +128,6 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
   <select id="preset_select" name="" title="Project Select">
   </select>
 
-  <span class="dropdown">
-    <a class="btn btn-secondary dropdown-toggle" id="windowMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Window Select">
-      <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
-      <span class="caret"></span>
-    </a>
-    <ul class="dropdown-menu" aria-labelledby="windowMenuButton" id="windowMenuList">
-    </ul>
-  </span>
-
   <img id="compile_spinner" src="images/spinner.gif" height="20em" style="visibility:hidden;margin-left:8px;margin-right:8px">
   <span class="btn_group debug_group" id="debug_bar">
     <button id="dbg_reset" type="button" title="Reset and Break"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button>
@@ -194,10 +185,14 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
   <!--<span id="best_in_firefox" style="display:none;font-size:12px;font-style:italic;float:right;color:#666">Note: Works best in Firefox</span>-->
 </div>
 <div id="notebook">
+  <div id="sidebar">
+    <ul id="windowMenuList">
+    </ul>
+  </div>
   <div id="workspace">
   </div>
   <div class="emulator" id="emulator">
-    <div id="javatari-div" style="margin:10px; display:none">
+    <div id="javatari-div" style="float:center;margin:10px;display:none">
       <div id="javatari-screen" style="margin: 0 auto; box-shadow: 2px 2px 10px rgb(60, 60, 60);"></div>
       <div id="javatari-console-panel" style="margin: 0 auto; box-shadow: 2px 2px 10px rgb(60, 60, 60);"></div>
     </div>

src/ui.ts

@@ -142,7 +142,6 @@ function refreshWindowList() {
   addWindowItem(id, getFilenameForPath(id), loadEditor);
 
   // add other source files
-  separate = true;
   current_project.iterateFiles(function(id, text) {
     if (text && id != main_file_id)
       addWindowItem(id, getFilenameForPath(id), loadEditor);
@@ -150,6 +149,7 @@ function refreshWindowList() {
 
   // add listings
   // TODO: update listing when recompiling
+  separate = true;
   var listings = current_project.getListings();
   if (listings) {
     for (var lstfn in listings) {
@@ -1190,8 +1190,8 @@ function loadScript(scriptfn, onload) {
 }
 
 export function setupSplits() {
-  const splitName = 'workspace-split-' + platform_id;
+  const splitName = 'workspace-split3-' + platform_id;
-  var sizes = [50, 50];
+  var sizes = [0, 50, 50];
   var sizesStr = localStorage.getItem(splitName)
   if (sizesStr) {
     try {
@@ -1199,8 +1199,9 @@ export function setupSplits() {
     } catch (e) { console.log(e); }
   }
   var split;
-  split = Split(['#workspace', '#emulator'], {
+  split = Split(['#sidebar', '#workspace', '#emulator'], {
     sizes: sizes,
+    minSize: [0, 250, 250],
     onDragEnd: function() {
       localStorage.setItem(splitName, JSON.stringify(split.getSizes()))
     },