Upgrade to Bootstrap 3
This commit is contained in:
benweet
parent
27322f3a98
commit
f94b808aca
35
js/core.js
35
js/core.js
@ -158,8 +158,22 @@ define([
|
||||
}
|
||||
}
|
||||
|
||||
// Set the preview button visibility
|
||||
// Set the panels visibility
|
||||
var layout = undefined;
|
||||
var menuPanelElt = undefined;
|
||||
var documentPanelElt = undefined;
|
||||
function setPanelVisibility(forceHide) {
|
||||
if(forceHide === true || layout.state.north.isClosed) {
|
||||
menuPanelElt.hide();
|
||||
documentPanelElt.hide();
|
||||
}
|
||||
else {
|
||||
menuPanelElt.show();
|
||||
documentPanelElt.show();
|
||||
}
|
||||
}
|
||||
|
||||
// Set the preview button visibility
|
||||
var previewButtonsElt = undefined;
|
||||
function setPreviewButtonsVisibility(forceHide) {
|
||||
if(forceHide === true || layout.state.east.isClosed) {
|
||||
@ -176,24 +190,29 @@ define([
|
||||
return;
|
||||
}
|
||||
var layoutGlobalConfig = {
|
||||
closable: false,
|
||||
closable: true,
|
||||
resizable: false,
|
||||
slidable: false,
|
||||
livePaneResizing: true,
|
||||
enableCursorHotkey: false,
|
||||
north__spacing_open: 6,
|
||||
north__spacing_closed: 6,
|
||||
spacing_open: 35,
|
||||
spacing_closed: 35,
|
||||
togglerLength_open: 60,
|
||||
togglerLength_closed: 60,
|
||||
stateManagement__enabled: false,
|
||||
center__minWidth: 200,
|
||||
center__minHeight: 100,
|
||||
center__minHeight: 200,
|
||||
onopen: function() {
|
||||
setPanelVisibility();
|
||||
setPreviewButtonsVisibility();
|
||||
},
|
||||
onclose_start: function(paneName) {
|
||||
if(paneName == 'east') {
|
||||
if(paneName == 'north') {
|
||||
setPanelVisibility(true);
|
||||
}
|
||||
else if(paneName == 'east') {
|
||||
setPreviewButtonsVisibility(true);
|
||||
}
|
||||
},
|
||||
@ -203,7 +222,6 @@ define([
|
||||
$(".ui-layout-south").remove();
|
||||
$(".preview-container").html('<div id="preview-contents"><div id="wmd-preview" class="preview-content"></div></div>');
|
||||
layout = $('body').layout($.extend(layoutGlobalConfig, {
|
||||
east__closable: true,
|
||||
east__resizable: true,
|
||||
east__size: .5,
|
||||
east__minSize: 250
|
||||
@ -213,7 +231,6 @@ define([
|
||||
$(".ui-layout-east").remove();
|
||||
$(".preview-container").html('<div id="preview-contents"><div id="wmd-preview" class="preview-content"></div></div>');
|
||||
layout = $('body').layout($.extend(layoutGlobalConfig, {
|
||||
south__closable: true,
|
||||
south__resizable: true,
|
||||
south__size: .5,
|
||||
south__minSize: 200
|
||||
@ -224,16 +241,20 @@ define([
|
||||
});
|
||||
$(".ui-layout-toggler-south").addClass("btn btn-info").html('<i class="icon-none"></i>');
|
||||
$(".ui-layout-toggler-east").addClass("btn btn-info").html('<i class="icon-none"></i>');
|
||||
var northTogglerElt = $(".ui-layout-toggler-north").addClass("btn btn-info").html('<i class="icon-none"></i>');
|
||||
|
||||
// We attach the preview buttons to the UI layout resizer in order to have fixed position
|
||||
// We also move the north toggler to the east or south resizer as the north resizer is very small
|
||||
previewButtonsElt = $('<div class="extension-preview-buttons">');
|
||||
if(settings.layoutOrientation == "horizontal") {
|
||||
$('.ui-layout-resizer-north').append(previewButtonsElt);
|
||||
$('.ui-layout-resizer-east').append(northTogglerElt);
|
||||
}
|
||||
else {
|
||||
$('.ui-layout-resizer-south').append(previewButtonsElt);
|
||||
$('.ui-layout-resizer-south').append(previewButtonsElt).append(northTogglerElt);
|
||||
}
|
||||
|
||||
setPanelVisibility();
|
||||
setPreviewButtonsVisibility();
|
||||
|
||||
eventMgr.onLayoutCreated(layout);
|
||||
|
||||
@ -33,6 +33,7 @@ define([
|
||||
fileMgr = fileMgrParameter;
|
||||
};
|
||||
|
||||
var dropdownElt = undefined;
|
||||
var liMap = undefined;
|
||||
var liArray = undefined;
|
||||
var sortFunction = undefined;
|
||||
@ -59,8 +60,7 @@ define([
|
||||
}
|
||||
|
||||
liMap = {};
|
||||
var fileSelectorElt = $(".file-selector");
|
||||
fileSelectorElt.empty();
|
||||
dropdownElt.empty();
|
||||
var documentPanelSelectorElt = $(".document-panel > .panel-content > .list-group");
|
||||
documentPanelSelectorElt.find('.list-group-item').remove();
|
||||
_.chain(fileSystem).sortBy(sortFunction).each(function(fileDesc) {
|
||||
@ -80,7 +80,7 @@ define([
|
||||
li.addClass("disabled");
|
||||
documentPanelItemElt.addClass("active");
|
||||
}
|
||||
fileSelectorElt.append(li);
|
||||
dropdownElt.append(li);
|
||||
documentPanelSelectorElt.append(documentPanelItemElt);
|
||||
});
|
||||
liArray = _.values(liMap);
|
||||
@ -128,7 +128,12 @@ define([
|
||||
};
|
||||
}
|
||||
|
||||
dropdownElt = $('<ul class="dropdown-menu dropdown-file-selector">');
|
||||
$('<div>').append('<div data-toggle="dropdown">').append(dropdownElt).appendTo('.ui-layout-resizer-north');
|
||||
dropdownElt.dropdown();
|
||||
|
||||
var shortcutLi = undefined;
|
||||
/*
|
||||
$(".action-open-file").click(function() {
|
||||
if($(".file-selector").parent().is(".open")) {
|
||||
return;
|
||||
@ -155,12 +160,20 @@ define([
|
||||
}).click(function(event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
*/
|
||||
|
||||
var documentPanelTogglerElt = $('.document-panel .collapse-button');
|
||||
documentPanelTogglerElt.prop("title", _.template("<%= title %> <%= shortcutPrevious %> <%= shortcutNext %>", {
|
||||
title: documentPanelTogglerElt.prop("title"),
|
||||
shortcutPrevious: documentSelector.config.shortcutPrevious,
|
||||
shortcutNext: documentSelector.config.shortcutNext
|
||||
}));
|
||||
|
||||
// Handle key shortcut
|
||||
var shortcutPrevious = documentSelector.config.shortcutPrevious.toLowerCase();
|
||||
mousetrap.bind(shortcutPrevious, function() {
|
||||
if(shortcutLi === undefined) {
|
||||
$(".file-selector").parent().is(".open") || $(".action-open-file").click();
|
||||
dropdownElt.dropdown('toggle');
|
||||
shortcutLi = liMap[selectFileDesc.fileIndex];
|
||||
}
|
||||
var liIndex = _.indexOf(liArray, shortcutLi) - 1;
|
||||
@ -176,7 +189,7 @@ define([
|
||||
var shortcutNext = documentSelector.config.shortcutNext.toLowerCase();
|
||||
mousetrap.bind(documentSelector.config.shortcutNext.toLowerCase(), function() {
|
||||
if(shortcutLi === undefined) {
|
||||
$(".file-selector").parent().is(".open") || $(".action-open-file").click();
|
||||
dropdownElt.dropdown('toggle');
|
||||
shortcutLi = liMap[selectFileDesc.fileIndex];
|
||||
}
|
||||
var liIndex = _.indexOf(liArray, shortcutLi) + 1;
|
||||
|
||||
@ -14,19 +14,6 @@
|
||||
<ul class="nav">
|
||||
<li class="wmd-button-group4 btn-group"></li>
|
||||
</ul>
|
||||
<ul class="nav pull-right">
|
||||
<li>
|
||||
<button data-toggle="dropdown" class="action-open-file hide"></button>
|
||||
<ul class="dropdown-menu file-selector">
|
||||
<li class="stick">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="icon-search"></i></span><input
|
||||
type="text" id="file-search" class="form-control">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav pull-right">
|
||||
<li class="btn-group"><button
|
||||
class="btn btn-success action-create-file"
|
||||
@ -58,7 +45,6 @@
|
||||
<div class="ui-layout-south preview-container"></div>
|
||||
<div id="wmd-button-bar" class="hide"></div>
|
||||
|
||||
|
||||
<div class="menu-panel collapse width">
|
||||
<button class="btn btn-success collapse-button" data-toggle="collapse"
|
||||
data-target=".menu-panel" title="Menu">
|
||||
@ -142,7 +128,7 @@
|
||||
|
||||
<div class="document-panel collapse width">
|
||||
<button class="btn btn-success collapse-button" data-toggle="collapse"
|
||||
data-target=".document-panel" title="Menu">
|
||||
data-target=".document-panel" title="Select document">
|
||||
<i class="icon-folder-open"></i> <i class="icon-right-dir"></i>
|
||||
</button>
|
||||
<div class="panel-content">
|
||||
|
||||
@ -44,8 +44,11 @@ body {
|
||||
}
|
||||
|
||||
#preview-contents {
|
||||
padding: 8px 15px 8px 5px;
|
||||
padding: 15px;
|
||||
margin-bottom: 50px;
|
||||
.ui-layout-east & {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.working {
|
||||
@ -207,18 +210,6 @@ Override Bootstrap
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
.file-selector {
|
||||
top: 30px;
|
||||
right: -10px !important;
|
||||
max-height: 500px;
|
||||
min-width: 280px;
|
||||
overflow-y: auto;
|
||||
.stick {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-title-navbar {
|
||||
padding: 4px 15px;
|
||||
font-size: 20px;
|
||||
@ -345,6 +336,17 @@ Override Bootstrap
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown document selector
|
||||
.dropdown-file-selector {
|
||||
top: 6px;
|
||||
right: 40px;
|
||||
left: auto;
|
||||
margin: 0;
|
||||
max-height: 500px;
|
||||
min-width: 280px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
/********************
|
||||
* Extensions buttons
|
||||
@ -393,8 +395,8 @@ Override Bootstrap
|
||||
right: 40px;
|
||||
z-index: 1;
|
||||
top: 6px;
|
||||
.ui-layout-resizer-closed > & {
|
||||
display: none;
|
||||
.ui-layout-resizer-south-closed > & {
|
||||
display: none !important;
|
||||
}
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
@ -441,6 +443,7 @@ Override Bootstrap
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************
|
||||
* UI Layout
|
||||
*********************************/
|
||||
@ -467,18 +470,16 @@ Override Bootstrap
|
||||
.ui-layout-toggler {
|
||||
font-size: 22px !important;
|
||||
background-color: transparent;
|
||||
&.ui-layout-toggler-east-open i {
|
||||
margin: 18px 0 0 2px !important;
|
||||
&:before {
|
||||
&.ui-layout-toggler-east {
|
||||
line-height: 55px;
|
||||
&.ui-layout-toggler-east-open i:before {
|
||||
content: '\e950';
|
||||
}
|
||||
}
|
||||
&.ui-layout-toggler-east-closed i {
|
||||
margin: 18px 0 0 -2px !important;
|
||||
&:before {
|
||||
&.ui-layout-toggler-east-closed i:before {
|
||||
content: '\e94f';
|
||||
}
|
||||
}
|
||||
&.ui-layout-toggler-south {
|
||||
&.ui-layout-toggler-south-open i:before {
|
||||
content: '\e94d';
|
||||
}
|
||||
@ -486,6 +487,27 @@ Override Bootstrap
|
||||
content: '\e94e';
|
||||
}
|
||||
}
|
||||
&.ui-layout-toggler-north {
|
||||
left: 0 !important;
|
||||
line-height: 0;
|
||||
i {
|
||||
margin-top: -5px;
|
||||
}
|
||||
&.ui-layout-toggler-north-open i:before {
|
||||
content: '\e94e';
|
||||
}
|
||||
&.ui-layout-toggler-north-closed i:before {
|
||||
content: '\e94d';
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ui-layout-resizer-east .ui-layout-toggler-north {
|
||||
width: 35px !important;
|
||||
height: 60px !important;
|
||||
}
|
||||
&.ui-layout-resizer-south .ui-layout-toggler-north {
|
||||
height: 35px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user