Implemented new panel scaling model
Renamed 'boxes' to 'file browser' Added header and footers to file browser Updated panels to adhere to new panel scaling Renamed 'script' to 'editor' Replaced editor menu with tabs Modified editor buttons
Changes
--- app/Koala.js 8340d77aa61f4c3497368786ffa2f19f452299f3
+++ app/Koala.js a7800fc72ba89158bc21ce635ac862a330df24ef
@@ -70,10 +70,9 @@
- $("btn_dl").onclick = function(){+ $("btn_test").onclick = function(){- $("btn_hl").onclick = function(){ editor.update(); };--- static/elements.css 8340d77aa61f4c3497368786ffa2f19f452299f3
+++ static/elements.css a7800fc72ba89158bc21ce635ac862a330df24ef
@@ -1,3 +1,4 @@
+/*
@@ -5,6 +6,7 @@
+*/
@@ -33,11 +35,6 @@
-.panel > h2 {- padding: 2px 8px;
- font-size: 14px;
-}
-
@@ -70,12 +67,8 @@
- margin: 12px;
- position: absolute;
- top: 21px;
- bottom: 0;
- left: 0;
- right: 0;
+ height: 100%;
+ width: 100%;
@@ -86,10 +79,6 @@
-}
-
-.panel_content {- margin: 12px;
@@ -140,7 +129,8 @@
- height: 340px;
+ height: 100%;
+ width: 100%;
--- static/index.html 8340d77aa61f4c3497368786ffa2f19f452299f3
+++ static/index.html a7800fc72ba89158bc21ce635ac862a330df24ef
@@ -47,32 +47,37 @@
- <h2>boxes</h2>
- <ul id='files'>
+ <h2>file browser</h2>
+ <div class='header menu'>
+ <button>+</button>
+ <button>home</button>
+ </div>
+ <ul id='files' class='content head scroll foot'>
+ <div class='footer menu'>
+ <button>new</button>
+ <button>delete</button>
+ </div>
- <h2>script</h2>
- <div class='menu'>
+ <h2>editor</h2>
+ <div class='header tab'>
+ <button class='current'>*unsaved script</button>
- <button>save</button>
- <button id='btn_dl'>download</button>
+ </div>
+ <div class='content head stretch foot'>
+ <textarea id='rta_in' class='input'></textarea>
+ </div>
+ <div class='footer menu'>
+ <button id='btn_test'>test</button>
- </div>
- <div class='panel_content'>
- <textarea id='rta_in' class='input'></textarea>
- <p>
- <button id='btn_text'>Text</button>
- <button id='btn_html'>HTML</button>
- <button id='btn_hl'>Refresh</button>
- </p>
@@ -81,14 +86,16 @@
- <div id='canvas' class='shadow'></div>
+ <div class='content stretch'>
+ <div id='canvas' class='shadow'></div>
+ </div>
- <div class='tab'><button class='current'>name</button><button>placement</button><button>colors</button></div>
- <div class='panel_content'>
+ <div class='header tab'><button class='current'>name</button><button>placement</button><button>colors</button></div>
+ <div class='content head stretch'>
--- static/layout.css 8340d77aa61f4c3497368786ffa2f19f452299f3
+++ static/layout.css a7800fc72ba89158bc21ce635ac862a330df24ef
@@ -115,38 +115,60 @@
+.panel, .panel > h2, .panel > .header, .panel > .footer {+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.panel > .header, .panel > .content, .panel > .footer {+ position: absolute;
+ left: 0;
+ right: 0;
+}
+
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- height: 16px;
+ height: 21px;
-.panel > .scroll {- position: absolute;
+.panel > .header {+ height: 30px;
+ top: 21px;
+}
+
+.panel > .footer {+ height: 30px;
+ bottom: 0;
+}
+
+.panel > .content {- left: 0;
- right: 0;
+}
+
+.panel > .head {+ top: 51px;
+}
+
+.panel > .foot {+ bottom: 30px;
+}
+
+.panel > .scroll {- position: absolute;
- top: 21px;
- bottom: 0;
- left: 0;
- right: 0;
