diff --git a/CHANGELOG.md b/CHANGELOG.md index 5769f7c..a6ab314 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +### 0.5.0 +* Enhancement: Macro Hotbar has 3 sizes: 3-6-10 Slots! +* Enhancement: Macro Hotbar collapse button in auto-hide mode removed + ### 0.4.7 * Bugfix: Removed color pickers from players view settings. It was never intended. Please do share feedback if you think diff --git a/README.md b/README.md index 1c5dd59..56d1b90 100644 --- a/README.md +++ b/README.md @@ -4,17 +4,32 @@ Configurable UI module, allows the user to hide, collapse or auto-hide component This includes hiding Foundry's Logo, Players List, Scene Navigation and Macro Bar. -* Foundry Logo may be hidden or resized, and made clickable to toggle UI elements. +### Foundry Logo +* Foundry Logo may be hidden or resized +* Can be made clickable to toggle show/hide HUD (Including chat or not) + +### Player List * Scenes, Player list and left side controls customized for minimalism by default +* Players list may be hidden completely, shown on hover or shown normally + +### Scene Navigation * Scene Navigation allows preview the map on mouse over (GM Only) +* Allows Hiding or having the scene navigation collapsed by default + +### Macro Hotbar * Macro Bar may be hidden, collapsed, auto-hidden (default) or shown +* Macro Bar may be customized to 3 slots, 6 or default 10 * Macro Bar may be repositioned along the X-Axis -* Players list may be hidden completely, shown on hover or shown normally -* Allows Hiding or having the scene navigation collapsed by default + +### Left Side Control Buttons * Left controls may be collapsed into a single column (or not) +* May be shown normally or auto-hide mode on mouse over * Left controls may be standard or small size -* Left controls may be moved vertically and set behavior to auto-hidden -* Colors of borders and shadows and their strength customizeable +* Left controls may be repositioned along the Y-Axis + +### Customization +* Colors of borders and shadows and their strength customizable +* Position of elements in the UI can be modified ## Support with Systems and Modules MinimalUI is made as agnostic as possible. Yet, it is impossible to ensure maximum compatibility. diff --git a/minimalui.css b/minimalui.css index 13ab802..d605c3c 100644 --- a/minimalui.css +++ b/minimalui.css @@ -36,59 +36,61 @@ --macrobarhv: 10px; --macrobarmg: 0px; --macrobarhh: 100%; - + --macrobarwf: 502px; + --bordercolor: #ff4900bd; --shadowcolor: #ff4900bd; --shadowstrength: 10px; } - + #logo { visibility: var(--logovis); height: var(--logoh); width: var(--logow); } - + /** MACRO HOTBAR **/ - + #hotbar:hover { bottom: var(--macrobarhv); transition: 0.5s; } - + #hotbar { left: var(--macrobarxpos); bottom: var(--macrobarypos); visibility: var(--macrobarvis); transition: 0.05s ease-out 0.5s; } - + #hotbar .bar-controls { background: #191919; height: var(--macrobarhh); margin: var(--macrobarmg) 2px; } - + #hotbar .bar-controls a.page-control { font-size: 20px; } - + #hotbar #hotbar-directory-controls { font-size: 14px; } - + #hotbar .bar-controls span.page-number { line-height: var(--macrobarlh2); } - + #hotbar #macro-list:hover { border-top: 1px solid var(--bordercolor); box-shadow: 0px 0px var(--shadowstrength) 2px var(--shadowcolor); transition: 0.5s; } - + #hotbar #macro-list { border-top: 1px solid var(--bordercolor); box-shadow: 0px -1px var(--shadowstrength) 2px var(--shadowcolor); + flex: 0 0 var(--macrobarwf); transition: 0.05s ease-out 0.5s; } diff --git a/minimalui.js b/minimalui.js index e8320a7..0484761 100644 --- a/minimalui.js +++ b/minimalui.js @@ -29,42 +29,42 @@ class MinimalUI { static cssLeftBarVerticalPositionLower = '30vmin'; static cssLeftBarVerticalPositionBottom = '40vmin'; - static cssHotbarHidden = '-50px'; + static cssHotbarHidden = '-48px'; static cssHotbarReveal = '1px'; static cssHotbarShown = '10px'; - - static cssHotbarLeftControlsLineHeight = '12px'; - static cssHotbarRightControlsLineHeight = '20px'; + + static cssHotbarLeftControlsLineHeight = '24px'; + static cssHotbarRightControlsLineHeight = '12px'; static cssHotbarRightControlsLineHeightDnDUi = '10px'; - static cssHotbarControlsAutoHideHeight = '120%'; + static cssHotbarControlsAutoHideHeight = '100%'; static cssHotbarAutoHideHeight = '1px'; - static cssHotbarControlsMargin = '-10px'; - + static cssHotbarControlsMargin = '0px'; + static cssSceneNavNoLogoStart = '5px'; static cssSceneNavSmallLogoStart = '75px'; static cssSceneNavStandardLogoStart = '125px'; static cssSceneNavBullseyeStart = '125px'; - + static cssMinimumMacroBarX = 170; - + static cssPlayersDefaultFontSize = '12px'; static cssPlayersDefaultWidth = '150px'; static cssPlayersDefaultWidthDnDUi = '200px'; - + static htmlHotbarLockButton = ` ` - + static collapse(toggleId) { let target = document.getElementById(toggleId); if (target) { target.click(); } } - + static hideAll(alsoChat) { $('#logo').click(_ => { if (!MinimalUI.hiddenInterface) { @@ -150,11 +150,11 @@ class MinimalUI { $("#controls").append(htmlSidebarLockButton); } } - + } Hooks.on('init', () => { - + game.settings.register('minimal-ui', 'foundryLogoSize', { name: "Foundry Logo Size", hint: "Foundry logo visibility and size", @@ -171,7 +171,7 @@ Hooks.on('init', () => { window.location.reload() } }); - + game.settings.register('minimal-ui', 'foundryLogoBehaviour', { name: "Foundry Logo Behaviour", hint: "Use the Foundry Logo to toggle visual elements (when visible, of course).", @@ -187,7 +187,7 @@ Hooks.on('init', () => { window.location.reload() } }); - + game.settings.register('minimal-ui', 'sceneNavigation', { name: "Scene Navigation Style", hint: "Customize scene navigation behaviour. Consider 'DF Scene Enhancement' when hidden.", @@ -204,7 +204,7 @@ Hooks.on('init', () => { window.location.reload() } }); - + game.settings.register('minimal-ui', 'sceneNavigationSize', { name: "Scene Navigation Size", hint: "Customize scene navigation Size, when visible.", @@ -221,7 +221,7 @@ Hooks.on('init', () => { window.location.reload() } }); - + game.settings.register('minimal-ui', 'sceneNavigationPreview', { name: "Scene Navigation Preview", hint: "Choose whether to show an image preview on the navigation top bar. Experimental feature.", @@ -237,7 +237,7 @@ Hooks.on('init', () => { window.location.reload() } }); - + game.settings.register('minimal-ui', 'sceneNavigationPreviewMargin', { name: "Scene Navigation Preview Margin", hint: "Increase this value if you use scene preview and have too many maps :) Default 10", @@ -268,6 +268,23 @@ Hooks.on('init', () => { } }); + game.settings.register('minimal-ui', 'macroBarSize', { + name: "Macro Bar Slot Size", + hint: "Customize Macro Bar slots & size", + scope: 'world', + config: true, + type: String, + choices: { + "slots_3": "3 Macro Slots", + "slots_6": "6 Macro Slots", + "slots_10": "10 Macro Slots" + }, + default: "slots_10", + onChange: value => { + window.location.reload() + } + }); + game.settings.register('minimal-ui', 'macroBarPosition', { name: "Macro Bar Position", hint: `Reference at 400. Minimum is ${MinimalUI.cssMinimumMacroBarX}. Increase value to move it to right. Reduce to the left.`, @@ -378,9 +395,9 @@ Hooks.on('init', () => { }); Hooks.once('ready', async function() { - + let rootStyle = document.querySelector(':root').style; - + if (game.settings.get('minimal-ui', 'foundryLogoSize') != 'hidden') { switch(game.settings.get('minimal-ui', 'foundryLogoBehaviour')) { case 'toggleAll': { @@ -393,7 +410,7 @@ Hooks.once('ready', async function() { } } } - + switch(game.settings.get('minimal-ui', 'foundryLogoSize')) { case 'small': { rootStyle.setProperty('--logovis', 'visible'); @@ -407,7 +424,7 @@ Hooks.once('ready', async function() { break; } } - + // Compatibility Workaround for bullseye module if (game.modules.has('bullseye') && game.modules.get('bullseye').active) { rootStyle.setProperty('--navixpos', MinimalUI.cssSceneNavBullseyeStart); @@ -415,14 +432,14 @@ Hooks.once('ready', async function() { rootStyle.setProperty('--logoh', '50px'); rootStyle.setProperty('--logow', '100px'); } - + }); Hooks.on('renderPlayerList', async function() { let rootStyle = document.querySelector(':root').style; - + $("#players")[0].val = ""; - + switch(game.settings.get('minimal-ui', 'playerList')) { case 'default': { rootStyle.setProperty('--playerfsize', MinimalUI.cssPlayersDefaultFontSize); @@ -479,9 +496,9 @@ Hooks.on('renderPlayerList', async function() { }); Hooks.on('renderSceneNavigation', async function() { - + let rootStyle = document.querySelector(':root').style; - + switch(game.settings.get('minimal-ui', 'sceneNavigationPreview')) { case 'hover': { if (game.user.isGM) { @@ -524,7 +541,7 @@ Hooks.on('renderSceneNavigation', async function() { break; } } - + switch(game.settings.get('minimal-ui', 'foundryLogoSize')) { case 'hidden': { rootStyle.setProperty('--navixpos', MinimalUI.cssSceneNavNoLogoStart); @@ -535,7 +552,7 @@ Hooks.on('renderSceneNavigation', async function() { break; } } - + // Compatibility Workaround for bullseye module if (game.modules.has('bullseye') && game.modules.get('bullseye').active) { rootStyle.setProperty('--navixpos', MinimalUI.cssSceneNavBullseyeStart); @@ -543,11 +560,11 @@ Hooks.on('renderSceneNavigation', async function() { rootStyle.setProperty('--logoh', '50px'); rootStyle.setProperty('--logow', '100px'); } - + }); Hooks.once('renderSceneNavigation', async function() { - + let rootStyle = document.querySelector(':root').style; switch(game.settings.get('minimal-ui', 'sceneNavigation')) { @@ -561,7 +578,7 @@ Hooks.once('renderSceneNavigation', async function() { break; } } - + switch(game.settings.get('minimal-ui', 'sceneNavigationSize')) { case 'standard': { rootStyle.setProperty('--navilh', '32px'); @@ -576,20 +593,20 @@ Hooks.once('renderSceneNavigation', async function() { break; } } - + }); Hooks.on('renderHotbar', async function() { - + let rootStyle = document.querySelector(':root').style; - + let mbPos = game.settings.get('minimal-ui', 'macroBarPosition'); if (mbPos < MinimalUI.cssMinimumMacroBarX) { rootStyle.setProperty('--macrobarxpos', String(MinimalUI.cssMinimumMacroBarX)+'px'); } else { rootStyle.setProperty('--macrobarxpos', String(mbPos)+'px'); } - + switch(game.settings.get('minimal-ui', 'macroBar')) { case 'collapsed': { rootStyle.setProperty('--macrobarvis', 'visible'); @@ -617,6 +634,7 @@ Hooks.on('renderHotbar', async function() { MinimalUI.lockHotbar(false); } } + $("#bar-toggle").remove(); rootStyle.setProperty('--macrobarvis', 'visible'); break; } @@ -625,6 +643,29 @@ Hooks.on('renderHotbar', async function() { break; } } + + switch(game.settings.get('minimal-ui', 'macroBarSize')) { + case "slots_3": { + $("#macro-list > li").each(function(i, slot) { + if (i > 2) { + console.log($(slot)); + rootStyle.setProperty('--macrobarwf', '152px'); + $(slot).remove(); + } + }); + break; + } + case "slots_6": { + $("#macro-list > li").each(function(i, slot) { + if (i > 5) { + console.log($(slot)); + rootStyle.setProperty('--macrobarwf', '302px'); + $(slot).remove(); + } + }); + break; + } + } }) diff --git a/module.json b/module.json index e2dc7b0..3b3838c 100644 --- a/module.json +++ b/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.4.7", + "version": "0.5.0", "minimumCoreVersion": "0.7.9", "compatibleCoreVersion": "0.7.9", "esmodules": [ "lib/colorsettings/colorSetting.js" ],