Upgrade to Bootstrap 3

js/core.js

@@ -391,24 +391,47 @@ define([
             e.stopPropagation();
         });
         
-        var shownModalId = undefined;
+        var menuPanelElt = $('.menu-panel');
-        $(".modal").on('shown', function(e) {
+        var isMenuPanelShown = false;
+        menuPanelElt.on('shown.bs.collapse', function() {
+            isMenuPanelShown = true;
+            // Register a click listener when menu panel is open
+            $(document).on("click.hide-menu-panel", function(e) {
+                if(!$(e.target).is('.menu-panel [data-toggle=collapse]')) {
+                    // If click outside the panel, close the panel and unregister the listener
+                    menuPanelElt.collapse('hide');
+                    $(document).off("click.hide-menu-panel");
+                    isMenuPanelShown = false;
+                }
+            });
+        });
+        
+        var documentPanelElt = $('.document-panel');
+        var isDocumentPanelShown = false;
+        documentPanelElt.on('shown.bs.collapse', function() {
+            isDocumentPanelShown = true;
+            // Register a click listener when document panel is open
+            $(document).on("click.hide-document-panel", function(e) {
+                if(!$(e.target).is('.document-panel [data-toggle=collapse]')) {
+                    // If click outside the panel, close the panel and unregister the listener
+                    documentPanelElt.collapse('hide');
+                    $(document).off("click.hide-document-panel");
+                    isDocumentPanelShown = false;
+                }
+            });
+        });
+        
+        var isModalShown = false;
+        $('.modal').on('shown.bs.modal', function() {
             // Focus on the first input when modal opens
-            var modalId = $(this).attr("id");
+            isModalShown = true;
-            if(shownModalId != modalId) {
+            _.defer(function(elt) {
-                // Hack to avoid conflict with tabs, collapse, tooltips events
+                elt.find("input:enabled:visible:first").focus();
-                shownModalId = modalId;
+            }, $(this));
-                _.defer(function(elt) {
+        }).on('hidden.bs.modal', function() {
-                    elt.find("input:enabled:visible:first").focus();
-                }, $(this));
-            }
-        }).on('hidden', function() {
             // Focus on the editor when modal is gone
-            var modalId = $(this).attr("id");
+            isModalShown = false;
-            if(shownModalId == modalId && $(this).is(":hidden")) {
+            $("#wmd-input").focus();
-                shownModalId = undefined;
-                $("#wmd-input").focus();
-            }
         }).keyup(function(e) {
             // Handle enter key in modals
             if(e.which == 13 && !$(e.target).is("textarea")) {
@@ -418,7 +441,7 @@ define([
 
         // Configure Mousetrap
         mousetrap.stopCallback = function(e, element, combo) {
-            return uiLocked || shownModalId || $(element).is("input, select, textarea:not(#wmd-input)");
+            return uiLocked || isMenuPanelShown || isDocumentPanelShown || isModalShown || $(element).is("input, select, textarea:not(#wmd-input)");
         };
 
         // UI layout
@@ -487,7 +510,7 @@ define([
         });
 
         // Hide events on "insert link" and "insert image" dialogs
-        $("#modal-insert-link, #modal-insert-image").on('hidden', function() {
+        $("#modal-insert-link, #modal-insert-image").on('hidden.bs.modal', function() {
             if(core.insertLinkCallback !== undefined) {
                 core.insertLinkCallback(null);
                 core.insertLinkCallback = undefined;

js/extensions/documentSelector.js

@@ -59,7 +59,7 @@ define([
         }
 
         liMap = {};
-        $("#file-selector li:not(.stick)").empty();
+        $(".file-selector li:not(.stick)").empty();
         _.chain(fileSystem).sortBy(sortFunction).each(function(fileDesc) {
             var a = $('<a href="#">').html(composeTitle(fileDesc)).click(function() {
                 if(!liMap[fileDesc.fileIndex].is(".disabled")) {
@@ -74,7 +74,7 @@ define([
             if(fileDesc === selectFileDesc) {
                 li.addClass("disabled");
             }
-            $("#file-selector").append(li);
+            $(".file-selector").append(li);
         });
         liArray = _.values(liMap);
     };
@@ -94,7 +94,7 @@ define([
 
     // Filter for search input in file selector
     function filterFileSelector(filter) {
-        var liList = $("#file-selector li:not(.stick)");
+        var liList = $(".file-selector li:not(.stick)");
         liList.show();
         if(filter) {
             var words = filter.toLowerCase().split(/\s+/);
@@ -123,7 +123,7 @@ define([
 
         var shortcutLi = undefined;
         $(".action-open-file").click(function() {
-            if($("#file-selector").parent().is(".open")) {
+            if($(".file-selector").parent().is(".open")) {
                 return;
             }
             filterFileSelector();
@@ -153,7 +153,7 @@ define([
         var shortcutPrevious = documentSelector.config.shortcutPrevious.toLowerCase();
         mousetrap.bind(shortcutPrevious, function() {
             if(shortcutLi === undefined) {
-                $("#file-selector").parent().is(".open") || $(".action-open-file").click();
+                $(".file-selector").parent().is(".open") || $(".action-open-file").click();
                 shortcutLi = liMap[selectFileDesc.fileIndex];
             }
             var liIndex = _.indexOf(liArray, shortcutLi) - 1;
@@ -169,7 +169,7 @@ define([
         var shortcutNext = documentSelector.config.shortcutNext.toLowerCase();
         mousetrap.bind(documentSelector.config.shortcutNext.toLowerCase(), function() {
             if(shortcutLi === undefined) {
-                $("#file-selector").parent().is(".open") || $(".action-open-file").click();
+                $(".file-selector").parent().is(".open") || $(".action-open-file").click();
                 shortcutLi = liMap[selectFileDesc.fileIndex];
             }
             var liIndex = _.indexOf(liArray, shortcutLi) + 1;

js/html/bodyIndex.html

@@ -14,19 +14,18 @@
 				<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></li>
-				<button class="btn btn-success dropdown-toggle action-open-file"
+			<li>
-					data-toggle="dropdown" title="Open local document">
+				<button data-toggle="dropdown" class="action-open-file hide"></button>
-					<i class="icon-folder-open"></i>
+				<ul class="dropdown-menu file-selector">
-				</button>
-				<ul id="file-selector" class="dropdown-menu">
 					<li class="stick">
-						<div class="input-prepend">
+						<div class="input-group">
-							<span class="add-on"><i class="icon-search"></i></span><input
+							<span class="input-group-addon"><i class="icon-search"></i></span><input
 								type="text" id="file-search" class="col-lg-3 form-control">
 						</div>
 					</li>
-				</ul></li>
+				</ul>
+			</li>
 		</ul>
 		<ul class="nav pull-right">
 			<li><i class="working-indicator icon-none"></i></li>
@@ -41,6 +40,14 @@
 <div class="ui-layout-east preview-container"></div>
 <div class="ui-layout-south preview-container"></div>
 
+
+<div class="document-panel nav-collapse collapse">
+	<button class="btn btn-success document-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>
 <div class="menu-panel nav-collapse collapse">
 	<button class="btn btn-success menu-button" data-toggle="collapse"
 		data-target=".menu-panel" title="Menu">
@@ -99,19 +106,22 @@
 		<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>
+				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">
+		<ul class="nav">
-			<a href="#" data-toggle="modal" data-target="#modal-settings"
+			<li><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
+					Settings</a></li>
-				class="icon-help-circled"></i> About</a>
+			<li><a href="#" data-toggle="modal" data-target="#modal-about"
-		</div>
+				class=" list-group-item"><i class="icon-help-circled"></i> About</a></li>
+		</ul>
+
 	</div>
 </div>
 
@@ -127,8 +137,8 @@
 			</div>
 			<div class="modal-body">
 				<p>Please provide the link URL and an optional title:</p>
-				<div class="input-prepend">
+				<div class="input-group">
-					<span class="add-on"><i class="icon-globe"></i></span><input
+					<span class="input-group-addon"><i class="icon-globe"></i></span><input
 						id="input-insert-link" type="text" class="col-lg-5 form-control"
 						placeholder='http://example.com/ "optional title"'></input>
 				</div>
@@ -154,8 +164,8 @@
 			</div>
 			<div class="modal-body">
 				<p>Please provide the image URL and an optional title:</p>
-				<div class="input-prepend">
+				<div class="input-group">
-					<span class="add-on"><i class="icon-picture"></i></span><input
+					<span class="input-group-addon"><i class="icon-picture"></i></span><input
 						id="input-insert-image" type="text" class="col-lg-5 form-control"
 						placeholder='http://example.com/image.jpg "optional title"'></input>
 				</div>
@@ -201,7 +211,7 @@
 							for="input-import-image-size">Size limit (optional)</label>
 						<div class="col-lg-7">
 							<input type="text" id="input-import-image-size" placeholder="123"
-								class="col-lg-2 form-control"><span class="help-inline">px</span>
+								class="col-lg-3 form-control"> px
 						</div>
 					</div>
 				</div>

js/libs/Markdown.Editor.js

@@ -1349,10 +1349,11 @@
         function doClick(button) {
 
             inputBox.focus();
+            var linkOrImage = button.id == "wmd-link-button" || button.id == "wmd-image-button";
 
             if (button.textOp) {
 
-                if (undoManager) {
+                if (undoManager && !linkOrImage) {
                     undoManager.setCommandMode();
                 }
 
@@ -1397,7 +1398,9 @@
 
                 if (!noCleanup) {
                     fixupInputArea();
-                    inputBox.dispatchEvent(new Event('input'));
+                    if(!linkOrImage) {
+                        inputBox.dispatchEvent(new Event('input'));
+                    }
                 }
 
             }

js/libs/fontello/config.json

@@ -601,13 +601,7 @@
     {
       "uid": "f8aa663c489bcbd6e68ec8147dca841e",
       "css": "folder",
-      "code": 59720,
+      "code": 59433,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "c95735c17a10af81448c7fed98a04546",
-      "css": "folder-open",
-      "code": 59481,
       "src": "fontawesome"
     },
     {
@@ -1899,6 +1893,12 @@
       "css": "code",
       "code": 59460,
       "src": "websymbols"
+    },
+    {
+      "uid": "f242fed2af708c938523b0e14d9c6b07",
+      "css": "folder-open",
+      "code": 59422,
+      "src": "websymbols"
     }
   ]
 }

js/libs/fontello/css/fontello-codes.css

@@ -285,8 +285,8 @@
 .icon-credit-card:before { content: '\e965'; } /* '' */
 .icon-briefcase:before { content: '\e8c7'; } /* '' */
 .icon-floppy:before { content: '\e966'; } /* '' */
-.icon-folder:before { content: '\e948'; } /* '' */
+.icon-folder-open:before { content: '\e81e'; } /* '' */
-.icon-folder-open:before { content: '\e859'; } /* '' */
+.icon-folder:before { content: '\e829'; } /* '' */
 .icon-doc:before { content: '\e857'; } /* '' */
 .icon-calendar:before { content: '\e866'; } /* '' */
 .icon-chart-bar:before { content: '\e90f'; } /* '' */

js/libs/fontello/css/fontello-ie7-codes.css

@@ -285,8 +285,8 @@
 .icon-credit-card { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-briefcase { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-floppy { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-folder { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-folder-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-folder-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-folder { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-doc { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-calendar { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-chart-bar { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

js/libs/fontello/css/fontello-ie7.css

@@ -296,8 +296,8 @@
 .icon-credit-card { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-briefcase { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-floppy { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-folder { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-folder-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-folder-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-folder { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-doc { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-calendar { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-chart-bar { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

js/libs/fontello/css/fontello.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../font/fontello.eot?9854690');
+  src: url('../font/fontello.eot?29551761');
-  src: url('../font/fontello.eot?9854690#iefix') format('embedded-opentype'),
+  src: url('../font/fontello.eot?29551761#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff?9854690') format('woff'),
+       url('../font/fontello.woff?29551761') format('woff'),
-       url('../font/fontello.ttf?9854690') format('truetype'),
+       url('../font/fontello.ttf?29551761') format('truetype'),
-       url('../font/fontello.svg?9854690#fontello') format('svg');
+       url('../font/fontello.svg?29551761#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -14,7 +14,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../font/fontello.svg?9854690#fontello') format('svg');
+    src: url('../font/fontello.svg?29551761#fontello') format('svg');
   }
 }
 */
@@ -336,8 +336,8 @@
 .icon-credit-card:before { content: '\e965'; } /* '' */
 .icon-briefcase:before { content: '\e8c7'; } /* '' */
 .icon-floppy:before { content: '\e966'; } /* '' */
-.icon-folder:before { content: '\e948'; } /* '' */
+.icon-folder-open:before { content: '\e81e'; } /* '' */
-.icon-folder-open:before { content: '\e859'; } /* '' */
+.icon-folder:before { content: '\e829'; } /* '' */
 .icon-doc:before { content: '\e857'; } /* '' */
 .icon-calendar:before { content: '\e866'; } /* '' */
 .icon-chart-bar:before { content: '\e90f'; } /* '' */

js/libs/fontello/demo.html

@@ -685,8 +685,8 @@ body {
       <div class="row">
         <div title="Code: 0xe8c7" class="the-icons span3"><i class="icon-briefcase"></i> <span class="i-name">icon-briefcase</span><span class="i-code">0xe8c7</span></div>
         <div title="Code: 0xe966" class="the-icons span3"><i class="icon-floppy"></i> <span class="i-name">icon-floppy</span><span class="i-code">0xe966</span></div>
-        <div title="Code: 0xe948" class="the-icons span3"><i class="icon-folder"></i> <span class="i-name">icon-folder</span><span class="i-code">0xe948</span></div>
+        <div title="Code: 0xe81e" class="the-icons span3"><i class="icon-folder-open"></i> <span class="i-name">icon-folder-open</span><span class="i-code">0xe81e</span></div>
-        <div title="Code: 0xe859" class="the-icons span3"><i class="icon-folder-open"></i> <span class="i-name">icon-folder-open</span><span class="i-code">0xe859</span></div>
+        <div title="Code: 0xe829" class="the-icons span3"><i class="icon-folder"></i> <span class="i-name">icon-folder</span><span class="i-code">0xe829</span></div>
       </div>
       <div class="row">
         <div title="Code: 0xe857" class="the-icons span3"><i class="icon-doc"></i> <span class="i-name">icon-doc</span><span class="i-code">0xe857</span></div>

js/libs/fontello/font/fontello.svg

@@ -292,8 +292,8 @@
 <glyph glyph-name="credit-card" unicode="&#xe965;" d="M982 779q37 0 63-26t26-63l0-679q0-37-26-63t-63-26l-893 0q-37 0-63 26t-26 63l0 679q0 37 26 63t63 26l893 0z m-893-71q-7 0-13-5t-5-13l0-125 929 0 0 125q0 7-5 13t-13 5l-893 0z m893-714q7 0 13 5t5 13l0 339-929 0 0-339q0-7 5-13t13-5l893 0z m-839 71l0 71 143 0 0-71-143 0z m214 0l0 71 214 0 0-71-214 0z" horiz-adv-x="1071.429" />
 <glyph glyph-name="briefcase" unicode="&#xe8c7;" d="M357 707l286 0 0 71-286 0 0-71z m643-357l0-268q0-37-26-63t-63-26l-821 0q-37 0-63 26t-26 63l0 268 375 0 0-89q0-15 11-25t25-11l179 0q15 0 25 11t11 25l0 89 375 0z m-429 0l0-71-143 0 0 71 143 0z m429 268l0-214-1000 0 0 214q0 37 26 63t63 26l196 0 0 89q0 22 16 38t38 16l321 0q22 0 38-16t16-38l0-89 196 0q37 0 63-26t26-63z" horiz-adv-x="1000" />
 <glyph glyph-name="floppy" unicode="&#xe966;" d="M214-7l429 0 0 214-429 0 0-214z m500 0l71 0 0 500q0 8-6 21t-11 19l-157 157q-6 6-19 11t-22 6l0-232q0-22-16-38t-38-16l-321 0q-22 0-38 16t-16 38l0 232-71 0 0-714 71 0 0 232q0 22 16 38t38 16l464 0q22 0 38-16t16-38l0-232z m-214 518l0 179q0 7-5 13t-13 5l-107 0q-7 0-13-5t-5-13l0-179q0-7 5-13t13-5l107 0q7 0 13 5t5 13z m357-18l0-518q0-22-16-38t-38-16l-750 0q-22 0-38 16t-16 38l0 750q0 22 16 38t38 16l518 0q22 0 49-11t42-27l156-156q16-16 27-42t11-49z" horiz-adv-x="857.143" />
-<glyph glyph-name="folder" unicode="&#xe948;" d="M929 511l0-393q0-51-37-88t-88-37l-679 0q-51 0-88 37t-37 88l0 536q0 51 37 88t88 37l179 0q51 0 88-37t37-88l0-18 375 0q51 0 88-37t37-88z" horiz-adv-x="928.571" />
+<glyph glyph-name="folder-open" unicode="&#xe81e;" d="M1313 632l-1235 0q9 48 27 67 16 17 31 17l4 0q4-1 8-1 12 0 26 4 18 6 25 29l24 72q77 29 208 29 89 0 164-29l25-72q24-23 33-26t44-3l485 0q84 0 110-22 12-11 22-65z m78-164l0-10-68-523q-5-35-34-61t-65-26l-1058 0q-36 0-66 26t-34 61l-67 523q-1 3-1 10 0 33 23 55t56 22l1235 0q33 0 56-22t23-55z" horiz-adv-x="1391" />
-<glyph glyph-name="folder-open" unicode="&#xe859;" d="M1048 319q0-17-17-37l-187-221q-24-28-67-48t-80-20l-607 0q-19 0-34 7t-15 24q0 17 17 37l187 221q24 28 67 48t80 20l607 0q19 0 34-7t15-24z m-191 192l0-89-464 0q-52 0-110-27t-92-67l-188-221-3-3q0 2 0 7t0 7l0 536q0 51 37 88t88 37l179 0q51 0 88-37t37-88l0-18 304 0q51 0 88-37t37-88z" horiz-adv-x="1071.429" />
+<glyph glyph-name="folder" unicode="&#xe829;" d="M929 511l0-393q0-51-37-88t-88-37l-679 0q-51 0-88 37t-37 88l0 536q0 51 37 88t88 37l179 0q51 0 88-37t37-88l0-18 375 0q51 0 88-37t37-88z" horiz-adv-x="928.571" />
 <glyph glyph-name="doc" unicode="&#xe857;" d="M71-7l571 0 0 429-232 0q-22 0-38 16t-16 38l0 232-286 0 0-714z m357 500l210 0q-6 16-12 23l-175 175q-7 7-23 12l0-210z m286-18l0-500q0-22-16-38t-38-16l-607 0q-22 0-38 16t-16 38l0 750q0 22 16 38t38 16l357 0q22 0 49-11t42-27l174-174q16-16 27-42t11-49z" horiz-adv-x="714.286" />
 <glyph glyph-name="calendar" unicode="&#xe866;" d="M71-79l161 0 0 161-161 0 0-161z m196 0l179 0 0 161-179 0 0-161z m-196 196l161 0 0 179-161 0 0-179z m196 0l179 0 0 179-179 0 0-179z m-196 214l161 0 0 161-161 0 0-161z m411-411l179 0 0 161-179 0 0-161z m-214 411l179 0 0 161-179 0 0-161z m429-411l161 0 0 161-161 0 0-161z m-214 196l179 0 0 179-179 0 0-179z m-196 482l0 161q0 7-5 13t-13 5l-36 0q-7 0-13-5t-5-13l0-161q0-7 5-13t13-5l36 0q7 0 13 5t5 13z m411-482l161 0 0 179-161 0 0-179z m-214 214l179 0 0 161-179 0 0-161z m214 0l161 0 0 161-161 0 0-161z m18 268l0 161q0 7-5 13t-13 5l-36 0q-7 0-13-5t-5-13l0-161q0-7 5-13t13-5l36 0q7 0 13 5t5 13z m214 36l0-714q0-29-21-50t-50-21l-786 0q-29 0-50 21t-21 50l0 714q0 29 21 50t50 21l71 0 0 54q0 37 26 63t63 26l36 0q37 0 63-26t26-63l0-54 214 0 0 54q0 37 26 63t63 26l36 0q37 0 63-26t26-63l0-54 71 0q29 0 50-21t21-50z" horiz-adv-x="928.571" />
 <glyph glyph-name="chart-bar" unicode="&#xe90f;" d="M688-97l0 893 223 0 0-893-223 0z m-335 0l0 670 223 0 0-670-223 0z m-335 0l0 447 223 0 0-447-223 0z" horiz-adv-x="928" />

js/styles/default.less

@@ -6,7 +6,8 @@
 @error-border: #ff8661;
 @icon-color: #525252;
 @icon-color-inv: #fff;
-@menu-width: 250px;
+@menu-panel-width: 250px;
+@document-panel-width: 250px;
 @menu-bg: @bg-navbar-hover;
 @transparent: fade(#000, 0%);
 
@@ -32,51 +33,6 @@
 @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 {
 	tab-size: 4;
@@ -202,6 +158,8 @@ Override Bootstrap
  
 .navbar {
 	position: static;
+	padding-left: 55px;
+	padding-right: 35px;
 	.nav {
 		float: left;
 		margin: 6px 0 0;
@@ -232,54 +190,24 @@ Override Bootstrap
 			}
 		}
 	}
+	
+	// Dropdown menus
 	.btn-group.open .dropdown-toggle {
 		background-color: @bg-navbar-hover;
 	}
-	
+	.dropdown-menu > li > a > i {
-	// Support for dropdown submenu (from Bootstrap v2)
+		margin-right: 5px;
-	.dropdown-submenu {
-		position: relative;
-		
-		& > .dropdown-menu {
-			top: 0;
-			left: 100%;
-			margin-top: -6px;
-			margin-left: -1px;
-		}
-		
-		&:hover {
-			& > a {
-			    color: @dropdown-link-hover-color;
-			    #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
-				&:after {
-					border-left-color: @dropdown-link-hover-color;
-				}
-			}
-			& > .dropdown-menu {
-				display: block;
-			}
-		}
-		
-		& > a:after {
-			display: block;
-			float: right;
-			width: 0;
-			height: 0;
-			margin-top: 5px;
-			margin-right: -10px;
-			border-color: transparent;
-			border-left-color: #cccccc;
-			border-style: solid;
-			border-width: 5px 0 5px 5px;
-			content: " ";
-		}
 	}
 	
-	#file-selector {
+	
+	.file-selector {
+		top: 30px;
+		right: -10px !important;
 		max-height: 500px;
+		min-width: 280px;
 		overflow-y: auto;
 		.stick {
-			padding: 10px 20px 0;
+			padding: 10px 20px;
 		}
 	}
 	
@@ -307,6 +235,108 @@ Override Bootstrap
 }
 
 
+/*********************
+ * Menu panel
+ *********************/
+ 
+.menu-panel {
+	position: absolute;
+	height: 100% !important;
+	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;
+        -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: 6px;
+		padding: 2px 20px;
+		z-index: -1;
+	}
+	.menu-container {
+		overflow: auto;
+		height: 100%;
+		i {
+			margin-right: 5px;
+			color: inherit;
+		}
+		.list-group {
+			margin-top: 6px;
+			.list-group-item {
+				color: @btn-default-color;
+			}
+		}		
+	}
+}
+
+
+/*********************
+ * Document panel
+ *********************/
+ 
+.document-panel {
+	position: absolute;
+	right: 0;
+	height: 100% !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 {
+        	background-color: @menu-bg;
+        }
+    }
+    .document-button {
+	    left: -80px;
+		position: absolute;
+		margin-top: 6px;
+		padding: 7px 18px;
+		z-index: -1;
+		i.icon-folder-open {
+			color: #777;
+       		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
  ********************/
@@ -450,10 +480,6 @@ hr {
 	margin: 30px 0;
 }
 
-.dropdown-menu i {
-	margin-right: 5px;
-}
-
 
 #wmd-input {
 	-webkit-box-shadow: none !important;
@@ -472,7 +498,6 @@ hr {
 
 .wmd-button-row {
 	padding: 0;
-	margin-left: 40px;
 }
 
 .wmd-spacer {
@@ -578,6 +603,12 @@ div.dropdown-menu textarea {
 	margin-right: 5px;
 }
 
+.icon-folder-open {
+	font-size: 80%;
+	margin-left: -1px;
+	margin-right: 5px;
+}
+
 .icon-chart-bar {
 	font-size: 90%;
 	margin-right: 2px;