Upgrade to Bootstrap 3

js/extensions/buttonShare.js

@@ -19,8 +19,8 @@ define([
             return;
         }
 
-        var linkList = $("#link-container .link-list").empty();
+        var linkList = $(".link-container .link-list").empty();
-        $("#link-container .no-link").show();
+        $(".link-container .no-link").show();
 
         var attributesList = _.values(fileDesc.publishLocations);
         _.each(attributesList, function(attributes) {
@@ -29,7 +29,7 @@ define([
                     link: attributes.sharingLink
                 }));
                 linkList.append(lineElement);
-                $("#link-container .no-link").hide();
+                $(".link-container .no-link").hide();
             }
         });
     };

js/html/bodyIndex.html

@@ -4,7 +4,7 @@
 		<ul class="nav">
 			<li><div id="wmd-button-bar"></div></li>
 		</ul>
-		<ul class="nav pull-right" id="menu-bar">
+		<ul class="nav pull-right">
 			<li id="extension-buttons"></li>
 			<li class="btn-group"><button class="btn btn-default action-create-file"
 					title="New local document">
@@ -91,7 +91,7 @@
 		</ul>
 		<ul class="nav pull-right">
 			<li><i class="working-indicator icon-none"></i></li>
-			<li><a class="brand" id="file-title" href="#"
+			<li><a class="btn btn-default" 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>
@@ -447,7 +447,7 @@
 			</div>
 			<div class="modal-body">
 				<div class="form-horizontal">
-					<div class="control-group modal-publish-ssh">
+					<div class="form-group modal-publish-ssh">
 						<label class="col-lg-4 control-label" for="input-publish-ssh-host">Host</label>
 						<div class="col-lg-7">
 							<input type="text" id="input-publish-ssh-host"
@@ -459,15 +459,15 @@
 							</span>
 						</div>
 					</div>
-					<div class="control-group modal-publish-ssh">
+					<div class="form-group modal-publish-ssh">
 						<label class="col-lg-4 control-label" for="input-publish-ssh-port">Port
 							(optional)</label>
-						<div class="col-lg-7">
+						<div class="col-lg-2">
 							<input type="text" id="input-publish-ssh-port" placeholder="22"
 								class="form-control">
 						</div>
 					</div>
-					<div class="control-group modal-publish-ssh">
+					<div class="form-group modal-publish-ssh">
 						<label class="col-lg-4 control-label"
 							for="input-publish-ssh-username">Username</label>
 						<div class="col-lg-7">
@@ -475,7 +475,7 @@
 								placeholder="username" class="form-control">
 						</div>
 					</div>
-					<div class="control-group modal-publish-ssh">
+					<div class="form-group modal-publish-ssh">
 						<label class="col-lg-4 control-label"
 							for="input-publish-ssh-password">Password</label>
 						<div class="col-lg-7">
@@ -488,7 +488,7 @@
 							</span>
 						</div>
 					</div>
-					<div class="control-group modal-publish-github">
+					<div class="form-group modal-publish-github">
 						<label class="col-lg-4 control-label"
 							for="input-publish-github-reponame">Repository</label>
 						<div class="col-lg-7">
@@ -496,7 +496,7 @@
 								placeholder="repository-name" class="form-control">
 						</div>
 					</div>
-					<div class="control-group modal-publish-github">
+					<div class="form-group modal-publish-github">
 						<label class="col-lg-4 control-label"
 							for="input-publish-github-username">Username (optional)</label>
 						<div class="col-lg-7">
@@ -504,7 +504,7 @@
 								placeholder="username" class="form-control">
 						</div>
 					</div>
-					<div class="control-group modal-publish-github">
+					<div class="form-group modal-publish-github">
 						<label class="col-lg-4 control-label"
 							for="input-publish-github-branch">Branch</label>
 						<div class="col-lg-7">
@@ -512,7 +512,7 @@
 								placeholder="branch-name" class="form-control">
 						</div>
 					</div>
-					<div class="control-group modal-publish-ssh modal-publish-github">
+					<div class="form-group modal-publish-ssh modal-publish-github">
 						<label class="col-lg-4 control-label"
 							for="input-publish-file-path">File path</label>
 						<div class="col-lg-7">
@@ -520,14 +520,14 @@
 								placeholder="path/to/file.md" class="form-control">
 						</div>
 					</div>
-					<div class="control-group modal-publish-gist">
+					<div class="form-group modal-publish-gist">
 						<label class="col-lg-4 control-label" for="input-publish-filename">Filename</label>
 						<div class="col-lg-7">
 							<input type="text" id="input-publish-filename"
 								placeholder="filename" class="form-control">
 						</div>
 					</div>
-					<div class="control-group modal-publish-gist">
+					<div class="form-group modal-publish-gist">
 						<label class="col-lg-4 control-label" for="input-publish-gist-id">Existing
 							ID (optional)</label>
 						<div class="col-lg-7">
@@ -535,7 +535,7 @@
 								placeholder="GistID" class="form-control">
 						</div>
 					</div>
-					<div class="control-group modal-publish-gist">
+					<div class="form-group modal-publish-gist">
 						<label class="col-lg-4 control-label"
 							for="input-publish-gist-public">Public</label>
 						<div class="col-lg-7">
@@ -545,7 +545,7 @@
 							</div>
 						</div>
 					</div>
-					<div class="control-group modal-publish-blogger">
+					<div class="form-group modal-publish-blogger">
 						<label class="col-lg-4 control-label"
 							for="input-publish-blogger-url">Blog URL</label>
 						<div class="col-lg-7">
@@ -553,7 +553,7 @@
 								placeholder="http://exemple.blogger.com/" class="form-control">
 						</div>
 					</div>
-					<div class="control-group modal-publish-tumblr">
+					<div class="form-group modal-publish-tumblr">
 						<label class="col-lg-4 control-label"
 							for="input-publish-tumblr-hostname">Blog hostname</label>
 						<div class="col-lg-7">
@@ -561,7 +561,7 @@
 								placeholder="exemple.tumblr.com" class="form-control">
 						</div>
 					</div>
-					<div class="control-group modal-publish-wordpress">
+					<div class="form-group modal-publish-wordpress">
 						<label class="col-lg-4 control-label"
 							for="input-publish-tumblr-hostname">WordPress site</label>
 						<div class="col-lg-7">
@@ -574,7 +574,7 @@
 						</div>
 					</div>
 					<div
-						class="control-group modal-publish-blogger modal-publish-tumblr modal-publish-wordpress">
+						class="form-group modal-publish-blogger modal-publish-tumblr modal-publish-wordpress">
 						<label class="col-lg-4 control-label" for="input-publish-postid">Update
 							existing post ID (optional)</label>
 						<div class="col-lg-7">
@@ -582,7 +582,7 @@
 								class="form-control">
 						</div>
 					</div>
-					<div class="control-group modal-publish-blogger">
+					<div class="form-group modal-publish-blogger">
 						<label class="col-lg-4 control-label" for="input-publish-labels">Labels
 							(comma separated)</label>
 						<div class="col-lg-7">
@@ -591,7 +591,7 @@
 						</div>
 					</div>
 					<div
-						class="control-group modal-publish-tumblr modal-publish-wordpress">
+						class="form-group modal-publish-tumblr modal-publish-wordpress">
 						<label class="col-lg-4 control-label" for="input-publish-tags">Tags
 							(comma separated)</label>
 						<div class="col-lg-7">
@@ -599,7 +599,7 @@
 								placeholder="Tag1, Tag2" class="form-control">
 						</div>
 					</div>
-					<div class="control-group modal-publish-dropbox">
+					<div class="form-group modal-publish-dropbox">
 						<label class="col-lg-4 control-label"
 							for="input-publish-dropbox-path">File path</label>
 						<div class="col-lg-7">
@@ -607,7 +607,7 @@
 								placeholder="/path/to/My Document.html" class="form-control">
 						</div>
 					</div>
-					<div class="control-group modal-publish-gdrive">
+					<div class="form-group modal-publish-gdrive">
 						<label class="col-lg-4 control-label"
 							for="input-publish-gdrive-fileid">File ID (optional)</label>
 						<div class="col-lg-7">
@@ -618,7 +618,7 @@
 								the file afterwards within Google Drive.</span>
 						</div>
 					</div>
-					<div class="control-group modal-publish-gdrive">
+					<div class="form-group modal-publish-gdrive">
 						<label class="col-lg-4 control-label"
 							for="input-publish-gdrive-filename">Force filename
 							(optional)</label>
@@ -631,7 +631,7 @@
 					</div>
 
 					<div class="form-group">
-						<div class="col-lg-4 control-label">Format</div>
+						<label class="col-lg-4 control-label">Format</label>
 						<div class="col-lg-7">
 							<div class="radio">
 								<label> <input type="radio" name="radio-publish-format"

js/html/bodyViewer.html

@@ -2,7 +2,7 @@
 <div class="navbar navbar-fixed-top ui-layout-north">
 	<div class="navbar-inner">
 
-		<ul class="nav pull-right hide" id="menu-bar">
+		<ul class="nav pull-right hide">
 			<li class="btn-group">
 				<button class="btn btn-default action-edit-document hide"
 					title="Edit this document">

js/html/buttonShare.html

@@ -2,7 +2,7 @@
 	title="Share this document">
 	<i class="icon-link"></i>
 </button>
-<div id="link-container" class="dropdown-menu pull-right">
+<div class="dropdown-menu pull-right link-container">
 	<h3 class="muted">Sharing</h3>
 	<div class="link-list"></div>
 	<p class="no-link">To share this document you need first to <a

js/html/buttonShareLocation.html

@@ -1,5 +1,5 @@
-<div class="input-prepend">
+<div class="input-group">
-	<a href="<%= link %>" class="add-on" title="Sharing location"><i
+	<div class="input-group-btn"><a href="<%= link %>" class="btn btn-info" title="Sharing location"><i
-		class="icon-link"></i></a> <input class="span2" type="text"
+		class="icon-link"></i></a></div> <input class="col-lg-5 form-control" type="text"
 		value="<%= link %>" readonly />
 </div>

js/styles/default.less

@@ -122,11 +122,15 @@ Override Bootstrap
     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 134, 97, 0.6)");
 }
 
-// Fix add-on support
+// Fix add-on support in Bootstrap v3
 .input-group-btn .btn {
 	border: 1px solid @input-border;
 }
 
+.input-group-btn:first-child .btn {
+	border-right: 0;
+}
+
 .input-group-btn:last-child .btn {
 	border-left: 0;
 }
@@ -162,7 +166,8 @@ Override Bootstrap
 			}
 		}
 	}
-	.btn {
+	.btn-group > .btn,
+	#file-title {
 		background-color: @navbar-bg;
 		border-color: @navbar-bg;
 		&:hover,
@@ -221,6 +226,36 @@ Override Bootstrap
 			content: " ";
 		}
 	}
+	
+	#file-selector {
+		max-height: 500px;
+		overflow-y: auto;
+		.stick {
+			padding: 10px 20px 0;
+		}
+	}
+	
+	#file-title {
+		padding: 4px 15px;
+		margin-left: -20px;
+		font-size: 20px;
+		font-weight: 200;
+		color: #666;
+		i {
+			margin-right: 10px;
+		}
+	}
+
+	.working-indicator {
+		background-image: none !important;
+		width: 43px;
+		height: 11px;
+		background-position: 0 0;
+		margin-right: 30px;
+		&.show {
+			background-image: url("../../img/ajax-loader.gif") !important;
+		}
+	}
 }
 
 
@@ -234,6 +269,17 @@ Override Bootstrap
 		margin: 0;
 	}
 		
+	.link-container {
+		min-width: 280px;
+		white-space: normal;
+		.link-list {
+			margin-top: 20px;
+			margin-bottom: 20px;
+			& > * {
+				margin-bottom: 10px;
+			}
+		}
+	}
 }
 
 // Hack for nested btn-group
@@ -323,17 +369,6 @@ Override Bootstrap
 	}
 }
 
-/*
-input[disabled],select[disabled],textarea[disabled],.input-prepend .add-on
-	{
-	background-color: @body-bg;
-}
-
-input[readonly],select[readonly],textarea[readonly] {
-	background-color: transparent;
-	cursor: text;
-}
-*/
 
 /*********************
  * Markdown
@@ -341,6 +376,7 @@ input[readonly],select[readonly],textarea[readonly] {
 
 code {
 	color: #333333;
+	background-color: fade(#000, 5%);
 }
 
 a code {
@@ -366,38 +402,11 @@ hr {
 	margin: 30px 0;
 }
 
-#file-selector {
-	max-height: 500px;
-	overflow-y: auto;
-}
-
-#file-selector .stick {
-	padding: 10px 20px 0;
-}
-
-#file-title {
-	padding: 4px 15px;
-	display: block;
-	float: left;
-	margin-left: -20px;
-	font-size: 20px;
-	font-weight: 200;
-	color: #666;
-}
-
-#file-title i {
-	margin-right: 10px;
-}
-
 .dropdown-menu i {
 	margin-right: 5px;
 }
 
 
-#menu-bar {
-	margin-left: 15px;
-}
-
 #wmd-input {
 	-webkit-box-shadow: none !important;
 	-moz-box-shadow: none !important;
@@ -487,15 +496,6 @@ div.dropdown-menu textarea {
 	resize: none;
 }
 
-#link-container {
-	min-width: 280px;
-	white-space: normal;
-}
-
-#link-container .link-list {
-	margin-top: 10px;
-}
-
 .footnote {
 	vertical-align: top;
     position: relative;
@@ -606,17 +606,6 @@ div.dropdown-menu textarea {
 	background-position: -145px 0;
 }
 
-.working-indicator {
-	background-image: none !important;
-	width: 43px;
-	height: 11px;
-	background-position: 0 0;
-	margin: 0 30px 12px;
-	&.show {
-		background-image: url("../../img/ajax-loader.gif") !important;
-	}
-}
-
 .ui-layout-toggler-north .caret,.ui-layout-toggler-south .caret {
 	margin-top: 5px;
 }