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

改了一天，中途看了个跑男&羋🈷️传。应该差不多了，还要洗个白白，明天 shopping & 🎬

This commit is contained in:
Van 2015-12-06 00:27:15 +08:00
parent 2a41cbae8b
commit a1c5ac31df
12 changed files with 6409 additions and 6247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -5,3 +5,5 @@
/header
/header.exe
/**/.DS_Store

9
static/css/base.css
View File

@ -14,6 +14,12 @@
* limitations under the License.
*/
/*
* themes for base.
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.1.0.0, Dec 6, 2015
*/
/* start reset & function */
::-webkit-scrollbar {
background: none;
@ -143,7 +149,8 @@ button {
font-style: normal;
}
.font-ico {
.font-ico,
[class^="ico-"] {
font-family: 'icomoon';
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;

30
static/css/side.css
View File

@ -14,43 +14,37 @@
* limitations under the License.
*/
/*
* themes for side
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.1.0.0, Dec 6, 2015
*/
/* start side */
.side {
width: 20%;
position: absolute;
height: 100%;
z-index: 8;
flex-flow: column;
display: flex;
}
.side-max {
width: 100%;
z-index: 11;
}
.side .tabs-panel {
overflow: auto;
}
/* end side */
/* start side right */
.side-right {
height: 70%;
position: absolute;
right: 0;
width: 20%;
z-index: 8;
}
.side-right-max {
width: 100%;
height: 100%;
z-index: 11;
}
.side-right .tabs-panel > div {
overflow: auto;
}
.side-right {
flex-flow: column;
}
#outline .ico {
margin: 1px 5px 0 5px;
}

12
static/css/themes/dark.css
View File

@ -14,14 +14,18 @@
* limitations under the License.
*/
/*
* themes for dark.
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.1.0.0, Dec 6, 2015
*/
.side {
background-color: #303130;
border-right: 1px solid #000;
}
.side-right {
background-color: #303130;
border-left: 1px solid #000;
color: #999;
}
@ -141,10 +145,6 @@
color: #e1e1e1;
}
.bottom-window-group {
border-top: 1px solid #000;
}
.bottom-window-group .tabs-panel > div{
background-color: #181818;
color: #ebebeb;

13
static/css/themes/default.css
View File

@ -14,14 +14,19 @@
* limitations under the License.
*/
/*
* themes for default.
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.1.0.0, Dec 6, 2015
*/
.side {
background-color: #FFF;
border-right: 1px solid #919191;
}
.side-right {
background-color: #FFF;
border-left: 1px solid #919191;
}
.footer {
@ -122,10 +127,6 @@
background-color: #F0F0F0;
}
.bottom-window-group {
border-top: 1px solid #919191;
}
#dialogPreference .preference {
border: 1px solid #A4A4A4;
}

50
static/css/wide.css
View File

@ -14,6 +14,12 @@
* limitations under the License.
*/
/*
* themes for wide.
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.1.0.0, Dec 6, 2015
*/
/* start frame */
.frame {
position: absolute;
@ -77,9 +83,19 @@
.tabs > div > span.changed {
font-weight: bold;
}
.tabs-panel {
overflow: auto;
flex: 1;
}
/* end tabs */
/* start menu */
.menu {
display: block !important;
}
.menu > ul > li {
float: left;
}
@ -122,6 +138,7 @@
width: 226px;
padding: 5px 0;
right: 0px;
top: 21px;
}
.share-panel .font-ico {
@ -143,6 +160,8 @@
width: 60%;
height: 70%;
overflow: hidden;
flex-flow: column;
display: flex;
}
.toolbars {
@ -219,27 +238,8 @@
/* start bottom-window-group */
.bottom-window-group {
width: 80%;
position: absolute;
left: 20%;
width: 80%;
height: 30%;
top: 70%;
z-index: 7;
background-color: #fff;
}
.bottom-window-group-max {
height: 100%;
left: 0;
top: 0;
width: 100%;
z-index: 11;
border-top-width: 0 !important;
}
.bottom-window-group > div > div {
overflow: auto;
flex-flow: column;
}
.bottom-window-group .output {
@ -301,6 +301,11 @@
width: 50px;
padding: 0 5px;
}
.bottom-window-group .search {
display: flex;
flex-flow: column;
}
/* end bottom-window-group */
/* start footer */
@ -308,11 +313,8 @@
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.06) inset;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.57);
padding-left: 5px;
height: 19px;
line-height: 18px;
bottom: 0;
z-index: 11;
width: 100%;
display: block !important;
}
.footer .cursor {

19
static/js/editors.js
View File

@ -14,6 +14,12 @@
* limitations under the License.
*/
/*
* @file editor.
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.1.0.0, Dec 6, 2015
*/
var editors = {
autocompleteMutex: false,
data: [],
@ -203,14 +209,6 @@ var editors = {
}
});
$(".edit-panel .tabs").on("dblclick", function () {
if ($(".toolbars .ico-max").length === 1) {
windows.maxEditor();
} else {
windows.restoreEditor();
}
});
this._initCodeMirrorHotKeys();
this.openStartPage();
this._initClose();
@ -247,7 +245,6 @@ var editors = {
+ '"><span class="ico-start font-ico"></span> ' + config.label.start_page + '</span>',
content: '<div id="startPage"></div>',
after: function () {
$("#startPage").height($('.side-right').height() - $(".bottom-window-group").children(".tabs").height() - 100);
$("#startPage").load(config.context + '/start?sid=' + config.wideSessionId);
$.ajax({
url: "https://symphony.b3log.org/apis/articles?tags=wide,golang&p=1&size=20",
@ -807,10 +804,6 @@ var editors = {
$(".footer .cursor").text('| ' + (cursor.line + 1) + ':' + (cursor.ch + 1) + ' |');
});
editor.on('focus', function (cm) {
windows.clearFloat();
});
editor.on('blur', function (cm) {
$(".edit-exprinfo").remove();
});

11843
static/js/lib/jquery-layout/jquery.layout-latest.js
View File

File diff suppressed because it is too large Load Diff

15
static/js/lib/jquery-ui.min.js vendored
View File

File diff suppressed because one or more lines are too long

39
static/js/wide.js
View File

@ -14,6 +14,12 @@
* limitations under the License.
*/
/*
* @file wide.
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.1.0.0, Dec 6, 2015
*/
var wide = {
curNode: undefined,
curEditor: undefined,
@ -362,28 +368,6 @@ var wide = {
}
});
},
_initLayout: function () {
var mainH = $(window).height() - $(".menu").height() - $(".footer").height() - 2,
bottomH = Math.floor(mainH * 0.3);
// 减小初始化界面抖动
$(".content").height(mainH).css("position", "relative");
$(".side .tabs-panel").height(mainH - 20);
var $bottomGroup = $(".bottom-window-group");
if ($bottomGroup.hasClass("bottom-window-group-max")) {
$(".bottom-window-group > .tabs-panel > div > div").height(mainH - $bottomGroup.children(".tabs").height());
} else {
$(".bottom-window-group > .tabs-panel > div > div").height(bottomH - $bottomGroup.children(".tabs").height());
}
if ($(".side-right").hasClass("side-right-max")) {
$(".side-right > .tabs-panel > div").height(mainH - $bottomGroup.children(".tabs").height());
} else {
$(".side-right > .tabs-panel > div").height($('.side-right').height() - $bottomGroup.children(".tabs").height());
}
$("#startPage").height($('.side-right').height() - $bottomGroup.children(".tabs").height() - 100);
},
_initWS: function () {
var outputWS = new ReconnectingWebSocket(config.channel + '/output/ws?sid=' + config.wideSessionId);
outputWS.onopen = function () {
@ -554,17 +538,6 @@ var wide = {
};
this._initDialog();
this._initLayout();
$(window).resize(function () {
wide._initLayout();
var editorDatas = editors.data,
height = $(".edit-panel").height() - $(".edit-panel .tabs").height();
for (var i = 0, ii = editorDatas.length; i < ii; i++) {
editorDatas[i].editor.setSize("100%", height);
}
});
},
_save: function (path, editor) {
if (!path) {

435
static/js/windows.js
View File

@ -14,312 +14,241 @@
* limitations under the License.
*/
/*
* @file windows.
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.1.0.0, Dec 6, 2015
*/
var windows = {
isMaxEditor: false,
outerLayout: {},
innerLayout: {},
init: function () {
// bottom windows
$(".footer .ico-restore:eq(1)").click(function () {
windows.restoreBottom();
if ($(".footer .ico-restore:eq(0)").css("display") === "none"
&& $(".footer .ico-restore:eq(2)").css("display") === "none") {
$(".toolbars .ico-restore").removeClass("ico-restore").addClass("ico-max")
.attr({
"title": config.label.max_editor,
"onclick": "windows.maxEditor()"
});
this.outerLayout = $('body').layout({
north__paneSelector: ".menu",
center__paneSelector: ".content",
south__paneSelector: ".footer",
north__size: 22,
south__size: 19,
spacing_open: 3,
spacing_closed: 4,
north__spacing_open: 0,
south__spacing_open: 0,
defaults: {
fxSpeed_open: 300,
fxSpeed_close: 100,
fxSettings_close: {
easing: "easeOutQuint"
},
fxSettings_open: {
easing: "easeInQuint"
}
},
west: {
paneSelector: ".side",
togglerLength_open: 0,
togglerLength_closed: 15,
togglerAlign_closed: "top",
slideTrigger_open: "mouseover",
spacing_closed: 15,
minSize: 100,
togglerClass: "ico-restore",
togglerTip_open: config.label.min,
togglerTip_closed: config.label.restore_side,
resizerTip: config.label.resize
}
});
$(".bottom-window-group .ico-min").click(function () {
windows.minBottom();
if ($(".footer .ico-restore:eq(0)").css("display") === "inline"
&& $(".footer .ico-restore:eq(2)").css("display") === "inline") {
$(".toolbars .ico-max").removeClass("ico-max").addClass("ico-restore")
.attr({
"title": config.label.restore_editor,
"onclick": "windows.restoreEditor()"
});
this.innerLayout = $('div.content').layout({
spacing_open: 3,
spacing_closed: 4,
defaults: {
fxSpeed_open: 300,
fxSpeed_close: 100,
fxSettings_close: {
easing: "easeOutQuint"
},
fxSettings_open: {
easing: "easeInQuint"
}
},
center: {
paneSelector: ".edit-panel"
},
east: {
paneSelector: ".side-right",
togglerLength_open: 0,
togglerLength_closed: 15,
togglerAlign_closed: "top",
slideTrigger_open: "mouseover",
spacing_closed: 15,
minSize: 100,
togglerClass: "ico-restore",
togglerTip_open: config.label.min,
togglerTip_closed: config.label.restore_outline,
resizerTip: config.label.resize
},
south: {
paneSelector: ".bottom-window-group",
togglerLength_open: 0,
togglerLength_closed: 15,
togglerAlign_closed: "top",
slideTrigger_open: "mouseover",
spacing_closed: 16,
minSize: 100,
togglerClass: "ico-restore",
togglerTip_open: config.label.min,
togglerTip_closed: config.label.restore_bottom,
resizerTip: config.label.resize,
ondrag_end: function (type, pane) {
windows.refreshEditor(pane, 'drag');
},
onresize_end: function (type, pane) {
windows.refreshEditor(pane, 'resize');
},
onclose_end: function (type, pane) {
windows.refreshEditor(pane, 'close');
},
onopen_end: function (type, pane) {
windows.refreshEditor(pane, 'open');
},
onshow_end: function (type, pane) {
windows.refreshEditor(pane, 'show');
}
}
});
this.outerLayout.addCloseBtn(".side .ico-min", "west");
this.innerLayout.addCloseBtn(".side-right .ico-min", "east");
this.innerLayout.addCloseBtn(".bottom-window-group .ico-min", "south");
$(".toolbars .ico-max").click(function () {
windows.toggleEditor();
});
$(".edit-panel .tabs").on("dblclick", function () {
windows.toggleEditor();
});
$(".bottom-window-group .tabs").dblclick(function () {
windows.maxBottom();
});
// side
$(".footer .ico-restore:eq(0)").click(function () {
windows.restoreSide();
if ($(".footer .ico-restore:eq(1)").css("display") === "none"
&& $(".footer .ico-restore:eq(2)").css("display") === "none") {
$(".toolbars .ico-restore").removeClass("ico-restore").addClass("ico-max")
.attr({
"title": config.label.max_editor,
"onclick": "windows.maxEditor()"
});
}
});
$(".side .ico-min").click(function () {
windows.minSide();
if ($(".footer .ico-restore:eq(1)").css("display") === "inline"
&& $(".footer .ico-restore:eq(2)").css("display") === "inline") {
$(".toolbars .ico-max").removeClass("ico-max").addClass("ico-restore")
.attr({
"title": config.label.restore_editor,
"onclick": "windows.restoreEditor()"
});
}
windows.toggleBottom();
});
$(".side .tabs").dblclick(function () {
windows.maxSide();
});
// side right
$(".footer .ico-restore:eq(2)").click(function () {
windows.restoreSideRight();
if ($(".footer .ico-restore:eq(1)").css("display") === "none"
&& $(".footer .ico-restore:eq(0)").css("display") === "none") {
$(".toolbars .ico-restore").removeClass("ico-restore").addClass("ico-max")
.attr({
"title": config.label.max_editor,
"onclick": "windows.maxEditor()"
});
}
});
$(".side-right .ico-min").click(function () {
windows.minSideRight();
if ($(".footer .ico-restore:eq(1)").css("display") === "inline"
&& $(".footer .ico-restore:eq(0)").css("display") === "inline") {
$(".toolbars .ico-max").removeClass("ico-max").addClass("ico-restore")
.attr({
"title": config.label.restore_editor,
"onclick": "windows.restoreEditor()"
});
}
windows.toggleSide();
});
$(".side-right .tabs").dblclick(function () {
windows.maxSideRight();
windows.toggleSideRight();
});
$(window).click(function (event) {
if ($(event.target).closest(".footer").length === 1
|| $(event.target).closest(".bottom-window-group").length === 1
|| $(event.target).closest(".toolbars").length === 1
|| $(event.target).closest(".side").length === 1
|| $(event.target).closest(".side-right").length === 1) {
} else {
windows.clearFloat();
}
$('.bottom-window-group .search').height($('.bottom-window-group .tabs-panel').height());
$(window).resize(function () {
windows.refreshEditor($('.bottom-window-group'));
});
},
maxBottom: function () {
toggleBottom: function () {
var $it = $(".bottom-window-group");
if ($it.hasClass("bottom-window-group-max")) {
windows.restoreBottom();
if ($(".side").css("left") !== "0px" && $(".side").css("left") !== "auto") {
$it.css({
"left": "0px",
"width": "100%"
});
}
} else {
$it.attr("style", "");
var bottomH = $(".content").height();
$(".bottom-window-group > .tabs-panel > div > div").height(bottomH - $it.children(".tabs").height());
$it.addClass("bottom-window-group-max");
$it.data('height', $it.height()).addClass("bottom-window-group-max").find('.ico-min').hide();
windows.outerLayout.hide('west');
windows.innerLayout.hide('east');
windows.innerLayout.sizePane('south', $('.content').height());
}
},
maxSide: function () {
toggleSide: function () {
var $it = $(".side");
if ($it.hasClass("side-max")) {
windows.restoreSide();
} else {
$it.addClass("side-max");
$it.data('width', $it.width()).addClass("side-max").find('.ico-min').hide();
$('.content').hide();
windows.outerLayout.sizePane('west', $('body').width());
}
},
maxSideRight: function () {
toggleSideRight: function () {
var $it = $(".side-right");
if ($it.hasClass("side-right-max")) {
windows.restoreSideRight();
} else {
$it.addClass("side-right-max");
$(".side-right > .tabs-panel > div").height($(".content").height() - $it.children(".tabs").height());
$it.addClass("side-right-max").data('width', $it.width()).find('.ico-min').hide();
windows.outerLayout.hide('west');
windows.innerLayout.hide('south');
windows.innerLayout.sizePane('east', $('body').width());
}
},
toggleEditor: function () {
var $it = $(".toolbars .font-ico");
if ($it.hasClass('ico-restore')) {
windows.restoreEditor();
} else {
windows.outerLayout.close('west');
windows.innerLayout.close('south');
windows.innerLayout.close('east');
$it.removeClass('ico-max').addClass('ico-restore').attr('title', config.label.min);
windows.isMaxEditor = true;
}
},
restoreBottom: function () {
var $it = $(".bottom-window-group");
$it.removeClass("bottom-window-group-max").attr("style", "");
var bottomH = $it.height();
$(".bottom-window-group > .tabs-panel > div > div").height(bottomH - $it.children(".tabs").height());
$it.animate({
"top": "70%"
}, function () {
$(".edit-panel, .side-right").css("height", "70%");
var editorDatas = editors.data,
height = $(".edit-panel").height() - $(".edit-panel .tabs").height();
for (var i = 0, ii = editorDatas.length; i < ii; i++) {
editorDatas[i].editor.setSize("100%", height);
}
$("#startPage").height(height - 100);
$it.show();
$(".footer .ico-restore:eq(1)").hide();
});
if ($(".footer .ico-restore:eq(0)").css("display") === "inline") {
// 当文件树最小化时
$it.css({
"width": "100%",
"left": "0"
});
}
$it.removeClass("bottom-window-group-max").find('.ico-min').show();
windows.outerLayout.show('west');
windows.innerLayout.show('east');
windows.innerLayout.sizePane('south', $it.data('height'));
},
restoreSide: function () {
$(".side").animate({
"left": "0"
}, function () {
$(".edit-panel, .bottom-window-group").css({
"left": "20%",
"width": "80%"
});
if ($(".footer .ico-restore:eq(2)").css("display") === "inline") {
// 当outline最小化时
$(".edit-panel").css("width", "80%");
} else {
$(".edit-panel").css("width", "60%");
}
$(".footer .ico-restore:eq(0)").hide();
}).removeClass("side-max");
var $it = $(".side");
$it.removeClass("side-max").find('.ico-min').show();
$('.content').show();
windows.outerLayout.sizePane('west', $it.data('width'));
},
restoreSideRight: function () {
$(".side-right").animate({
"right": "0"
}, function () {
if ($(".footer .ico-restore:eq(0)").css("display") === "inline") {
// 当文件树最小化时
$(".edit-panel").css("width", "80%");
} else {
$(".edit-panel").css("width", "60%");
}
$(".footer .ico-restore:eq(2)").hide();
$(".side-right > .tabs-panel > div").height($('.side-right').height()
- $(this).children(".tabs").height());
}).removeClass("side-right-max");
var $it = $(".side-right");
$it.removeClass("side-right-max").find('.ico-min').show();
windows.outerLayout.show('west');
windows.innerLayout.show('south');
windows.innerLayout.sizePane('east', $it.data('width'));
},
restoreEditor: function () {
windows.outerLayout.open('west');
windows.innerLayout.open('south');
windows.innerLayout.open('east');
windows.isMaxEditor = false;
$(".toolbars .font-ico").addClass('ico-max').removeClass('ico-restore').attr('title', config.label.max_editor);
},
minBottom: function () {
$(".edit-panel, .side-right").css("height", "100%");
windows.innerLayout.close('south');
},
minSide: function () {
windows.outerLayout.close('west');
},
minSideRight: function () {
windows.innerLayout.close('east');
},
refreshEditor: function (pane, type) {
console.log(type)
var editorDatas = editors.data,
height = $(".content").height() - $(".edit-panel .tabs").height();
height = $('.content').height() - pane.height() - 24;
switch (type) {
case 'close':
height = $('.content').height() - 40;
break;
default:
break;
}
for (var i = 0, ii = editorDatas.length; i < ii; i++) {
editorDatas[i].editor.setSize("100%", height);
}
$("#startPage").height(height - 100);
$(".bottom-window-group").css("top", "100%").hide();
$(".footer .ico-restore:eq(1)").show();
},
minSide: function () {
$(".side").css("left", "-20%").removeClass("side-max");
var width = '80%';
if ($(".footer .ico-restore:eq(2)").css("display") === "inline") {
// 当 outline 最小化时
width = '100%';
}
$(".edit-panel, .bottom-window-group").css({
"left": "0",
"width": width
});
$(".bottom-window-group").css({
"left": "0",
"width": '100%'
});
$(".footer .ico-restore:eq(0)").show();
},
minSideRight: function () {
$(".side-right").css("right", "-20%");
$(".footer .ico-restore:eq(2)").show();
if ($(".footer .ico-restore:eq(0)").css("display") === "inline") {
// 当文件树最小化时
$(".edit-panel").css("width", "100%");
} else {
$(".edit-panel").css("width", "80%");
}
},
maxEditor: function () {
$(".toolbars .ico-max").removeClass("ico-max").addClass("ico-restore")
.attr({
"title": config.label.restore_editor,
"onclick": "windows.restoreEditor()"
});
windows.minBottom();
windows.minSide();
windows.minSideRight();
if (wide.curEditor) {
wide.curEditor.focus();
}
windows.isMaxEditor = true;
},
restoreEditor: function () {
$(".toolbars .ico-restore").removeClass("ico-restore").addClass("ico-max")
.attr({
"title": config.label.max_editor,
"onclick": "windows.maxEditor()"
});
windows.restoreBottom();
windows.restoreSide();
windows.restoreSideRight();
if (wide.curEditor) {
wide.curEditor.focus();
}
windows.isMaxEditor = false;
},
clearFloat: function () {
if ($(".footer .ico-restore:eq(0)").css("display") === "inline") {
// 当文件树最小化时
windows.minSide();
}
if ($(".footer .ico-restore:eq(1)").css("display") === "inline") {
// 当底部最小化时
windows.minBottom();
}
if ($(".footer .ico-restore:eq(2)").css("display") === "inline") {
// 当 outline 最小化时
windows.minSideRight();
}
$('.bottom-window-group .search').height($('.bottom-window-group .tabs-panel').height());
},
flowBottom: function () {
if ($(".footer .ico-restore:eq(1)").css("display") === "inline") {
// 当底部树最小化时
$(".bottom-window-group").css({
"top": "70%",
"left": "0px",
"width": "100%",
"z-index": "8"
}).show();
}
windows.innerLayout.open('south');
windows.innerLayout.slideOpen('south');
}
};

189
views/index.html
View File

@ -9,6 +9,8 @@
<meta name="author" content="B3log">
<meta property="og:description" content="A Web-based IDE for Teams using Golang, do your development anytime, anywhere."/>
<link rel="stylesheet" href="{{.conf.StaticServer}}/static/js/lib/jquery-layout/layout-default-latest.css">
<link rel="stylesheet" href="{{.conf.StaticServer}}/static/js/lib/codemirror-{{.codeMirrorVer}}/codemirror.css">
<link rel="stylesheet" href="{{.conf.StaticServer}}/static/js/lib/codemirror-{{.codeMirrorVer}}/addon/hint/show-hint.css">
<link rel="stylesheet" href="{{.conf.StaticServer}}/static/js/lib/codemirror-{{.codeMirrorVer}}/addon/lint/lint.css">
@ -394,92 +396,104 @@
</div>
</div>
<div class="content">
<div class="side">
<span title="{{.i18n.min}}" class="font-ico ico-min"></span>
<div class="tabs">
<div class="current" data-index="fileTree">
<span title="{{.i18n.file}}">{{.i18n.file}}</span>
<div class="side">
<span title="{{.i18n.min}}" class="font-ico ico-min"></span>
<div class="tabs">
<div class="current" data-index="fileTree">
<span title="{{.i18n.file}}">{{.i18n.file}}</span>
</div>
</div>
<div class="tabs-panel">
<div data-index="fileTree">
<ul id="files" tabindex="-1" class="ztree"></ul>
<input id="importFileupload" class="fn-none" type="file"
name="files[]" onclick="tree.import();" multiple>
<!-- directory context menu -->
<div id="dirRMenu" class="frame">
<ul>
<li class="create" onclick="tree.newFile(this);">
<span class="space"></span> {{.i18n.create_file}}
</li>
<li class="create" onclick="tree.newDir(this);">
<span class="space"></span> {{.i18n.create_dir}}
</li>
<li class="remove" onclick="tree.removeIt(this);">
<span class="ico-remove font-ico"></span> {{.i18n.delete}}
</li>
<li class="remove" onclick="tree.rename(this);">
<span class="space"></span> {{.i18n.rename}}
</li>
<li class="hr"></li>
<li class="find" onclick="$('#dialogSearchForm').dialog('open');">
<span class="font-ico ico-findfiles"></span> {{.i18n.find_in_files}}
</li>
<li class="hr"></li>
<li onclick="tree.refresh(this);">
<span class="ico-refresh font-ico"></span> {{.i18n.refresh}}
</li>
<li class="hr"></li>
<li onclick="tree.gitClone(this);">
<span class="ico-git font-ico"></span> {{.i18n.git_clone}}
</li>
<li class="hr"></li>
<li onclick="$('#importFileupload').click();">
<span class="ico-import font-ico"></span> {{.i18n.import}}
</li>
<li onclick="tree.export();">
<span class="ico-export font-ico"></span> {{.i18n.export}}
</li>
</ul>
</div>
</div>
<div class="tabs-panel">
<div data-index="fileTree">
<ul id="files" tabindex="-1" class="ztree"></ul>
<input id="importFileupload" class="fn-none" type="file"
name="files[]" onclick="tree.import();" multiple>
<!-- directory context menu -->
<div id="dirRMenu" class="frame">
<ul>
<li class="create" onclick="tree.newFile(this);">
<span class="space"></span> {{.i18n.create_file}}
</li>
<li class="create" onclick="tree.newDir(this);">
<span class="space"></span> {{.i18n.create_dir}}
</li>
<li class="remove" onclick="tree.removeIt(this);">
<span class="ico-remove font-ico"></span> {{.i18n.delete}}
</li>
<li class="remove" onclick="tree.rename(this);">
<span class="space"></span> {{.i18n.rename}}
</li>
<li class="hr"></li>
<li class="find" onclick="$('#dialogSearchForm').dialog('open');">
<span class="font-ico ico-findfiles"></span> {{.i18n.find_in_files}}
</li>
<li class="hr"></li>
<li onclick="tree.refresh(this);">
<span class="ico-refresh font-ico"></span> {{.i18n.refresh}}
</li>
<li class="hr"></li>
<li onclick="tree.gitClone(this);">
<span class="ico-git font-ico"></span> {{.i18n.git_clone}}
</li>
<li class="hr"></li>
<li onclick="$('#importFileupload').click();">
<span class="ico-import font-ico"></span> {{.i18n.import}}
</li>
<li onclick="tree.export();">
<span class="ico-export font-ico"></span> {{.i18n.export}}
</li>
</ul>
</div>
<!-- file context menu -->
<div id="fileRMenu" class="frame">
<ul>
<li class="open" onclick="tree.openFile(wide.curNode);">
<span class="space"></span> {{.i18n.open}}
</li>
<li class="remove" onclick="tree.removeIt(this);">
<span class="ico-remove font-ico"></span> {{.i18n.delete}}
</li>
<li class="remove" onclick="tree.rename(this);">
<span class="space"></span> {{.i18n.rename}}
</li>
<li class="hr"></li>
{{range .crossPlatforms}}
{{if eq . "darwin_amd64" "linux_amd64" "windows_amd64" "linux_arm"}}
<li class="{{.}}" onclick="tree.crossCompile('{{.}}');">
<span class="space"></span> {{.}}
</li>
{{end}}
{{end}}
<li class="hr"></li>
<li class="export" onclick="tree.export(this);">
<span class="ico-export font-ico"></span> {{.i18n.export}}
</li>
<li class="decompress" onclick="tree.decompress(this);">
<span class="space"></span> {{.i18n.decompress}}
</li>
</ul>
</div>
<!-- file context menu -->
<div id="fileRMenu" class="frame">
<ul>
<li class="open" onclick="tree.openFile(wide.curNode);">
<span class="space"></span> {{.i18n.open}}
</li>
<li class="remove" onclick="tree.removeIt(this);">
<span class="ico-remove font-ico"></span> {{.i18n.delete}}
</li>
<li class="remove" onclick="tree.rename(this);">
<span class="space"></span> {{.i18n.rename}}
</li>
<li class="hr"></li>
{{range .crossPlatforms}}
{{if eq . "darwin_amd64" "linux_amd64" "windows_amd64" "linux_arm"}}
<li class="{{.}}" onclick="tree.crossCompile('{{.}}');">
<span class="space"></span> {{.}}
</li>
{{end}}
{{end}}
<li class="hr"></li>
<li class="export" onclick="tree.export(this);">
<span class="ico-export font-ico"></span> {{.i18n.export}}
</li>
<li class="decompress" onclick="tree.decompress(this);">
<span class="space"></span> {{.i18n.decompress}}
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div class="side-right">
<span title="{{.i18n.min}}" class="font-ico ico-min"></span>
<div class="tabs">
<div class="current" data-index="outline">
<span title="{{.i18n.outline}}">{{.i18n.outline}}</span>
</div>
</div>
<div class="tabs-panel">
<div id="outline" tabindex="-1" data-index="outline"></div>
</div>
</div>
<div class="edit-panel">
<div class="toolbars">
<span class="font-ico ico-max" onclick="windows.maxEditor()" title="{{.i18n.max_editor}}"></span>
<span class="font-ico ico-max" title="{{.i18n.max_editor}}"></span>
</div>
<div class="frame">
<ul>
@ -502,18 +516,6 @@
<div class="tabs-panel"></div>
</div>
<div class="side-right">
<span title="{{.i18n.min}}" class="font-ico ico-min"></span>
<div class="tabs">
<div class="current" data-index="outline">
<span title="{{.i18n.outline}}">{{.i18n.outline}}</span>
</div>
</div>
<div class="tabs-panel">
<div id="outline" tabindex="-1" data-index="outline"></div>
</div>
</div>
<div class="bottom-window-group">
<span title="{{.i18n.min}}" class="font-ico ico-min"></span>
<div class="frame">
@ -558,11 +560,6 @@
</div>
<div class="footer fn-clear">
<div class="fn-left">
<span title="{{.i18n.restore_side}}" class="font-ico ico-restore fn-none"></span>
<span title="{{.i18n.restore_bottom}}" class="font-ico ico-restore fn-none"></span>
<span title="{{.i18n.restore_outline}}" class="font-ico ico-restore fn-none"></span>
</div>
<div class="fn-right">
<span class="cursor"></span>
<span class="notification-count" title="{{.i18n.unread_notification}}">{{.i18n.notification}}</span>
@ -630,6 +627,8 @@
</script>
<script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/jquery-layout/jquery.layout-latest.js"></script>
<script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/reconnecting-websocket.js"></script>
<script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/Autolinker.min.js"></script>