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
/header.exe /header.exe
/**/.DS_Store

9
static/css/base.css
View File

@ -14,6 +14,12 @@
* limitations under the License. * 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 */ /* start reset & function */
::-webkit-scrollbar { ::-webkit-scrollbar {
background: none; background: none;
@ -143,7 +149,8 @@ button {
font-style: normal; font-style: normal;
} }
.font-ico { .font-ico,
[class^="ico-"] {
font-family: 'icomoon'; font-family: 'icomoon';
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;

30
static/css/side.css
View File

@ -14,43 +14,37 @@
* limitations under the License. * 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 */ /* start side */
.side { .side {
width: 20%; width: 20%;
position: absolute; position: absolute;
height: 100%; height: 100%;
z-index: 8; z-index: 8;
flex-flow: column;
display: flex;
} }
.side-max { .side-max {
width: 100%; width: 100%;
z-index: 11; z-index: 11;
} }
.side .tabs-panel {
overflow: auto;
}
/* end side */ /* end side */
/* start side right */ /* 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 { .side-right .tabs-panel > div {
overflow: auto; overflow: auto;
} }
.side-right {
flex-flow: column;
}
#outline .ico { #outline .ico {
margin: 1px 5px 0 5px; margin: 1px 5px 0 5px;
} }

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

@ -14,14 +14,18 @@
* limitations under the License. * 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 { .side {
background-color: #303130; background-color: #303130;
border-right: 1px solid #000;
} }
.side-right { .side-right {
background-color: #303130; background-color: #303130;
border-left: 1px solid #000;
color: #999; color: #999;
} }
@ -141,10 +145,6 @@
color: #e1e1e1; color: #e1e1e1;
} }
.bottom-window-group {
border-top: 1px solid #000;
}
.bottom-window-group .tabs-panel > div{ .bottom-window-group .tabs-panel > div{
background-color: #181818; background-color: #181818;
color: #ebebeb; color: #ebebeb;

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

@ -14,14 +14,19 @@
* limitations under the License. * 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 { .side {
background-color: #FFF; background-color: #FFF;
border-right: 1px solid #919191;
} }
.side-right { .side-right {
background-color: #FFF; background-color: #FFF;
border-left: 1px solid #919191;
} }
.footer { .footer {
@ -122,10 +127,6 @@
background-color: #F0F0F0; background-color: #F0F0F0;
} }
.bottom-window-group {
border-top: 1px solid #919191;
}
#dialogPreference .preference { #dialogPreference .preference {
border: 1px solid #A4A4A4; border: 1px solid #A4A4A4;
} }

50
static/css/wide.css
View File

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

19
static/js/editors.js
View File

@ -14,6 +14,12 @@
* limitations under the License. * 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 = { var editors = {
autocompleteMutex: false, autocompleteMutex: false,
data: [], 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._initCodeMirrorHotKeys();
this.openStartPage(); this.openStartPage();
this._initClose(); this._initClose();
@ -247,7 +245,6 @@ var editors = {
+ '"><span class="ico-start font-ico"></span> ' + config.label.start_page + '</span>', + '"><span class="ico-start font-ico"></span> ' + config.label.start_page + '</span>',
content: '<div id="startPage"></div>', content: '<div id="startPage"></div>',
after: function () { after: function () {
$("#startPage").height($('.side-right').height() - $(".bottom-window-group").children(".tabs").height() - 100);
$("#startPage").load(config.context + '/start?sid=' + config.wideSessionId); $("#startPage").load(config.context + '/start?sid=' + config.wideSessionId);
$.ajax({ $.ajax({
url: "https://symphony.b3log.org/apis/articles?tags=wide,golang&p=1&size=20", 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) + ' |'); $(".footer .cursor").text('| ' + (cursor.line + 1) + ':' + (cursor.ch + 1) + ' |');
}); });
editor.on('focus', function (cm) {
windows.clearFloat();
});
editor.on('blur', function (cm) { editor.on('blur', function (cm) {
$(".edit-exprinfo").remove(); $(".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. * 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 = { var wide = {
curNode: undefined, curNode: undefined,
curEditor: 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 () { _initWS: function () {
var outputWS = new ReconnectingWebSocket(config.channel + '/output/ws?sid=' + config.wideSessionId); var outputWS = new ReconnectingWebSocket(config.channel + '/output/ws?sid=' + config.wideSessionId);
outputWS.onopen = function () { outputWS.onopen = function () {
@ -554,17 +538,6 @@ var wide = {
}; };
this._initDialog(); 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) { _save: function (path, editor) {
if (!path) { if (!path) {

435
static/js/windows.js
View File

@ -14,312 +14,241 @@
* limitations under the License. * 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 = { var windows = {
isMaxEditor: false, isMaxEditor: false,
outerLayout: {},
innerLayout: {},
init: function () { init: function () {
// bottom windows this.outerLayout = $('body').layout({
$(".footer .ico-restore:eq(1)").click(function () { north__paneSelector: ".menu",
windows.restoreBottom(); center__paneSelector: ".content",
if ($(".footer .ico-restore:eq(0)").css("display") === "none" south__paneSelector: ".footer",
&& $(".footer .ico-restore:eq(2)").css("display") === "none") { north__size: 22,
$(".toolbars .ico-restore").removeClass("ico-restore").addClass("ico-max") south__size: 19,
.attr({ spacing_open: 3,
"title": config.label.max_editor, spacing_closed: 4,
"onclick": "windows.maxEditor()" 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 () { this.innerLayout = $('div.content').layout({
windows.minBottom(); spacing_open: 3,
if ($(".footer .ico-restore:eq(0)").css("display") === "inline" spacing_closed: 4,
&& $(".footer .ico-restore:eq(2)").css("display") === "inline") { defaults: {
$(".toolbars .ico-max").removeClass("ico-max").addClass("ico-restore") fxSpeed_open: 300,
.attr({ fxSpeed_close: 100,
"title": config.label.restore_editor, fxSettings_close: {
"onclick": "windows.restoreEditor()" 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 () { $(".bottom-window-group .tabs").dblclick(function () {
windows.maxBottom(); windows.toggleBottom();
});
// 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()"
});
}
}); });
$(".side .tabs").dblclick(function () { $(".side .tabs").dblclick(function () {
windows.maxSide(); windows.toggleSide();
});
// 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()"
});
}
}); });
$(".side-right .tabs").dblclick(function () { $(".side-right .tabs").dblclick(function () {
windows.maxSideRight(); windows.toggleSideRight();
}); });
$(window).click(function (event) { $('.bottom-window-group .search').height($('.bottom-window-group .tabs-panel').height());
if ($(event.target).closest(".footer").length === 1 $(window).resize(function () {
|| $(event.target).closest(".bottom-window-group").length === 1 windows.refreshEditor($('.bottom-window-group'));
|| $(event.target).closest(".toolbars").length === 1
|| $(event.target).closest(".side").length === 1
|| $(event.target).closest(".side-right").length === 1) {
} else {
windows.clearFloat();
}
}); });
}, },
maxBottom: function () { toggleBottom: function () {
var $it = $(".bottom-window-group"); var $it = $(".bottom-window-group");
if ($it.hasClass("bottom-window-group-max")) { if ($it.hasClass("bottom-window-group-max")) {
windows.restoreBottom(); windows.restoreBottom();
if ($(".side").css("left") !== "0px" && $(".side").css("left") !== "auto") {
$it.css({
"left": "0px",
"width": "100%"
});
}
} else { } else {
$it.attr("style", ""); $it.data('height', $it.height()).addClass("bottom-window-group-max").find('.ico-min').hide();
windows.outerLayout.hide('west');
var bottomH = $(".content").height(); windows.innerLayout.hide('east');
$(".bottom-window-group > .tabs-panel > div > div").height(bottomH - $it.children(".tabs").height()); windows.innerLayout.sizePane('south', $('.content').height());
$it.addClass("bottom-window-group-max");
} }
}, },
maxSide: function () { toggleSide: function () {
var $it = $(".side"); var $it = $(".side");
if ($it.hasClass("side-max")) { if ($it.hasClass("side-max")) {
windows.restoreSide(); windows.restoreSide();
} else { } 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"); var $it = $(".side-right");
if ($it.hasClass("side-right-max")) { if ($it.hasClass("side-right-max")) {
windows.restoreSideRight(); windows.restoreSideRight();
} else { } else {
$it.addClass("side-right-max"); $it.addClass("side-right-max").data('width', $it.width()).find('.ico-min').hide();
$(".side-right > .tabs-panel > div").height($(".content").height() - $it.children(".tabs").height()); 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 () { restoreBottom: function () {
var $it = $(".bottom-window-group"); var $it = $(".bottom-window-group");
$it.removeClass("bottom-window-group-max").attr("style", ""); $it.removeClass("bottom-window-group-max").find('.ico-min').show();
var bottomH = $it.height(); windows.outerLayout.show('west');
windows.innerLayout.show('east');
$(".bottom-window-group > .tabs-panel > div > div").height(bottomH - $it.children(".tabs").height()); windows.innerLayout.sizePane('south', $it.data('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"
});
}
}, },
restoreSide: function () { restoreSide: function () {
$(".side").animate({ var $it = $(".side");
"left": "0" $it.removeClass("side-max").find('.ico-min').show();
}, function () { $('.content').show();
$(".edit-panel, .bottom-window-group").css({ windows.outerLayout.sizePane('west', $it.data('width'));
"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");
}, },
restoreSideRight: function () { restoreSideRight: function () {
$(".side-right").animate({ var $it = $(".side-right");
"right": "0" $it.removeClass("side-right-max").find('.ico-min').show();
}, function () { windows.outerLayout.show('west');
if ($(".footer .ico-restore:eq(0)").css("display") === "inline") { windows.innerLayout.show('south');
// 当文件树最小化时 windows.innerLayout.sizePane('east', $it.data('width'));
$(".edit-panel").css("width", "80%"); },
} else { restoreEditor: function () {
$(".edit-panel").css("width", "60%"); windows.outerLayout.open('west');
} windows.innerLayout.open('south');
windows.innerLayout.open('east');
$(".footer .ico-restore:eq(2)").hide(); windows.isMaxEditor = false;
$(".side-right > .tabs-panel > div").height($('.side-right').height() $(".toolbars .font-ico").addClass('ico-max').removeClass('ico-restore').attr('title', config.label.max_editor);
- $(this).children(".tabs").height());
}).removeClass("side-right-max");
}, },
minBottom: function () { 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, 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++) { for (var i = 0, ii = editorDatas.length; i < ii; i++) {
editorDatas[i].editor.setSize("100%", height); 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%'; $('.bottom-window-group .search').height($('.bottom-window-group .tabs-panel').height());
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();
}
}, },
flowBottom: function () { flowBottom: function () {
if ($(".footer .ico-restore:eq(1)").css("display") === "inline") { windows.innerLayout.open('south');
// 当底部树最小化时 windows.innerLayout.slideOpen('south');
$(".bottom-window-group").css({
"top": "70%",
"left": "0px",
"width": "100%",
"z-index": "8"
}).show();
}
} }
}; };

189
views/index.html
View File

@ -9,6 +9,8 @@
<meta name="author" content="B3log"> <meta name="author" content="B3log">
<meta property="og:description" content="A Web-based IDE for Teams using Golang, do your development anytime, anywhere."/> <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}}/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/hint/show-hint.css">
<link rel="stylesheet" href="{{.conf.StaticServer}}/static/js/lib/codemirror-{{.codeMirrorVer}}/addon/lint/lint.css"> <link rel="stylesheet" href="{{.conf.StaticServer}}/static/js/lib/codemirror-{{.codeMirrorVer}}/addon/lint/lint.css">
@ -394,92 +396,104 @@
</div> </div>
</div> </div>
<div class="content"> <div class="side">
<div class="side"> <span title="{{.i18n.min}}" class="font-ico ico-min"></span>
<span title="{{.i18n.min}}" class="font-ico ico-min"></span> <div class="tabs">
<div class="tabs"> <div class="current" data-index="fileTree">
<div class="current" data-index="fileTree"> <span title="{{.i18n.file}}">{{.i18n.file}}</span>
<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>
<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 --> <!-- file context menu -->
<div id="fileRMenu" class="frame"> <div id="fileRMenu" class="frame">
<ul> <ul>
<li class="open" onclick="tree.openFile(wide.curNode);"> <li class="open" onclick="tree.openFile(wide.curNode);">
<span class="space"></span> {{.i18n.open}} <span class="space"></span> {{.i18n.open}}
</li> </li>
<li class="remove" onclick="tree.removeIt(this);"> <li class="remove" onclick="tree.removeIt(this);">
<span class="ico-remove font-ico"></span> {{.i18n.delete}} <span class="ico-remove font-ico"></span> {{.i18n.delete}}
</li> </li>
<li class="remove" onclick="tree.rename(this);"> <li class="remove" onclick="tree.rename(this);">
<span class="space"></span> {{.i18n.rename}} <span class="space"></span> {{.i18n.rename}}
</li> </li>
<li class="hr"></li> <li class="hr"></li>
{{range .crossPlatforms}} {{range .crossPlatforms}}
{{if eq . "darwin_amd64" "linux_amd64" "windows_amd64" "linux_arm"}} {{if eq . "darwin_amd64" "linux_amd64" "windows_amd64" "linux_arm"}}
<li class="{{.}}" onclick="tree.crossCompile('{{.}}');"> <li class="{{.}}" onclick="tree.crossCompile('{{.}}');">
<span class="space"></span> {{.}} <span class="space"></span> {{.}}
</li> </li>
{{end}} {{end}}
{{end}} {{end}}
<li class="hr"></li> <li class="hr"></li>
<li class="export" onclick="tree.export(this);"> <li class="export" onclick="tree.export(this);">
<span class="ico-export font-ico"></span> {{.i18n.export}} <span class="ico-export font-ico"></span> {{.i18n.export}}
</li> </li>
<li class="decompress" onclick="tree.decompress(this);"> <li class="decompress" onclick="tree.decompress(this);">
<span class="space"></span> {{.i18n.decompress}} <span class="space"></span> {{.i18n.decompress}}
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </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="edit-panel">
<div class="toolbars"> <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>
<div class="frame"> <div class="frame">
<ul> <ul>
@ -502,18 +516,6 @@
<div class="tabs-panel"></div> <div class="tabs-panel"></div>
</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"> <div class="bottom-window-group">
<span title="{{.i18n.min}}" class="font-ico ico-min"></span> <span title="{{.i18n.min}}" class="font-ico ico-min"></span>
<div class="frame"> <div class="frame">
@ -558,11 +560,6 @@
</div> </div>
<div class="footer fn-clear"> <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"> <div class="fn-right">
<span class="cursor"></span> <span class="cursor"></span>
<span class="notification-count" title="{{.i18n.unread_notification}}">{{.i18n.notification}}</span> <span class="notification-count" title="{{.i18n.unread_notification}}">{{.i18n.notification}}</span>
@ -630,6 +627,8 @@
</script> </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-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/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/ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/Autolinker.min.js"></script> <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/Autolinker.min.js"></script>