Skip to content

Commit

Permalink
Improved scene preview with minimized, better autohide controls, bett…
Browse files Browse the repository at this point in the history 
…er styles
  • Loading branch information
@saif-ellafi
saif-ellafi committed Apr 27, 2021
1 parent a112185 commit 9d1b8d7
Show file tree
Hide file tree
Showing 11 changed files with 121 additions and 78 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion lang/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion lang/es.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions module.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand All @@ -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"
}
120 changes: 72 additions & 48 deletions modules/component/controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
}

Expand Down Expand Up @@ -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();
})

Expand All @@ -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')) {
Expand All @@ -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();
Expand Down
3 changes: 2 additions & 1 deletion modules/component/logo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down
29 changes: 17 additions & 12 deletions modules/component/navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -21,19 +23,20 @@ export default class MinimalUINavigation {
new Image().src = sceneThumbUrl;
$(sceneTab).append(
`
<div style="position: fixed;">
<img
id="hover_preview_${i}"
class="navi-preview"
src='${sceneThumbUrl}' alt="Scene Preview">
</div>
`
<div style="position: fixed;">
<img
id="hover_preview_${i}"
class="navi-preview"
src='${sceneThumbUrl}' alt="Scene Preview">
</div>
`
);
$(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();
Expand All @@ -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)
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion modules/customization/theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
18 changes: 14 additions & 4 deletions modules/feature/minimize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = $(`<div id="minimized-bar" class="app"></div>`);
minimizedBar.appendTo('body');
Expand All @@ -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 = $(`<div id="minimized-bar" class="app"></div>`).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;
}
}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
10 changes: 3 additions & 7 deletions styles/component/controls.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@
--controlsh: 36px;
--controlslh: 36px;
--controlsfs: 24px;
--controlssubstart: 60px;
--controlssubhover: 60px;
--controlssubleft: 60px;
--controlssubstyle: contents;
}

Expand All @@ -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 {
Expand Down Expand Up @@ -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);
Expand All @@ -95,5 +92,4 @@

#controls:hover .active .control-tools {
display: var(--controlssubstyle);
left: var(--controlssubhover);
}

0 comments on commit 9d1b8d7

Please sign in to comment.