caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgrade to Bootstrap 3

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
js/core.js
View File

@ -158,8 +158,22 @@ define([
} }
} }
// Set the preview button visibility // Set the panels visibility
var layout = undefined; 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; var previewButtonsElt = undefined;
function setPreviewButtonsVisibility(forceHide) { function setPreviewButtonsVisibility(forceHide) {
if(forceHide === true || layout.state.east.isClosed) { if(forceHide === true || layout.state.east.isClosed) {
@ -176,24 +190,29 @@ define([
return; return;
} }
var layoutGlobalConfig = { var layoutGlobalConfig = {
closable: false, closable: true,
resizable: false, resizable: false,
slidable: false, slidable: false,
livePaneResizing: true, livePaneResizing: true,
enableCursorHotkey: false, enableCursorHotkey: false,
north__spacing_open: 6, north__spacing_open: 6,
north__spacing_closed: 6,
spacing_open: 35, spacing_open: 35,
spacing_closed: 35, spacing_closed: 35,
togglerLength_open: 60, togglerLength_open: 60,
togglerLength_closed: 60, togglerLength_closed: 60,
stateManagement__enabled: false, stateManagement__enabled: false,
center__minWidth: 200, center__minWidth: 200,
center__minHeight: 100, center__minHeight: 200,
onopen: function() { onopen: function() {
setPanelVisibility();
setPreviewButtonsVisibility(); setPreviewButtonsVisibility();
}, },
onclose_start: function(paneName) { onclose_start: function(paneName) {
if(paneName == 'east') { if(paneName == 'north') {
setPanelVisibility(true);
}
else if(paneName == 'east') {
setPreviewButtonsVisibility(true); setPreviewButtonsVisibility(true);
} }
}, },
@ -203,7 +222,6 @@ define([
$(".ui-layout-south").remove(); $(".ui-layout-south").remove();
$(".preview-container").html('<div id="preview-contents"><div id="wmd-preview" class="preview-content"></div></div>'); $(".preview-container").html('<div id="preview-contents"><div id="wmd-preview" class="preview-content"></div></div>');
layout = $('body').layout($.extend(layoutGlobalConfig, { layout = $('body').layout($.extend(layoutGlobalConfig, {
east__closable: true,
east__resizable: true, east__resizable: true,
east__size: .5, east__size: .5,
east__minSize: 250 east__minSize: 250
@ -213,7 +231,6 @@ define([
$(".ui-layout-east").remove(); $(".ui-layout-east").remove();
$(".preview-container").html('<div id="preview-contents"><div id="wmd-preview" class="preview-content"></div></div>'); $(".preview-container").html('<div id="preview-contents"><div id="wmd-preview" class="preview-content"></div></div>');
layout = $('body').layout($.extend(layoutGlobalConfig, { layout = $('body').layout($.extend(layoutGlobalConfig, {
south__closable: true,
south__resizable: true, south__resizable: true,
south__size: .5, south__size: .5,
south__minSize: 200 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-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>'); $(".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 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">'); previewButtonsElt = $('<div class="extension-preview-buttons">');
if(settings.layoutOrientation == "horizontal") { if(settings.layoutOrientation == "horizontal") {
$('.ui-layout-resizer-north').append(previewButtonsElt); $('.ui-layout-resizer-north').append(previewButtonsElt);
$('.ui-layout-resizer-east').append(northTogglerElt);
} }
else { else {
$('.ui-layout-resizer-south').append(previewButtonsElt); $('.ui-layout-resizer-south').append(previewButtonsElt).append(northTogglerElt);
} }
setPanelVisibility();
setPreviewButtonsVisibility(); setPreviewButtonsVisibility();
eventMgr.onLayoutCreated(layout); eventMgr.onLayoutCreated(layout);

23
js/extensions/documentSelector.js
View File

@ -33,6 +33,7 @@ define([
fileMgr = fileMgrParameter; fileMgr = fileMgrParameter;
}; };
var dropdownElt = undefined;
var liMap = undefined; var liMap = undefined;
var liArray = undefined; var liArray = undefined;
var sortFunction = undefined; var sortFunction = undefined;
@ -59,8 +60,7 @@ define([
} }
liMap = {}; liMap = {};
var fileSelectorElt = $(".file-selector"); dropdownElt.empty();
fileSelectorElt.empty();
var documentPanelSelectorElt = $(".document-panel > .panel-content > .list-group"); var documentPanelSelectorElt = $(".document-panel > .panel-content > .list-group");
documentPanelSelectorElt.find('.list-group-item').remove(); documentPanelSelectorElt.find('.list-group-item').remove();
_.chain(fileSystem).sortBy(sortFunction).each(function(fileDesc) { _.chain(fileSystem).sortBy(sortFunction).each(function(fileDesc) {
@ -80,7 +80,7 @@ define([
li.addClass("disabled"); li.addClass("disabled");
documentPanelItemElt.addClass("active"); documentPanelItemElt.addClass("active");
} }
fileSelectorElt.append(li); dropdownElt.append(li);
documentPanelSelectorElt.append(documentPanelItemElt); documentPanelSelectorElt.append(documentPanelItemElt);
}); });
liArray = _.values(liMap); liArray = _.values(liMap);
@ -127,8 +127,13 @@ define([
return -fileDesc.selectTime; return -fileDesc.selectTime;
}; };
} }
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; var shortcutLi = undefined;
/*
$(".action-open-file").click(function() { $(".action-open-file").click(function() {
if($(".file-selector").parent().is(".open")) { if($(".file-selector").parent().is(".open")) {
return; return;
@ -155,12 +160,20 @@ define([
}).click(function(event) { }).click(function(event) {
event.stopPropagation(); 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 // Handle key shortcut
var shortcutPrevious = documentSelector.config.shortcutPrevious.toLowerCase(); var shortcutPrevious = documentSelector.config.shortcutPrevious.toLowerCase();
mousetrap.bind(shortcutPrevious, function() { mousetrap.bind(shortcutPrevious, function() {
if(shortcutLi === undefined) { if(shortcutLi === undefined) {
$(".file-selector").parent().is(".open") || $(".action-open-file").click(); dropdownElt.dropdown('toggle');
shortcutLi = liMap[selectFileDesc.fileIndex]; shortcutLi = liMap[selectFileDesc.fileIndex];
} }
var liIndex = _.indexOf(liArray, shortcutLi) - 1; var liIndex = _.indexOf(liArray, shortcutLi) - 1;
@ -176,7 +189,7 @@ define([
var shortcutNext = documentSelector.config.shortcutNext.toLowerCase(); var shortcutNext = documentSelector.config.shortcutNext.toLowerCase();
mousetrap.bind(documentSelector.config.shortcutNext.toLowerCase(), function() { mousetrap.bind(documentSelector.config.shortcutNext.toLowerCase(), function() {
if(shortcutLi === undefined) { if(shortcutLi === undefined) {
$(".file-selector").parent().is(".open") || $(".action-open-file").click(); dropdownElt.dropdown('toggle');
shortcutLi = liMap[selectFileDesc.fileIndex]; shortcutLi = liMap[selectFileDesc.fileIndex];
} }
var liIndex = _.indexOf(liArray, shortcutLi) + 1; var liIndex = _.indexOf(liArray, shortcutLi) + 1;

16
js/html/bodyIndex.html
View File

@ -14,19 +14,6 @@
<ul class="nav"> <ul class="nav">
<li class="wmd-button-group4 btn-group"></li> <li class="wmd-button-group4 btn-group"></li>
</ul> </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"> <ul class="nav pull-right">
<li class="btn-group"><button <li class="btn-group"><button
class="btn btn-success action-create-file" class="btn btn-success action-create-file"
@ -58,7 +45,6 @@
<div class="ui-layout-south preview-container"></div> <div class="ui-layout-south preview-container"></div>
<div id="wmd-button-bar" class="hide"></div> <div id="wmd-button-bar" class="hide"></div>
<div class="menu-panel collapse width"> <div class="menu-panel collapse width">
<button class="btn btn-success collapse-button" data-toggle="collapse" <button class="btn btn-success collapse-button" data-toggle="collapse"
data-target=".menu-panel" title="Menu"> data-target=".menu-panel" title="Menu">
@ -142,7 +128,7 @@
<div class="document-panel collapse width"> <div class="document-panel collapse width">
<button class="btn btn-success collapse-button" data-toggle="collapse" <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> <i class="icon-folder-open"></i> <i class="icon-right-dir"></i>
</button> </button>
<div class="panel-content"> <div class="panel-content">

74
js/styles/default.less
View File

@ -44,8 +44,11 @@ body {
} }
#preview-contents { #preview-contents {
padding: 8px 15px 8px 5px; padding: 15px;
margin-bottom: 50px; margin-bottom: 50px;
.ui-layout-east & {
padding-left: 5px;
}
} }
.working { .working {
@ -207,18 +210,6 @@ Override Bootstrap
margin-right: 5px; 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 { .file-title-navbar {
padding: 4px 15px; padding: 4px 15px;
font-size: 20px; 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 * Extensions buttons
@ -393,8 +395,8 @@ Override Bootstrap
right: 40px; right: 40px;
z-index: 1; z-index: 1;
top: 6px; top: 6px;
.ui-layout-resizer-closed > & { .ui-layout-resizer-south-closed > & {
display: none; display: none !important;
} }
.dropdown-menu { .dropdown-menu {
border: 0; border: 0;
@ -441,6 +443,7 @@ Override Bootstrap
} }
/********************************* /*********************************
* UI Layout * UI Layout
*********************************/ *********************************/
@ -467,25 +470,44 @@ Override Bootstrap
.ui-layout-toggler { .ui-layout-toggler {
font-size: 22px !important; font-size: 22px !important;
background-color: transparent; background-color: transparent;
&.ui-layout-toggler-east-open i { &.ui-layout-toggler-east {
margin: 18px 0 0 2px !important; line-height: 55px;
&:before { &.ui-layout-toggler-east-open i:before {
content: '\e950'; content: '\e950';
} }
} &.ui-layout-toggler-east-closed i:before {
&.ui-layout-toggler-east-closed i {
margin: 18px 0 0 -2px !important;
&:before {
content: '\e94f'; content: '\e94f';
} }
} }
&.ui-layout-toggler-south-open i:before { &.ui-layout-toggler-south {
content: '\e94d'; &.ui-layout-toggler-south-open i:before {
content: '\e94d';
}
&.ui-layout-toggler-south-closed i:before {
content: '\e94e';
}
} }
&.ui-layout-toggler-south-closed i:before { &.ui-layout-toggler-north {
content: '\e94e'; 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;
}
} }