样式，细节调整
This commit is contained in:
Van
parent
197c39c3f1
commit
515fcd85e1
|
|
@ -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 */
|
||||
/* end output */
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ $.extend(Tabs.prototype, {
|
|||
$tabsPanel.children("div").hide();
|
||||
|
||||
$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
|
||||
+ '</div>');
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
<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.help}}</a>
|
||||
<span class="fn-none ico-fullscreen" onclick="editors.fullscreen()">{{.i18n.full_screen}}</span>
|
||||
<div class="toolbars fn-right">
|
||||
<button onclick="wide.save()">{{.i18n.save}}</button>
|
||||
<button onclick="wide.fmt()">{{.i18n.format}}</button>
|
||||
|
|
@ -31,7 +32,7 @@
|
|||
<ul id="files" class="ztree"></ul>
|
||||
|
||||
<!-- 目录右键菜单 -->
|
||||
<div id="dirRMenu" class="fn-none">
|
||||
<div id="dirRMenu" class="menu-r fn-none">
|
||||
<ul>
|
||||
<li onclick="tree.newFile();">{{.i18n.create_file}}</li>
|
||||
<li onclick="tree.newDir();">{{.i18n.create_file}}</li>
|
||||
|
|
@ -40,7 +41,7 @@
|
|||
</div>
|
||||
|
||||
<!-- 文件右键菜单 -->
|
||||
<div id="fileRMenu" class="fn-none">
|
||||
<div id="fileRMenu" class="menu-r fn-none">
|
||||
<ul>
|
||||
<li onclick="tree.removeIt();">{{.i18n.delete}}</li>
|
||||
</ul>
|
||||
|
|
@ -54,13 +55,20 @@
|
|||
<div class="edit-panel">
|
||||
<div class="edit-header fn-clear">
|
||||
<div class="tabs fn-left"></div>
|
||||
<span class="fn-none fn-right ico-fullscreen" onclick="editors.fullscreen()">{{.i18n.full_screen}}</span>
|
||||
</div>
|
||||
<div class="tabs-panel"></div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue