outline

i18n/en_US.json

@@ -56,7 +56,7 @@
     "find_previous": "Find Previous",
     "replace": "Replace",
     "replace_all": "Replace All",
-    "restore_bottom": "Bottom Windows Restore",
+    "restore_bottom": "Restore Bottom Windows",
     "file_format": "File Extension",
     "keyword": "Keyword",
     "user_guide": "User Guide",
@@ -166,5 +166,6 @@
     "govet": "go vet",
     "start-vet": "START [go vet]",
     "vet-succ": "[go vet] SUCCESS",
-    "vet-error": "[go vet] ERROR"
+    "vet-error": "[go vet] ERROR",
+    "restore_outline": "Restore Outline"
 }

static/css/side.css

@@ -30,7 +30,23 @@
 .side .tabs-panel {
     overflow: auto;
 }
-/* start side */
+/* end side */
+
+/* start side right */
+.side-right {
+    height: 70%;
+    position: absolute;
+    right: 0;
+    width: 20%;
+    z-index: 8;
+}
+
+.side-right-max {
+    width: 100%;
+    height: 100%;
+    z-index: 11;
+}
+/* end side right */
 
 /* start tree */
 .ztree {

static/css/themes/black.css

@@ -19,6 +19,11 @@
     border-right: 1px solid #000;
 }
 
+.side-right {
+    background-color: #303130;
+    border-left: 1px solid #000;
+}
+
 .footer {
     background-color: #181B1D;
     border-top: 1px solid #000000;

static/css/themes/default.css

@@ -19,6 +19,11 @@
     border-right: 1px solid #919191;
 }
 
+.side-right {
+    background-color: #FFF;
+    border-right: 1px solid #919191;
+}
+
 .footer {
     border-top: 1px solid #919191;
     background-color: #F0F0F0;

static/css/wide.css

@@ -333,7 +333,7 @@
     width: 80%;
     position: absolute;
     left: 20%;
-    width: 80%;
+    width: 60%;
     height: 70%;
     overflow: hidden;
 }

static/js/hotkeys.js

@@ -41,11 +41,6 @@ var hotkeys = {
                     $(".side").css({
                         "left": "0"
                     });
-
-                    if ($(".footer .ico-restore:eq(1)").css("display") === "inline") {
-                        // 当底部最小化时
-                        $(".bottom-window-group").css("top", "100%").hide();
-                    }
                 }
 
                 $("#files").focus();
@@ -58,22 +53,27 @@ var hotkeys = {
             shiftKey: false,
             which: 50,
             fun: function () {
-                if (!wide.curEditor) {
+                if ($(".footer .ico-restore:eq(2)").css("display") === "inline") {
-                    return;
+                    // 当文件树最小化时
+                    $(".side-right").css({
+                        "right": "0"
+                    });
                 }
-                
-                var request = newWideRequest();
-                request.code = wide.curEditor.getValue();
 
-                $.ajax({
+                $("#outline").focus();
-                    type: 'POST',
+                
-                    url: config.context + '/outline',
+//                var request = newWideRequest();
-                    data: JSON.stringify(request),
+//                request.code = wide.curEditor.getValue();
-                    dataType: "json",
+//
-                    success: function (data) {
+//                $.ajax({
-                        console.log(data);
+//                    type: 'POST',
-                    }
+//                    url: config.context + '/outline',
-                });
+//                    data: JSON.stringify(request),
+//                    dataType: "json",
+//                    success: function (data) {
+//                        console.log(data);
+//                    }
+//                });
             }
         },
         // Ctrl-4

static/js/windows.js

@@ -17,9 +17,11 @@
 var windows = {
     isMaxEditor: false,
     init: function () {
+        // bottom windows
         $(".footer .ico-restore:eq(1)").click(function () {
             windows.restoreBottom();
-            if ($(".footer .ico-restore:eq(0)").css("display") === "none") {
+            if ($(".footer .ico-restore:eq(0)").css("display") === "none"
+                    && $(".footer .ico-restore:eq(2)").css("display") === "none") {
                 $(".toolbars .ico-restore").removeClass("ico-restore").addClass("ico-max")
                         .attr({
                             "title": config.label.max_editor,
@@ -30,7 +32,8 @@ var windows = {
 
         $(".bottom-window-group .ico-min").click(function () {
             windows.minBottom();
-            if ($(".footer .ico-restore:eq(0)").css("display") === "inline") {
+            if ($(".footer .ico-restore:eq(0)").css("display") === "inline"
+                    && $(".footer .ico-restore:eq(2)").css("display") === "inline") {
                 $(".toolbars .ico-max").removeClass("ico-max").addClass("ico-restore")
                         .attr({
                             "title": config.label.restore_editor,
@@ -43,9 +46,11 @@ var windows = {
             windows.maxBottom();
         });
 
+        // side
         $(".footer .ico-restore:eq(0)").click(function () {
             windows.restoreSide();
-            if ($(".footer .ico-restore:eq(1)").css("display") === "none") {
+            if ($(".footer .ico-restore:eq(1)").css("display") === "none"
+                    && $(".footer .ico-restore:eq(2)").css("display") === "none") {
                 $(".toolbars .ico-restore").removeClass("ico-restore").addClass("ico-max")
                         .attr({
                             "title": config.label.max_editor,
@@ -56,7 +61,8 @@ var windows = {
 
         $(".side .ico-min").click(function () {
             windows.minSide();
-            if ($(".footer .ico-restore:eq(1)").css("display") === "inline") {
+            if ($(".footer .ico-restore:eq(1)").css("display") === "inline"
+                    && $(".footer .ico-restore:eq(2)").css("display") === "inline") {
                 $(".toolbars .ico-max").removeClass("ico-max").addClass("ico-restore")
                         .attr({
                             "title": config.label.restore_editor,
@@ -69,11 +75,41 @@ var windows = {
             windows.maxSide();
         });
 
+        // side right
+        $(".footer .ico-restore:eq(2)").click(function () {
+            windows.restoreSideRight();
+            if ($(".footer .ico-restore:eq(1)").css("display") === "none"
+                    && $(".footer .ico-restore:eq(0)").css("display") === "none") {
+                $(".toolbars .ico-restore").removeClass("ico-restore").addClass("ico-max")
+                        .attr({
+                            "title": config.label.max_editor,
+                            "onclick": "windows.maxEditor()"
+                        });
+            }
+        });
+
+        $(".side-right .ico-min").click(function () {
+            windows.minSideRight();
+            if ($(".footer .ico-restore:eq(1)").css("display") === "inline"
+                    && $(".footer .ico-restore:eq(0)").css("display") === "inline") {
+                $(".toolbars .ico-max").removeClass("ico-max").addClass("ico-restore")
+                        .attr({
+                            "title": config.label.restore_editor,
+                            "onclick": "windows.restoreEditor()"
+                        });
+            }
+        });
+
+        $(".side-right .tabs").dblclick(function () {
+            windows.maxSideRight();
+        });
+
         $(window).click(function (event) {
             if ($(event.target).closest(".footer").length === 1
                     || $(event.target).closest(".bottom-window-group").length === 1
                     || $(event.target).closest(".toolbars").length === 1
-                    || $(event.target).closest(".side").length === 1) {
+                    || $(event.target).closest(".side").length === 1
+                    || $(event.target).closest(".side-right").length === 1) {
             } else {
                 windows.clearFloat();
             }
@@ -107,6 +143,14 @@ var windows = {
             $it.addClass("side-max");
         }
     },
+    maxSideRight: function () {
+        var $it = $(".side-right");
+        if ($it.hasClass("side-right-max")) {
+            windows.restoreSideRight();
+        } else {
+            $it.addClass("side-right-max");
+        }
+    },
     restoreBottom: function () {
         var $it = $(".bottom-window-group");
         $it.removeClass("bottom-window-group-max").attr("style", "");
@@ -117,7 +161,7 @@ var windows = {
         $it.animate({
             "top": "70%"
         }, function () {
-            $(".edit-panel").css("height", "70%");
+            $(".edit-panel, .side-right").css("height", "70%");
 
             var editorDatas = editors.data,
                     height = $(".edit-panel").height() - $(".edit-panel .tabs").height();
@@ -146,11 +190,33 @@ var windows = {
                 "width": "80%"
             });
 
+            if ($(".footer .ico-restore:eq(2)").css("display") === "inline") {
+                // 当outline最小化时
+                $(".edit-panel").css("width", "80%");
+            } else {
+                $(".edit-panel").css("width", "60%");
+            }
+
             $(".footer .ico-restore:eq(0)").hide();
         }).removeClass("side-max");
     },
+    restoreSideRight: function () {
+        $(".side-right").animate({
+            "right": "0"
+        }, function () {
+            if ($(".footer .ico-restore:eq(0)").css("display") === "inline") {
+                // 当文件树最小化时
+                $(".edit-panel").css("width", "80%");
+            } else {
+                $(".edit-panel").css("width", "60%");
+            }
+
+            $(".footer .ico-restore:eq(2)").hide();
+        }).removeClass("side-right-max");
+        ;
+    },
     minBottom: function () {
-        $(".edit-panel").css("height", "100%");
+        $(".edit-panel, .side-right").css("height", "100%");
 
         var editorDatas = editors.data,
                 height = $(".content").height() - $(".edit-panel .tabs").height();
@@ -164,12 +230,36 @@ var windows = {
     minSide: function () {
         $(".side").css("left", "-20%").removeClass("side-max");
 
+        var width = '80%';
+        if ($(".footer .ico-restore:eq(2)").css("display") === "inline") {
+            // 当 outline 最小化时
+            width = '100%';
+        }
+
         $(".edit-panel, .bottom-window-group").css({
             "left": "0",
-            "width": "100%"
+            "width": width
         });
+
+        $(".bottom-window-group").css({
+            "left": "0",
+            "width": '100%'
+        });
+
+
         $(".footer .ico-restore:eq(0)").show();
     },
+    minSideRight: function () {
+        $(".side-right").css("right", "-20%");
+        $(".footer .ico-restore:eq(2)").show();
+
+        if ($(".footer .ico-restore:eq(0)").css("display") === "inline") {
+            // 当文件树最小化时
+            $(".edit-panel").css("width", "100%");
+        } else {
+            $(".edit-panel").css("width", "80%");
+        }
+    },
     maxEditor: function () {
         $(".toolbars .ico-max").removeClass("ico-max").addClass("ico-restore")
                 .attr({
@@ -179,6 +269,7 @@ var windows = {
 
         windows.minBottom();
         windows.minSide();
+        windows.minSideRight();
         if (wide.curEditor) {
             wide.curEditor.focus();
         }
@@ -194,6 +285,7 @@ var windows = {
 
         windows.restoreBottom();
         windows.restoreSide();
+        windows.restoreSideRight();
         if (wide.curEditor) {
             wide.curEditor.focus();
         }
@@ -210,6 +302,11 @@ var windows = {
             // 当底部最小化时
             windows.minBottom();
         }
+
+        if ($(".footer .ico-restore:eq(2)").css("display") === "inline") {
+            // 当 outline 最小化时
+            windows.minSideRight();
+        }
     },
     flowBottom: function () {
         if ($(".footer .ico-restore:eq(1)").css("display") === "inline") {
@@ -220,11 +317,6 @@ var windows = {
                 "width": "100%",
                 "z-index": "8"
             }).show();
-
-            if ($(".footer .ico-restore:eq(0)").css("display") === "inline") {
-                // 当文件最小化时
-                $(".side").css("left", "-20%");
-            }
         }
     }
 };

views/index.html

@@ -467,23 +467,20 @@
                 <div class="tabs"></div>
                 <div class="tabs-panel"></div>
             </div>
-            
+
-            <!--
+            <div class="side-right">
-            TODO: https://github.com/b3log/wide/issues/199
-            <div style="height: 70%;position: absolute;right: 0;background-color: #FFF;width: 20%;">
                 <span title="{{.i18n.min}}" class="font-ico ico-min"></span>
                 <div class="tabs">
-                    <div class="current">
+                    <div class="current" data-index="outline">
                         <span title="{{.i18n.outline}}">{{.i18n.outline}}</span>
                     </div>
                 </div> 
                 <div class="tabs-panel">
-                    <div id="outline">
+                    <div id="outline" tabindex="-1"  data-index="outline">
                         this is outline
                     </div>
                 </div>
             </div>
-            -->
 
             <div class="bottom-window-group">
                 <span title="{{.i18n.min}}" class="font-ico ico-min"></span>
@@ -532,6 +529,7 @@
             <div class="fn-left">
                 <span title="{{.i18n.restore_side}}" class="font-ico ico-restore fn-none"></span>
                 <span title="{{.i18n.restore_bottom}}" class="font-ico ico-restore fn-none"></span>
+                <span title="{{.i18n.restore_outline}}" class="font-ico ico-restore fn-none"></span>
             </div>
             <div class="fn-right">
                 <span class="cursor"></span>
@@ -629,7 +627,7 @@
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/reconnecting-websocket.js"></script>
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/ztree/jquery.ztree.all-3.5.min.js"></script>    
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/Autolinker.min.js"></script>    
-        
+
 
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/codemirror-{{.codeMirrorVer}}/codemirror.js"></script>
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/codemirror-{{.codeMirrorVer}}/addon/lint/lint.js"></script>