imp: add horizontal resize feature

playground.css

@@ -18,7 +18,7 @@ body {
   display: grid;
   height: 100%;
   width: 100%;
-  grid-template-columns: 50% 50%;
+  grid-template-columns: auto 6px 100%;
 }
 
 /* LEFT BAR ****************************************/
@@ -75,6 +75,13 @@ body {
   margin-top: 8px;
 }
 
+/* SEPARATOR ****************************************/
+
+.separator {
+  background-color: #1c2128;
+  cursor: col-resize;
+}
+
 /* RIGHT PANE ****************************************/
 .right-pane {
   background-color: lightgray;
@@ -88,6 +95,10 @@ body {
   border: 0;
 }
 
+.right-pane iframe.disabled {
+  pointer-events: none;
+}
+
 .content {
   height: 100%;
 }

src/app.js

@@ -13,7 +13,7 @@ const DEFAULT_XML = `<templates>
 
 const TEMPLATE = `
   <div class="playground">
-      <div class="left-bar">
+      <div class="left-bar" t-att-style="leftPaneStyle">
         <div class="menubar">
           <a class="tab" t-att-class="{active: state.currentTab==='js'}" t-on-click="setTab('js')">JS</a>
           <a class="tab" t-att-class="{active: state.currentTab==='xml'}" t-on-click="setTab('xml')">XML</a>
@@ -29,7 +29,8 @@ const TEMPLATE = `
         </div>
         <div class="code-editor" t-ref="editor"></div>
       </div>
-      <div class="right-pane">
+      <div class="separator horizontal" t-on-mousedown="onMouseDown"/>
+      <div class="right-pane"  t-att-style="rightPaneStyle">
         <div class="welcome" t-if="state.displayWelcome">
           <div>🦉 Odoo Web Lab 🦉</div>
           <div>v<t t-esc="version"/></div>
@@ -55,7 +56,8 @@ class App extends Component {
       css: SAMPLES[0].css || "",
       xml: SAMPLES[0].xml || DEFAULT_XML,
       error: false,
-      displayWelcome: true
+      displayWelcome: true,
+      leftPaneWidth: window.innerWidth / 2
     };
   }
 
@@ -140,6 +142,32 @@ class App extends Component {
     this.editor.session.setMode(mode);
     this.updateState({ currentTab: tab });
   }
+
+  get leftPaneStyle() {
+    return `width:${this.state.leftPaneWidth}px`;
+  }
+
+  get rightPaneStyle() {
+    return `width:${window.innerWidth - 5 - this.state.leftPaneWidth}px`;
+  }
+
+  onMouseDown(ev) {
+    const resizer = ev => {
+      this.updateState({ leftPaneWidth: ev.clientX });
+    };
+
+    document.body.addEventListener("mousemove", resizer);
+    for (let iframe of document.getElementsByTagName("iframe")) {
+      iframe.classList.add("disabled");
+    }
+
+    document.body.addEventListener("mouseup", () => {
+      document.body.removeEventListener("mousemove", resizer);
+      for (let iframe of document.getElementsByTagName("iframe")) {
+        iframe.classList.remove("disabled");
+      }
+    });
+  }
 }
 
 //------------------------------------------------------------------------------