Compact view fixes

Author: nikitaeverywhere

package.json

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

src/static/index.html

@@ -33,7 +33,7 @@
                 </div>
             </div>
         </div>
-        <div id="rightTopExpandButton" class="rightTopIcons" style="opacity: 0">
+        <div id="rightTopExpandButton" class="rightTopIcons hidden">
             <div id="expandViewButton" class="ui icon-expand hint">
                 <div class="tooltip">
                     <div class="label">
@@ -42,7 +42,7 @@
                 </div>
             </div>
         </div>
-        <div id="rightTopIcons" class="rightTopIcons" style="opacity: 0">
+        <div id="rightTopIcons" class="rightTopIcons hidden">
             <div id="settingsToggle" class="ui icon-settings hint">
                 <div class="tooltip">
                     <div class="label">
@@ -65,7 +65,7 @@
                 </div>
             </div>
         </div>
-        <div id="toolbarIcons" style="opacity: 0">
+        <div id="toolbarIcons" class="hidden">
             <div id="undoButton" class="ui icon-undo hint">
                 <div class="top tooltip">
                     <div class="label">

src/static/js/settings/index.js

@@ -41,6 +41,15 @@ export function init () {
         location.reload();
     });
 
+    document.getElementById("expandViewButton").addEventListener("click", () => {
+        setOption("compact", false);
+        updateCompactView();
+    });
+    document.getElementById("collapseCompactViewButton").addEventListener("click", () => {
+        setOption("compact", true);
+        console.log(getOption("compact"));
+        updateCompactView();
+    });
     updateCompactView();
 
 }
@@ -50,21 +59,11 @@ function updateCompactView () {
     let compact = !!getOption("compact");
 
     function toggle (element, flag = true) {
-        element.style.opacity = flag ? 1 : 0;
-        element.style.pointerEvents = flag ? "all" : "none";
+        element.classList.toggle("hidden", !flag);
     }
 
     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/scss/interface.scss

@@ -31,6 +31,11 @@
         text-decoration: none;
     }
 
+    &.hidden {
+        @include pointer-events(none);
+        opacity: 0;
+    }
+
 }
 
 #table.active .rightTopIcons {
@@ -53,4 +58,8 @@
         @include pointer-events(all);
     }
 
+    &.hidden {
+        bottom: -35px;
+    }
+
 }