Flex-box based layout (for docking).

mcwehner · Mar 19, 2013 · 3749154 · 3749154
1 parent e7469dc
commit 3749154
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 31 deletions.
diff --git a/css/main.less b/css/main.less
@@ -9,6 +9,7 @@
 }
 
 body {
+    display: -webkit-box;
     position: relative;
     height: 100%;
 

diff --git a/css/panels/editor.less b/css/panels/editor.less
@@ -1,9 +1,19 @@
 .panel[data-name=Source] {
     textarea {
+        box-sizing: border-box;
+
+        width: 100%;
+        height: 100%;
+
+        border: 0;
+        margin: 0;
+
+        resize: none;
+
         font-size: 1.3em;
+        font-family: "Bitstream Vera Sans Mono", monospace;
 
-        min-width: 55em;
-        min-height: 37em;
+        white-space: pre;
 
         &:focus { outline: none; }
     }

diff --git a/css/panels/panel.less b/css/panels/panel.less
@@ -1,5 +1,6 @@
 .panel-group {
-    display: inline-block;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
 
     font-size: 0.625em;
     text-shadow: 0 -1px 0 #262626;
@@ -17,21 +18,19 @@
                     0 0 0 1px #262626,
                     0 0 8px 5px #262626
                     ;
-
-        header {
-            // border-top-left-radius: 0.5em;
-            // border-top-right-radius: 0.5em;
-        }
     }
 
     &.docked {
-        position: absolute;
+        &.left {
+            &:not(:last-child) { margin-right: 0.5em; }
+            &:last-child { -webkit-box-flex: 1; }
+        }
 
-        &.left, &.right { height: 100%; }
-        &.top, &.bottom { width: 100%; }
+        &.right {
+            &:not(:first-child) { margin-left: 0.5em; }
+        }
 
-        &.right { right: 0; }
-        &.bottom { bottom: 0; }
+        // &.left, &.right { height: 100%; }
     }
 
     header {
@@ -63,6 +62,8 @@
                         1px 0 0 #262626,
                         0 1px 0 #4a4a4a
                         ;
+
+            cursor: pointer;
         }
     }
 

diff --git a/js/panels/editor.js b/js/panels/editor.js
@@ -1,9 +1,11 @@
 define([
-    "./panel",                          // Panel
+    "./panel",                                  // Panel
 
-    "text!templates/panels/editor.ejs"  // template
+    "text!templates/panels/editor.ejs",         // template
+
+    "text!assets/shaders/three-test/test.vert"  // vertexSource
 ],
-function (Panel, template) {
+function (Panel, template, vertexSource) {
 
     function EditorPanel () {
         Panel.call(this, "Source");
@@ -14,7 +16,9 @@ function (Panel, template) {
 
 
     EditorPanel.prototype.render = function (parentElement) {
-        parentElement.append( new EJS({ text: template }).render({}) );
+        parentElement.append( new EJS({ text: template }).render({
+            source : vertexSource
+        }) );
     };
 
     return EditorPanel;

diff --git a/js/panels/panel-group.js b/js/panels/panel-group.js
@@ -24,13 +24,14 @@ function (template) {
         }
 
         this.domElement = element;
-        this.domElement.css("z-index", ++PanelGroup.counter);
+        // this.domElement.css("z-index", ++PanelGroup.counter);
 
         $.each(this.panels, function (i, panel) {
             panel.render( $(".panel-group .panel[data-name='" + panel.name + "']") );
         });
 
         // Moving panel groups
+        /*
         $("header", this.domElement).on("mousedown", function (mousedownEvent) {
             var offset    = $(this).offset();
             var snapWidth = 30;
@@ -65,11 +66,12 @@ function (template) {
             
             return false;
         });
-
+        */
+
         // Panel group focus
-        $(this.domElement).on("mouseup", function () {
-            self.domElement.css("z-index", ++PanelGroup.counter);
-        });
+        // $(this.domElement).on("mouseup", function () {
+        //     self.domElement.css("z-index", ++PanelGroup.counter);
+        // });
     };
 
     PanelGroup.prototype.float = function (x, y) {

diff --git a/js/panels/preview.js b/js/panels/preview.js
@@ -1,10 +1,10 @@
 define([
-    "./panel",                                  // Panel
+    "./panel",                              // Panel
 
-    "text!templates/panels/preview-panel.ejs",  // template
+    "text!templates/panels/preview.ejs",    // template
 
-    "text!shaders/three-test/test.vert",        // testVertexShader
-    "text!shaders/three-test/test.frag"         // testFragmentShaders
+    "text!shaders/three-test/test.vert",    // testVertexShader
+    "text!shaders/three-test/test.frag"     // testFragmentShaders
 ],
 function (Panel, template, testVertexShader, testFragmentShader) {
     function PreviewPanel (options) {
@@ -32,7 +32,7 @@ function (Panel, template, testVertexShader, testFragmentShader) {
         this.renderer.setSize(this.options.width, this.options.height);
 
         this.animationEnabled = true;
-        this.tumbleEnabled    = true;
+        this.tumbleEnabled    = false;
 
         this.tumbleX = 0.01;
         this.tumbleY = 0.01;

diff --git a/templates/panels/editor.ejs b/templates/panels/editor.ejs
@@ -1,2 +1 @@
-<textarea>
-</textarea>
+<textarea><%= source %></textarea>
diff --git a/templates/panels/panel-group.ejs b/templates/panels/panel-group.ejs
@@ -1,6 +1,6 @@
 <div class="panel-group docked left">
     <header>
-        <h1>x</h1>
+        <h1></h1>
     </header>
 
     <nav>

diff --git a/templates/panels/preview-panel.ejs → templates/panels/preview.ejs b/templates/panels/preview-panel.ejs → templates/panels/preview.ejs
@@ -1,6 +1,6 @@
 <section class="control-group">
     <label>
-        <input name="tumble" type="checkbox" checked="checked"/>
+        <input name="tumble" type="checkbox"/>
         <span>Tumble</span>
     </label>
 </section>