Upgrade to Bootstrap 3

css/jgrowl.css

@@ -60,7 +60,7 @@ div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
 }
 
 div.jGrowl div.jGrowl-notification {
-	min-height: 			40px;
+	min-height: 			70px;
 }
 
 div.jGrowl div.jGrowl-notification,

js/core.js

@@ -157,8 +157,21 @@ define([
         }
     }
 
-    // Create the layout
+    // Set the panels visibility
     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();
+        }
+    }
+    
+    // Create the layout
     function createLayout() {
         if(viewerMode === true) {
             return;
@@ -175,7 +188,15 @@ define([
             togglerLength_closed: 90,
             stateManagement__enabled: false,
             center__minWidth: 200,
-            center__minHeight: 200
+            center__minHeight: 200,
+            onopen: function() {
+                setPanelVisibility();
+            },
+            onclose_start: function(paneName) {
+                if(paneName == 'north') {
+                    setPanelVisibility(true);
+                }
+            },
         };
         eventMgr.onLayoutConfigure(layoutGlobalConfig);
         if(settings.layoutOrientation == "horizontal") {
@@ -202,6 +223,7 @@ define([
         $(".ui-layout-toggler-north").addClass("btn btn-info").append($("<b>").addClass("caret"));
         $(".ui-layout-toggler-south").addClass("btn btn-info").append($("<b>").addClass("caret"));
         $(".ui-layout-toggler-east").addClass("btn btn-info").append($("<b>").addClass("caret"));
+        setPanelVisibility();
 
         eventMgr.onLayoutCreated(layout);
     }
@@ -391,7 +413,7 @@ define([
             e.stopPropagation();
         });
         
-        var menuPanelElt = $('.menu-panel');
+        menuPanelElt = $('.menu-panel');
         var isMenuPanelShown = false;
         menuPanelElt.on('shown.bs.collapse', function() {
             isMenuPanelShown = true;
@@ -406,7 +428,7 @@ define([
             });
         });
         
-        var documentPanelElt = $('.document-panel');
+        documentPanelElt = $('.document-panel');
         var isDocumentPanelShown = false;
         documentPanelElt.on('shown.bs.collapse', function() {
             isDocumentPanelShown = true;

js/extensions/documentSelector.js

@@ -59,9 +59,14 @@ define([
         }
 
         liMap = {};
-        $(".file-selector li:not(.stick)").empty();
+        var fileSelectorElt = $(".file-selector");
+        fileSelectorElt.empty();
+        var documentPanelSelectorElt = $(".document-panel > .panel-content > .list-group");
+        documentPanelSelectorElt.empty();
         _.chain(fileSystem).sortBy(sortFunction).each(function(fileDesc) {
-            var a = $('<a href="#">').html(composeTitle(fileDesc)).click(function() {
+            var a = $('<a href="#">').html(composeTitle(fileDesc));
+            var documentPanelItemElt = a.clone().addClass('list-group-item');
+            documentPanelItemElt.add(a).click(function() {
                 if(!liMap[fileDesc.fileIndex].is(".disabled")) {
                     fileMgr.selectFile(fileDesc);
                 }
@@ -73,8 +78,10 @@ define([
             liMap[fileDesc.fileIndex] = li;
             if(fileDesc === selectFileDesc) {
                 li.addClass("disabled");
+                documentPanelItemElt.addClass("active");
             }
-            $(".file-selector").append(li);
+            fileSelectorElt.append(li);
+            documentPanelSelectorElt.append(documentPanelItemElt);
         });
         liArray = _.values(liMap);
     };
@@ -94,7 +101,7 @@ define([
 
     // Filter for search input in file selector
     function filterFileSelector(filter) {
-        var liList = $(".file-selector li:not(.stick)");
+        var liList = $(".file-selector > li");
         liList.show();
         if(filter) {
             var words = filter.toLowerCase().split(/\s+/);

js/extensions/documentTitle.js

@@ -38,9 +38,9 @@ define([
 
         var title = fileDesc.title;
         document.title = "StackEdit - " + title;
-        $("#file-title").html(composeTitle(fileDesc));
+        $(".file-title-navbar").html(composeTitle(fileDesc));
         $(".file-title").text(title);
-        $("#file-title-input").val(title);
+        $(".input-file-title").val(title);
 
         if(layout !== undefined) {
             // Use defer to make sure UI has been updated

js/fileMgr.js

@@ -154,6 +154,8 @@ define([
 
         fileMgr.selectFile();
 
+        var fileTitleElt = $('.file-title-navbar');
+        var fileTitleInputElt = $(".input-file-title");
         $(".action-create-file").click(function() {
             var fileDesc = fileMgr.createFile();
             fileMgr.selectFile(fileDesc);
@@ -161,42 +163,42 @@ define([
             if(wmdInput.setSelectionRange) {
                 wmdInput.setSelectionRange(0, 0);
             }
-            $("#file-title").click();
+            fileTitleElt.click();
         });
         $(".action-remove-file").click(function() {
             fileMgr.deleteFile();
         });
-        $("#file-title").click(function() {
+        fileTitleElt.click(function() {
             if(viewerMode === true) {
                 return;
             }
-            $(this).hide();
+            fileTitleElt.addClass('hide');
-            var fileTitleInput = $("#file-title-input").show();
+            var fileTitleInput = fileTitleInputElt.removeClass('hide');
             _.defer(function() {
                 fileTitleInput.focus().get(0).select();
             });
         });
-        function applyTitle(input) {
+        function applyTitle() {
-            input.hide();
+            fileTitleInputElt.addClass('hide');
-            $("#file-title").show();
+            fileTitleElt.removeClass('hide');
-            var title = $.trim(input.val());
+            var title = $.trim(fileTitleInputElt.val());
             var fileDesc = fileMgr.currentFile;
             if(title && title != fileDesc.title) {
                 fileDesc.title = title;
                 eventMgr.onTitleChanged(fileDesc);
             }
-            input.val(fileDesc.title);
+            fileTitleInputElt.val(fileDesc.title);
             $("#wmd-input").focus();
         }
-        $("#file-title-input").blur(function() {
+        fileTitleInputElt.blur(function() {
-            applyTitle($(this));
+            applyTitle();
         }).keyup(function(e) {
             if(e.keyCode == 13) {
-                applyTitle($(this));
+                applyTitle();
             }
             if(e.keyCode == 27) {
-                $(this).val("");
+                fileTitleInputElt.val("");
-                applyTitle($(this));
+                applyTitle();
             }
         });
         $(".action-open-stackedit").click(function() {

js/html/bodyIndex.html

@@ -28,11 +28,13 @@
 			</li>
 		</ul>
 		<ul class="nav pull-right">
-			<li><i class="working-indicator icon-none"></i></li>
+			<li><a class="btn btn-success file-title-navbar" 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"
+			<li><input type="text"
-				class="col-lg-3 form-control hide" placeholder="Document title" /></li>
+				class="col-lg-4 form-control hide input-file-title" placeholder="Document title" /></li>
+		</ul>
+		<ul class="nav pull-right">
+			<li><i class="working-indicator icon-none"></i></li>
 		</ul>
 	</div>
 </div>
@@ -41,20 +43,23 @@
 <div class="ui-layout-south preview-container"></div>
 
 
-<div class="document-panel nav-collapse collapse">
+<div class="document-panel collapse width">
-	<button class="btn btn-success document-button" data-toggle="collapse"
+	<button class="btn btn-success collapse-button" data-toggle="collapse"
 		data-target=".document-panel" title="Menu">
 		<i class="icon-folder-open"></i> <i class="icon-right-dir"></i>
 	</button>
-	<div class="document-container"></div>
+	<div class="panel-content">
+		<div class="list-group">
+		</div>
+		</div>
 </div>
-<div class="menu-panel nav-collapse collapse">
+<div class="menu-panel collapse width">
-	<button class="btn btn-success menu-button" data-toggle="collapse"
+	<button class="btn btn-success collapse-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="panel-content">
 		<div class="list-group">
 			<a href="viewer.html" title="StackEdit Viewer"
 				class="list-group-item"><i class="icon-resize-full"></i>

js/html/bodyViewer.html

@@ -44,7 +44,7 @@
 		</ul>
 		<ul class="nav pull-right">
 			<li><i class="working-indicator icon-none"></i></li>
-			<li><span class="brand" id="file-title"></span></li>
+			<li><span class="brand file-title-navbar"></span></li>
 		</ul>
 	</div>
 </div>

js/styles/default.less

@@ -8,7 +8,7 @@
 @icon-color-inv: #fff;
 @menu-panel-width: 250px;
 @document-panel-width: 250px;
-@menu-bg: @bg-navbar-hover;
+@panel-bg: @bg-navbar-hover;
 @transparent: fade(#000, 0%);
 
 /* Bootstrap */
@@ -18,6 +18,8 @@
 @navbar-bg: #ddd;
 @dropdown-link-hover-bg: #888;
 @dropdown-link-active-color: #fff;
+@list-group-border: @transparent;
+@list-group-active-bg: @dropdown-link-hover-bg;
 @input-color-placeholder: #ccc;
 @btn-default-color: #333333;
 @btn-default-bg: #fff;
@@ -31,7 +33,6 @@
 @btn-info-bg: @body-bg;
 @btn-info-border: @transparent;
 @gray-lighter: @body-bg;
-@list-group-border: @transparent;
 
 
 body {
@@ -158,11 +159,14 @@ Override Bootstrap
  
 .navbar {
 	position: static;
-	padding-left: 55px;
+	padding: 0;	
-	padding-right: 35px;
+	.navbar-inner {
+		margin-left: 50px;
+		margin-right: 30px;
+	}
 	.nav {
 		float: left;
-		margin: 6px 0 0;
+		margin: 6px 5px 0;
 		& > li {
 			display: inline-block;
 		}
@@ -211,9 +215,8 @@ Override Bootstrap
 		}
 	}
 	
-	#file-title {
+	.file-title-navbar {
 		padding: 4px 15px;
-		margin-left: -20px;
 		font-size: 20px;
 		font-weight: 200;
 		color: #666;
@@ -222,12 +225,16 @@ Override Bootstrap
 		}
 	}
 	
+	.input-file-title {
+		margin-right: 10px;
+	}
+
 	.working-indicator {
 		background-image: none !important;
 		width: 43px;
 		height: 11px;
 		background-position: 0 0;
-		margin-right: 30px;
+		margin: 15px 10px 0;
 		&.show {
 			background-image: url("../../img/ajax-loader.gif") !important;
 		}
@@ -236,37 +243,20 @@ Override Bootstrap
 
 
 /*********************
- * Menu panel
+ * Menu/Document panels
  *********************/
 
-.menu-panel {
+// Common style 
+.menu-panel, .document-panel {
+	background-color: @panel-bg;
 	position: absolute;
-	height: 100% !important;
+	height: 100%;
-	width: @menu-panel-width;
 	z-index: 10;
-	margin-left: (-@menu-panel-width - 30);
-	background-color: @menu-bg;
-	border-right: 1px solid @dropdown-border;
-	.box-shadow(0 6px 12px rgba(0,0,0,.175));
 	overflow: initial;
-	-webkit-transition: margin-left 0.35s ease;
+	.box-shadow(0 6px 12px rgba(0,0,0,.175));
-        -moz-transition: margin-left 0.35s ease;
+	.panel-content {
-        -o-transition: margin-left 0.35s ease;
+		padding-top: 6px;
-        transition: margin-left 0.35s ease;
+		padding-bottom: 25px;
-	&.in {
-        margin-left: 0;
-        .menu-button {
-        	background-color: @menu-bg;
-        }
-    }
-    .menu-button {
-	    right: -80px;
-		position: absolute;
-		margin-top: 6px;
-		padding: 2px 20px;
-		z-index: -1;
-	}
-	.menu-container {
 		overflow: auto;
 		height: 100%;
 		i {
@@ -274,41 +264,60 @@ Override Bootstrap
 			color: inherit;
 		}
 		.list-group {
-			margin-top: 6px;
 			.list-group-item {
+				border-radius: 0;
 				color: @btn-default-color;
+				&.active {
+					color: @text-inv;
+				}
+			}
+			.nav {
+				border-left: 10px solid @panel-bg;
+				margin-left: 10px;
 			}
 		}		
 	}
 }
 
-
+.menu-panel {
-/*********************
+	width: @menu-panel-width !important;
- * Document panel
+	margin-left: (-@menu-panel-width - 30);
- *********************/
+	border-right: 1px solid @dropdown-border;
+	-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;
+        .collapse-button {
+        	background-color: @panel-bg;
+        }
+    }
+    .collapse-button {
+	    right: -80px;
+		position: absolute;
+		margin-top: 6px;
+		padding: 2px 20px;
+		z-index: -1;
+	}
+}
 
 .document-panel {
-	position: absolute;
 	right: 0;
-	height: 100% !important;
+	width: @document-panel-width !important;
-	width: @document-panel-width;
-	z-index: 10;
 	margin-right: (-@document-panel-width - 30);
-	background-color: @menu-bg;
 	border-left: 1px solid @dropdown-border;
-	.box-shadow(0 6px 12px rgba(0,0,0,.175));
-	overflow: initial;
 	-webkit-transition: margin-right 0.35s ease;
     -moz-transition: margin-right 0.35s ease;
     -o-transition: margin-right 0.35s ease;
     transition: margin-right 0.35s ease;
 	&.in {
         margin-right: 0;
-        .document-button {
+        .collapse-button {
-        	background-color: @menu-bg;
+        	background-color: @panel-bg;
         }
     }
-    .document-button {
+    .collapse-button {
 	    left: -80px;
 		position: absolute;
 		margin-top: 6px;
@@ -319,24 +328,9 @@ Override Bootstrap
        		font-size: 22px;
        	}
 	}
-	.document-container {
-		overflow: auto;
-		height: 100%;
-		i {
-			margin-right: 5px;
-			color: inherit;
-		}
-		.list-group {
-			margin-top: 6px;
-			.list-group-item {
-				color: @btn-default-color;
-			}
-		}		
-	}
 }
 
 
-
 /********************
  * Extensions buttons
  ********************/