Upgrade to Bootstrap 3

js/core.js

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

js/html/bodyIndex.html

@@ -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="#"
+				<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
-					class="btn btn-primary action-insert-link" data-dismiss="modal">OK</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
+					data-dismiss="modal"><i class="icon-provider-gplus"></i> Import
-					Google+</a> <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> <a
+					from Google+</a> <a href="#" class="btn btn-default"
-					href="#" class="btn btn-primary action-insert-image"
+					data-dismiss="modal">Cancel</a> <a href="#"
-					data-dismiss="modal">OK</a>
+					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="#"
+				<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
-					class="btn btn-primary action-import-image" data-dismiss="modal">OK</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="#"
+				<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
-					class="btn btn-primary action-remove-file" data-dismiss="modal">Delete</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="#"
+				<a href="#" class="btn btn-default" data-dismiss="modal">Close</a> <a
-					class="btn btn-primary action-convert-html" data-dismiss="modal">OK</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="#"
+				<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
-					data-dismiss="modal"
+				<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="#"
+				<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
-					data-dismiss="modal"
+				<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"
+						class="icon-provider-gdrive"></i></span><input
-						type="text" class="col-lg-5 form-control"
+						id="input-sync-manual-gdrive-id" type="text"
-						placeholder="GoogleDriveFileID"></input> <a
+						class="col-lg-5 form-control" placeholder="GoogleDriveFileID"></input>
-						class="btn btn-default action-sync-manual-gdrive" title="Add location"
+					<a class="btn btn-default action-sync-manual-gdrive"
-						data-dismiss="modal"><i class="icon-ok"></i></a>
+						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"
+					<a class="btn btn-default action-sync-manual-dropbox"
-						data-dismiss="modal"><i class="icon-ok"></i></a>
+						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="#"
+				<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
-					data-dismiss="modal" class="btn btn-primary action-process-publish">OK</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="#"
+				<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
-					class="btn btn-primary action-apply-settings" data-dismiss="modal">OK</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="#"
+				<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
-					class="btn btn-primary action-app-reset" data-dismiss="modal">OK</a>
+				<a href="#" class="btn btn-primary action-app-reset"
+					data-dismiss="modal">OK</a>
 			</div>
 		</div>
 	</div>

js/html/buttonPublish.html

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

js/html/buttonShare.html

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

js/html/buttonSync.html

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

js/publisher.js

@@ -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() {

js/styles/default.less

@@ -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,
+	.btn-group > .btn {
-	#file-title {
-		background-color: @navbar-bg;
-		border-color: @navbar-bg;
-		&:hover,
-		&:focus,
-		&:active,
-		&.active {
-			background-color: @bg-navbar-hover;
-		}
 		&.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;