From 7cbace9cc90affa8f7b679f2b5555a4a5b882579 Mon Sep 17 00:00:00 2001 From: Kendall Werts Date: Mon, 26 Aug 2019 14:47:02 -0500 Subject: [PATCH 1/7] fix for #766 issues with display in overflow menu --- src/css/popup.css | 12 +++++++----- src/js/popup.js | 6 ++++++ 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/css/popup.css b/src/css/popup.css index 5c36ee6..7044908 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -19,8 +19,8 @@ html { body { font-family: Roboto, Noto, "San Francisco", Ubuntu, "Segoe UI", "Fira Sans", message-box, Arial, sans-serif; - inline-size: 300px; - max-inline-size: 300px; + inline-size: calc(var(--overflow-size) + 300px); + max-inline-size: calc(var(--overflow-size) + 300px); } :root { @@ -45,8 +45,10 @@ body { --small-text-size: 0.833rem; /* 10px */ --small-radius: 3px; --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */ - --column-panel-inline-size: 268px; + --column-panel-inline-size: calc(var(--overflow-size) + 268px); --inactive-opacity: 0.3; + --overflow-size: 0px; + --icon-fit: 8; } @media (min-resolution: 1dppx) { @@ -577,7 +579,7 @@ span ~ .panel-header-text { } .edit-containers-panel .userContext-wrapper { - max-inline-size: 204px; + max-inline-size: calc(var(--overflow-size) + 204px); } .disable-edit-containers { @@ -822,7 +824,7 @@ span ~ .panel-header-text { align-items: center; block-size: 29px; display: flex; - flex: 0 0 calc(100% / 8); + flex: 0 0 calc(100% / var(--icon-fit)); } .radio-choice > .radio-container > label { diff --git a/src/js/popup.js b/src/js/popup.js index af38b7b..c61480b 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -272,6 +272,12 @@ const Logic = { throw new Error("Something really bad happened. Unknown panel: " + panel); } + if (window.innerWidth > 300) { + //if popup is in the overflow menu, window will be larger than 300px + var root = document.documentElement; + root.style.setProperty('--overflow-size', "125px"); + root.style.setProperty('--icon-fit', "12"); + } this._previousPanel = this._currentPanel; this._currentPanel = panel; From bbe655d8790bd6937f6173ca2462321f54853739 Mon Sep 17 00:00:00 2001 From: Kendall Werts Date: Mon, 26 Aug 2019 17:06:48 -0500 Subject: [PATCH 2/7] fixed first panel issue --- src/js/popup.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/js/popup.js b/src/js/popup.js index c61480b..240ca00 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -272,12 +272,7 @@ const Logic = { throw new Error("Something really bad happened. Unknown panel: " + panel); } - if (window.innerWidth > 300) { - //if popup is in the overflow menu, window will be larger than 300px - var root = document.documentElement; - root.style.setProperty('--overflow-size', "125px"); - root.style.setProperty('--icon-fit', "12"); - } + this._previousPanel = this._currentPanel; this._currentPanel = panel; @@ -296,6 +291,16 @@ const Logic = { } }); document.querySelector(this.getPanelSelector(this._panels[panel])).classList.remove("hide"); + window.setTimeout(function () { + //sometimes this executes before the window is there and window.innerWidth returns undefined + var width = window.innerWidth; + if (width > 300) { + //if popup is in the overflow menu, window will be larger than 300px + var root = document.documentElement; + root.style.setProperty('--overflow-size', "125px"); + root.style.setProperty('--icon-fit', "12"); + } + }, 200); }, showPreviousPanel() { From 46349e1a703179141dc6dce1955b586652ddafce Mon Sep 17 00:00:00 2001 From: Kendall Werts Date: Tue, 27 Aug 2019 10:42:58 -0500 Subject: [PATCH 3/7] linted --- src/css/popup.css | 2 +- src/js/popup.js | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/css/popup.css b/src/css/popup.css index 7044908..2b6b0a9 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -47,7 +47,7 @@ body { --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */ --column-panel-inline-size: calc(var(--overflow-size) + 268px); --inactive-opacity: 0.3; - --overflow-size: 0px; + --overflow-size: 0; --icon-fit: 8; } diff --git a/src/js/popup.js b/src/js/popup.js index 240ca00..9028363 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -272,7 +272,6 @@ const Logic = { throw new Error("Something really bad happened. Unknown panel: " + panel); } - this._previousPanel = this._currentPanel; this._currentPanel = panel; @@ -293,12 +292,12 @@ const Logic = { document.querySelector(this.getPanelSelector(this._panels[panel])).classList.remove("hide"); window.setTimeout(function () { //sometimes this executes before the window is there and window.innerWidth returns undefined - var width = window.innerWidth; + const width = window.innerWidth; if (width > 300) { //if popup is in the overflow menu, window will be larger than 300px - var root = document.documentElement; - root.style.setProperty('--overflow-size', "125px"); - root.style.setProperty('--icon-fit', "12"); + const root = document.documentElement; + root.style.setProperty("--overflow-size", "125px"); + root.style.setProperty("--icon-fit", "12"); } }, 200); }, From cc988a303eab5eff4aa87ad543bbc21eab23f2c3 Mon Sep 17 00:00:00 2001 From: Kendall Werts Date: Tue, 27 Aug 2019 11:06:40 -0500 Subject: [PATCH 4/7] lack of px on the zero appears to break it. --- src/css/popup.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/popup.css b/src/css/popup.css index 2b6b0a9..7044908 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -47,7 +47,7 @@ body { --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */ --column-panel-inline-size: calc(var(--overflow-size) + 268px); --inactive-opacity: 0.3; - --overflow-size: 0; + --overflow-size: 0px; --icon-fit: 8; } From 3adb333022022f7291b9bda13784f2ef6c410efc Mon Sep 17 00:00:00 2001 From: Kendall Werts Date: Tue, 27 Aug 2019 11:54:16 -0500 Subject: [PATCH 5/7] solving linter issue without breaking the fix. --- src/css/popup.css | 10 +++++----- src/js/popup.js | 6 +++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/css/popup.css b/src/css/popup.css index 7044908..716480e 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -19,8 +19,8 @@ html { body { font-family: Roboto, Noto, "San Francisco", Ubuntu, "Segoe UI", "Fira Sans", message-box, Arial, sans-serif; - inline-size: calc(var(--overflow-size) + 300px); - max-inline-size: calc(var(--overflow-size) + 300px); + inline-size: calc(var(--overflow-size) + 299px); + max-inline-size: calc(var(--overflow-size) + 299px); } :root { @@ -45,9 +45,9 @@ body { --small-text-size: 0.833rem; /* 10px */ --small-radius: 3px; --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */ - --column-panel-inline-size: calc(var(--overflow-size) + 268px); + --column-panel-inline-size: calc(var(--overflow-size) + 267px); --inactive-opacity: 0.3; - --overflow-size: 0px; + --overflow-size: 1px; --icon-fit: 8; } @@ -579,7 +579,7 @@ span ~ .panel-header-text { } .edit-containers-panel .userContext-wrapper { - max-inline-size: calc(var(--overflow-size) + 204px); + max-inline-size: calc(var(--overflow-size) + 203px); } .disable-edit-containers { diff --git a/src/js/popup.js b/src/js/popup.js index 9028363..2f1dd8c 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -292,11 +292,11 @@ const Logic = { document.querySelector(this.getPanelSelector(this._panels[panel])).classList.remove("hide"); window.setTimeout(function () { //sometimes this executes before the window is there and window.innerWidth returns undefined - const width = window.innerWidth; - if (width > 300) { + const difference = window.innerWidth - document.body.offsetWidth + if (difference > 2) { //if popup is in the overflow menu, window will be larger than 300px const root = document.documentElement; - root.style.setProperty("--overflow-size", "125px"); + root.style.setProperty("--overflow-size", difference + "px"); root.style.setProperty("--icon-fit", "12"); } }, 200); From 529b9bb482491512104b812fc5e09243a4f292ea Mon Sep 17 00:00:00 2001 From: Kendall Werts Date: Tue, 27 Aug 2019 12:22:25 -0500 Subject: [PATCH 6/7] forgot a semicolon --- src/js/popup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/popup.js b/src/js/popup.js index 2f1dd8c..54c2c02 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -292,7 +292,7 @@ const Logic = { document.querySelector(this.getPanelSelector(this._panels[panel])).classList.remove("hide"); window.setTimeout(function () { //sometimes this executes before the window is there and window.innerWidth returns undefined - const difference = window.innerWidth - document.body.offsetWidth + const difference = window.innerWidth - document.body.offsetWidth; if (difference > 2) { //if popup is in the overflow menu, window will be larger than 300px const root = document.documentElement; From 21b7386a94d28150b268323753707bf8715afa5e Mon Sep 17 00:00:00 2001 From: Kendall Werts Date: Wed, 28 Aug 2019 08:39:53 -0500 Subject: [PATCH 7/7] probably a better solution than using a timeout --- src/js/popup.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/js/popup.js b/src/js/popup.js index 54c2c02..80986a2 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -290,16 +290,6 @@ const Logic = { } }); document.querySelector(this.getPanelSelector(this._panels[panel])).classList.remove("hide"); - window.setTimeout(function () { - //sometimes this executes before the window is there and window.innerWidth returns undefined - const difference = window.innerWidth - document.body.offsetWidth; - if (difference > 2) { - //if popup is in the overflow menu, window will be larger than 300px - const root = document.documentElement; - root.style.setProperty("--overflow-size", difference + "px"); - root.style.setProperty("--icon-fit", "12"); - } - }, 200); }, showPreviousPanel() { @@ -1154,3 +1144,14 @@ Logic.registerPanel(P_CONTAINERS_ACHIEVEMENT, { }); Logic.init(); + +window.addEventListener("resize", function () { + //for overflow menu + const difference = window.innerWidth - document.body.offsetWidth; + if (difference > 2) { + //if popup is in the overflow menu, window will be larger than 300px + const root = document.documentElement; + root.style.setProperty("--overflow-size", difference + "px"); + root.style.setProperty("--icon-fit", "12"); + } +}); \ No newline at end of file