From b2b08ccdd27fd770384c91e386aa93b7ca8a8127 Mon Sep 17 00:00:00 2001
From: Van <lly219@gmail.com>
Date: Tue, 2 Sep 2014 18:09:01 +0800
Subject: [PATCH] refactor layout

---
 static/css/base.css | 80 +++++++++++++++++++++++++++------------------
 static/js/editor.js |  2 +-
 static/js/tree.js   | 20 ++++++------
 static/js/wide.js   |  7 ++++
 view/index.html     | 80 +++++++++++++++++++++++----------------------
 5 files changed, 108 insertions(+), 81 deletions(-)

diff --git a/static/css/base.css b/static/css/base.css
index d27fdf5..d13f72e 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -1,3 +1,4 @@
+/* start reset & function */
 body {
     font-size: 13px;
     margin: 0;
@@ -33,19 +34,64 @@ ul {
 .fn-none {
     display: none;
 }
+/* end reset & function */
+
+/* start framework */
+.menu {
+    border-bottom: 1px solid #DDD;
+}
 
 .content {
     position: relative;
-    height: 460px;
+}
+
+.side {
+    width: 20%;
+    position: absolute;
+    border-right: 1px solid #DDD;
+    height: 100%;
 }
 
 .ztree {
     position: absolute;
-    width: 20%;
-    height: 440px;
     overflow: auto;
+    width: 100%;
+    padding: 0;
 }
 
+.main {
+    width: 80%;
+    position: absolute;
+    left: 20%;
+}
+
+.edit-panel {
+    border-bottom: 1px solid #ddd;
+    width: 100%
+}
+
+.footer {
+    border-top: 1px solid #DDD;
+}
+/* end framework */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 #dirRMenu, #fileRMenu {
     position: absolute;
     border: 1px solid #DDD;
@@ -58,34 +104,6 @@ ul {
     cursor: pointer;
     font-size: 12px;
 }
-
-
-.edit-panel {
-    border: 1px solid #262626;
-    height: 450px;
-    left: 20%;
-    position: absolute;
-    width: 80%;
-}
-
-.output {
-    width: 49%
-}
-
-.shell {
-	display: none;
-    float: right;
-    width: 49%
-}
-
-.shellInput, .shellOutput {	
-    width: 99%
-}
-
-.shellOutput {
-    height: 80px;
-}
-
 /* start tabs */
 .tabs {
     height: 20px;
diff --git a/static/js/editor.js b/static/js/editor.js
index e374c2a..8f7b7c1 100644
--- a/static/js/editor.js
+++ b/static/js/editor.js
@@ -189,7 +189,7 @@ var editors = {
 				"Ctrl-G": "gotoLine"
             }
         });
-        editor.setSize('100%', 430);
+        editor.setSize('100%', $(".edit-panel").height() - $(".edit-header").height());
         editor.setValue(data.content);
         editor.setOption("mode", data.mode);
 
diff --git a/static/js/tree.js b/static/js/tree.js
index 2b64bc4..64dc526 100644
--- a/static/js/tree.js
+++ b/static/js/tree.js
@@ -116,18 +116,18 @@ var tree = {
                                         dataType: "json",
                                         success: function(data) {
                                             if (!data.succ) {
-												alert(data.msg);
-												
+                                                alert(data.msg);
+
                                                 return false;
                                             }
-											
-											if ("img" == data.mode) { // 是图片文件的话新建 tab 打开
-												// 最好是开 tab，但这个最终取决于浏览器设置
-												var w = window.open(data.path);
-												
-												return false;
-											}
-											
+
+                                            if ("img" === data.mode) { // 是图片文件的话新建 tab 打开
+                                                // 最好是开 tab，但这个最终取决于浏览器设置
+                                                var w = window.open(data.path);
+
+                                                return false;
+                                            }
+
                                             editors.newEditor(data);
                                         }
                                     });
diff --git a/static/js/wide.js b/static/js/wide.js
index 76a1403..7b2e4fa 100644
--- a/static/js/wide.js
+++ b/static/js/wide.js
@@ -68,7 +68,14 @@ shellWS.onerror = function(e) {
 var wide = {
     curNode: undefined,
     curEditor: undefined,
+    _initLayout: function () {
+        var mainH = $(window).height() - $(".menu").height() - $(".footer").height();
+        $(".content, .ztree").height(mainH);
+        
+        $(".edit-panel").height(mainH - $(".output").height());
+    },
     init: function() {
+        this._initLayout();
         $('#shellInput').keydown(function(event) {
             if (13 === event.which) {
                 var input = {
diff --git a/view/index.html b/view/index.html
index 1f5aa5f..d641f39 100644
--- a/view/index.html
+++ b/view/index.html
@@ -13,55 +13,57 @@
         <link rel="stylesheet" href="{{.Wide.StaticServer}}/static/css/base.css">
     </head>
     <body>
+        <div class="menu">
+            <a href="/doc/{{.locale}}/index.html" target="_blank">Help</a>
+        </div>
+
         <div class="content">
             <div class="side">
-                <ul id="files" class="ztree"></ul>
+                <div class="side-1">
+                    <ul id="files" class="ztree"></ul>
 
-                <!-- 目录右键菜单 -->
-                <div id="dirRMenu" class="fn-none">
-                    <ul>
-                        <li onclick="tree.newFile();">create file....</li>
-                        <li onclick="tree.newDir();">create dir....</li>
-                        <li onclick="tree.removeIt();">delete it....</li>
-                    </ul>
+                    <!-- 目录右键菜单 -->
+                    <div id="dirRMenu" class="fn-none">
+                        <ul>
+                            <li onclick="tree.newFile();">create file....</li>
+                            <li onclick="tree.newDir();">create dir....</li>
+                            <li onclick="tree.removeIt();">delete it....</li>
+                        </ul>
+                    </div>
+
+                    <!-- 文件右键菜单 -->
+                    <div id="fileRMenu" class="fn-none">
+                        <ul>
+                            <li onclick="tree.removeIt();">delete it....</li>
+                        </ul>
+                    </div>
                 </div>
-
-                <!-- 文件右键菜单 -->
-                <div id="fileRMenu" class="fn-none">
-                    <ul>
-                        <li onclick="tree.removeIt();">delete it....</li>
-                    </ul>
+                <div class="side-2">
                 </div>
             </div>
 
-
-            <div class="edit-panel">
-                <div class="edit-header fn-clear">
-                    <div class="tabs fn-left"></div>
-                    <span class="fn-none fn-right ico-fullscreen" onclick="editors.fullscreen()">全屏</span>
+            <div class="main">
+                <div class="edit-panel">
+                    <div class="edit-header fn-clear">
+                        <div class="tabs fn-left"></div>
+                        <span class="fn-none fn-right ico-fullscreen" onclick="editors.fullscreen()">全屏</span>
+                    </div>
+                    <div class="tabs-panel"></div>
+                </div>
+
+                <div class="output">
+                    <div>
+                        <button onclick="wide.save()">Save</button>
+                        <button onclick="wide.fmt()">Format</button>
+                        <button onclick="wide.run()">Build & Run</button>
+                    </div>
+                    <textarea id="output" rows="7"></textarea>
                 </div>
-                <div class="tabs-panel"></div>
             </div>
         </div>
 
-        <div>
-            <button id="saveBtn" onclick="wide.save()">Save</button>
-            <button id="fmtBtn" onclick="wide.fmt()">Format</button>
-            <button id="runBtn" onclick="wide.run()">Build & Run</button>
-        </div>
-
-        <div>
-            <textarea id="output" class="output" rows="7"></textarea>
-			
-            <div class="shell">
-                <div>
-                    <input id="shellInput" class="shellInput" placeholder=" Command...." />
-                </div>
-
-                <textarea id="shellOutput" class="shellOutput" rows="8"></textarea>
-            </div>
-			
-			<a href="/doc/{{.locale}}/index.html" target="_blank">Help</a>
+        <div class="footer">
+            copyright 88250 & vanessa
         </div>
 
         <script type="text/javascript">
@@ -78,7 +80,7 @@
         <script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/ztree/jquery.ztree.all-3.5.min.js"></script>
 
         <script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/codemirror.js"></script>
-		<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/addon/selection/active-line.js"></script>
+        <script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/addon/selection/active-line.js"></script>
         <script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/addon/hint/show-hint.js"></script>
         <script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/addon/hint/anyword-hint.js"></script>
         <script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/addon/display/fullscreen.js"></script>