Added configurable auto hideable sidebar controls

CHANGELOG.md

@@ -1,3 +1,8 @@
+### 0.2.0
+* Enhancement: Left control bar may now be auto-hidden and shown on mouse over
+* Enhancement: Left control bar now supports small or big size
+* Bugfix: Ignored some configuration combinations that could lead to offsets
+
 ### 0.1.0
 * Bugfix: Overlapping scene navigation when side control was on Top Left
 

README.md

@@ -1,22 +1,24 @@
 ## Minimal UI for FoundryVTT
 
-Reduces the size of Foundry interface and allows hiding or collapsing specific parts of it.
+Configurable UI module, allows the user to hide, collapse or auto-hide components.
 
 This includes hiding Foundry's Logo, Players List, Scene Navigation and Macro Bar.
 
-Various settings allow for tweaking to personal tastes although the premise is simplicity.
+Many settings allow for tweaking to personal tastes including size, position and behavior of UI elements.
 
 * Hidden Foundry Logo
-* Scenes, Player list and left side controls customized for minimalism 
+* Scenes, Player list and left side controls customized for minimalism by default 
 * Macro Bar may be hidden, collapsed, auto-hidden (default) or shown
-* Macro Bar may be repositioned
-* Allows hiding Players List (Default: Visible)
+* Macro Bar may be repositioned horizontally
+* Compact Players list shows the names only on mouse over
 * Allows Hiding or having the scene navigation collapsed (Default: Collapsed)
-* Shrinked icon size and position of the left-side controls as well as vertical expansion
+* Left controls may collapse vertically in a single column or as a new column like normally
+* Left controls may be resized, moved vertically and auto-hidden
 
 ### ToDo:
-* More user-based settings
-* Customized macro hotbar size
+* Compatibility with other modules
+* Deal with webcam feature
 * Any suggestions welcome
 
+![Example GIF](./examplegif-long.gif)
 ![Example Image](./example9.jpg)

minimalui.css

@@ -6,8 +6,9 @@
   --leftbarpos: -8px;
   --submenustyle: contents;
   --hotbaranim1: 0px;
-  --hotbaranim2: 1px
+  --hotbaranim2: 1px;
   --navistart: 10px;
+  --leftbarstart: 0px;
 }
 
 #logo {
@@ -55,6 +56,7 @@
 
 #players {
   width: 30px;
+  left: 5px;
   bottom: 0px;
   font-size: 0px;
   visibility: var(--visiplay);
@@ -83,9 +85,17 @@
 }
 
 #controls {
-  left: 0px;
-  top: 0px;
-  margin-top: var(--leftbarpos);
+    left: var(--leftbarstart);
+    top: 10px;
+    margin-top: var(--leftbarpos);
+    border-right: 1px solid #ff4900bd;
+    box-shadow: 3px 0px 10px 0px #ff4900bd;
+    transition: 0.1s;
+}
+
+#controls:hover {
+    left: 0px;
+    transition: 0.5s;
 }
 
 #controls .scene-control.active, #controls .scene-control:hover {
@@ -115,4 +125,11 @@
 
 #controls .active .control-tools {
   display: var(--submenustyle);
+  left: -50px;
+  transition: 0.5s;
+}
+
+#controls:hover .active .control-tools {
+  display: var(--submenustyle);
+  left: 65px;
 }

minimalui.js

@@ -5,6 +5,25 @@ function collapse(toggleId) {
   }
 }
 
+var controlsLocked = false;
+var controlsLastPos = '0px';
+function lockControls(unlock) {
+  let rootStyle = document.querySelector(':root').style;
+  if (!controlsLocked) {
+    controlsLocked = true;
+    controlsLastPos = rootStyle.getPropertyValue('--leftbarstart');
+    rootStyle.setProperty('--leftbarstart', '0px');
+    $("#sidebar-lock > i").removeClass("fa-lock-open");
+    $("#sidebar-lock > i").addClass("fa-lock");
+  } else if (unlock) {
+    controlsLocked = false;
+    $("#sidebar-lock > i").removeClass("fa-lock");
+    $("#sidebar-lock > i").addClass("fa-lock-open");
+    rootStyle.setProperty('--leftbarstart', controlsLastPos);
+    controlsLastPos = controlsLastPos;
+  }
+}
+
 Hooks.on('init', () => {
   game.settings.register('minimal-ui', 'sceneNavigation', {
     name: "Scene Navigation",
@@ -69,6 +88,22 @@ Hooks.on('init', () => {
     }
   });
 
+  game.settings.register('minimal-ui', 'sidePanel', {
+    name: "Left panel behavior",
+    hint: "Choose whether left panel is always visible or auto hides",
+    scope: 'world',
+    config: true,
+    type: String,
+    choices: {
+      "always": "Always Visible",
+      "autohide": "Auto-Hide"
+    },
+    default: "autohide",
+    onChange: value => {
+      window.location.reload()
+    }
+  });
+
   game.settings.register('minimal-ui', 'sidePanelSize', {
     name: "Left panel size",
     hint: "Choose favorite side panel size.",
@@ -177,42 +212,53 @@ Hooks.on('renderSceneControls', async function() {
 
   let rootStyle = document.querySelector(':root').style;
 
+  switch(game.settings.get('minimal-ui', 'sidePanel')) {
+    case 'autohide': {
+      if (!controlsLocked && game.settings.get('minimal-ui', 'sidePanelSize') == 'small') {
+        rootStyle.setProperty('--leftbarstart', '-40px');
+      } else if (!controlsLocked) {
+        rootStyle.setProperty('--leftbarstart', '-52px');
+      }
+      break;
+    }
+  }
+
   switch(game.settings.get('minimal-ui', 'sidePanelSize')) {
     case 'small': {
       $("#controls .scene-control, #controls .control-tool").addClass('small-left-panel');
       $("#controls .control-tools").css({'left': '40px'})
     }
   }
 
-  switch(game.settings.get('minimal-ui', 'sidePanelPosition')) {
-    case 'top': {
+  switch(true) {
+    case (game.settings.get('minimal-ui', 'sidePanelPosition') == 'top' || (game.settings.get('minimal-ui', 'sidePanelSize') == 'standard' && game.settings.get('minimal-ui', 'sidePanelMenuStyle') == 'column')): {
       rootStyle.setProperty('--leftbarpos', '0vmin');
-      if ((game.settings.get('minimal-ui', 'sidePanelSize') == 'small')) {
+      if (game.settings.get('minimal-ui', 'sidePanelSize') == 'small') {
         if (game.settings.get('minimal-ui', 'sidePanelMenuStyle') == 'column') {
-          rootStyle.setProperty('--navistart', '45px');
+          rootStyle.setProperty('--navistart', '55px');
         } else {
-          rootStyle.setProperty('--navistart', '75px');
+          rootStyle.setProperty('--navistart', '85px');
         }
       } else {
         if (game.settings.get('minimal-ui', 'sidePanelMenuStyle') == 'column') {
-          rootStyle.setProperty('--navistart', '55px');
+          rootStyle.setProperty('--navistart', '65px');
         } else {
-          rootStyle.setProperty('--navistart', '100px');
+          rootStyle.setProperty('--navistart', '110px');
         }
       }
       break;
     }
-    case 'center': {
+    case (game.settings.get('minimal-ui', 'sidePanelPosition') == 'center'): {
       rootStyle.setProperty('--leftbarpos', '20vmin');
       rootStyle.setProperty('--navistart', '10px');
       break;
     }
-    case 'lower': {
+    case (game.settings.get('minimal-ui', 'sidePanelPosition') ==  'lower'): {
       rootStyle.setProperty('--leftbarpos', '30vmin');
       rootStyle.setProperty('--navistart', '10px');
       break;
     }
-    case 'bottom': {
+    case (game.settings.get('minimal-ui', 'sidePanelPosition') ==  'bottom'): {
       rootStyle.setProperty('--leftbarpos', '40vmin');
       rootStyle.setProperty('--navistart', '10px');
       break;
@@ -230,5 +276,20 @@ Hooks.on('renderSceneControls', async function() {
     }
   }
 
-})
+  let locked = controlsLocked ? 'fa-lock' : 'fa-lock-open';
+
+  $("#controls > li.scene-control").on('click', function() {lockControls(false)});
+
+  // To consider: Hide after selecting sub-tool?
+  // $("#controls > li.scene-control.active > ol > li.control-tool").on('click', function() {lockControls(true)});
+
+  if (game.settings.get('minimal-ui', 'sidePanel') == 'autohide') {
+    $("#controls").append(`<li id="sidebar-lock" class="scene-control" title="Pin Sidebar">
+                                 <i class="fas ${locked}" style="color: red" onclick="lockControls(true)"></i>
+                             </li>`);
+    if (game.settings.get('minimal-ui', 'sidePanelSize') == 'small') {
+      $("#controls > #sidebar-lock").addClass("small-left-panel");
+    }
+  }
 
+})

module.json

@@ -3,7 +3,7 @@
 	"title": "Minimal UI",
 	"author": "JeansenVaars#2857",
 	"description": "Minimal UI reduces size of Foundry interface and allows hiding or collapsing specific parts.",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"minimumCoreVersion": "0.7.9",
 	"compatibleCoreVersion": "0.7.9",
 	"scripts": [ "minimalui.js" ],