From 9d1b8d7717e4147dd1874621dd5cb6ac37006051 Mon Sep 17 00:00:00 2001 From: Saif Addin Date: Tue, 27 Apr 2021 03:14:52 +0200 Subject: [PATCH] Improved scene preview with minimized, better autohide controls, better styles --- CHANGELOG.md | 7 ++ lang/en.json | 2 +- lang/es.json | 2 +- module.json | 4 +- modules/component/controls.js | 120 +++++++++++++++++++------------- modules/component/logo.js | 3 +- modules/component/navigation.js | 29 ++++---- modules/customization/theme.js | 2 +- modules/feature/minimize.js | 18 +++-- package.json | 2 +- styles/component/controls.css | 10 +-- 11 files changed, 121 insertions(+), 78 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 462755b..e288af2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +### 0.8.8 +* Enhancement: Minimized mode will use bottom of screen when Macro Hotbar is hidden +* Compatibility: Give MyTab priority over the control of FoundryVTT Logo +* Bugfix: Improved controls auto-hide mode for better responsiveness and spacing +* Bugfix: Fixed styling inaccuracies on some Minimized elements +* Bugfix: Fixed scene preview blinking when hovering through scenes with minimized windows + ### 0.8.7 * Bugfix: Fixed styling issues with Minimized bottom bar * Bugfix: Fixed incorrect shadow direction diff --git a/lang/en.json b/lang/en.json index e7d90aa..9b2ad2d 100644 --- a/lang/en.json +++ b/lang/en.json @@ -79,7 +79,7 @@ "MinimalUI.ShadowColorName": "Shadow Colors", "MinimalUI.ShadowColorHint": "Default: #ff4900bd", "MinimalUI.ShadowStrengthName": "Shadow Strength", - "MinimalUI.ShadowStrengthHint": "How gloomy and shadow are the borders? Default: 10", + "MinimalUI.ShadowStrengthHint": "How gloomy and shadow are the borders? Default: 5", "MinimalUI.ColorPicker": "Color Picker", "MinimalUI.DynamicUIName": "MINIMAL UI Dynamic Mode", diff --git a/lang/es.json b/lang/es.json index ca50a03..66d106d 100644 --- a/lang/es.json +++ b/lang/es.json @@ -79,7 +79,7 @@ "MinimalUI.ShadowColorName": "Color sombreado", "MinimalUI.ShadowColorHint": "Por defecto: #ff4900bd", "MinimalUI.ShadowStrengthName": "Fuerza sombreado", - "MinimalUI.ShadowStrengthHint": "Grado de sombreado y oscuridad de los bordes. Por defecto: 10", + "MinimalUI.ShadowStrengthHint": "Grado de sombreado y oscuridad de los bordes. Por defecto: 5", "MinimalUI.ColorPicker": "Escoger color", "MinimalUI.DynamicUIName": "Modo dinámico MINIMAL UI", diff --git a/module.json b/module.json index 7ab98d2..e0d2cea 100644 --- a/module.json +++ b/module.json @@ -3,7 +3,7 @@ "title": "Minimal UI", "author": "JeansenVaars#2857", "description": "Minimal UI allows customizing Foundry interface, by hiding, collapsing or resizing specific parts.", - "version": "0.8.7", + "version": "0.8.8", "minimumCoreVersion": "0.7.9", "compatibleCoreVersion": "0.7.9", "dependencies": [ @@ -26,5 +26,5 @@ ], "url": "https://github.com/saif-ellafi/foundryvtt-minimal-ui.git", "manifest": "https://github.com/saif-ellafi/foundryvtt-minimal-ui/releases/latest/download/module.json", - "download": "https://github.com/saif-ellafi/foundryvtt-minimal-ui/releases/latest/download/foundryvtt-minimal-ui_0.8.7.zip" + "download": "https://github.com/saif-ellafi/foundryvtt-minimal-ui/releases/latest/download/foundryvtt-minimal-ui_0.8.8.zip" } diff --git a/modules/component/controls.js b/modules/component/controls.js index b347b05..049fd9a 100644 --- a/modules/component/controls.js +++ b/modules/component/controls.js @@ -7,53 +7,74 @@ export default class MinimalUIControls { static fakeDisabled = false; static cssControlsLastPos = '0px'; + static controlToolsHoverTransition; + static cssControlsStartVisible = '0px'; static cssControlsHiddenPositionSmall = '-62px'; static cssControlsHiddenPositionStandard = '-72px'; - static cssControlsSubMenuSmall = '48px'; - static cssControlsSubMenuStandard = '58px'; - static cssControlsSubMenuDndUi = '58px'; + static cssControlsSubMenuSmall = '55px'; + static cssControlsSubMenuStandard = '65px'; + static cssControlsSubMenuDndUi = '65px'; static cssControlsPaddingDefault = '7px'; - static cssControlsPaddingSmall = '26px'; + static cssControlsPaddingHidden = '26px'; static cssControlsSmallWidth = '25px'; static cssControlsSmallHeight = '28px'; static cssControlsSmallLineHeight = '30px'; static cssControlsSmallFontSize = '15px'; + static revealControls() { + rootStyle.setProperty('--controlspad', MinimalUIControls.cssControlsPaddingDefault); + rootStyle.setProperty('--controlsxpos', MinimalUIControls.cssControlsStartVisible); + } + + static revealControlTools() { + if (game.settings.get('minimal-ui', 'controlsSize') === 'small') { + rootStyle.setProperty('--controlssubleft', MinimalUIControls.cssControlsSubMenuSmall); + } else { + rootStyle.setProperty('--controlssubleft', MinimalUIControls.cssControlsSubMenuStandard); + } + // Special compatibility DnD-UI + if (game.modules.get('dnd-ui') && game.modules.get('dnd-ui').active) { + rootStyle.setProperty('--controlssubleft', MinimalUIControls.cssControlsSubMenuDndUi); + } + // --- + } + + static hideControls() { + rootStyle.setProperty('--controlspad', MinimalUIControls.cssControlsPaddingHidden); + if (game.settings.get('minimal-ui', 'controlsSize') === 'small') { + rootStyle.setProperty('--controlsxpos', MinimalUIControls.cssControlsHiddenPositionSmall); + } else { + rootStyle.setProperty('--controlsxpos', MinimalUIControls.cssControlsHiddenPositionStandard); + } + } + + static hideControlTools() { + if (game.settings.get('minimal-ui', 'controlsSize') === 'small') { + rootStyle.setProperty('--controlssubleft', MinimalUIControls.cssControlsHiddenPositionSmall); + } else { + rootStyle.setProperty('--controlssubleft', MinimalUIControls.cssControlsHiddenPositionStandard); + } + } + static lockControls(unlock) { const sidebarLock = $("#sidebar-lock > i"); if (!MinimalUIControls.controlsLocked) { MinimalUIControls.controlsLocked = true; MinimalUIControls.cssControlsLastPos = rootStyle.getPropertyValue('--controlsxpos'); - rootStyle.setProperty('--controlsxpos', MinimalUIControls.cssControlsStartVisible); - rootStyle.setProperty('--controlspad', MinimalUIControls.cssControlsPaddingDefault); - if (game.settings.get('minimal-ui', 'controlsSize') === 'small') { - rootStyle.setProperty('--controlssubstart', MinimalUIControls.cssControlsSubMenuSmall); - } else { - rootStyle.setProperty('--controlssubstart', MinimalUIControls.cssControlsSubMenuStandard); - } - // Special compatibility DnD-UI - if (game.modules.get('dnd-ui') && game.modules.get('dnd-ui').active) { - rootStyle.setProperty('--controlssubstart', MinimalUIControls.cssControlsSubMenuDndUi); - rootStyle.setProperty('--controlssubhover', MinimalUIControls.cssControlsSubMenuDndUi); - } - // --- + MinimalUIControls.revealControls(); + MinimalUIControls.revealControlTools(); sidebarLock.removeClass("fa-lock-open"); sidebarLock.addClass("fa-lock"); } else if (unlock) { MinimalUIControls.controlsLocked = false; sidebarLock.removeClass("fa-lock"); sidebarLock.addClass("fa-lock-open"); - rootStyle.setProperty('--controlsxpos', MinimalUIControls.cssControlsLastPos); - if (game.settings.get('minimal-ui', 'controlsSize') === 'small') { - rootStyle.setProperty('--controlssubstart', MinimalUIControls.cssControlsHiddenPositionSmall); - } else { - rootStyle.setProperty('--controlssubstart', MinimalUIControls.cssControlsHiddenPositionStandard); - } - rootStyle.setProperty('--controlspad', MinimalUIControls.cssControlsPaddingSmall); + MinimalUIControls.hideControls(); + MinimalUIControls.hideControlTools(); } } @@ -168,23 +189,11 @@ export default class MinimalUIControls { static initHooks() { Hooks.once('renderSceneControls', async function() { if (game.settings.get('minimal-ui', 'controlsSize') === 'small') { - rootStyle.setProperty('--controlssubstart', MinimalUIControls.cssControlsSubMenuSmall); - rootStyle.setProperty('--controlssubhover', MinimalUIControls.cssControlsSubMenuSmall); rootStyle.setProperty('--controlsw', MinimalUIControls.cssControlsSmallWidth); rootStyle.setProperty('--controlsh', MinimalUIControls.cssControlsSmallHeight); rootStyle.setProperty('--controlslh', MinimalUIControls.cssControlsSmallLineHeight); rootStyle.setProperty('--controlsfs', MinimalUIControls.cssControlsSmallFontSize); - } else { - rootStyle.setProperty('--controlssubstart', MinimalUIControls.cssControlsSubMenuStandard); - rootStyle.setProperty('--controlssubhover', MinimalUIControls.cssControlsSubMenuStandard); - } - // Special compatibility DnD-UI - if (game.modules.get('dnd-ui') && game.modules.get('dnd-ui').active) { - rootStyle.setProperty('--controlssubstart', MinimalUIControls.cssControlsSubMenuDndUi); - rootStyle.setProperty('--controlssubhover', MinimalUIControls.cssControlsSubMenuDndUi); } - // --- - MinimalUIControls.positionSidebar(); }) @@ -205,11 +214,12 @@ export default class MinimalUIControls { } } - }) + }); Hooks.on('renderSceneControls', async function() { const controls = $("#controls"); + const controlSettings = game.settings.get('minimal-ui', 'controlsBehaviour'); // Hide controls altogether when they're disabled if (!MinimalUIControls.fakeDisabled && controls.hasClass('disabled')) { @@ -218,18 +228,32 @@ export default class MinimalUIControls { controls.show(); } - if (game.settings.get('minimal-ui', 'controlsBehaviour') === 'autohide' && !MinimalUIControls.controlsLocked) { - if (game.settings.get('minimal-ui', 'controlsSize') === 'small') { - rootStyle.setProperty('--controlsxpos', MinimalUIControls.cssControlsHiddenPositionSmall); - rootStyle.setProperty('--controlssubstart', MinimalUIControls.cssControlsHiddenPositionSmall); - } else { - rootStyle.setProperty('--controlsxpos', MinimalUIControls.cssControlsHiddenPositionStandard); - rootStyle.setProperty('--controlssubstart', MinimalUIControls.cssControlsHiddenPositionStandard); - } - rootStyle.setProperty('--controlspad', MinimalUIControls.cssControlsPaddingSmall); + if (controlSettings === 'autohide') { + controls.hover( + function () { + if (!MinimalUIControls.controlsLocked) { + MinimalUIControls.revealControls(); + MinimalUIControls.revealControlTools(); + clearTimeout(MinimalUIControls.controlToolsHoverTransition); + } + }, + function () { + if (!MinimalUIControls.controlsLocked) { + MinimalUIControls.controlToolsHoverTransition = setTimeout(function () { + MinimalUIControls.hideControls(); + MinimalUIControls.hideControlTools(); + }, 500) + } + } + ) + } + + if (controlSettings === 'autohide' && !MinimalUIControls.controlsLocked) { + MinimalUIControls.hideControls(); + MinimalUIControls.hideControlTools(); } else { - rootStyle.setProperty('--controlspad', MinimalUIControls.cssControlsPaddingDefault); - rootStyle.setProperty('--controlsxpos', MinimalUIControls.cssControlsStartVisible); + MinimalUIControls.revealControls(); + MinimalUIControls.revealControlTools(); } MinimalUIControls.addLockButton(); diff --git a/modules/component/logo.js b/modules/component/logo.js index 70ca8b7..528d3f8 100644 --- a/modules/component/logo.js +++ b/modules/component/logo.js @@ -30,7 +30,8 @@ export default class MinimalUILogo { } static updateImageSrc(srcimg) { - if (game.settings.get('minimal-ui', 'foundryLogoSize') !== 'hidden') { + const logoSetting = game.settings.get('minimal-ui', 'foundryLogoSize'); + if (!game.modules.get('mytab')?.active && logoSetting !== 'hidden') { $("#logo") .attr('src', srcimg) .on('error', function () { diff --git a/modules/component/navigation.js b/modules/component/navigation.js index 130b9f6..307b149 100644 --- a/modules/component/navigation.js +++ b/modules/component/navigation.js @@ -7,6 +7,8 @@ export default class MinimalUINavigation { static cssSceneNavSmallLogoStart = '75px'; static cssSceneNavBullseyeStart = '125px'; + static naviHoverTransition; + static collapseNavigation(toggleId) { let target = document.getElementById(toggleId); if (target) { @@ -21,19 +23,20 @@ export default class MinimalUINavigation { new Image().src = sceneThumbUrl; $(sceneTab).append( ` -
- Scene Preview -
- ` +
+ Scene Preview +
+ ` ); $(sceneTab).hover( function() { if (!$(sceneTab).hasClass('view')) { const minimized = game.settings.get('minimal-ui', 'organizedMinimize'); $(`#hover_preview_${i}`).show(); + clearTimeout(MinimalUINavigation.naviHoverTransition); if (['top', 'topBar'].includes(minimized)) { $("#minimized-bar")?.hide(); $(".minimized").hide(); @@ -45,11 +48,13 @@ export default class MinimalUINavigation { const minimized = game.settings.get('minimal-ui', 'organizedMinimize'); $(`#hover_preview_${i}`).hide(); if (['top', 'topBar'].includes(minimized)) { - const minimized = $(".minimized"); - if (minimized.length > 0) { - $("#minimized-bar")?.show(); - minimized.show(); - } + MinimalUINavigation.naviHoverTransition = setTimeout(function() { + const minimizedApps = $(".minimized"); + if (minimizedApps.length > 0) { + $("#minimized-bar")?.fadeIn('fast'); + minimizedApps.fadeIn('fast'); + } + }, 500) } } } diff --git a/modules/customization/theme.js b/modules/customization/theme.js index 6c6d16c..1368d4c 100644 --- a/modules/customization/theme.js +++ b/modules/customization/theme.js @@ -9,7 +9,7 @@ export default class MinimalUITheme { hint: game.i18n.localize("MinimalUI.ShadowStrengthHint"), scope: "world", config: true, - default: "10", + default: "5", type: String, onChange: _ => { rootStyle.setProperty('--shadowstrength', game.settings.get('minimal-ui', 'shadowStrength') + 'px'); diff --git a/modules/feature/minimize.js b/modules/feature/minimize.js index 5e0b890..857bb0a 100644 --- a/modules/feature/minimize.js +++ b/modules/feature/minimize.js @@ -212,7 +212,7 @@ export default class MinimalUIMinimize { } case 'topBar': { rootStyle.setProperty('--minimbot', 'unset'); - rootStyle.setProperty('--minimtop', '65px'); + rootStyle.setProperty('--minimtop', '66px'); rootStyle.setProperty('--minileft', MinimalUIMinimize.cssTopBarLeftStart + 'px'); const minimizedBar = $(`
`); minimizedBar.appendTo('body'); @@ -222,18 +222,28 @@ export default class MinimalUIMinimize { } case 'bottom': { MinimalUIMinimize.fixMinimizedRule('top', 'unset'); - MinimalUIMinimize.fixMinimizedRule('bottom', '75px'); + const hotbarSetting = game.settings.get('minimal-ui', 'hotbar'); + if (hotbarSetting === 'hidden' || (hotbarSetting === 'onlygm' && !game.user?.isGM)) + MinimalUIMinimize.fixMinimizedRule('bottom', '10px'); + else + MinimalUIMinimize.fixMinimizedRule('bottom', '75px'); break; } case 'bottomBar': { - rootStyle.setProperty('--minimbot', '70px'); rootStyle.setProperty('--minimtop', 'unset'); rootStyle.setProperty('--minileft', MinimalUIMinimize.cssBottomBarLeftStart + 'px'); const minimizedBar = $(`
`).hide(); minimizedBar.appendTo('body'); + const hotbarSetting = game.settings.get('minimal-ui', 'hotbar'); + if (hotbarSetting === 'hidden' || (hotbarSetting === 'onlygm' && !game.user?.isGM)) { + rootStyle.setProperty('--minimbot', '5px'); + MinimalUIMinimize.fixMinimizedRule('bottom', '11px'); + } else { + rootStyle.setProperty('--minimbot', '70px'); + MinimalUIMinimize.fixMinimizedRule('bottom', '75px'); + } MinimalUIMinimize.refreshMinimizeBar(); MinimalUIMinimize.fixMinimizedRule('top', 'unset'); - MinimalUIMinimize.fixMinimizedRule('bottom', '75px'); break; } } diff --git a/package.json b/package.json index 43380c6..2cb9f1f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "foundryvtt-minimal-ui", - "version": "0.8.7", + "version": "0.8.8", "description": "Minimal UI allows customizing Foundry interface, by hiding, collapsing or resizing specific parts.", "main": "minimalui.js", "scripts": { diff --git a/styles/component/controls.css b/styles/component/controls.css index 2889d06..0aea145 100644 --- a/styles/component/controls.css +++ b/styles/component/controls.css @@ -7,8 +7,7 @@ --controlsh: 36px; --controlslh: 36px; --controlsfs: 24px; - --controlssubstart: 60px; - --controlssubhover: 60px; + --controlssubleft: 60px; --controlssubstyle: contents; } @@ -18,15 +17,13 @@ margin-top: var(--controlsypos); border-right: 1px solid var(--bordercolor); box-shadow: 3px 0 var(--shadowstrength) 0 var(--shadowcolor); - transition: 0.1s; + transition: 0.5s; padding-right: var(--controlspad); background: #0000003b; } #controls:hover { - left: 0; transition: 0.5s; - padding-right: 7px; } #controls .control-tool.toggle { @@ -85,7 +82,7 @@ #controls .active .control-tools { display: var(--controlssubstyle); - left: var(--controlssubstart); + left: var(--controlssubleft); transition: 0.5s; background: #00000059; border: solid 1px var(--bordercolor); @@ -95,5 +92,4 @@ #controls:hover .active .control-tools { display: var(--controlssubstyle); - left: var(--controlssubhover); } \ No newline at end of file