mbk-lab
/
wide
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

样式，细节调整

This commit is contained in:
Van 2014-09-03 17:23:42 +08:00
parent 197c39c3f1
commit 515fcd85e1
6 changed files with 123 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
static/css/base.css
View File

@ -2,11 +2,13 @@
body { body {
font-size: 13px; font-size: 13px;
margin: 0; margin: 0;
color: #000;
} }
ul { ul {
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style: none;
} }
* { * {
@ -36,9 +38,35 @@ ul {
} }
/* end reset & function */ /* 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 */ /* start framework */
.menu { .menu {
border-bottom: 1px solid #DDD; background-color: #F0F0F0;
border-bottom: 1px solid #A5A5A5;
height: 25px;
} }
.content { .content {
@ -48,7 +76,7 @@ ul {
.side { .side {
width: 20%; width: 20%;
position: absolute; position: absolute;
border-right: 1px solid #DDD; border-right: 1px solid #9B9B9B;
height: 100%; height: 100%;
} }
@ -65,70 +93,61 @@ ul {
left: 20%; left: 20%;
} }
.edit-panel {
border-bottom: 1px solid #ddd;
width: 100%
}
.footer { .footer {
border-top: 1px solid #DDD; border-top: 1px solid #919191;
background-color: #F0F0F0;
} }
/* end framework */ /* end framework */
/* start output */
#output {
width: 100%;
}
/* end output */
/* start side */
.menu-r {
#dirRMenu, #fileRMenu {
position: absolute; position: absolute;
border: 1px solid #DDD; border: 1px solid #5F5F5F;
background-color: #444; 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; color: #FFF;
} }
#dirRMenu li, #fileRMenu li { #output {
padding: 5px 10px; width: 100%;
cursor: pointer; height: 130px;
font-size: 12px; color: #555555;
} }
/* start tabs */ /* end output */
.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 */

7
static/js/editor.js
View File

@ -53,6 +53,11 @@ var editors = {
} }
} }
}); });
$(".edit-header .tabs").on("dblclick", "div", function () {
editors.fullscreen();
});
}, },
fullscreen: function() { fullscreen: function() {
wide.curEditor.setOption("fullScreen", true); wide.curEditor.setOption("fullScreen", true);
@ -157,7 +162,7 @@ var editors = {
for (var i = 0, ii = editors.data.length; i < ii; i++) { for (var i = 0, ii = editors.data.length; i < ii; i++) {
if (editors.data[i].id === id) { if (editors.data[i].id === id) {
editors.tabs.setCurrent(id); editors.tabs.setCurrent(id);
wide.curEditor = editor; wide.curEditor = editors.data[i].editor;
return false; return false;
} }
} }

2
static/js/tabs.js
View File

@ -33,7 +33,7 @@ $.extend(Tabs.prototype, {
$tabsPanel.children("div").hide(); $tabsPanel.children("div").hide();
$tabs.append('<div class="current" data-index="' + data.id + '">' $tabs.append('<div class="current" data-index="' + data.id + '">'
+ data.title + '<span class="ico-close">X</span><div>'); + data.title + '<span class="ico-close">X</span></div>');
$tabsPanel.append('<div data-index="' + data.id + '">' + data.content $tabsPanel.append('<div data-index="' + data.id + '">' + data.content
+ '</div>'); + '</div>');
}, },

25
static/js/tree.js
View File

@ -96,15 +96,35 @@ var tree = {
wide.curNode = treeNode; wide.curNode = treeNode;
if ("f" === treeNode.type) { // 如果右击了文件 if ("f" === treeNode.type) { // 如果右击了文件
$("#fileRMenu ul").show(); $("#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 { // 右击了目录 } else { // 右击了目录
$("#dirRMenu ul").show(); $("#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) { 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.curNode = treeNode;
wide.curEditor = editors.data[i].editor;
return false;
}
}
}
wide.curNode = treeNode;
if ("f" === treeNode.type) { // 如果单击了文件 if ("f" === treeNode.type) { // 如果单击了文件
var request = { var request = {
path: treeNode.path path: treeNode.path
@ -136,7 +156,6 @@ var tree = {
} }
}; };
tree.fileTree = $.fn.zTree.init($("#files"), setting, data.root.children); tree.fileTree = $.fn.zTree.init($("#files"), setting, data.root.children);
// tree.fileTree.expandAll(true);
} }
} }
}); });

8
static/js/wide.js
View File

@ -8,9 +8,9 @@ outputWS.onmessage = function(e) {
var data = JSON.parse(e.data); var data = JSON.parse(e.data);
if ('run' === data.cmd) { if ('run' === data.cmd) {
$('#output').val($('#output').val() + data.output); $('#output').text($('#output').text() + data.output);
} else if ('build' === data.cmd) { } else if ('build' === data.cmd) {
$('#output').val(data.output); $('#output').text(data.output);
if (0 !== data.output.length) { // 说明编译有错误输出 if (0 !== data.output.length) { // 说明编译有错误输出
return; return;
@ -29,7 +29,7 @@ outputWS.onmessage = function(e) {
data: JSON.stringify(request), data: JSON.stringify(request),
dataType: "json", dataType: "json",
beforeSend: function(data) { beforeSend: function(data) {
$('#output').val(''); $('#output').text('');
}, },
success: function(data) { success: function(data) {
@ -123,7 +123,7 @@ var wide = {
data: JSON.stringify(request), data: JSON.stringify(request),
dataType: "json", dataType: "json",
beforeSend: function(data) { beforeSend: function(data) {
$('#output').val(''); $('#output').text('');
}, },
success: function(data) { success: function(data) {
executable = data.executable; executable = data.executable;

16
view/index.html
View File

@ -18,6 +18,7 @@
<a href="/doc/{{.locale}}/index.html" target="_blank">{{.i18n.run}}</a> <a href="/doc/{{.locale}}/index.html" target="_blank">{{.i18n.run}}</a>
<a href="/doc/{{.locale}}/index.html" target="_blank">{{.i18n.debug}}</a> <a href="/doc/{{.locale}}/index.html" target="_blank">{{.i18n.debug}}</a>
<a href="/doc/{{.locale}}/index.html" target="_blank">{{.i18n.help}}</a> <a href="/doc/{{.locale}}/index.html" target="_blank">{{.i18n.help}}</a>
<span class="fn-none ico-fullscreen" onclick="editors.fullscreen()">{{.i18n.full_screen}}</span>
<div class="toolbars fn-right"> <div class="toolbars fn-right">
<button onclick="wide.save()">{{.i18n.save}}</button> <button onclick="wide.save()">{{.i18n.save}}</button>
<button onclick="wide.fmt()">{{.i18n.format}}</button> <button onclick="wide.fmt()">{{.i18n.format}}</button>
@ -31,7 +32,7 @@
<ul id="files" class="ztree"></ul> <ul id="files" class="ztree"></ul>
<!-- 目录右键菜单 --> <!-- 目录右键菜单 -->
<div id="dirRMenu" class="fn-none"> <div id="dirRMenu" class="menu-r fn-none">
<ul> <ul>
<li onclick="tree.newFile();">{{.i18n.create_file}}</li> <li onclick="tree.newFile();">{{.i18n.create_file}}</li>
<li onclick="tree.newDir();">{{.i18n.create_file}}</li> <li onclick="tree.newDir();">{{.i18n.create_file}}</li>
@ -40,7 +41,7 @@
</div> </div>
<!-- 文件右键菜单 --> <!-- 文件右键菜单 -->
<div id="fileRMenu" class="fn-none"> <div id="fileRMenu" class="menu-r fn-none">
<ul> <ul>
<li onclick="tree.removeIt();">{{.i18n.delete}}</li> <li onclick="tree.removeIt();">{{.i18n.delete}}</li>
</ul> </ul>
@ -54,13 +55,20 @@
<div class="edit-panel"> <div class="edit-panel">
<div class="edit-header fn-clear"> <div class="edit-header fn-clear">
<div class="tabs fn-left"></div> <div class="tabs fn-left"></div>
<span class="fn-none fn-right ico-fullscreen" onclick="editors.fullscreen()">{{.i18n.full_screen}}</span>
</div> </div>
<div class="tabs-panel"></div> <div class="tabs-panel"></div>
</div> </div>
<div class="output"> <div class="output">
<textarea id="output" rows="8"></textarea> <div class="tabs">
<div class="current" data-index="files_3">
<span title="Output">Output</span>
<span class="ico-close">X</span>
</div>
</div>
<div class="tabs-panel">
<div id="output"></div>
</div>
</div> </div>
</div> </div>
</div> </div>