CSS theming

css/main.css

@@ -1,6 +1,5 @@
 body {
-	background-image: url(../img/honeycomb.png);
+	background-color: #f5f5f5;
-	background-repeat: repeat;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@@ -8,16 +7,111 @@ body {
 	user-select: none;
 }
 
+/*
+Override Bootstrap 
+*/
+div, span, a, ul, li, textarea, input {
+	background-image: none !important;
+	filter: none !important;
+	-webkit-box-shadow: none !important;
+    -moz-box-shadow: none !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+}
+
+.btn, .navbar-inner, .well, textarea, input {
+    border: none !important;
+}
+
+.navbar-inner .btn {
+	background-color: #ddd;
+}
+
+.navbar-inner .btn:hover,
+.navbar-inner .btn:focus,
+.navbar-inner .btn:active,
+.navbar-inner .btn.active,
+.btn-group.open .btn.dropdown-toggle {
+  color: #333333;
+  background-color: #eee;
+}
+
+.navbar-inner .btn.disabled,
+.navbar-inner .btn[disabled] {
+  color: #333333;
+  background-color: #ddd;
+    opacity: 0.3;
+  filter: alpha(opacity=30);
+}
+
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus,
+.dropdown-submenu:hover > a,
+.dropdown-submenu:focus > a,
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  background-color: #999;
+}
+
+.btn-primary {
+  background-color: #888;
+}
+
+.btn-primary:hover,
+.btn-primary:focus,
+.btn-primary:active,
+.btn-primary.active,
+.btn-primary.disabled,
+.btn-primary[disabled] {
+  background-color: #999;
+}
+
+.btn-group {
+    margin-left: 5px !important;
+    margin-right: 5px !important;
+}
+
+.btn-group > .btn + .dropdown-toggle {
+    padding-right: 12px;
+    padding-left: 12px;
+}
+
+.navbar-inner {
+	background-color: #ddd !important;
+}
+
+code {
+	color: #333333 !important;
+}
+
+h1 {
+	margin: 50px 0 20px;
+}
+
+h2 {
+	margin-top: 30px;
+}
+
+p, pre, blockquote {
+    margin: 0 0 20px;
+}
+
+hr {
+    border-top: 1px solid #ddd;
+    margin: 30px 0;
+}
+
 #navbar {
 	position: static;
 }
 
 #menu-bar {
-	margin-right: 20px;
+	margin-right: 15px;
 }
 
 #wmd-button-bar {
-	margin-left: 20px;
+	margin-left: 15px;
 }
 
 #wmd-input,#wmd-preview {
@@ -39,7 +133,7 @@ body {
 }
 
 .wmd-spacer {
-	margin: 0 5px;
+	margin: 0 10px;
 	display: inline-block;
 }
 
@@ -69,13 +163,6 @@ body {
 	font-weight: bold;
 }
 
-.ui-layout-center,.ui-layout-east,.ui-layout-south {
-	-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
-	-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
-	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
-	border-color: #cccccc !important;
-}
-
 .icon-code {
 	background-position: -384px -168px;
 }
@@ -107,18 +194,8 @@ body {
 	margin: 13px 15px 0;
 }
 
-.ui-layout-toggler-north {
+.ui-layout-toggler-north .caret, .ui-layout-toggler-south .caret {
-	margin-top: -3px !important;
+	margin-top: 5px;
-	height: 18px !important;
-}
-
-.ui-layout-toggler-south {
-	margin-top: 3px !important;
-	height: 18px !important;
-}
-
-.ui-layout-toggler-south .caret {
-	margin-top: 6px;
 }
 
 .ui-layout-toggler-north-open .caret,.ui-layout-toggler-south-closed .caret
@@ -137,11 +214,6 @@ body {
 	border-bottom: 0;
 }
 
-.ui-layout-toggler-east {
-	margin-left: 3px !important;
-	width: 18px !important;
-}
-
 .ui-layout-toggler-east .caret,.ui-layout-toggler-west .caret {
 	margin-top: 40px;
 }

index.html

@@ -63,13 +63,11 @@
 					data-toggle="dropdown" href="#" title="Menu"><img
 						src="img/stackedit-16.png" />&nbsp;&nbsp;<b class="caret"></b></a>
 					<ul class="dropdown-menu">
-						<li><a class="action-create-file" href="#"
+						<li><a class="action-download-md" href="#"
-							title="Create a new local file"><i class="icon-file"></i> New
+							title="Download the current file as Markdown"><i class="icon-download-alt"></i> Download as MD</a></li>
-								file</a></li>
+						<li><a class="action-download-html" href="#"
-						<li><a href="#"
+							title="Download the current file as HTML"><i
-							title="Delete the current file locally" data-toggle="modal"
+								class="icon-download-alt"></i> Download as HTML</a></li>
-							data-target="#modal-remove-file-confirm"><i
-								class="icon-trash"></i> Remove file</a></li>
 						<li class="divider"></li>
 						<li><a class="action-upload-gdrive"
 							href="#"><i class="icon-gdrive"></i> Save

js/main.js

@@ -27,7 +27,8 @@ var synchronizer = (function($) {
 	var syncQueue = undefined;
 	synchronizer.init = function() {
 		syncQueue = ";";
-		// Load the queue from localStorage in case a previous synchronization was aborted
+		// Load the queue from localStorage in case a previous synchronization
+		// was aborted
 		if (localStorage["sync.queue"]) {
 			syncQueue = localStorage["sync.queue"];
 		}
@@ -44,7 +45,8 @@ var synchronizer = (function($) {
 		}
 	};
 
-	// Recursive function to run synchronization of a single file on multiple locations
+	// Recursive function to run synchronization of a single file on multiple
+	// locations
 	function sync(fileSyncIndexList, content, title) {
 		if (fileSyncIndexList.length === 0) {
 			localStorage.removeItem("sync.current");
@@ -107,10 +109,13 @@ var fileManager = (function($) {
 	fileManager.init = function() {
 		synchronizer.init();
 		fileManager.selectFile();
+
+		// Save file automatically and synchronize
 		window.setInterval(function() {
 			fileManager.saveFile();
 			synchronizer.run();
-		}, 3000);
+		}, 1000);
+
 		$(".action-create-file").click(function() {
 			fileManager.saveFile();
 			fileManager.createFile();
@@ -136,17 +141,37 @@ var fileManager = (function($) {
 			fileManager.updateFileTitleUI();
 			save = true;
 		});
-		$(".action-upload-gdrive").click(function() {
+		$(".action-download-md").click(
+			function() {
+				var content = $("#wmd-input").val();
+				var uriContent = "data:application/octet-stream,"
+					+ encodeURIComponent(content);
+				window.open(uriContent, 'file');
+			});
+		$(".action-download-html").click(
+			function() {
+				var content = $("#wmd-preview").html();
+				var uriContent = "data:application/octet-stream,"
+					+ encodeURIComponent(content);
+				window.open(uriContent, 'file');
+			});
+		$(".action-upload-gdrive")
+			.click(
+				function() {
 					$(".file-sync-indicator").removeClass("hide");
 					var fileIndex = localStorage["file.current"];
 					var content = localStorage[fileIndex + ".content"];
 					var title = localStorage[fileIndex + ".title"];
 					(function(fileIndex) {
-				gdrive.createFile(title, content, function(fileSyncIndex) {
+						gdrive
+							.createFile(
+								title,
+								content,
+								function(fileSyncIndex) {
 									if (fileSyncIndex) {
-						localStorage[fileIndex + ".sync"] += fileSyncIndex + ";";
+										localStorage[fileIndex + ".sync"] += fileSyncIndex
-					}
+											+ ";";
-					else {
+									} else {
 										showError("Error while creating file on Google Drive");
 									}
 								});
@@ -199,7 +224,8 @@ var fileManager = (function($) {
 	fileManager.deleteFile = function() {
 		var fileIndex = localStorage["file.current"];
 		localStorage.removeItem("file.current");
-		localStorage["file.list"] = localStorage["file.list"].replace(";" + fileIndex + ";", ";");
+		localStorage["file.list"] = localStorage["file.list"].replace(";"
+			+ fileIndex + ";", ";");
 		localStorage.removeItem(fileIndex + ".sync");
 		localStorage.removeItem(fileIndex + ".title");
 		localStorage.removeItem(fileIndex + ".content");
@@ -239,8 +265,7 @@ var fileManager = (function($) {
 			if (fileDesc.index == fileIndex) {
 				li.addClass("disabled");
 			} else {
-				a.prop("href", "#").click(
+				a.prop("href", "#").click((function(fileIndex) {
-					(function(fileIndex) {
 					return function() {
 						localStorage["file.current"] = fileIndex;
 						fileManager.selectFile();
@@ -282,22 +307,23 @@ var core = (function($) {
 		});
 	};
 
-	var settings = {
+	var settings = { layoutOrientation : "horizontal" };
-		layoutOrientation: "horizontal"
-	};
 	core.loadSettings = function() {
 		if (localStorage.settings) {
 			$.extend(settings, JSON.parse(localStorage.settings));
 		}
 
 		// Layout orientation
-		$("input:radio[name=radio-layout-orientation][value=" + settings.layoutOrientation + "]").prop("checked", true);
+		$(
+			"input:radio[name=radio-layout-orientation][value="
+				+ settings.layoutOrientation + "]").prop("checked", true);
 	};
 
 	core.saveSettings = function() {
 
 		// Layout orientation
-		settings.layoutOrientation = $("input:radio[name=radio-layout-orientation]:checked").prop("value"); 
+		settings.layoutOrientation = $(
+			"input:radio[name=radio-layout-orientation]:checked").prop("value");
 
 		localStorage.settings = JSON.stringify(settings);
 	};
@@ -305,22 +331,22 @@ var core = (function($) {
 	core.createLayout = function() {
 		var layout = undefined;
 		var layoutGlobalConfig = { closable : true, resizable : false,
-			slidable : false, livePaneResizing : true, spacing_open : 20,
+			slidable : false, livePaneResizing : true, spacing_open : 15,
-			spacing_closed : 20, togglerLength_open : 90,
+			spacing_closed : 15, togglerLength_open : 90,
-			togglerLength_closed : 90, center__minWidth : 100, center__minHeight : 100,
+			togglerLength_closed : 90, center__minWidth : 100,
-			stateManagement__enabled : false, };
+			center__minHeight : 100, stateManagement__enabled : false, };
 		if (settings.layoutOrientation == "horizontal") {
+			$(".ui-layout-south").remove();
 			$(".ui-layout-east").addClass("well").prop("id", "wmd-preview");
 			layout = $('body').layout(
-				$.extend(layoutGlobalConfig,
+				$.extend(layoutGlobalConfig, { east__resizable : true,
-					{ east__resizable : true, east__size : .5, east__minSize : 200,
+					east__size : .5, east__minSize : 200 }));
-						south__closable : false, }));
 		} else if (settings.layoutOrientation == "vertical") {
 			$(".ui-layout-east").remove();
 			$(".ui-layout-south").addClass("well").prop("id", "wmd-preview");
 			layout = $('body').layout(
 				$.extend(layoutGlobalConfig, { south__resizable : true,
-					south__size : .5, south__minSize : 200, }));
+					south__size : .5, south__minSize : 200 }));
 		}
 		$(".ui-layout-toggler-north").addClass("btn").append(
 			$("<b>").addClass("caret"));