From 515fcd85e18957332510eadffe48f7e07a6a8603 Mon Sep 17 00:00:00 2001 From: Van Date: Wed, 3 Sep 2014 17:23:42 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E7=BB=86=E8=8A=82?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/css/base.css | 137 +++++++++++++++++++++++++------------------- static/js/editor.js | 7 ++- static/js/tabs.js | 2 +- static/js/tree.js | 25 +++++++- static/js/wide.js | 8 +-- view/index.html | 16 ++++-- 6 files changed, 123 insertions(+), 72 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index 530f3ef..9f389f3 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -2,11 +2,13 @@ body { font-size: 13px; margin: 0; + color: #000; } ul { padding: 0; margin: 0; + list-style: none; } * { @@ -36,9 +38,35 @@ ul { } /* end reset & function */ +/* start tabs */ +.tabs { + height: 20px; + overflow: hidden; + width: 100%; +} + +.tabs > div { + background-color: #D1D1D1; + float: left; + border-right: 1px solid #9B9B9B; + padding: 2px 5px; + color: #333; +} + +.tabs > div.current { + background-color: #F7F7F7; +} + +.tabs .ico-close { + cursor: pointer; +} +/* end tabs */ + /* start framework */ .menu { - border-bottom: 1px solid #DDD; + background-color: #F0F0F0; + border-bottom: 1px solid #A5A5A5; + height: 25px; } .content { @@ -48,7 +76,7 @@ ul { .side { width: 20%; position: absolute; - border-right: 1px solid #DDD; + border-right: 1px solid #9B9B9B; height: 100%; } @@ -65,70 +93,61 @@ ul { left: 20%; } -.edit-panel { - border-bottom: 1px solid #ddd; - width: 100% -} - .footer { - border-top: 1px solid #DDD; + border-top: 1px solid #919191; + background-color: #F0F0F0; } /* end framework */ -/* start output */ -#output { - width: 100%; -} -/* end output */ - - - - - - - - - - - - - - - - - -#dirRMenu, #fileRMenu { +/* start side */ +.menu-r { position: absolute; - border: 1px solid #DDD; - background-color: #444; + border: 1px solid #5F5F5F; + background-color: #F8F8F8; + width: 340px; + z-index: 2; +} + +.menu-r li { + padding: 0 5px; + line-height: 25px; + cursor: pointer; +} + +.menu-r li:hover { + background-color: #3875D7; + color: #FFF; +} +/* end side */ + +/* start editor */ +.edit-panel { + background-color: #D7D7D7; + width: 100% +} +/* end editor */ + +/* start output */ +.output .tabs { + background-color: #CAD3E3; + border-top: 1px solid #8E97A7; + border-bottom: 1px solid #8E97A7; +} + +.output .tabs > div { + background-color: #B5BDCC; + border-left-color: #9096A2; +} + +.output .tabs > div.current { + background-color: #8B99B3; color: #FFF; } -#dirRMenu li, #fileRMenu li { - padding: 5px 10px; - cursor: pointer; - font-size: 12px; +#output { + width: 100%; + height: 130px; + color: #555555; } -/* start tabs */ -.tabs { - height: 20px; - overflow: hidden; - width: 97%; -} - -.tabs > div { - background-color: #FFF; - float: left; - border-left: 1px solid #DDD; - padding: 2px 5px; -} - -.tabs > div.current { - background-color: #EEEEEE; -} - -.tabs .ico-close { - cursor: pointer; -} -/* end tabs */ \ No newline at end of file +/* end output */ \ No newline at end of file diff --git a/static/js/editor.js b/static/js/editor.js index cb0384b..58a5000 100644 --- a/static/js/editor.js +++ b/static/js/editor.js @@ -53,6 +53,11 @@ var editors = { } } }); + + + $(".edit-header .tabs").on("dblclick", "div", function () { + editors.fullscreen(); + }); }, fullscreen: function() { wide.curEditor.setOption("fullScreen", true); @@ -157,7 +162,7 @@ var editors = { for (var i = 0, ii = editors.data.length; i < ii; i++) { if (editors.data[i].id === id) { editors.tabs.setCurrent(id); - wide.curEditor = editor; + wide.curEditor = editors.data[i].editor; return false; } } diff --git a/static/js/tabs.js b/static/js/tabs.js index 2176396..32083fc 100644 --- a/static/js/tabs.js +++ b/static/js/tabs.js @@ -33,7 +33,7 @@ $.extend(Tabs.prototype, { $tabsPanel.children("div").hide(); $tabs.append('
' - + data.title + 'X
'); + + data.title + 'X
'); $tabsPanel.append('
' + data.content + '
'); }, diff --git a/static/js/tree.js b/static/js/tree.js index 64dc526..a53f880 100644 --- a/static/js/tree.js +++ b/static/js/tree.js @@ -96,15 +96,35 @@ var tree = { wide.curNode = treeNode; if ("f" === treeNode.type) { // 如果右击了文件 $("#fileRMenu ul").show(); - fileRMenu.css({"top": event.clientY + "px", "left": event.clientX + "px", "display": "block"}); + fileRMenu.css({"top": event.clientY - 10 + "px", "left": event.clientX + "px", "display": "block"}); } else { // 右击了目录 $("#dirRMenu ul").show(); - dirRMenu.css({"top": event.clientY + "px", "left": event.clientX + "px", "display": "block"}); + dirRMenu.css({"top": event.clientY - 10 + "px", "left": event.clientX + "px", "display": "block"}); } } }, onClick: function(event, treeId, treeNode, clickFlag) { + if (wide.curNode) { + var id = wide.curNode.tId; + if (id === treeNode.tId) { + // 再次点击当前选中节点 + return false; + } + + + for (var i = 0, ii = editors.data.length; i < ii; i++) { + // 该节点文件已经打开 + if (editors.data[i].id === treeNode.tId) { + editors.tabs.setCurrent(treeNode.tId); + wide.curNode = treeNode; + wide.curEditor = editors.data[i].editor; + return false; + } + } + } + wide.curNode = treeNode; + if ("f" === treeNode.type) { // 如果单击了文件 var request = { path: treeNode.path @@ -136,7 +156,6 @@ var tree = { } }; tree.fileTree = $.fn.zTree.init($("#files"), setting, data.root.children); - // tree.fileTree.expandAll(true); } } }); diff --git a/static/js/wide.js b/static/js/wide.js index b923a4c..7b4a4a1 100644 --- a/static/js/wide.js +++ b/static/js/wide.js @@ -8,9 +8,9 @@ outputWS.onmessage = function(e) { var data = JSON.parse(e.data); if ('run' === data.cmd) { - $('#output').val($('#output').val() + data.output); + $('#output').text($('#output').text() + data.output); } else if ('build' === data.cmd) { - $('#output').val(data.output); + $('#output').text(data.output); if (0 !== data.output.length) { // 说明编译有错误输出 return; @@ -29,7 +29,7 @@ outputWS.onmessage = function(e) { data: JSON.stringify(request), dataType: "json", beforeSend: function(data) { - $('#output').val(''); + $('#output').text(''); }, success: function(data) { @@ -123,7 +123,7 @@ var wide = { data: JSON.stringify(request), dataType: "json", beforeSend: function(data) { - $('#output').val(''); + $('#output').text(''); }, success: function(data) { executable = data.executable; diff --git a/view/index.html b/view/index.html index 5ca6af3..9b76282 100644 --- a/view/index.html +++ b/view/index.html @@ -18,6 +18,7 @@ {{.i18n.run}} {{.i18n.debug}} {{.i18n.help}} + {{.i18n.full_screen}}
@@ -31,7 +32,7 @@
    -
    + -
    +