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

View File

@ -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;

View File

@ -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);

View File

@ -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);
} }
}); });

View File

@ -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 = {

View File

@ -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>