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

29
js/core.js
View File

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

13
js/extensions/documentManager.js
View File

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

23
js/extensions/documentPanel.js
View File

@ -15,10 +15,10 @@ define([
}; };
var folderEltTmpl = [ 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>', '<div class="pull-right file-count"><%= _.size(folderDesc.fileList) %></div>',
'<i class="icon-folder"></i> <%= folderDesc.name %></a>', '<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(''); ].join('');
var documentEltTmpl = [ var documentEltTmpl = [
'<a href="#" class="list-group-item file action-close-panel<%= fileDesc === selectedFileDesc ? " active" : "" %>" data-file-index="<%= fileDesc.fileIndex %>">', '<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, fileDesc: fileDesc,
}) + '</li>'; }) + '</li>';
}, '').value(); }, '').value();
documentListHtml = '<ul class="nav">' + documentListHtml + '</ul>'; documentListHtml = documentListHtml && '<ul class="nav">' + documentListHtml + '</ul>';
// Build directories // Build directories
_.chain(folderList).sortBy(function(folderDesc) { _.chain(folderList).sortBy(function(folderDesc) {
@ -51,10 +51,11 @@ define([
var fileListHtml = _.chain(folderDesc.fileList).sortBy(function(fileDesc) { var fileListHtml = _.chain(folderDesc.fileList).sortBy(function(fileDesc) {
return fileDesc.title.toLowerCase(); return fileDesc.title.toLowerCase();
}).reduce(function(result, fileDesc) { }).reduce(function(result, fileDesc) {
return result + _.template(documentEltTmpl, { return result + '<li>' + _.template(documentEltTmpl, {
fileDesc: fileDesc, fileDesc: fileDesc,
}); }) + '</li>';
}, '').value(); }, '').value();
fileListHtml = fileListHtml && '<ul class="nav">' + fileListHtml + '</ul>';
documentListHtml += _.template(folderEltTmpl, { documentListHtml += _.template(folderEltTmpl, {
folderDesc: folderDesc, folderDesc: folderDesc,
fileListHtml: fileListHtml, fileListHtml: fileListHtml,
@ -111,6 +112,18 @@ define([
documentPanel.onReady = function() { documentPanel.onReady = function() {
panelElt = document.querySelector('.document-panel'); panelElt = document.querySelector('.document-panel');
documentListElt = panelElt.querySelector('.list-group'); 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; return documentPanel;

4
js/helpers/googleHelper.js
View File

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

31
js/html/bodyIndex.html
View File

@ -58,7 +58,8 @@
StackEdit Viewer</a> <a href="#" data-toggle="collapse" StackEdit Viewer</a> <a href="#" data-toggle="collapse"
data-target=".collapse-open-from" class="list-group-item"><i data-target=".collapse-open-from" class="list-group-item"><i
class="icon-hdd"></i> Open from...</a> class="icon-hdd"></i> Open from...</a>
<ul class="nav collapse collapse-open-from"> <div class="sub-menu collapse collapse-open-from clearfix">
<ul class="nav">
<li><a data-toggle="modal" <li><a data-toggle="modal"
data-target=".modal-import-harddrive-markdown" data-target=".modal-import-harddrive-markdown"
class="action-reset-input action-close-panel" href="#">Import class="action-reset-input action-close-panel" href="#">Import
@ -68,36 +69,44 @@
class="action-reset-input action-close-panel" href="#">Convert class="action-reset-input action-close-panel" href="#">Convert
HTML to Markdown</a></li> HTML to Markdown</a></li>
</ul> </ul>
</div>
<a href="#" data-toggle="collapse" data-target=".collapse-save-as" <a href="#" data-toggle="collapse" data-target=".collapse-save-as"
class="list-group-item"><i class="icon-hdd"></i> Save as...</a> class="list-group-item"><i class="icon-hdd"></i> Save as...</a>
<ul class="nav collapse collapse-save-as"> <div class="sub-menu collapse collapse-save-as clearfix">
<li><a class="action-download-md" href="#">Save as Markdown</a></li> <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-html" href="#">Save as HTML</a></li>
<li><a class="action-download-template" href="#">Save using <li><a class="action-download-template" href="#">Save
template</a></li> using template</a></li>
</ul> </ul>
</div> </div>
</div>
<div class=dropdown-header>SYNCHRONIZE</div> <div class=dropdown-header>SYNCHRONIZE</div>
<div class="list-group"> <div class="list-group">
<a href="#" data-toggle="collapse" <a href="#" data-toggle="collapse"
data-target=".collapse-sync-gdrive" class="list-group-item"><i data-target=".collapse-sync-gdrive" class="list-group-item"><i
class="icon-provider-gdrive"></i> Google Drive</a> class="icon-provider-gdrive"></i> Google Drive</a>
<ul class="nav collapse collapse-sync-gdrive"> <div class="sub-menu collapse collapse-sync-gdrive clearfix">
<ul class="nav">
<li><a href="#" class="action-sync-import-gdrive">Import <li><a href="#" class="action-sync-import-gdrive">Import
from Google Drive</a></li> from Google Drive</a></li>
<li><a href="#" class="action-sync-export-dialog-gdrive">Export <li><a href="#" class="action-sync-export-dialog-gdrive">Export
to Google Drive</a></li> to Google Drive</a></li>
</ul> </ul>
</div>
<a href="#" data-toggle="collapse" <a href="#" data-toggle="collapse"
data-target=".collapse-sync-dropbox" class="list-group-item"><i data-target=".collapse-sync-dropbox" class="list-group-item"><i
class="icon-provider-dropbox"></i> Dropbox</a> class="icon-provider-dropbox"></i> Dropbox</a>
<ul class="nav collapse collapse-sync-dropbox"> <div class="sub-menu collapse collapse-sync-dropbox clearfix">
<ul class="nav">
<li><a class="action-sync-import-dropbox" href="#">Import <li><a class="action-sync-import-dropbox" href="#">Import
from Dropbox</a></li> from Dropbox</a></li>
<li><a href="#" class="action-sync-export-dialog-dropbox">Export <li><a href="#" class="action-sync-export-dialog-dropbox">Export
to Dropbox</a></li> to Dropbox</a></li>
</ul> </ul>
</div>
<a href="#" data-toggle="modal" data-target=".modal-manage-sync" <a href="#" data-toggle="modal" data-target=".modal-manage-sync"
class="action-reset-input list-group-item action-close-panel"><i class="action-reset-input list-group-item action-close-panel"><i
class="icon-refresh"></i> Manage synchronization</a> class="icon-refresh"></i> Manage synchronization</a>
@ -106,8 +115,10 @@
<div class="list-group"> <div class="list-group">
<a href="#" data-toggle="collapse" data-target=".collapse-publish-on" <a href="#" data-toggle="collapse" data-target=".collapse-publish-on"
class="list-group-item"><i class="icon-share"></i> Publish on...</a> class="list-group-item"><i class="icon-share"></i> Publish on...</a>
<ul class="nav collapse collapse-publish-on"> <div class="sub-menu collapse collapse-publish-on clearfix">
<ul class="nav">
</ul> </ul>
</div>
<a href="#" data-toggle="modal" data-target=".modal-manage-publish" <a href="#" data-toggle="modal" data-target=".modal-manage-publish"
class="action-reset-input list-group-item action-close-panel"><i class="action-reset-input list-group-item action-close-panel"><i
class="icon-share"></i> Manage publication</a> class="icon-share"></i> Manage publication</a>
@ -177,9 +188,9 @@
Create folder Create folder
</a></li> </a></li>
<li class="disabled"><a><i class="icon-file"></i> <span <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 <li class="disabled"><a><i class="icon-folder"></i> <span
class="folder-count">0</span></a></li> class="folder-count"></span></a></li>
</ul> </ul>
<div class="list-group document-list"></div> <div class="list-group document-list"></div>
<p class="confirm-delete hide">The following documents will be <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() { eventMgr.addListener("onReady", function() {
// Add every provider // Add every provider
var publishMenu = $(".collapse-publish-on"); var publishMenu = $('.collapse-publish-on .nav');
_.each(providerMap, function(provider) { _.each(providerMap, function(provider) {
// Provider's publish button // 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() { 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 * 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 { .file-title-navbar {
padding: 4px 15px; padding: 4px 15px;
font-size: 20px; font-size: 20px;
@ -246,7 +242,7 @@ body {
max-width: 400px; max-width: 400px;
overflow: hidden; overflow: hidden;
i { i {
margin-right: 10px; margin-right: 6px;
} }
} }
@ -290,7 +286,7 @@ body {
overflow: auto; overflow: auto;
height: 100%; height: 100%;
a > i { a > i {
margin-right: 5px; margin-right: 3px;
color: inherit; color: inherit;
} }
} }
@ -318,6 +314,9 @@ body {
} }
.panel-content { .panel-content {
border-right: 5px solid @preview-bg-light; border-right: 5px solid @preview-bg-light;
.nav {
margin-bottom: 20px;
}
} }
} }
@ -366,8 +365,7 @@ body {
} }
.list-group .nav { .list-group .nav {
border: 0; border: 0;
margin: 0 20px; margin: 0 20px 20px;
padding-bottom: 25px;
} }
} }
@ -393,13 +391,13 @@ body {
} }
.list-group .nav { .list-group .nav {
margin-left: 40px; margin-left: 40px;
margin-bottom: 25px; margin-bottom: 30px;
} }
.list-group-item { .list-group-item {
padding: 3px; padding: 3px;
margin: 0; margin: 0;
i { i {
margin-right: 5px; margin-right: 3px;
} }
.btn { .btn {
float: right; float: right;

10
js/utils.js
View File

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