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-12 23:08:22 +01:00
parent f33bfef15f
commit 9b77eafa83
8 changed files with 130 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
js/core.js
View File

@ -451,46 +451,55 @@ define([
menuPanelElt = $('.menu-panel');
var isMenuPanelShown = false;
menuPanelElt.on('shown.bs.collapse', function() {
isMenuPanelShown = true;
// Register a click listener when menu panel is open
$('body').on('click.hide-menu-panel', function(e) {
// If click outside the panel, close the panel and unregister
// the listener
if($(e.target).is('.action-close-panel, .action-close-panel *, :not(.menu-panel, .menu-panel *)')) {
menuPanelElt.collapse('hide');
var menuPanelBackdropElt = undefined;
menuPanelElt.on('shown.bs.collapse', function(e) {
if(e.target === menuPanelElt[0]) {
isMenuPanelShown = true;
menuPanelBackdropElt = utils.createBackdrop();
menuPanelElt.addClass('move-to-front');
// Register a click listener when menu panel is open
var closePanelElt = menuPanelElt.find('.action-close-panel').add(menuPanelBackdropElt);
closePanelElt.on('click.hide-menu-panel', function(e) {
// Unregister the listener
$('body').off('click.hide-menu-panel');
menuPanelElt.collapse('hide');
isMenuPanelShown = false;
}
});
});
}
}).on('show.bs.collapse', function(){
// Close all open sub-menus when one submenu opens
menuPanelElt.find('.in').collapse('hide');
}).on('hidden.bs.collapse', function() {
}).on('hidden.bs.collapse', function(e) {
// Close all open sub-menus when menu panel is closed
menuPanelElt.find('.in').collapse('hide');
if(e.target === menuPanelElt[0]) {
menuPanelElt.find('.in').collapse('hide');
}
});
documentPanelElt = $('.document-panel');
var isDocumentPanelShown = false;
documentPanelElt.on('shown.bs.collapse', function() {
isDocumentPanelShown = true;
// Register a click listener when document panel is open
$('body').on('click.hide-document-panel', function(e) {
// If click outside the panel, close the panel and unregister
// the listener
if($(e.target).is('.action-close-panel, .action-close-panel *, :not(.document-panel, .document-panel *)')) {
documentPanelElt.collapse('hide');
$('body').off('click.hide-document-panel');
isDocumentPanelShown = false;
}
});
documentPanelElt.on('shown.bs.collapse', function(e) {
if(e.target === documentPanelElt[0]) {
isDocumentPanelShown = true;
// Register a click listener when document panel is open
$('body').on('click.hide-document-panel', function(e) {
// If click outside the panel, close the panel and unregister
// the listener
if($(e.target).is('.action-close-panel, .action-close-panel *, :not(.document-panel, .document-panel *)')) {
documentPanelElt.collapse('hide');
$('body').off('click.hide-document-panel');
isDocumentPanelShown = false;
}
});
}
}).on('show.bs.collapse', function(){
// Close all open sub-menus when one submenu opens
documentPanelElt.find('.in').collapse('hide');
}).on('hidden.bs.collapse', function() {
// Close all open sub-menus when menu panel is closed
documentPanelElt.find('.in').collapse('hide');
}).on('hidden.bs.collapse', function(e) {
if(e.target === documentPanelElt[0]) {
// Close all open sub-menus when menu panel is closed
documentPanelElt.find('.in').collapse('hide');
}
});
var isModalShown = false;

13
js/extensions/documentManager.js
View File

@ -22,7 +22,7 @@ define([
};
var folderEltTmpl = [
'<a href="#" class="list-group-item folder clearfix" data-folder-index="<%= folderDesc.folderIndex %>" data-toggle="collapse" data-target=".modal-document-manager .nav.<%= id %>">',
'<a href="#" class="list-group-item folder clearfix" data-folder-index="<%= folderDesc.folderIndex %>" data-toggle="collapse" data-target=".modal-document-manager .file-list.<%= id %>">',
'<label class="checkbox" title="Select"><input type="checkbox"></label>',
'<button class="btn btn-default button-delete" title="Delete"><i class="icon-trash"></i></button>',
'<button class="btn btn-default button-rename" title="Rename"><i class="icon-pencil"></i></button>',
@ -30,7 +30,7 @@ define([
'<div class="name"><i class="icon-folder"></i> ',
'<%= folderDesc.name %></div>',
'<input type="text" class="input-rename form-control hide"></a>',
'<ul class="nav collapse <%= id %>"><%= fileListHtml %></ul>'
'<div class="file-list collapse <%= id %> clearfix"><%= fileListHtml %></div>'
].join('');
var documentEltTmpl = [
'<li class="list-group-item file clearfix" data-file-index="<%= fileDesc.fileIndex %>">',
@ -142,7 +142,7 @@ define([
// Root folder
var documentListHtml = [
'<a href="#" class="list-group-item folder clearfix" data-toggle="collapse" data-target=".modal-document-manager .nav.root-folder">',
'<a href="#" class="list-group-item folder clearfix" data-toggle="collapse" data-target=".modal-document-manager .file-list.root-folder">',
'<label class="checkbox" title="Select"><input type="checkbox"></label>',
'<div class="pull-right file-count">',
_.size(orphanDocumentList),
@ -152,13 +152,15 @@ define([
].join('');
// Add orphan documents
documentListHtml += '<ul class="nav collapse root-folder">' + _.chain(orphanDocumentList).sortBy(function(fileDesc) {
var orphanListHtml = _.chain(orphanDocumentList).sortBy(function(fileDesc) {
return fileDesc.title.toLowerCase();
}).reduce(function(result, fileDesc) {
return result + _.template(documentEltTmpl, {
fileDesc: fileDesc,
});
}, '').value() + '</ul>';
}, '').value();
orphanListHtml = orphanListHtml && '<ul class="nav">' + orphanListHtml + '</ul>';
documentListHtml += '<div class="file-list collapse root-folder clearfix">' + orphanListHtml + '</div>';
// Build directories
_.chain(folderList).sortBy(function(folderDesc) {
@ -171,6 +173,7 @@ define([
fileDesc: fileDesc,
});
}, '').value();
fileListHtml = fileListHtml && '<ul class="nav">' + fileListHtml + '</ul>';
documentListHtml += _.template(folderEltTmpl, {
folderDesc: folderDesc,
fileListHtml: fileListHtml,

23
js/extensions/documentPanel.js
View File

@ -15,10 +15,10 @@ define([
};
var folderEltTmpl = [
'<a href="#" class="list-group-item folder clearfix" data-folder-index="<%= folderDesc.folderIndex %>" data-toggle="collapse" data-target=".document-panel .nav.<%= id %>">',
'<a href="#" class="list-group-item folder clearfix" data-folder-index="<%= folderDesc.folderIndex %>" data-toggle="collapse" data-target=".document-panel .file-list.<%= id %>">',
'<div class="pull-right file-count"><%= _.size(folderDesc.fileList) %></div>',
'<i class="icon-folder"></i> <%= folderDesc.name %></a>',
'<ul class="nav collapse <%= id %>"><%= fileListHtml %></ul>'
'<div class="file-list collapse <%= id %> clearfix"><%= fileListHtml %></div>'
].join('');
var documentEltTmpl = [
'<a href="#" class="list-group-item file action-close-panel<%= fileDesc === selectedFileDesc ? " active" : "" %>" data-file-index="<%= fileDesc.fileIndex %>">',
@ -42,7 +42,7 @@ define([
fileDesc: fileDesc,
}) + '</li>';
}, '').value();
documentListHtml = '<ul class="nav">' + documentListHtml + '</ul>';
documentListHtml = documentListHtml && '<ul class="nav">' + documentListHtml + '</ul>';
// Build directories
_.chain(folderList).sortBy(function(folderDesc) {
@ -51,10 +51,11 @@ define([
var fileListHtml = _.chain(folderDesc.fileList).sortBy(function(fileDesc) {
return fileDesc.title.toLowerCase();
}).reduce(function(result, fileDesc) {
return result + _.template(documentEltTmpl, {
return result + '<li>' + _.template(documentEltTmpl, {
fileDesc: fileDesc,
});
}) + '</li>';
}, '').value();
fileListHtml = fileListHtml && '<ul class="nav">' + fileListHtml + '</ul>';
documentListHtml += _.template(folderEltTmpl, {
folderDesc: folderDesc,
fileListHtml: fileListHtml,
@ -111,6 +112,18 @@ define([
documentPanel.onReady = function() {
panelElt = document.querySelector('.document-panel');
documentListElt = panelElt.querySelector('.list-group');
// Open current folder before opening
$(panelElt).on('show.bs.collapse', function(e) {
var folderDesc = selectedFileDesc.folder;
if(e.target === panelElt && folderDesc !== undefined) {
$(panelElt.querySelector('.file-list.' + folderDesc.folderIndex.replace('.', ''))).collapse('show');
}
}).on('shown.bs.collapse', function(e) {
// Scroll to the active file
if(e.target === panelElt) {
}
});
};
return documentPanel;

4
js/helpers/googleHelper.js
View File

@ -607,10 +607,10 @@ define([
}
});
picker = pickerBuilder.build();
$("body").append($("<div>").addClass("modal-backdrop").click(function() {
$(utils.createBackdrop()).click(function() {
hidePicker();
task.chain();
}));
});
picker.setVisible(true);
});
task.onSuccess(function() {

75
js/html/bodyIndex.html
View File

@ -58,46 +58,55 @@
StackEdit Viewer</a> <a href="#" data-toggle="collapse"
data-target=".collapse-open-from" class="list-group-item"><i
class="icon-hdd"></i> Open from...</a>
<ul class="nav collapse collapse-open-from">
<li><a data-toggle="modal"
data-target=".modal-import-harddrive-markdown"
class="action-reset-input action-close-panel" href="#">Import
from hard drive</a></li>
<li><a data-toggle="modal"
data-target=".modal-import-harddrive-html"
class="action-reset-input action-close-panel" href="#">Convert
HTML to Markdown</a></li>
</ul>
<div class="sub-menu collapse collapse-open-from clearfix">
<ul class="nav">
<li><a data-toggle="modal"
data-target=".modal-import-harddrive-markdown"
class="action-reset-input action-close-panel" href="#">Import
from hard drive</a></li>
<li><a data-toggle="modal"
data-target=".modal-import-harddrive-html"
class="action-reset-input action-close-panel" href="#">Convert
HTML to Markdown</a></li>
</ul>
</div>
<a href="#" data-toggle="collapse" data-target=".collapse-save-as"
class="list-group-item"><i class="icon-hdd"></i> Save as...</a>
<ul class="nav collapse collapse-save-as">
<li><a class="action-download-md" href="#">Save as Markdown</a></li>
<li><a class="action-download-html" href="#">Save as HTML</a></li>
<li><a class="action-download-template" href="#">Save using
template</a></li>
</ul>
<div class="sub-menu collapse collapse-save-as clearfix">
<ul class="nav">
<li><a class="action-download-md" href="#">Save as
Markdown</a></li>
<li><a class="action-download-html" href="#">Save as HTML</a></li>
<li><a class="action-download-template" href="#">Save
using template</a></li>
</ul>
</div>
</div>
<div class=dropdown-header>SYNCHRONIZE</div>
<div class="list-group">
<a href="#" data-toggle="collapse"
data-target=".collapse-sync-gdrive" class="list-group-item"><i
class="icon-provider-gdrive"></i> Google Drive</a>
<ul class="nav collapse collapse-sync-gdrive">
<li><a href="#" class="action-sync-import-gdrive">Import
from Google Drive</a></li>
<li><a href="#" class="action-sync-export-dialog-gdrive">Export
to Google Drive</a></li>
</ul>
<div class="sub-menu collapse collapse-sync-gdrive clearfix">
<ul class="nav">
<li><a href="#" class="action-sync-import-gdrive">Import
from Google Drive</a></li>
<li><a href="#" class="action-sync-export-dialog-gdrive">Export
to Google Drive</a></li>
</ul>
</div>
<a href="#" data-toggle="collapse"
data-target=".collapse-sync-dropbox" class="list-group-item"><i
class="icon-provider-dropbox"></i> Dropbox</a>
<ul class="nav collapse collapse-sync-dropbox">
<li><a class="action-sync-import-dropbox" href="#">Import
from Dropbox</a></li>
<li><a href="#" class="action-sync-export-dialog-dropbox">Export
to Dropbox</a></li>
</ul>
<div class="sub-menu collapse collapse-sync-dropbox clearfix">
<ul class="nav">
<li><a class="action-sync-import-dropbox" href="#">Import
from Dropbox</a></li>
<li><a href="#" class="action-sync-export-dialog-dropbox">Export
to Dropbox</a></li>
</ul>
</div>
<a href="#" data-toggle="modal" data-target=".modal-manage-sync"
class="action-reset-input list-group-item action-close-panel"><i
class="icon-refresh"></i> Manage synchronization</a>
@ -106,8 +115,10 @@
<div class="list-group">
<a href="#" data-toggle="collapse" data-target=".collapse-publish-on"
class="list-group-item"><i class="icon-share"></i> Publish on...</a>
<ul class="nav collapse collapse-publish-on">
</ul>
<div class="sub-menu collapse collapse-publish-on clearfix">
<ul class="nav">
</ul>
</div>
<a href="#" data-toggle="modal" data-target=".modal-manage-publish"
class="action-reset-input list-group-item action-close-panel"><i
class="icon-share"></i> Manage publication</a>
@ -177,9 +188,9 @@
Create folder
</a></li>
<li class="disabled"><a><i class="icon-file"></i> <span
class="document-count">0</span></a></li>
class="document-count"></span></a></li>
<li class="disabled"><a><i class="icon-folder"></i> <span
class="folder-count">0</span></a></li>
class="folder-count"></span></a></li>
</ul>
<div class="list-group document-list"></div>
<p class="confirm-delete hide">The following documents will be

2
js/publisher.js
View File

@ -224,7 +224,7 @@ define([
eventMgr.addListener("onReady", function() {
// Add every provider
var publishMenu = $(".collapse-publish-on");
var publishMenu = $('.collapse-publish-on .nav');
_.each(providerMap, function(provider) {
// Provider's publish button
publishMenu.append($("<li>").append($('<a href="#" class="action-close-panel"><i class="icon-provider-' + provider.providerId + '"></i> ' + provider.providerName + '</a>').click(function() {

26
js/styles/default.less
View File

@ -82,6 +82,10 @@ body {
}
}
.move-to-front {
z-index: 1031 !important;
}
/*******************
* Buttons
@ -230,14 +234,6 @@ body {
}
}
// Dropdown menus
.btn-group.open .dropdown-toggle {
background-color: @bg-navbar-hover;
}
.dropdown-menu > li > a > i {
margin-right: 5px;
}
.file-title-navbar {
padding: 4px 15px;
font-size: 20px;
@ -246,7 +242,7 @@ body {
max-width: 400px;
overflow: hidden;
i {
margin-right: 10px;
margin-right: 6px;
}
}
@ -290,7 +286,7 @@ body {
overflow: auto;
height: 100%;
a > i {
margin-right: 5px;
margin-right: 3px;
color: inherit;
}
}
@ -318,6 +314,9 @@ body {
}
.panel-content {
border-right: 5px solid @preview-bg-light;
.nav {
margin-bottom: 20px;
}
}
}
@ -366,8 +365,7 @@ body {
}
.list-group .nav {
border: 0;
margin: 0 20px;
padding-bottom: 25px;
margin: 0 20px 20px;
}
}
@ -393,13 +391,13 @@ body {
}
.list-group .nav {
margin-left: 40px;
margin-bottom: 25px;
margin-bottom: 30px;
}
.list-group-item {
padding: 3px;
margin: 0;
i {
margin-right: 5px;
margin-right: 3px;
}
.btn {
float: right;

10
js/utils.js
View File

@ -169,6 +169,7 @@ define([
return url;
};
// Create the modal element and add to the body
utils.addModal = function(id, content) {
var modal = crel('div', {
class: 'modal ' + id
@ -177,6 +178,15 @@ define([
document.body.appendChild(modal);
};
// Create a backdrop and add to the body
utils.createBackdrop = function() {
var result = crel('div', {
class: 'modal-backdrop'
});
document.body.appendChild(result);
return result;
};
// Create an centered popup window
utils.popupWindow = function(url, title, width, height) {
var left = (screen.width / 2) - (width / 2);