Settings import/export

css/default.css

@@ -634,7 +634,12 @@ div.dropdown-menu textarea {
 
 #modal-settings .tab-pane-button-container {
 	width: 200px;
-	margin: 10px auto;
+	margin: 10px auto 20px;
+}
+
+#modal-settings .tab-pane-button-container .btn {
+	text-align: initial;
+	padding-left: 15px;
 }
 
 #modal-settings .nav-tabs {

index.html

@@ -448,7 +448,8 @@
 					</div>
 				</div>
 				<div class="control-group modal-publish-github">
-					<label class="control-label" for="input-publish-github-username">Username (optional)</label>
+					<label class="control-label" for="input-publish-github-username">Username
+						(optional)</label>
 					<div class="controls">
 						<input type="text" id="input-publish-github-username"
 							placeholder="username">
@@ -670,8 +671,9 @@
 								for="input-settings-editor-font-family">Editor font</label>
 							<div class="controls form-inline">
 								<input type="text" id="input-settings-editor-font-family"
-									class="span2"> <input type="text" id="input-settings-editor-font-size"
+									class="span2"> <input type="text"
-                                    class="input-mini"><span class="help-inline">px</span>
+									id="input-settings-editor-font-size" class="input-mini"><span
+									class="help-inline">px</span>
 							</div>
 						</div>
 						<div class="control-group">
@@ -720,14 +722,23 @@
 				</div>
 				<div class="tab-pane" id="tabpane-settings-utils">
 					<div class="tab-pane-button-container">
-						<a href="#" class="btn btn-block btn-primary action-welcome-file"
+						<a href="#"
-							data-dismiss="modal"><i class="icon-info-sign icon-white"></i>
+							class="btn btn-block btn-primary action-import-settings"><i
-							Welcome document</a> <a href="#"
+							class="icon-wrench icon-white"></i> Import settings</a> <a href="#"
+							class="btn btn-block btn-primary action-export-settings"
+							data-dismiss="modal"><i class="icon-wrench icon-white"></i>
+							Export settings</a> <a href="#"
 							class="btn btn-block btn-primary action-default-settings"
 							data-dismiss="modal"><i class="icon-wrench icon-white"></i>
-							Load default settings</a> <a href="#"
+							Load default settings</a> <input type="file"
-							class="btn btn-block btn-primary" data-dismiss="modal"
+							id="input-file-import-settings" class="hide">
-							data-toggle="modal" data-target="#modal-app-reset"><i
+					</div>
+					<div class="tab-pane-button-container">
+						<a href="#" class="btn btn-block btn-primary action-welcome-file"
+							data-dismiss="modal"><i class="icon-info-sign icon-white"></i>
+							Welcome document</a> <a href="#" class="btn btn-block btn-primary"
+							data-dismiss="modal" data-toggle="modal"
+							data-target="#modal-app-reset"><i
 							class="icon-fire icon-white"></i> Reset application</a>
 					</div>
 				</div>

js/core.js

@@ -17,7 +17,9 @@ define([
 
     // Used for periodic tasks
     var intervalId = undefined;
-    var periodicCallbacks = [extensionMgr.onPeriodicRun];
+    var periodicCallbacks = [
+        extensionMgr.onPeriodicRun
+    ];
     core.runPeriodically = function(callback) {
         periodicCallbacks.push(callback);
     };
@@ -202,7 +204,8 @@ define([
         $(".ui-layout-toggler-east").addClass("btn").append($("<b>").addClass("caret"));
 
         extensionMgr.onLayoutCreated(layout);
-    };
+    }
+    ;
 
     // Create the PageDown editor
     var editor = undefined;
@@ -426,6 +429,37 @@ define([
                 window.location.reload();
             }
         });
+        // Import settings
+        $(".action-import-settings").click(function(e) {
+            $("#input-file-import-settings").click();
+        });
+        $("#input-file-import-settings").change(function(evt) {
+            var files = (evt.dataTransfer || evt.target).files;
+            $("#modal-settings").modal("hide");
+            _.each(files, function(file) {
+                var reader = new FileReader();
+                reader.onload = (function(importedFile) {
+                    return function(e) {
+                        var content = e.target.result;
+                        try {
+                            JSON.parse(content);
+                        }
+                        catch(e) {
+                            extensionMgr.onError(importedFile.name + " is not a valid JSON file.");
+                            return;
+                        }
+                        localStorage.settings = content;
+                        window.location.reload();
+                    };
+                })(file);
+                var blob = file.slice(0, IMPORT_FILE_MAX_CONTENT_SIZE);
+                reader.readAsText(blob);
+            });
+        });
+        // Export settings
+        $(".action-export-settings").click(function(e) {
+            utils.saveAs(JSON.stringify(settings), "StackEdit Settings.json");
+        });
 
         $(".action-default-settings").click(function() {
             localStorage.removeItem("settings");