文件树添加 tab

conf/wide.json

@@ -15,9 +15,19 @@
             "Password": "admin",
             "Workspace": "{pwd}/data/user_workspaces/admin",
             "LatestSessionContent": {
-                "FileTree": [],
-                "Files": [],
-                "CurrentFile": ""
+                "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\\hello",
+                    "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\time",
+                    "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\time\\pkg",
+                    "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"
+                ],
+                "CurrentFile": "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\1123"
             }
         }
     ]

i18n/zh_CN.json

@@ -37,5 +37,8 @@
     "input_no_empty": "输入不能为空",
     "tip": "提示",
     "confirm": "确定",
-    "stop": "停止"
+    "stop": "停止",
+    "output": "输出",
+    "search": "搜索",
+    "notification": "通知"
 }

static/css/base.css

@@ -136,19 +136,24 @@ ul {
     height: 20px;
     overflow: hidden;
     width: 100%;
+    background-color: #E6E6E6;
+    border-top: 1px solid #A4A4A4;
+    border-bottom: 1px solid #9D9D9D;
 }
 
 .tabs > div {
-    background-color: #d1d1d1;
-    border-right: 1px solid #9b9b9b;
-    color: #333;
     float: left;
     line-height: 19px;
-    padding: 0 5px
+    padding: 0 5px;
+    cursor: pointer;
+    background-color: #DDD;
+    color: #8B8B8B;
+    border-right: 1px solid #ADADAD;
 }
 
 .tabs > div.current {
-    background-color: #F7F7F7;
+    background-color: #9F9F9F;
+    color: #FFF;
 }
 /* end tabs */
 
@@ -174,8 +179,7 @@ ul {
 /* start menu */
 .menu {
     background-color: #F0F0F0;
-    border-bottom: 1px solid #A5A5A5;
-    height: 25px;
+    height: 24px;
 }
 
 .menu > ul > li {
@@ -214,6 +218,17 @@ ul {
     height: 70%;
 }
 
+.edit-panel .tabs > div {
+    background-color: #d1d1d1;
+    border-right-color: #9b9b9b;
+    color: #333;
+    cursor: auto;
+}
+
+.edit-panel .tabs > div.current {
+    background-color: #F7F7F7;
+}
+
 .edit-header .ico {
     background-image: url("../images/ico-file.png");
     float: left;
@@ -248,24 +263,6 @@ ul {
     z-index: 1000;
 }
 
-.bottom-window-group .tabs {
-    background-color: #E6E6E6;
-    border-top: 1px solid #A4A4A4;
-    border-bottom: 1px solid #9D9D9D;
-}
-
-.bottom-window-group .tabs > div {
-    cursor: pointer;
-    background-color: #DDD;
-    color: #8B8B8B;
-    border-right-color: #ADADAD;
-}
-
-.bottom-window-group .tabs > div.current {
-    background-color: #9F9F9F;
-    color: #FFF;
-}
-
 .bottom-window-group textarea.output {
     border-width: 0;
     background-color: #FFF;

static/css/side.css

@@ -1,7 +1,11 @@
+/* start side */
+.side .tabs-panel {
+    overflow: auto;
+}
+/* start side */
+
 /* start tree */
 .ztree {
-    position: absolute;
-    overflow: auto;
     width: 100%;
     padding: 0;
 }

static/js/tree.js

@@ -1,4 +1,5 @@
 var tree = {
+    fileTree: undefined,
     // 递归获取当前节点展开中的最后一个节点
     getCurrentNodeLastNode: function (node) {
         var returnNode = node.children[node.children.length - 1];
@@ -60,7 +61,6 @@ var tree = {
 
         return paths;
     },
-    fileTree: undefined,
     _isParents: function (tId, parentTId) {
         var node = tree.fileTree.getNodeByTId(tId);
         if (!node || !node.parentTId) {

static/js/wide.js

@@ -212,9 +212,10 @@ var wide = {
     _initLayout: function () {
         var mainH = $(window).height() - $(".menu").height() - $(".footer").height() - 2,
                 bottomH = Math.floor(mainH * 0.3);
-        $(".content, .ztree").height(mainH);
+        $(".content").height(mainH);
+        $(".side .tabs-panel").height(mainH - 20);
 
-        $(".bottom-window-group .output, notification").height(bottomH - 23);
+        $(".bottom-window-group .output, notification").height(bottomH - 24);
         $(".bottom-window-group .notification, .bottom-window-group .search").height(bottomH - 20);
     },
     _initBottomWindowGroup: function () {
@@ -304,19 +305,19 @@ var wide = {
 
                 var bottomH = $(".bottom-window-group").height();
 
-                $(".bottom-window-group .output, notification").height(bottomH - 23);
+                $(".bottom-window-group .output, notification").height(bottomH - 24);
                 $(".bottom-window-group .notification, .bottom-window-group .search").height(bottomH - 20);
             } else {
                 var bottomH = $(".content, .ztree").height();
-                $(".bottom-window-group .output, notification").height(bottomH - 22);
+                $(".bottom-window-group .output, notification").height(bottomH - 23);
                 $(".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);
+        $(".side .tabs").dblclick(function () {
+            var $it = $(".side");
             if ($it.hasClass("side-fullscreen")) {
                 $it.removeClass("side-fullscreen");
             } else {

view/index.html

@@ -105,26 +105,30 @@
 
         <div class="content">
             <div class="side">
-                <div class="side-1">
-                    <ul id="files" tabindex="-1" class="ztree"></ul>
-
-                    <!-- 目录右键菜单 -->
-                    <div id="dirRMenu" class="frame">
-                        <ul>
-                            <li onclick="tree.newFile();">{{.i18n.create_file}}</li>
-                            <li onclick="tree.newDir();">{{.i18n.create_dir}}</li>
-                            <li onclick="tree.removeIt();">{{.i18n.delete}}</li>
-                        </ul>
-                    </div>
-
-                    <!-- 文件右键菜单 -->
-                    <div id="fileRMenu" class="frame">
-                        <ul>
-                            <li onclick="tree.removeIt();">{{.i18n.delete}}</li>
-                        </ul>
+                <div class="tabs">
+                    <div class="current" data-index="filreTree">
+                        <span title="{{.i18n.file}}">{{.i18n.file}}</span>
                     </div>
                 </div>
-                <div class="side-2">
+                <div class="tabs-panel">
+                    <div data-index="filreTree">
+                        <ul id="files" tabindex="-1" class="ztree"></ul>
+                        <!-- 目录右键菜单 -->
+                        <div id="dirRMenu" class="frame">
+                            <ul>
+                                <li onclick="tree.newFile();">{{.i18n.create_file}}</li>
+                                <li onclick="tree.newDir();">{{.i18n.create_dir}}</li>
+                                <li onclick="tree.removeIt();">{{.i18n.delete}}</li>
+                            </ul>
+                        </div>
+
+                        <!-- 文件右键菜单 -->
+                        <div id="fileRMenu" class="frame">
+                            <ul>
+                                <li onclick="tree.removeIt();">{{.i18n.delete}}</li>
+                            </ul>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -138,13 +142,13 @@
             <div class="bottom-window-group">
                 <div class="tabs">
                     <div class="current" data-index="output">
-                        <span title="Output">Output</span>
+                        <span title="{{.i18n.output}}">{{.i18n.output}}</span>
                     </div>
                     <div data-index="search">
-                        <span title="Search">Search</span>
+                        <span title="{{.i18n.search}}">{{.i18n.search}}</span>
                     </div>
                     <div data-index="notification">
-                        <span title="Notification">Notification</span>
+                        <span title="{{.i18n.notification}}">{{.i18n.notification}}</span>
                     </div>
                 </div>
                 <div class="tabs-panel">
@@ -164,7 +168,7 @@
         <div class="footer">
             <span>|</span>
             <span id="footer-cursor" style="float: right;"></span>
-            <span class="notification-count" title="{{.i18n.unread_notification}}">Notification!</span>
+            <span class="notification-count" title="{{.i18n.unread_notification}}">{{.i18n.notification}}!</span>
         </div>
 
         <div id="dialogRemoveConfirm">
@@ -247,7 +251,7 @@
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/codemirror-4.5/mode/sql/sql.js"></script>
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/lint/json-lint.js?{{.conf.StaticResourceVersion}}"></script>
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/lint/go-lint.js?{{.conf.StaticResourceVersion}}"></script>
-        
+
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/tabs.js?{{.conf.StaticResourceVersion}}"></script>
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/dialog.js?{{.conf.StaticResourceVersion}}"></script>
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/editors.js?{{.conf.StaticResourceVersion}}"></script>