fullscreen

conf/wide.json

@@ -16,10 +16,14 @@
             "Workspace": "{pwd}/data/user_workspaces/admin",
             "LatestSessionContent": {
                 "FileTree": [
-                    "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest"
+                    "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest",
+                    "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\time",
+                    "D:\\go\\src\\pkg",
+                    "D:\\go\\src\\pkg\\archive"
                 ],
                 "Files": [
-                    "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\1123"
+                    "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\1123",
+                    "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\time\\main.go"
                 ],
                 "CurrentFile": "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\1123"
             }

static/css/base.css

@@ -153,43 +153,31 @@ ul {
 /* end tabs */
 
 /* start framework */
-.menu {
-    background-color: #F0F0F0;
-    border-bottom: 1px solid #A5A5A5;
-    height: 25px;
-}
-
 .content {
     position: relative;
 }
 
 .side {
+    background-color: #FFF;
     width: 20%;
     position: absolute;
     border-right: 1px solid #9B9B9B;
     height: 100%;
 }
 
-.ztree {
+.side-fullscreen {
-    position: absolute;
-    overflow: auto;
     width: 100%;
-    padding: 0;
+    z-index: 1000;
-}
-
-.main {
-    width: 80%;
-    position: absolute;
-    left: 20%;
-}
-
-.footer {
-    border-top: 1px solid #919191;
-    background-color: #F0F0F0;
 }
 /* end framework */
 
 /* start menu */
+.menu {
+    background-color: #F0F0F0;
+    border-bottom: 1px solid #A5A5A5;
+    height: 25px;
+}
+
 .menu > ul > li {
     float: left;
 }
@@ -218,8 +206,12 @@ ul {
 
 /* start editor */
 .edit-panel {
+    width: 80%;
+    position: absolute;
+    left: 20%;
     background-color: #D7D7D7;
-    width: 100%
+    width: 80%;
+    height: 70%;
 }
 
 .edit-header .ico {
@@ -238,6 +230,24 @@ ul {
 /* end editor */
 
 /* start bottom-window-group */
+.bottom-window-group {
+    width: 80%;
+    position: absolute;
+    left: 20%;
+    width: 80%;
+    height: 30%;
+    top: 70%;
+    background-color: #fff;
+}
+
+.bottom-window-group-fullscreen {
+    height: 100%;
+    left: 0;
+    top: -1px;
+    width: 100%;
+    z-index: 1000;
+}
+
 .bottom-window-group .tabs {
     background-color: #E6E6E6;
     border-top: 1px solid #A4A4A4;
@@ -256,22 +266,15 @@ ul {
     color: #FFF;
 }
 
-.bottom-window-group .tabs-panel {
-    height: 133px;
-}
-
 .bottom-window-group textarea.output {
     border-width: 0;
     background-color: #FFF;
     color: #555555;
     width: 100%;
-    height: 132px;
 }
 
 .bottom-window-group .notification,
-.bottom-window-group .search,
+.bottom-window-group .search {
-.bottom-window-group .output {
-    height: 133px;
     overflow: auto;
 }
 
@@ -292,6 +295,11 @@ ul {
 /* end bottom-window-group */
 
 /* start footer */
+.footer {
+    border-top: 1px solid #919191;
+    background-color: #F0F0F0;
+}
+
 .notification-count {
     float: right;
     display: none;

static/css/side.css

@@ -1,4 +1,11 @@
 /* start tree */
+.ztree {
+    position: absolute;
+    overflow: auto;
+    width: 100%;
+    padding: 0;
+}
+
 .ztree li a.curSelectedNode {
     background-color: #3875d7;
     border-width: 0;

static/js/wide.js

@@ -210,10 +210,12 @@ var wide = {
         });
     },
     _initLayout: function () {
-        var mainH = $(window).height() - $(".menu").height() - $(".footer").height() - 2;
+        var mainH = $(window).height() - $(".menu").height() - $(".footer").height() - 2,
+                bottomH = Math.floor(mainH * 0.3);
         $(".content, .ztree").height(mainH);
 
-        $(".edit-panel").height(mainH - $(".bottom-window-group").height());
+        $(".bottom-window-group .output, notification").height(bottomH - 23);
+        $(".bottom-window-group .notification, .bottom-window-group .search").height(bottomH - 20);
     },
     _initBottomWindowGroup: function () {
         this.bottomWindowTab = new Tabs({
@@ -294,10 +296,34 @@ var wide = {
             console.log('[output onerror] ' + e);
         };
     },
-    init: function () {
+    _initFullscreen: function () {
-        this._initWS();
+        $(".bottom-window-group .tabs").dblclick(function () {
+            var $it = $(".bottom-window-group");
+            if ($it.hasClass("bottom-window-group-fullscreen")) {
+                $(".bottom-window-group").removeClass("bottom-window-group-fullscreen");
 
-        this._initLayout();
+            } else {
+                var bottomH = $(".content, .ztree").height();
+                $(".bottom-window-group .output, notification").height(bottomH - 22);
+                $(".bottom-window-group .notification, .bottom-window-group .search").height(bottomH - 19);
+                
+                $(".bottom-window-group").addClass("bottom-window-group-fullscreen");
+            }
+        });
+
+        $(".side").dblclick(function () {
+            var $it = $(this);
+            if ($it.hasClass("side-fullscreen")) {
+                $it.removeClass("side-fullscreen");
+            } else {
+                $it.addClass("side-fullscreen");
+            }
+        });
+    },
+    init: function () {
+        this._initFullscreen();
+
+        this._initWS();
 
         this._initBottomWindowGroup();
 
@@ -318,6 +344,8 @@ var wide = {
         });
 
         this._initDialog();
+
+        this._initLayout();
     },
     _save: function () {
         var request = newWideRequest();

view/index.html

@@ -128,7 +128,6 @@
                 </div>
             </div>
 
-            <div class="main">
             <div class="edit-panel">
                 <div class="edit-header fn-clear">
                     <div class="tabs fn-left"></div>
@@ -161,7 +160,6 @@
                 </div>
             </div>
         </div>
-        </div>
 
         <div class="footer">
             <span>|</span>