Show compact view control

README.md

@@ -53,6 +53,7 @@ represented in the table below.
 
 | URL Parameter | Default | Description |
 |---|---|---|
+| `compact` | `false` | Hides interface controls when set to `true`. |
 | `host` | `http://hostname` | The host name of the server. |
 | `port` | `57772` | The port of the server. |
 | `webAppName` | `EntityBrowser` | Caché web application name. |

package.json

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

src/static/index.html

@@ -33,7 +33,16 @@
                 </div>
             </div>
         </div>
-        <div id="rightTopIcons">
+        <div id="rightTopExpandButton" class="rightTopIcons" style="opacity: 0">
+            <div id="expandViewButton" class="ui icon-expand hint">
+                <div class="tooltip">
+                    <div class="label">
+                        Show all controls
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="rightTopIcons" class="rightTopIcons" style="opacity: 0">
             <div id="settingsToggle" class="ui icon-settings hint">
                 <div class="tooltip">
                     <div class="label">
@@ -48,8 +57,15 @@
                     </div>
                 </div>
             </a>
+            <div id="collapseCompactViewButton" class="ui icon-collapse hint">
+                <div class="tooltip">
+                    <div class="label">
+                        Collapse to compact view
+                    </div>
+                </div>
+            </div>
         </div>
-        <div id="toolbarIcons">
+        <div id="toolbarIcons" style="opacity: 0">
             <div id="undoButton" class="ui icon-undo hint">
                 <div class="top tooltip">
                     <div class="label">

src/static/js/settings/index.js

@@ -3,7 +3,8 @@ import * as graph from "../graph";
 import * as sourceSettings from "./sourceSettings";
 import * as tabularViewSettings from "./tabularViewSettings";
 import * as storage from "../storage";
-import { getChanges, applyChanges, init as initValues, applyFixedClasses } from "./values";
+import { getChanges, getOption, applyChanges, init as initValues, applyFixedClasses, setOption
+       } from "./values";
 import { makeAutosizable } from "../utils";
 
 function toggleSettings (uiStateModel) {
@@ -40,4 +41,30 @@ export function init () {
         location.reload();
     });
 
+    updateCompactView();
+
+}
+
+function updateCompactView () {
+
+    let compact = !!getOption("compact");
+
+    function toggle (element, flag = true) {
+        element.style.opacity = flag ? 1 : 0;
+        element.style.pointerEvents = flag ? "all" : "none";
+    }
+
+    toggle(document.getElementById("rightTopIcons"), !compact);
+    toggle(document.getElementById("rightTopExpandButton"), compact);
+    toggle(document.getElementById("toolbarIcons"), !compact);
+
+    document.getElementById("expandViewButton").addEventListener("click", () => {
+        setOption("compact", false);
+        updateCompactView();
+    });
+    document.getElementById("collapseCompactViewButton").addEventListener("click", () => {
+        setOption("compact", true);
+        updateCompactView();
+    });
+
 }

src/static/js/settings/values.js

@@ -5,6 +5,7 @@ import * as url from "../url";
 const STORAGE_KEY = "settings";
 
 const settingsTypes = {
+    compact: Boolean,
     host: String,
     port: Number,
     webAppName: String,
@@ -16,7 +17,9 @@ const settingsTypes = {
     tabularShowHiddenNodes: Boolean
 };
 
-const settings = { // assign defaults here
+// defaults are assigned here
+const settings = {
+    compact: false,
     host: "",
     port: 57772,
     webAppName: "EntityBrowser",

src/static/scss/icons.scss

@@ -118,3 +118,9 @@
 .icon-question:before {
     content: "\7a";
 }
+.icon-expand:before {
+    content: "\41";
+}
+.icon-collapse:before {
+    content: "\42";
+}

src/static/scss/interface.scss

@@ -17,7 +17,7 @@
 
 }
 
-#rightTopIcons {
+.rightTopIcons {
 
     position: absolute;
     left: -35px;
@@ -33,7 +33,7 @@
 
 }
 
-#table.active #rightTopIcons {
+#table.active .rightTopIcons {
     top: 6px;
 }