窗口最大化，最小化

2014-09-25 15:56:26 +08:00 · 2014-09-25 15:56:26 +08:00 · f4e1f0f9fc
parent 4af82c672c
commit f4e1f0f9fc
11 changed files with 120 additions and 62 deletions
--- a/conf/wide.json
+++ b/conf/wide.json
@ -23,12 +23,10 @@
                    "D:\\go\\src\\pkg"
                ],
                "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\\time\\main.go",
-                    "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\hello\\2.json",
-                    "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\hello\\main.go"
+                    "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\time\\1.json"
                ],
-                "CurrentFile": "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\hello\\main.go"
+                "CurrentFile": "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\time\\1.json"
            }
        }
    ]
--- a/data/user_workspaces/admin/src/mytest/time/1.json
+++ b/data/user_workspaces/admin/src/mytest/time/1.json
@ -1,24 +1,16 @@
-{
-    "Server": "{IP}:7070",
-    "StaticServer": "http://{IP}:7070",
-    "EditorChannel": "ws://{IP}:7070",
-    "OutputChannel": "ws://{IP}:7070",
-    "ShellChannel": "ws://{IP}:7070",
-    "SessionChannel": "ws://{IP}:7070",
-    "StaticResourceVersion": "201409032040",
-    "MaxProcs": 4,
-    "RuntimeMode": "dev",
-    "Pwd": "{pwd}",
-    "Users": [
-        {
-            "Name": "admin",
-            "Password": "admin",
-            "Workspace": "{pwd}/data/user_workspaces/admin",
-            "LatestSessionContent": {
-                "FileTree": [],
-                "Files": [],
-                "CurrentFile": ""
-            }
-        }
-    ]
-}
+package main
+
+import (
+	"fmt"
+	"mytest/time/pkg"
+	"time"
+)
+
+func main() {
+	for i := 0; i < 50; i++ {
+		fmt.Println("Hello, 世界", pkg.Now())
+
+		time.Sleep(time.Second)
+	}
+
+}
--- a/i18n/zh_CN.json
+++ b/i18n/zh_CN.json
@ -40,5 +40,8 @@
    "stop": "停止",
    "output": "输出",
    "search": "搜索",
-    "notification": "通知"
+    "notification": "通知",
+    "min": "最小化",
+    "max_side": "左侧窗口最大化",
+    "max_bottom": "底部窗口最大化"
 }
--- a/static/css/base.css
+++ b/static/css/base.css
@ -3,6 +3,7 @@ body {
    font-size: 13px;
    margin: 0;
    color: #000;
+    overflow-x: hidden;
 }

 ul {
@ -53,6 +54,14 @@ ul {
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
+    color: #666;
+    cursor: pointer;
+    font-size: 13px;
+    line-height: 18px;
+}
+
+.font-ico:hover {
+    color: #333;
 }

 .ico-play:before {
@ -79,17 +88,18 @@ ul {
    content: "\e608";
 }

-.ico-close {
-    color: #666;
+.ico-max:before {
+    content: "\e60c";
 }

-.ico-close:hover {
-    color: #333;
+.ico-min:before {
+    content: "\e60d";
+    position: absolute;
+    right: 5px;
 }

 .ico-close:before {
    content: "\e60a";
-    cursor: pointer;
 }
 /* end reset & function */

@ -143,7 +153,8 @@ ul {

 .tabs > div {
    float: left;
-    line-height: 19px;
+    line-height: 18px;
+    height: 18px;
    padding: 0 5px;
    cursor: pointer;
    background-color: #DDD;
@ -160,6 +171,7 @@ ul {
 /* start framework */
 .content {
    position: relative;
+    overflow: hidden;
 }

 .side {
@ -168,6 +180,7 @@ ul {
    position: absolute;
    border-right: 1px solid #9B9B9B;
    height: 100%;
+    z-index: 11;
 }

 .side-fullscreen {
@ -194,18 +207,6 @@ ul {
    padding: 5px;
    text-decoration: none;
 }
-
-.toolbars > span {
-    color: #666;
-    cursor: pointer;
-    font-size: 16px;
-    line-height: 25px;
-    margin-right: 5px;
-}
-
-.toolbars > span:hover {
-    color: #333;
-}
 /* end menu */

 /* start editor */
@ -216,6 +217,7 @@ ul {
    background-color: #D7D7D7;
    width: 80%;
    height: 70%;
+    overflow: hidden;
 }

 .edit-panel .tabs > div {
@ -229,7 +231,13 @@ ul {
    background-color: #F7F7F7;
 }

-.edit-header .ico {
+.toolbars {
+    position: absolute;
+    right: 5px;
+    top: 1px;
+}
+
+.edit-panel .tabs .ico {
    background-image: url("../images/ico-file.png");
    float: left;
    height: 16px;
@ -252,6 +260,7 @@ ul {
    width: 80%;
    height: 30%;
    top: 70%;
+    z-index: 11;
    background-color: #fff;
 }

@ -295,6 +304,9 @@ ul {
 .footer {
    border-top: 1px solid #919191;
    background-color: #F0F0F0;
+    padding-left: 5px;
+    height: 19px;
+    line-height: 18px;
 }

 .notification-count {
--- a/static/css/fonts/icomoon.eot
+++ b/static/css/fonts/icomoon.eot
--- a/static/css/fonts/icomoon.svg
+++ b/static/css/fonts/icomoon.svg
@ -14,11 +14,13 @@
 <glyph unicode="&#xe604;" d="M400 416h-288c-26.51 0-48-21.49-48-48v-16h384v16c0 26.51-21.49 48-48 48zM316.16 448l7.058-50.5h-134.436l7.057 50.5h120.321zM320 480h-128c-13.2 0-25.495-10.696-27.321-23.769l-9.357-66.962c-1.827-13.073 7.478-23.769 20.678-23.769h160c13.2 0 22.505 10.696 20.679 23.769l-9.357 66.962c-1.827 13.073-14.122 23.769-27.322 23.769v0zM408 320h-304c-17.6 0-30.696-14.341-29.103-31.869l26.206-288.263c1.593-17.527 17.297-31.868 34.897-31.868h240c17.6 0 33.304 14.341 34.897 31.868l26.205 288.263c1.594 17.528-11.502 31.869-29.102 31.869zM192 32h-48l-16 224h64v-224zM288 32h-64v224h64v-224zM368 32h-48v224h64l-16-224z" />
 <glyph unicode="&#xe605;" d="M96 416l320-192-320-192z" />
 <glyph unicode="&#xe606;" d="M360.704 429.209c-29.209 21.069-65.843 31.591-109.978 31.591-33.587 0-61.901-7.424-84.915-22.221-36.531-23.194-55.936-62.566-58.291-118.118h84.633c0 16.179 4.71 31.769 14.157 46.771s25.472 22.502 48.077 22.502c22.963 0 38.81-6.093 47.462-18.253 8.678-12.211 13.005-25.702 13.005-40.499 0-12.877-6.451-24.653-14.233-35.379-4.275-6.247-9.933-11.981-16.921-17.255 0 0-45.901-29.44-66.073-53.095-11.699-13.722-12.749-34.253-13.773-63.719-0.077-2.099 0.717-6.425 8.064-6.425s59.315 0 65.843 0 7.885 4.839 7.987 6.963c0.461 10.726 1.664 16.205 3.635 22.4 3.712 11.699 13.747 21.913 25.063 30.695l23.296 16.077c21.017 16.384 37.811 29.824 45.209 40.371 12.647 17.357 21.529 38.707 21.529 64.025 0 41.344-14.618 72.525-43.776 93.568zM249.369 104.345c-29.184 0.87-53.248-19.303-54.169-50.944-0.922-31.616 21.965-52.505 51.149-53.376 30.464-0.896 53.888 18.637 54.81 50.253 0.896 31.642-21.325 53.171-51.789 54.067z" />
-<glyph unicode="&#xe607;" d="M80.231 310.016c23.91 18.56 43.725 5.786 70.169-24.832 2.995-3.43 6.989 0.589 9.242 2.56 2.253 1.997 37.171 33.382 38.861 34.841 1.715 1.51 3.763 4.327 1.049 7.475s-12.647 16-19.021 24.32c-46.285 60.544 126.618 101.607 100.045 102.247-13.491 0.358-67.738 0.973-75.827 0.128-32.845-3.481-74.087-34.176-94.848-48.461-27.136-18.662-37.299-29.491-38.963-31.001-7.68-6.733-1.229-22.195-15.155-34.406-14.72-12.902-23.885-3.149-32.41-10.624-4.25-3.738-16.051-12.57-19.456-15.565-3.379-2.969-3.994-8.013-0.538-12.058 0 0 32.333-35.737 35.072-38.886 2.714-3.149 10.009-5.811 14.541-1.817 4.531 3.968 16.154 14.183 18.125 15.923 1.997 1.715-1.28 22.093 9.114 30.157zM226.381 296.807c-3.072 3.558-6.861 3.635-10.163 0.717l-36.736-32.025c-2.867-2.56-3.251-7.271-0.666-10.24l212.327-241.613c4.941-5.735 13.543-6.323 19.251-1.357l24.858 20.787c5.658 4.966 6.247 13.671 1.305 19.379l-210.176 244.352zM509.491 399.642c-1.894 12.647-8.448 9.984-11.853 4.608-3.353-5.351-18.457-28.186-24.653-38.502-6.144-10.291-21.248-30.489-49.51-10.547-29.389 20.787-19.149 35.303-14.055 45.056 5.146 9.805 20.941 37.248 23.245 40.704 2.253 3.456-0.409 13.491-9.498 9.293-9.139-4.224-64.589-26.265-72.295-57.856-7.859-32.179 6.605-60.903-21.76-89.447l-34.355-35.84 34.509-40.141 42.342 40.218c10.112 10.137 31.642 19.994 51.149 15.565 41.805-9.472 64.589 6.247 78.361 32.179 12.339 23.219 10.291 72.064 8.371 84.71zM70.144 49.894c-5.325-5.376-5.325-14.080 0-19.43l24.346-23.808c5.325-5.351 13.773-3.098 19.097 2.253l125.619 123.52-38.502 43.853-130.56-126.387z" />
+<glyph unicode="&#xe607;" d="M80.231 302.016c23.91 18.56 43.725 5.786 70.169-24.832 2.995-3.43 6.989 0.589 9.242 2.56 2.253 1.997 37.171 33.382 38.861 34.841 1.715 1.51 3.763 4.327 1.049 7.475s-12.647 16-19.021 24.32c-46.285 60.544 126.618 101.607 100.045 102.247-13.491 0.358-67.738 0.973-75.827 0.128-32.845-3.481-74.087-34.176-94.848-48.461-27.136-18.662-37.299-29.491-38.963-31.001-7.68-6.733-1.229-22.195-15.155-34.406-14.72-12.902-23.885-3.149-32.41-10.624-4.25-3.738-16.051-12.57-19.456-15.565-3.379-2.969-3.994-8.013-0.538-12.058 0 0 32.333-35.737 35.072-38.886 2.714-3.149 10.009-5.811 14.541-1.817 4.531 3.968 16.154 14.183 18.125 15.923 1.997 1.715-1.28 22.093 9.114 30.157zM226.381 288.807c-3.072 3.558-6.861 3.635-10.163 0.717l-36.736-32.025c-2.867-2.56-3.251-7.271-0.666-10.24l212.327-241.613c4.941-5.735 13.543-6.323 19.251-1.357l24.858 20.787c5.658 4.966 6.247 13.671 1.305 19.379l-210.176 244.352zM509.491 391.642c-1.894 12.647-8.448 9.984-11.853 4.608-3.353-5.351-18.457-28.186-24.653-38.502-6.144-10.291-21.248-30.489-49.51-10.547-29.389 20.787-19.149 35.303-14.055 45.056 5.146 9.805 20.941 37.248 23.245 40.704 2.253 3.456-0.409 13.491-9.498 9.293-9.139-4.224-64.589-26.265-72.295-57.856-7.859-32.179 6.605-60.903-21.76-89.447l-34.355-35.84 34.509-40.141 42.342 40.218c10.112 10.137 31.642 19.994 51.149 15.565 41.805-9.472 64.589 6.247 78.361 32.179 12.339 23.219 10.291 72.064 8.371 84.71zM70.144 41.894c-5.325-5.376-5.325-14.080 0-19.43l24.346-23.808c5.325-5.351 13.773-3.098 19.097 2.253l125.619 123.52-38.502 43.853-130.56-126.387z" />
 <glyph unicode="&#xe608;" d="M64 416h384v-384h-384z" />
 <glyph unicode="&#xe609;" d="M181.861 118.974l20.649 28.908-22.627 22.628-28.909-20.648c-5.361 2.997-11.102 5.387-17.133 7.096l-5.841 35.042h-32l-5.84-35.043c-6.031-1.709-11.772-4.099-17.133-7.096l-28.909 20.649-22.628-22.628 20.649-28.908c-2.997-5.36-5.387-11.103-7.096-17.133l-35.043-5.841v-32l35.043-5.841c1.709-6.030 4.099-11.772 7.096-17.133l-20.649-28.908 22.627-22.628 28.909 20.648c5.361-2.997 11.102-5.387 17.133-7.096l5.841-35.042h32l5.84 35.043c6.031 1.709 11.772 4.099 17.133 7.096l28.909-20.648 22.627 22.628-20.649 28.908c2.997 5.36 5.387 11.103 7.096 17.133l35.044 5.84v32l-35.043 5.841c-1.709 6.030-4.099 11.772-7.096 17.133zM112 48c-17.674 0-32 14.327-32 32s14.326 32 32 32 32-14.327 32-32-14.326-32-32-32zM512 288v32l-33.691 6.125c-0.621 4.023-1.416 7.989-2.362 11.895l28.779 18.55-12.246 29.564-33.472-7.234c-2.107 3.455-4.363 6.81-6.746 10.065l19.503 28.171-22.628 22.627-28.171-19.503c-3.256 2.383-6.61 4.638-10.065 6.747l7.234 33.472-29.564 12.247-18.55-28.779c-3.906 0.946-7.872 1.741-11.895 2.362l-6.126 33.691h-32l-6.126-33.691c-4.023-0.621-7.988-1.416-11.895-2.362l-18.549 28.779-29.564-12.246 7.234-33.472c-3.455-2.108-6.81-4.364-10.065-6.747l-28.171 19.503-22.627-22.627 19.503-28.171c-2.383-3.255-4.639-6.61-6.747-10.065l-33.472 7.234-12.246-29.564 28.779-18.55c-0.946-3.906-1.741-7.871-2.362-11.895l-33.692-6.126v-32l33.691-6.125c0.621-4.023 1.416-7.989 2.362-11.895l-28.779-18.55 12.246-29.564 33.472 7.234c2.108-3.455 4.364-6.809 6.747-10.065l-19.503-28.171 22.627-22.628 28.171 19.503c3.255-2.383 6.61-4.638 10.065-6.746l-7.234-33.472 29.564-12.246 18.551 28.779c3.905-0.946 7.871-1.741 11.894-2.362l6.126-33.692h32l6.126 33.691c4.022 0.621 7.988 1.416 11.895 2.362l18.55-28.779 29.564 12.246-7.234 33.472c3.455 2.108 6.81 4.363 10.065 6.746l28.171-19.503 22.628 22.628-19.503 28.171c2.383 3.256 4.638 6.61 6.746 10.065l33.472-7.234 12.246 29.565-28.779 18.55c0.946 3.906 1.741 7.871 2.362 11.895l33.691 6.125zM336 234.4c-38.439 0-69.6 31.161-69.6 69.6s31.16 69.6 69.6 69.6 69.6-31.161 69.6-69.6c0-38.439-31.16-69.6-69.6-69.6z" />
 <glyph unicode="&#xe60a;" d="M367.334 149.709l-70.605 80.691 70.605 80.691c12.007 12.007 12.007 31.463 0 43.443s-31.462 11.981-43.443 0l-67.891-77.593-67.865 77.568c-12.006 12.006-31.463 12.006-43.443 0s-11.981-31.463 0-43.443l70.579-80.666-70.605-80.691c-11.981-12.007-11.981-31.411 0-43.392 12.006-12.007 31.463-12.007 43.443 0l67.891 77.543 67.865-77.543c12.007-12.007 31.462-12.007 43.443 0s12.007 31.385 0.026 43.392z" />
 <glyph unicode="&#xe60b;" d="M224 82.745l-102.627 118.627 29.254 29.255 73.373-57.372 137.372 121.372 29.256-29.254zM415.886 416c0.039-0.033 0.081-0.075 0.114-0.115v-383.771c-0.033-0.039-0.075-0.081-0.114-0.114h-319.772c-0.040 0.033-0.081 0.075-0.114 0.114v383.772c0.033 0.040 0.075 0.081 0.115 0.114h-64.115v-384c0-35.2 28.8-64 64-64h320c35.2 0 64 28.8 64 64v384h-64.114zM320 416v32c0 17.673-14.327 32-32 32h-64c-17.673 0-32-14.327-32-32v-32h-64v-64h256v64h-64zM288 416h-64v32h64v-32z" />
+<glyph unicode="&#xe60c;" d="M64 341.333v64h448v-320h-64v-64h-448v320h64zM448 128h21.334v234.667h-362.666v-21.333h341.334v-213.334zM42.666 64h362.666v234.667h-362.666v-234.667z" />
+<glyph unicode="&#xe60d;" d="M0 272v-96c0-8.836 7.164-16 16-16h480c8.836 0 16 7.164 16 16v96c0 8.836-7.164 16-16 16h-480c-8.836 0-16-7.164-16-16z" />
 <glyph unicode="&#xf021;" d="M431.714 178.286q0-1.428-0.286-2-18.286-76.572-76.572-124.143t-136.571-47.572q-41.715 0-80.715 15.714t-69.572 44.857l-36.857-36.857q-5.428-5.428-12.857-5.428t-12.857 5.428-5.428 12.857v128q0 7.428 5.428 12.857t12.857 5.428h128q7.428 0 12.857-5.428t5.429-12.857-5.428-12.857l-39.143-39.143q20.285-18.857 46-29.143t53.429-10.286q38.286 0 71.428 18.572t53.143 51.143q3.143 4.857 15.143 33.428 2.286 6.572 8.572 6.572h54.857q3.714 0 6.428-2.714t2.714-6.428zM438.857 406.857v-128q0-7.428-5.428-12.857t-12.857-5.428h-128q-7.428 0-12.857 5.428t-5.428 12.857 5.428 12.857l39.428 39.428q-42.286 39.143-99.714 39.143-38.286 0-71.428-18.571t-53.143-51.143q-3.143-4.857-15.143-33.429-2.285-6.572-8.572-6.572h-56.857q-3.715 0-6.428 2.714t-2.715 6.428v2q18.572 76.572 77.143 124.143t137.143 47.571q41.714 0 81.143-15.857t70-44.714l37.143 36.857q5.428 5.428 12.857 5.428t12.857-5.428 5.428-12.857z" />
 <glyph unicode="&#xf05b;" d="M342 187.428h-31.143q-7.428 0-12.857 5.428t-5.428 12.857v36.572q0 7.428 5.428 12.857t12.857 5.429h31.143q-9.143 30.857-32.143 53.857t-53.857 32.143v-31.143q0-7.429-5.429-12.857t-12.857-5.428h-36.571q-7.428 0-12.857 5.428t-5.429 12.857v31.143q-30.857-9.143-53.857-32.143t-32.143-53.857h31.143q7.429 0 12.857-5.428t5.428-12.857v-36.571q0-7.428-5.428-12.857t-12.857-5.428h-31.143q9.143-30.857 32.143-53.857t53.857-32.143v31.143q0 7.428 5.428 12.857t12.857 5.428h36.571q7.428 0 12.857-5.428t5.429-12.857v-31.143q30.857 9.143 53.857 32.143t32.143 53.857zM438.857 242.286v-36.572q0-7.428-5.428-12.857t-12.857-5.428h-40.857q-10.572-46-44.143-79.572t-79.572-44.143v-40.857q0-7.428-5.428-12.857t-12.857-5.428h-36.571q-7.428 0-12.857 5.428t-5.429 12.857v40.857q-46 10.572-79.572 44.143t-44.143 79.572h-40.857q-7.428 0-12.857 5.428t-5.428 12.857v36.572q0 7.428 5.428 12.857t12.857 5.429h40.857q10.572 46 44.143 79.572t79.572 44.143v40.857q0 7.428 5.428 12.857t12.857 5.428h36.571q7.428 0 12.857-5.428t5.429-12.857v-40.857q46-10.571 79.572-44.143t44.143-79.572h40.857q7.428 0 12.857-5.428t5.428-12.857z" />
 <glyph unicode="&#xf0c7;" d="M109.715 41.143h219.429v109.714h-219.429v-109.714zM365.714 41.143h36.572v256q0 4-2.857 11t-5.714 9.857l-80.286 80.285q-2.857 2.857-9.714 5.715t-11.143 2.857v-118.857q0-11.429-8-19.429t-19.428-8h-164.571q-11.428 0-19.428 8t-8 19.428v118.857h-36.572v-365.715h36.572v118.857q0 11.428 8 19.428t19.428 8h237.715q11.428 0 19.428-8t8-19.428v-118.857zM256 306.286v91.428q0 3.714-2.714 6.429t-6.428 2.714h-54.857q-3.714 0-6.429-2.714t-2.714-6.429v-91.428q0-3.714 2.714-6.428t6.428-2.714h54.857q3.714 0 6.429 2.714t2.714 6.428zM438.857 297.143v-265.143q0-11.428-8-19.428t-19.428-8h-384q-11.428 0-19.428 8t-8 19.428v384q0 11.428 8 19.428t19.428 8h265.143q11.428 0 25.143-5.714t21.714-13.714l80-80q8-8 13.714-21.714t5.714-25.143z" />
--- a/static/css/fonts/icomoon.ttf
+++ b/static/css/fonts/icomoon.ttf
--- a/static/css/fonts/icomoon.woff
+++ b/static/css/fonts/icomoon.woff
--- a/static/js/editors.js
+++ b/static/js/editors.js
@ -283,7 +283,7 @@ var editors = {
            // TODO: 关闭 tab 的时候要重置
        });

-        editor.setSize('100%', $(".edit-panel").height() - $(".edit-header").height());
+        editor.setSize('100%', $(".edit-panel").height() - $(".edit-panel .tabs").height());
        editor.setValue(data.content);
        editor.setOption("mode", data.mode);

--- a/static/js/wide.js
+++ b/static/js/wide.js
@ -298,6 +298,33 @@ var wide = {
        };
    },
    _initFullscreen: function () {
+        $(".footer .ico-max:eq(1)").click(function () {
+            $(".bottom-window-group").animate({
+                "top": "70%"
+            }, function () {
+                $(".edit-panel").css("height", "70%");
+
+                var editorDatas = editors.data;
+                for (var i = 0, ii = editorDatas.length; i < ii; i++) {
+                    editorDatas[i].editor.setSize("100%", $(".edit-panel").height() - $(".edit-panel .tabs").height());
+                }
+
+                $(".footer .ico-max:eq(1)").hide();
+            });
+        });
+
+        $(".bottom-window-group .ico-min").click(function () {
+            $(".edit-panel").css("height", "100%");
+
+            var editorDatas = editors.data;
+            for (var i = 0, ii = editorDatas.length; i < ii; i++) {
+                editorDatas[i].editor.setSize("100%", $(".content").height() - $(".edit-panel .tabs").height());
+            }
+
+            $(".bottom-window-group").css("top", "100%");
+            $(".footer .ico-max:eq(1)").show();
+        });
+
        $(".bottom-window-group .tabs").dblclick(function () {
            var $it = $(".bottom-window-group");
            if ($it.hasClass("bottom-window-group-fullscreen")) {
@ -316,6 +343,30 @@ var wide = {
            }
        });

+
+        $(".footer .ico-max:eq(0)").click(function () {
+            $(".side").animate({
+                "left": "0"
+            }, function () {
+                $(".edit-panel, .bottom-window-group").css({
+                    "left": "20%",
+                    "width": "80%"
+                });
+
+                $(".footer .ico-max:eq(0)").hide();
+            });
+        });
+
+        $(".side .ico-min").click(function () {
+            $(".side").css("left", "-20%");
+
+            $(".edit-panel, .bottom-window-group").css({
+                "left": "0",
+                "width": "100%"
+            });
+            $(".footer .ico-max:eq(0)").show();
+        });
+
        $(".side .tabs").dblclick(function () {
            var $it = $(".side");
            if ($it.hasClass("side-fullscreen")) {
--- a/view/index.html
+++ b/view/index.html
@ -94,22 +94,16 @@
                    </div>                    
                </li>
            </ul>
-
-            <div class="toolbars fn-right fn-none">
-                <span onclick="wide.run()" class="font-ico ico-buildrun" title="{{.i18n.build_n_run}}"></span>
-                <span onclick="wide.saveFile()" title="{{.i18n.save}}" class="font-ico ico-save"></span>
-                <span onclick="wide.fmt()" class="ico-format font-ico" title="{{.i18n.format}}"></span>
-                <span class="font-ico ico-fullscreen" onclick="editors.fullscreen()" title="{{.i18n.full_screen}}"></span>
-            </div>
        </div>

        <div class="content">
            <div class="side">
+                <span title="{{.i18n.min}}" class="font-ico ico-min"></span>
                <div class="tabs">
                    <div class="current" data-index="filreTree">
                        <span title="{{.i18n.file}}">{{.i18n.file}}</span>
                    </div>
-                </div>
+                </div> 
                <div class="tabs-panel">
                    <div data-index="filreTree">
                        <ul id="files" tabindex="-1" class="ztree"></ul>
@ -133,13 +127,18 @@
            </div>

            <div class="edit-panel">
-                <div class="edit-header fn-clear">
-                    <div class="tabs fn-left"></div>
+                <div class="toolbars fn-none">
+                    <span onclick="wide.run()" class="font-ico ico-buildrun" title="{{.i18n.build_n_run}}"></span>
+                    <span onclick="wide.saveFile()" title="{{.i18n.save}}" class="font-ico ico-save"></span>
+                    <span onclick="wide.fmt()" class="ico-format font-ico" title="{{.i18n.format}}"></span>
+                    <span class="font-ico ico-fullscreen" onclick="editors.fullscreen()" title="{{.i18n.full_screen}}"></span>
                </div>
+                <div class="tabs"></div>
                <div class="tabs-panel"></div>
            </div>

            <div class="bottom-window-group">
+                <span title="{{.i18n.min}}" class="font-ico ico-min"></span>
                <div class="tabs">
                    <div class="current" data-index="output">
                        <span title="{{.i18n.output}}">{{.i18n.output}}</span>
@ -165,8 +164,9 @@
            </div>
        </div>

-        <div class="footer">
-            <span>|</span>
+        <div class="footer fn-clear">
+            <span title="{{.i18n.max_side}}" class="font-ico ico-max fn-none"></span>
+            <span title="{{.i18n.max_bottom}}" class="font-ico ico-max fn-none"></span>
            <span id="footer-cursor" style="float: right;"></span>
            <span class="notification-count" title="{{.i18n.unread_notification}}">{{.i18n.notification}}!</span>
        </div>