Upgrade to Bootstrap 3

This commit is contained in:
benweet 2013-08-10 12:34:30 +01:00
parent 27322f3a98
commit f94b808aca
4 changed files with 95 additions and 53 deletions

View File

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

View File

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

View File

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

View File

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