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-05 19:39:53 +01:00
parent 061719eb84
commit 2e5e203280
7 changed files with 185 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/core.js
View File

@ -205,7 +205,6 @@ define([
eventMgr.onLayoutCreated(layout);
}
;
// Create the PageDown editor
var editor = undefined;
@ -333,7 +332,7 @@ define([
editor.undoManager.reinit(initDocumentContent, fileDesc.editorStart, fileDesc.editorEnd, fileDesc.editorScrollTop);
// Hide default buttons
$(".wmd-button-row").addClass("btn-group").find("li:not(.wmd-spacer)").addClass("btn btn-default").css("left", 0).find("span").hide();
$(".wmd-button-row").addClass("btn-group").find("li:not(.wmd-spacer)").addClass("btn btn-success").css("left", 0).find("span").hide();
// Add customized buttons
$("#wmd-bold-button").append($('<i class="icon-bold">'));

215
js/html/bodyIndex.html
View File

@ -6,15 +6,16 @@
</ul>
<ul class="nav pull-right">
<li id="extension-buttons"></li>
<li class="btn-group"><button class="btn btn-default action-create-file"
<li class="btn-group"><button
class="btn btn-success action-create-file"
title="New local document">
<i class="icon-file"></i>
</button>
<button class="btn btn-default" title="Delete local document"
<button class="btn btn-success" title="Delete local document"
data-toggle="modal" data-target="#modal-remove-file-confirm">
<i class="icon-trash"></i>
</button>
<button class="btn btn-default dropdown-toggle action-open-file"
<button class="btn btn-success dropdown-toggle action-open-file"
data-toggle="dropdown" title="Open local document">
<i class="icon-folder-open"></i>
</button>
@ -26,72 +27,10 @@
</div>
</li>
</ul></li>
<li class="btn-group"><button class="btn btn-default dropdown-toggle"
data-toggle="dropdown" title="Menu">
<i class="icon-provider-stackedit"></i>&nbsp;&nbsp;<i class="icon-down-dir"></i>
</button>
<ul class="dropdown-menu">
<li><a href="viewer.html" title="StackEdit Viewer"><i
class="icon-resize-full"></i> StackEdit Viewer</a></li>
<li class="dropdown-submenu"><a href="#"><i
class="icon-hdd"></i> Open from...</a>
<ul class="dropdown-menu">
<li><a data-toggle="modal"
data-target="#modal-import-harddrive-markdown"
class="action-reset-input" href="#">Import from hard drive</a></li>
<li><a data-toggle="modal"
data-target="#modal-import-harddrive-html"
class="action-reset-input" href="#">Convert HTML to Markdown</a></li>
</ul></li>
<li class="dropdown-submenu"><a href="#"><i
class="icon-hdd"></i> Save as...</a>
<ul class="dropdown-menu">
<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></li>
<li class="divider with-text">synchronize</li>
<li class="dropdown-submenu"><a href="#"><i
class="icon-provider-gdrive"></i> Google Drive</a>
<ul class="dropdown-menu">
<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></li>
<li class="dropdown-submenu"><a href="#"><i
class="icon-provider-dropbox"></i> Dropbox</a>
<ul class="dropdown-menu">
<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></li>
<li><a href="#" data-toggle="modal"
data-target="#modal-manage-sync" class="action-reset-input"><i
class="icon-refresh"></i> Manage synchronization</a></li>
<li class="divider with-text">publish</li>
<li class="dropdown-submenu"><a href="#"><i
class="icon-share"></i> Publish on</a>
<ul id="publish-menu" class="dropdown-menu">
</ul></li>
<li><a href="#" data-toggle="modal"
data-target="#modal-manage-publish" class="action-reset-input"><i
class="icon-share"></i> Manage publication</a></li>
<li class="divider"></li>
<li><a href="#" data-toggle="modal"
data-target="#modal-settings" class="action-load-settings"><i
class="icon-cog"></i> Settings</a></li>
<li><a href="#" data-toggle="modal" data-target="#modal-about"><i
class="icon-help-circled"></i> About</a></li>
</ul></li>
</ul>
<ul class="nav pull-right">
<li><i class="working-indicator icon-none"></i></li>
<li><a class="btn btn-default" id="file-title" href="#"
<li><a class="btn btn-success" id="file-title" href="#"
title="Rename current document"> </a></li>
<li class="navbar-form"><input id="file-title-input" type="text"
class="col-lg-3 form-control hide" placeholder="Document title" /></li>
@ -102,6 +41,80 @@
<div class="ui-layout-east preview-container"></div>
<div class="ui-layout-south preview-container"></div>
<div class="menu-panel nav-collapse collapse">
<button class="btn btn-success menu-button" data-toggle="collapse"
data-target=".menu-panel" title="Menu">
<i class="icon-left-dir"></i> <img src="img/stackedit-64.png"
width="32" height="32" />
</button>
<div class="menu-container">
<div class="list-group">
<a href="viewer.html" title="StackEdit Viewer"
class="list-group-item"><i class="icon-resize-full"></i>
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" href="#">Import from hard drive</a></li>
<li><a data-toggle="modal"
data-target="#modal-import-harddrive-html"
class="action-reset-input" href="#">Convert HTML to Markdown</a></li>
</ul>
<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>
<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>
<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>
<a href="#" data-toggle="modal" data-target="#modal-manage-sync"
class="action-reset-input list-group-item"><i
class="icon-refresh"></i> Manage synchronization</a>
</div>
<div class=dropdown-header>PUBLISH</div>
<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>
<a href="#" data-toggle="modal" data-target="#modal-manage-publish"
class="action-reset-input list-group-item"><i class="icon-share"></i>
Manage publication</a>
</div>
<div class="list-group">
<a href="#" data-toggle="modal" data-target="#modal-settings"
class="action-load-settings list-group-item"><i class="icon-cog"></i>
Settings</a> <a href="#" data-toggle="modal" data-target="#modal-about" class=" list-group-item"><i
class="icon-help-circled"></i> About</a>
</div>
</div>
</div>
<div id="modal-insert-link" class="modal">
<div class="modal-dialog">
@ -121,8 +134,9 @@
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
class="btn btn-primary action-insert-link" data-dismiss="modal">OK</a>
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
<a href="#" class="btn btn-primary action-insert-link"
data-dismiss="modal">OK</a>
</div>
</div>
</div>
@ -148,10 +162,10 @@
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default action-import-image-gplus"
data-dismiss="modal"><i class="icon-provider-gplus"></i> Import from
Google+</a> <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a
href="#" class="btn btn-primary action-insert-image"
data-dismiss="modal">OK</a>
data-dismiss="modal"><i class="icon-provider-gplus"></i> Import
from Google+</a> <a href="#" class="btn btn-default"
data-dismiss="modal">Cancel</a> <a href="#"
class="btn btn-primary action-insert-image" data-dismiss="modal">OK</a>
</div>
</div>
</div>
@ -193,8 +207,9 @@
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
class="btn btn-primary action-import-image" data-dismiss="modal">OK</a>
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
<a href="#" class="btn btn-primary action-import-image"
data-dismiss="modal">OK</a>
</div>
</div>
</div>
@ -220,8 +235,9 @@
</blockquote>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
class="btn btn-primary action-remove-file" data-dismiss="modal">Delete</a>
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
<a href="#" class="btn btn-primary action-remove-file"
data-dismiss="modal">Delete</a>
</div>
</div>
</div>
@ -277,8 +293,9 @@
<textarea id="input-convert-html"></textarea>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Close</a> <a href="#"
class="btn btn-primary action-convert-html" data-dismiss="modal">OK</a>
<a href="#" class="btn btn-default" data-dismiss="modal">Close</a> <a
href="#" class="btn btn-primary action-convert-html"
data-dismiss="modal">OK</a>
</div>
</div>
</div>
@ -332,8 +349,8 @@
</blockquote>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
data-dismiss="modal"
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
<a href="#" data-dismiss="modal"
class="btn btn-primary action-sync-export-gdrive">OK</a>
</div>
</div>
@ -374,8 +391,8 @@
</blockquote>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
data-dismiss="modal"
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
<a href="#" data-dismiss="modal"
class="btn btn-primary action-sync-export-dropbox">OK</a>
</div>
</div>
@ -408,18 +425,19 @@
<p>Add a synchronized location manually:</p>
<div class="input-prepend input-append sync-manual">
<span class="add-on" title="Google Drive"><i
class="icon-provider-gdrive"></i></span><input id="input-sync-manual-gdrive-id"
type="text" class="col-lg-5 form-control"
placeholder="GoogleDriveFileID"></input> <a
class="btn btn-default action-sync-manual-gdrive" title="Add location"
data-dismiss="modal"><i class="icon-ok"></i></a>
class="icon-provider-gdrive"></i></span><input
id="input-sync-manual-gdrive-id" type="text"
class="col-lg-5 form-control" placeholder="GoogleDriveFileID"></input>
<a class="btn btn-default action-sync-manual-gdrive"
title="Add location" data-dismiss="modal"><i class="icon-ok"></i></a>
</div>
<div class="input-prepend input-append sync-manual">
<span class="add-on" title="Dropbox"><i class="icon-provider-dropbox"></i></span><input
<span class="add-on" title="Dropbox"><i
class="icon-provider-dropbox"></i></span><input
id="input-sync-manual-dropbox-path" type="text"
class="col-lg-5 form-control" placeholder="/dropbox/file/path"></input>
<a class="btn btn-default action-sync-manual-dropbox" title="Add location"
data-dismiss="modal"><i class="icon-ok"></i></a>
<a class="btn btn-default action-sync-manual-dropbox"
title="Add location" data-dismiss="modal"><i class="icon-ok"></i></a>
</div>
<blockquote class="muted">
<b>NOTE:</b> This will first upload the document and overwrite the
@ -653,8 +671,9 @@
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
data-dismiss="modal" class="btn btn-primary action-process-publish">OK</a>
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
<a href="#" data-dismiss="modal"
class="btn btn-primary action-process-publish">OK</a>
</div>
</div>
</div>
@ -836,8 +855,9 @@
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
class="btn btn-primary action-apply-settings" data-dismiss="modal">OK</a>
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
<a href="#" class="btn btn-primary action-apply-settings"
data-dismiss="modal">OK</a>
</div>
</div>
</div>
@ -896,8 +916,9 @@
<blockquote class="muted">Are you sure?</blockquote>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a href="#"
class="btn btn-primary action-app-reset" data-dismiss="modal">OK</a>
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
<a href="#" class="btn btn-primary action-app-reset"
data-dismiss="modal">OK</a>
</div>
</div>
</div>
@ -906,4 +927,4 @@
<textarea id="md-section-helper" class="form-control"></textarea>
<div class="lock-ui hide"></div>
<div id="dropboxjs" data-app-key="x0k2l8puemfvg0o"></div>
<div id="dropboxjs" data-app-key="x0k2l8puemfvg0o"></div>

2
js/html/buttonPublish.html
View File

@ -1,3 +1,3 @@
<button class="btn btn-default" title="Publish this document">
<button class="btn btn-success" title="Publish this document">
<i class="icon-share"></i>
</button>

2
js/html/buttonShare.html
View File

@ -1,4 +1,4 @@
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown"
title="Share this document">
<i class="icon-link"></i>
</button>

2
js/html/buttonSync.html
View File

@ -1,3 +1,3 @@
<button class="btn btn-default" title="Synchronize all documents">
<button class="btn btn-success" title="Synchronize all documents">
<i class="icon-refresh"></i>
</button>

2
js/publisher.js
View File

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

85
js/styles/default.less
View File

@ -1,11 +1,14 @@
@bg-light: #f2f2f2;
@preview-bg-light: #e8e8e8;
@bg-navbar-hover: #eee;
@bg-navbar-hover: @body-bg;
@text-inv: #fff;
@text-light: #888;
@error-border: #ff8661;
@icon-color: #525252;
@icon-color-inv: #fff;
@menu-width: 250px;
@menu-bg: @bg-navbar-hover;
@transparent: fade(#000, 0%);
/* Bootstrap */
@body-bg: #f5f5f5;
@ -17,13 +20,62 @@
@input-color-placeholder: #ccc;
@btn-default-color: #333333;
@btn-default-bg: #fff;
@btn-default-border: fade(#000, 0%);
@btn-default-border: @transparent;
@btn-primary-color: #fff;
@btn-primary-bg: #777;
@btn-primary-border: fade(#000, 0%);
@btn-primary-border: @transparent;
@btn-success-color: #333333;
@btn-success-bg: @navbar-bg;
@btn-success-border: @transparent;
@btn-info-bg: @body-bg;
@btn-info-border: fade(#000, 0%);
@btn-info-border: @transparent;
@gray-lighter: @body-bg;
@list-group-border: @transparent;
.menu-panel {
position: absolute;
height: 100% !important;
width: @menu-width;
z-index: 10;
margin-left: (-@menu-width - 30);
background-color: @menu-bg;
.box-shadow(0 6px 12px rgba(0,0,0,.175));
border: 1px solid @dropdown-border;
overflow: initial;
-webkit-transition: margin-left 0.35s ease;
-moz-transition: margin-left 0.35s ease;
-o-transition: margin-left 0.35s ease;
transition: margin-left 0.35s ease;
&.in {
margin-left: 0;
.menu-button {
background-color: @menu-bg;
}
}
.menu-button {
right: -80px;
position: absolute;
margin-top: 5px;
padding: 2px 20px 2px;
z-index: -1;
}
.menu-container {
overflow: auto;
height: 100%;
.list-group {
margin-top: 5px;
.list-group-item {
color: @btn-default-color;
}
i {
margin-right: 5px;
}
ul.nav > li > a {
padding-left: 25px;
}
}
}
}
body {
@ -64,6 +116,10 @@ Override Bootstrap
color: @btn-primary-color;
}
.btn-success:hover {
background-color: @bg-navbar-hover;
}
.btn-group {
margin-right: 10px;
}
@ -87,9 +143,6 @@ Override Bootstrap
border-width: 0;
}
.modal-body {
padding-bottom: 0;
}
/********************
* Input
@ -170,16 +223,7 @@ Override Bootstrap
}
}
}
.btn-group > .btn,
#file-title {
background-color: @navbar-bg;
border-color: @navbar-bg;
&:hover,
&:focus,
&:active,
&.active {
background-color: @bg-navbar-hover;
}
.btn-group > .btn {
&.disabled,
&.blocked,
&[disabled] {
@ -428,7 +472,7 @@ hr {
.wmd-button-row {
padding: 0;
margin-left: 10px;
margin-left: 40px;
}
.wmd-spacer {
@ -652,11 +696,6 @@ div.dropdown-menu textarea {
min-height: 100px;
}
.modal-body {
max-height: 450px;
overflow: auto;
}
.accordion-group {
border: 0;
border-bottom: 1px solid @bg-light;