CSS theming

css/main.css

@@ -1,6 +1,5 @@
 body {
-	background-image: url(../img/honeycomb.png);
-	background-repeat: repeat;
+	background-color: #f5f5f5;
 	-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 {
-	margin-top: -3px !important;
-	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 .caret, .ui-layout-toggler-south .caret {
+	margin-top: 5px;
 }
 
 .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="#"
-							title="Create a new local file"><i class="icon-file"></i> New
-								file</a></li>
-						<li><a href="#"
-							title="Delete the current file locally" data-toggle="modal"
-							data-target="#modal-remove-file-confirm"><i
-								class="icon-trash"></i> Remove file</a></li>
+						<li><a class="action-download-md" href="#"
+							title="Download the current file as Markdown"><i class="icon-download-alt"></i> Download as MD</a></li>
+						<li><a class="action-download-html" href="#"
+							title="Download the current file as HTML"><i
+								class="icon-download-alt"></i> Download as HTML</a></li>
 						<li class="divider"></li>
 						<li><a class="action-upload-gdrive"
 							href="#"><i class="icon-gdrive"></i> Save

js/main.js

@@ -7,14 +7,14 @@ var FLAG_GDRIVE_UPLOAD = 1;
 var FLAG_SYNCHRONIZE = 2;
 function setWorkingIndicator(flag) {
 	workingIndicator |= flag;
-	if(workingIndicator) {
+	if (workingIndicator) {
 		$(".working-indicator").removeClass("hide");
 	}
 }
 
 function unsetWorkingIndicator(flag) {
 	workingIndicator &= ~flag;
-	if(!workingIndicator) {
+	if (!workingIndicator) {
 		$(".working-indicator").addClass("hide");
 	}
 }
@@ -27,26 +27,28 @@ var synchronizer = (function($) {
 	var syncQueue = undefined;
 	synchronizer.init = function() {
 		syncQueue = ";";
-		// Load the queue from localStorage in case a previous synchronization was aborted
-		if(localStorage["sync.queue"]) {
+		// Load the queue from localStorage in case a previous synchronization
+		// was aborted
+		if (localStorage["sync.queue"]) {
 			syncQueue = localStorage["sync.queue"];
 		}
-		if(localStorage["sync.current"]) {
+		if (localStorage["sync.current"]) {
 			this.addFile(localStorage["sync.current"]);
 		}
 	};
 
 	// Add a file to the synchronization queue
 	synchronizer.addFile = function(fileIndex) {
-		if(syncQueue.indexOf(";" + fileIndex + ";") === -1) {
+		if (syncQueue.indexOf(";" + fileIndex + ";") === -1) {
 			syncQueue += fileIndex + ";";
 			localStorage["sync.queue"] = syncQueue;
 		}
 	};
 
-	// 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) {
+		if (fileSyncIndexList.length === 0) {
 			localStorage.removeItem("sync.current");
 			unsetWorkingIndicator(FLAG_SYNCHRONIZE);
 			running = false;
@@ -57,10 +59,10 @@ var synchronizer = (function($) {
 		var fileSyncIndex = fileSyncIndexList.pop();
 
 		// Try to find the provider
-		if(fileSyncIndex.indexOf(SYNC_PROVIDER_GDRIVE) === 0) {
+		if (fileSyncIndex.indexOf(SYNC_PROVIDER_GDRIVE) === 0) {
 			var id = fileSyncIndex.substring(SYNC_PROVIDER_GDRIVE.length);
 			gdrive.updateFile(id, title, content, function(result) {
-				if(!result) {
+				if (!result) {
 					showError("Error while uploading file on Google Drive");
 				}
 				sync(fileSyncIndexList, content, title);
@@ -73,7 +75,7 @@ var synchronizer = (function($) {
 	var running = false;
 	synchronizer.run = function() {
 		// If synchronization is already running or nothing to synchronize
-		if(running || syncQueue.length === 1) {
+		if (running || syncQueue.length === 1) {
 			return;
 		}
 
@@ -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) {
-					if(fileSyncIndex) {
-						localStorage[fileIndex + ".sync"] += fileSyncIndex + ";";
-					}
-					else {
+						gdrive
+							.createFile(
+								title,
+								content,
+								function(fileSyncIndex) {
+									if (fileSyncIndex) {
+										localStorage[fileIndex + ".sync"] += fileSyncIndex
+											+ ";";
+									} 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(
-					(function(fileIndex) {
+				a.prop("href", "#").click((function(fileIndex) {
 					return function() {
 						localStorage["file.current"] = fileIndex;
 						fileManager.selectFile();
@@ -252,7 +277,7 @@ var fileManager = (function($) {
 	};
 
 	fileManager.saveFile = function() {
-		if(save) {
+		if (save) {
 			var content = $("#wmd-input").val();
 			var fileIndex = localStorage["file.current"];
 			localStorage[fileIndex + ".content"] = content;
@@ -282,22 +307,23 @@ var core = (function($) {
 		});
 	};
 
-	var settings = {
-		layoutOrientation: "horizontal"
-	};
+	var settings = { layoutOrientation : "horizontal" };
 	core.loadSettings = function() {
-		if(localStorage.settings) {
+		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,
-			spacing_closed : 20, togglerLength_open : 90,
-			togglerLength_closed : 90, center__minWidth : 100, center__minHeight : 100,
-			stateManagement__enabled : false, };
+			slidable : false, livePaneResizing : true, spacing_open : 15,
+			spacing_closed : 15, togglerLength_open : 90,
+			togglerLength_closed : 90, center__minWidth : 100,
+			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,
-					{ east__resizable : true, east__size : .5, east__minSize : 200,
-						south__closable : false, }));
+				$.extend(layoutGlobalConfig, { east__resizable : true,
+					east__size : .5, east__minSize : 200 }));
 		} 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"));
@@ -337,8 +363,8 @@ var core = (function($) {
 		$("#wmd-button-bar").empty();
 		var converter = Markdown.getSanitizingConverter();
 		var firstChange = true;
-		converter.hooks.chain("preConversion", function (text) {
-			if(!firstChange) {
+		converter.hooks.chain("preConversion", function(text) {
+			if (!firstChange) {
 				onTextChange();
 			}
 			return text;