Reset settings button add

Author: nikitaeverywhere

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iknow-entity-browser",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Visualizer for iKnow entities",
   "main": "gulpfile.babel.js",
   "scripts": {

src/static/index.html

@@ -124,6 +124,10 @@ <h1>Tabular View Settings</h1>
                 <span id="settings.tabularColumns"></span>
             </div>
         </div>
+        <hr/>
+        <div>
+            <button id="settings.resetSettings">Reset Settings</button>
+        </div>
     </div>
 </div>
 </body>

src/static/js/settings/index.js

@@ -2,6 +2,7 @@ import * as model from "../model";
 import * as graph from "../graph";
 import * as sourceSettings from "./sourceSettings";
 import * as tabularViewSettings from "./tabularViewSettings";
+import * as storage from "../storage";
 import { getChanges, applyChanges } from "./values";
 import { makeAutosizable } from "../utils";
 
@@ -27,6 +28,12 @@ export function init () {
 
     // make inputs auto-sizable
     [].slice.call(document.querySelectorAll(`input[autosize]`)).forEach((i) => makeAutosizable(i));
+    document.getElementById("settings.resetSettings").addEventListener("click", () => {
+        if (!confirm("Do you want to set all the settings to defaults?"))
+            return;
+        storage.reset();
+        location.reload();
+    });
 
     sourceSettings.init();
     tabularViewSettings.init();

src/static/js/storage.js

@@ -10,6 +10,10 @@ export function load (key) {
     return storage[key];
 }
 
+export function reset () {
+    localStorage.removeItem(STORAGE_NAME);
+}
+
 function updateLocalStorage () {
     localStorage.setItem(STORAGE_NAME, JSON.stringify(storage));
 }

src/static/scss/basic.scss

@@ -51,6 +51,26 @@ select {
 
 }
 
+input[type=button], button {
+
+    background-color: $colorA;
+    color: white;
+    text-shadow: 0 1px 1px black;
+    border: 0;
+    border-radius: 12px;
+    padding: 5px;
+    margin: 2px;
+    cursor: pointer;
+    transition: $defaultTransition;
+    box-shadow: 0 1px 1px gray;
+
+    &:hover {
+        color: $highlightColor;
+        box-shadow: 0 2px 5px gray;
+    }
+
+}
+
 .central {
 
     position: absolute;