refactor layout
This commit is contained in:
Van
parent
97d4837af6
commit
b2b08ccdd2
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* start reset & function */
|
||||||
body {
|
body {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -33,19 +34,64 @@ ul {
|
||||||
.fn-none {
|
.fn-none {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
/* end reset & function */
|
||||||
|
|
||||||
|
/* start framework */
|
||||||
|
.menu {
|
||||||
|
border-bottom: 1px solid #DDD;
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 460px;
|
}
|
||||||
|
|
||||||
|
.side {
|
||||||
|
width: 20%;
|
||||||
|
position: absolute;
|
||||||
|
border-right: 1px solid #DDD;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ztree {
|
.ztree {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 20%;
|
|
||||||
height: 440px;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 80%;
|
||||||
|
position: absolute;
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-panel {
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
border-top: 1px solid #DDD;
|
||||||
|
}
|
||||||
|
/* end framework */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#dirRMenu, #fileRMenu {
|
#dirRMenu, #fileRMenu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border: 1px solid #DDD;
|
border: 1px solid #DDD;
|
||||||
|
|
@ -58,34 +104,6 @@ ul {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.edit-panel {
|
|
||||||
border: 1px solid #262626;
|
|
||||||
height: 450px;
|
|
||||||
left: 20%;
|
|
||||||
position: absolute;
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.output {
|
|
||||||
width: 49%
|
|
||||||
}
|
|
||||||
|
|
||||||
.shell {
|
|
||||||
display: none;
|
|
||||||
float: right;
|
|
||||||
width: 49%
|
|
||||||
}
|
|
||||||
|
|
||||||
.shellInput, .shellOutput {
|
|
||||||
width: 99%
|
|
||||||
}
|
|
||||||
|
|
||||||
.shellOutput {
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* start tabs */
|
/* start tabs */
|
||||||
.tabs {
|
.tabs {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -189,7 +189,7 @@ var editors = {
|
||||||
"Ctrl-G": "gotoLine"
|
"Ctrl-G": "gotoLine"
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
editor.setSize('100%', 430);
|
editor.setSize('100%', $(".edit-panel").height() - $(".edit-header").height());
|
||||||
editor.setValue(data.content);
|
editor.setValue(data.content);
|
||||||
editor.setOption("mode", data.mode);
|
editor.setOption("mode", data.mode);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -116,18 +116,18 @@ var tree = {
|
||||||
dataType: "json",
|
dataType: "json",
|
||||||
success: function(data) {
|
success: function(data) {
|
||||||
if (!data.succ) {
|
if (!data.succ) {
|
||||||
alert(data.msg);
|
alert(data.msg);
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ("img" == data.mode) { // 是图片文件的话新建 tab 打开
|
if ("img" === data.mode) { // 是图片文件的话新建 tab 打开
|
||||||
// 最好是开 tab，但这个最终取决于浏览器设置
|
// 最好是开 tab，但这个最终取决于浏览器设置
|
||||||
var w = window.open(data.path);
|
var w = window.open(data.path);
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
editors.newEditor(data);
|
editors.newEditor(data);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -68,7 +68,14 @@ shellWS.onerror = function(e) {
|
||||||
var wide = {
|
var wide = {
|
||||||
curNode: undefined,
|
curNode: undefined,
|
||||||
curEditor: undefined,
|
curEditor: undefined,
|
||||||
|
_initLayout: function () {
|
||||||
|
var mainH = $(window).height() - $(".menu").height() - $(".footer").height();
|
||||||
|
$(".content, .ztree").height(mainH);
|
||||||
|
|
||||||
|
$(".edit-panel").height(mainH - $(".output").height());
|
||||||
|
},
|
||||||
init: function() {
|
init: function() {
|
||||||
|
this._initLayout();
|
||||||
$('#shellInput').keydown(function(event) {
|
$('#shellInput').keydown(function(event) {
|
||||||
if (13 === event.which) {
|
if (13 === event.which) {
|
||||||
var input = {
|
var input = {
|
||||||
|
|
|
||||||
|
|
@ -13,55 +13,57 @@
|
||||||
<link rel="stylesheet" href="{{.Wide.StaticServer}}/static/css/base.css">
|
<link rel="stylesheet" href="{{.Wide.StaticServer}}/static/css/base.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="menu">
|
||||||
|
<a href="/doc/{{.locale}}/index.html" target="_blank">Help</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="side">
|
<div class="side">
|
||||||
<ul id="files" class="ztree"></ul>
|
<div class="side-1">
|
||||||
|
<ul id="files" class="ztree"></ul>
|
||||||
|
|
||||||
<!-- 目录右键菜单 -->
|
<!-- 目录右键菜单 -->
|
||||||
<div id="dirRMenu" class="fn-none">
|
<div id="dirRMenu" class="fn-none">
|
||||||
<ul>
|
<ul>
|
||||||
<li onclick="tree.newFile();">create file....</li>
|
<li onclick="tree.newFile();">create file....</li>
|
||||||
<li onclick="tree.newDir();">create dir....</li>
|
<li onclick="tree.newDir();">create dir....</li>
|
||||||
<li onclick="tree.removeIt();">delete it....</li>
|
<li onclick="tree.removeIt();">delete it....</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文件右键菜单 -->
|
||||||
|
<div id="fileRMenu" class="fn-none">
|
||||||
|
<ul>
|
||||||
|
<li onclick="tree.removeIt();">delete it....</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="side-2">
|
||||||
<!-- 文件右键菜单 -->
|
|
||||||
<div id="fileRMenu" class="fn-none">
|
|
||||||
<ul>
|
|
||||||
<li onclick="tree.removeIt();">delete it....</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
<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()">全屏</span>
|
<span class="fn-none fn-right ico-fullscreen" onclick="editors.fullscreen()">全屏</span>
|
||||||
|
</div>
|
||||||
|
<div class="tabs-panel"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="output">
|
||||||
|
<div>
|
||||||
|
<button onclick="wide.save()">Save</button>
|
||||||
|
<button onclick="wide.fmt()">Format</button>
|
||||||
|
<button onclick="wide.run()">Build & Run</button>
|
||||||
|
</div>
|
||||||
|
<textarea id="output" rows="7"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="tabs-panel"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="footer">
|
||||||
<button id="saveBtn" onclick="wide.save()">Save</button>
|
copyright 88250 & vanessa
|
||||||
<button id="fmtBtn" onclick="wide.fmt()">Format</button>
|
|
||||||
<button id="runBtn" onclick="wide.run()">Build & Run</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<textarea id="output" class="output" rows="7"></textarea>
|
|
||||||
|
|
||||||
<div class="shell">
|
|
||||||
<div>
|
|
||||||
<input id="shellInput" class="shellInput" placeholder=" Command...." />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<textarea id="shellOutput" class="shellOutput" rows="8"></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="/doc/{{.locale}}/index.html" target="_blank">Help</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
@ -78,7 +80,7 @@
|
||||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/ztree/jquery.ztree.all-3.5.min.js"></script>
|
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/ztree/jquery.ztree.all-3.5.min.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/codemirror.js"></script>
|
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/codemirror.js"></script>
|
||||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/addon/selection/active-line.js"></script>
|
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/addon/selection/active-line.js"></script>
|
||||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/addon/hint/show-hint.js"></script>
|
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/addon/hint/show-hint.js"></script>
|
||||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/addon/hint/anyword-hint.js"></script>
|
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/addon/hint/anyword-hint.js"></script>
|
||||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/addon/display/fullscreen.js"></script>
|
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/addon/display/fullscreen.js"></script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue