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

refactor layout

This commit is contained in:
Van 2014-09-02 18:09:01 +08:00
parent 97d4837af6
commit b2b08ccdd2
5 changed files with 108 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
static/css/base.css
View File

@ -1,3 +1,4 @@
/* start reset & function */
body {
font-size: 13px;
margin: 0;
@ -33,19 +34,64 @@ ul {
.fn-none {
display: none;
}
/* end reset & function */
/* start framework */
.menu {
border-bottom: 1px solid #DDD;
}
.content {
position: relative;
height: 460px;
}
.side {
width: 20%;
position: absolute;
border-right: 1px solid #DDD;
height: 100%;
}
.ztree {
position: absolute;
width: 20%;
height: 440px;
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 {
position: absolute;
border: 1px solid #DDD;
@ -58,34 +104,6 @@ ul {
cursor: pointer;
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 */
.tabs {
height: 20px;

2
static/js/editor.js
View File

@ -189,7 +189,7 @@ var editors = {
"Ctrl-G": "gotoLine"
}
});
editor.setSize('100%', 430);
editor.setSize('100%', $(".edit-panel").height() - $(".edit-header").height());
editor.setValue(data.content);
editor.setOption("mode", data.mode);

20
static/js/tree.js
View File

@ -116,18 +116,18 @@ var tree = {
dataType: "json",
success: function(data) {
if (!data.succ) {
alert(data.msg);
alert(data.msg);
return false;
}
if ("img" == data.mode) { // 是图片文件的话新建 tab 打开
// 最好是开 tab，但这个最终取决于浏览器设置
var w = window.open(data.path);
return false;
}
if ("img" === data.mode) { // 是图片文件的话新建 tab 打开
// 最好是开 tab，但这个最终取决于浏览器设置
var w = window.open(data.path);
return false;
}
editors.newEditor(data);
}
});

7
static/js/wide.js
View File

@ -68,7 +68,14 @@ shellWS.onerror = function(e) {
var wide = {
curNode: 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() {
this._initLayout();
$('#shellInput').keydown(function(event) {
if (13 === event.which) {
var input = {

80
view/index.html
View File

@ -13,55 +13,57 @@
<link rel="stylesheet" href="{{.Wide.StaticServer}}/static/css/base.css">
</head>
<body>
<div class="menu">
<a href="/doc/{{.locale}}/index.html" target="_blank">Help</a>
</div>
<div class="content">
<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">
<ul>
<li onclick="tree.newFile();">create file....</li>
<li onclick="tree.newDir();">create dir....</li>
<li onclick="tree.removeIt();">delete it....</li>
</ul>
<!-- 目录右键菜单 -->
<div id="dirRMenu" class="fn-none">
<ul>
<li onclick="tree.newFile();">create file....</li>
<li onclick="tree.newDir();">create dir....</li>
<li onclick="tree.removeIt();">delete it....</li>
</ul>
</div>
<!-- 文件右键菜单 -->
<div id="fileRMenu" class="fn-none">
<ul>
<li onclick="tree.removeIt();">delete it....</li>
</ul>
</div>
</div>
<!-- 文件右键菜单 -->
<div id="fileRMenu" class="fn-none">
<ul>
<li onclick="tree.removeIt();">delete it....</li>
</ul>
<div class="side-2">
</div>
</div>
<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()">全屏</span>
<div class="main">
<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()">全屏</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 class="tabs-panel"></div>
</div>
</div>
<div>
<button id="saveBtn" onclick="wide.save()">Save</button>
<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 class="footer">
copyright 88250 & vanessa
</div>
<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/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/anyword-hint.js"></script>
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.5/addon/display/fullscreen.js"></script>