窗口最大化，最小化

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\\time\\1.json"
-                    "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\\hello\\main.go"
+                "CurrentFile": "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\time\\1.json"
             }
         }
     ]

data/user_workspaces/admin/src/mytest/time/1.json

@@ -1,24 +1,16 @@
-{
+package main
-    "Server": "{IP}:7070",
+
-    "StaticServer": "http://{IP}:7070",
+import (
-    "EditorChannel": "ws://{IP}:7070",
+	"fmt"
-    "OutputChannel": "ws://{IP}:7070",
+	"mytest/time/pkg"
-    "ShellChannel": "ws://{IP}:7070",
+	"time"
-    "SessionChannel": "ws://{IP}:7070",
+)
-    "StaticResourceVersion": "201409032040",
+
-    "MaxProcs": 4,
+func main() {
-    "RuntimeMode": "dev",
+	for i := 0; i < 50; i++ {
-    "Pwd": "{pwd}",
+		fmt.Println("Hello, 世界", pkg.Now())
-    "Users": [
+
-        {
+		time.Sleep(time.Second)
-            "Name": "admin",
-            "Password": "admin",
-            "Workspace": "{pwd}/data/user_workspaces/admin",
-            "LatestSessionContent": {
-                "FileTree": [],
-                "Files": [],
-                "CurrentFile": ""
 	}
-        }
+
-    ]
 }

i18n/zh_CN.json

@@ -40,5 +40,8 @@
     "stop": "停止",
     "output": "输出",
     "search": "搜索",
-    "notification": "通知"
+    "notification": "通知",
+    "min": "最小化",
+    "max_side": "左侧窗口最大化",
+    "max_bottom": "底部窗口最大化"
 }

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 {
+.ico-max:before {
-    color: #666;
+    content: "\e60c";
 }
 
-.ico-close:hover {
+.ico-min:before {
-    color: #333;
+    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 {

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" />

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);
 

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")) {

view/index.html

@@ -94,17 +94,11 @@
                     </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>
@@ -133,13 +127,18 @@
             </div>
 
             <div class="edit-panel">
-                <div class="edit-header fn-clear">
+                <div class="toolbars fn-none">
-                    <div class="tabs fn-left"></div>
+                    <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">
+        <div class="footer fn-clear">
-            <span>|</span>
+            <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>