From 87a7f85c24f9647c3771ce692805ec20d4aab268 Mon Sep 17 00:00:00 2001 From: Nanobyte Date: Thu, 31 Dec 2020 20:59:12 +0100 Subject: [PATCH 1/5] Change segment list layout in popup --- public/popup.css | 12 ++++++++++++ src/popup.ts | 25 ++++++++++++++++--------- 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/public/popup.css b/public/popup.css index 2aa096a6..c658a8af 100644 --- a/public/popup.css +++ b/public/popup.css @@ -10,6 +10,14 @@ display: none !important; } +.sponsorTimesCategoryColorCircle { + margin: 0 8px; +} + +.voteButtonsContainer--hide { + display: none; +} + @media only screen and (max-width: 600px) { #sponsorBlockPopupBody { width: 100%; @@ -41,8 +49,12 @@ border: none; padding: 7px; outline: none; + + display: flex; + justify-content: flex-start; cursor: pointer; + white-space: nowrap; } .dot { diff --git a/src/popup.ts b/src/popup.ts index db34325c..d07a651d 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -385,6 +385,12 @@ async function runThePopup(messageListener?: MessageListener): Promise { const sponsorTimeButton = document.createElement("button"); sponsorTimeButton.className = "segmentTimeButton popupElement"; + const categoryColorCircle = document.createElement("span"); + categoryColorCircle.id = "sponsorTimesCategoryColorCircle" + UUID; + categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category].color; + categoryColorCircle.classList.add("dot"); + categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle"); + const prefix = utils.shortCategoryName(segmentTimes[i].category) + ": "; let extraInfo = ""; @@ -395,14 +401,16 @@ async function runThePopup(messageListener?: MessageListener): Promise { //this one is too short extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")"; } + + const segmentTimeFromTo = getFormattedTime(segmentTimes[i].segment[0]) + " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(segmentTimes[i].segment[1]); + + const segmentTimeFromToNode = document.createTextNode(segmentTimeFromTo); + const textNode = document.createTextNode(utils.shortCategoryName(segmentTimes[i].category) + extraInfo); - sponsorTimeButton.innerText = prefix + getFormattedTime(segmentTimes[i].segment[0]) + " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(segmentTimes[i].segment[1]) + extraInfo; + sponsorTimeButton.appendChild(segmentTimeFromToNode); + sponsorTimeButton.appendChild(categoryColorCircle); + sponsorTimeButton.appendChild(textNode); - const categoryColorCircle = document.createElement("span"); - categoryColorCircle.id = "sponsorTimesCategoryColorCircle" + UUID; - categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category].color; - categoryColorCircle.classList.add("dot"); - categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle"); const votingButtons = document.createElement("div"); votingButtons.classList.add("votingButtons"); @@ -411,7 +419,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { const voteButtonsContainer = document.createElement("div"); voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID; voteButtonsContainer.setAttribute("align", "center"); - voteButtonsContainer.style.display = "none" + voteButtonsContainer.classList.add('voteButtonsContainer--hide'); const upvoteButton = document.createElement("img"); upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID; @@ -431,7 +439,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { //add click listener to open up vote panel sponsorTimeButton.addEventListener("click", function() { - voteButtonsContainer.style.removeProperty("display"); + voteButtonsContainer.classList.toggle("voteButtonsContainer--hide"); }); // Will contain request status @@ -445,7 +453,6 @@ async function runThePopup(messageListener?: MessageListener): Promise { thanksForVotingText.classList.add("sponsorTimesThanksForVotingText"); voteStatusContainer.appendChild(thanksForVotingText); - votingButtons.append(categoryColorCircle); votingButtons.append(sponsorTimeButton); votingButtons.append(voteButtonsContainer); votingButtons.append(voteStatusContainer); From da1d4bc1ce912aad64a2cbf1e1dbc8078e68365b Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Wed, 26 May 2021 22:04:38 -0400 Subject: [PATCH 2/5] Improve centering when text is small --- public/popup.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/public/popup.css b/public/popup.css index c658a8af..f1c7791a 100644 --- a/public/popup.css +++ b/public/popup.css @@ -42,6 +42,15 @@ text-align: center; } +#issueReporterContainer { + display: flex; + justify-content: center; +} + +#issueReporterTimeButtons { + text-align: left; +} + #issueReporterTimeButtons > .votingButtons > .segmentTimeButton { font-weight: bold; color: var(--sb-main-fg-color); @@ -49,9 +58,6 @@ border: none; padding: 7px; outline: none; - - display: flex; - justify-content: flex-start; cursor: pointer; white-space: nowrap; From deb0e9b9be24f4770c52842b6d5c403709becd56 Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Wed, 26 May 2021 22:05:05 -0400 Subject: [PATCH 3/5] Fix issue with whitelist button --- public/popup.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/public/popup.css b/public/popup.css index f1c7791a..c562e57e 100644 --- a/public/popup.css +++ b/public/popup.css @@ -295,8 +295,6 @@ background-color:#ec1c1c; min-height: 16px; margin-top: auto; margin-bottom: auto; - - height: 100%; } .SBWhitelistIcon>path { From 0aa346e18e9ee61a75af34f084805f1070c41923 Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Wed, 26 May 2021 22:13:06 -0400 Subject: [PATCH 4/5] Remove unused declaration --- src/popup.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/popup.ts b/src/popup.ts index d07a651d..f265b824 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -391,8 +391,6 @@ async function runThePopup(messageListener?: MessageListener): Promise { categoryColorCircle.classList.add("dot"); categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle"); - const prefix = utils.shortCategoryName(segmentTimes[i].category) + ": "; - let extraInfo = ""; if (segmentTimes[i].hidden === SponsorHideType.Downvoted) { //this one is downvoted From dabe3553a643ab700d61c647e37866b49e3fc7b5 Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Wed, 26 May 2021 22:25:55 -0400 Subject: [PATCH 5/5] Change to stacked layout --- public/popup.css | 9 --------- src/popup.ts | 8 ++++---- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/public/popup.css b/public/popup.css index 4e61f847..0fd1f839 100644 --- a/public/popup.css +++ b/public/popup.css @@ -42,15 +42,6 @@ text-align: center; } -#issueReporterContainer { - display: flex; - justify-content: center; -} - -#issueReporterTimeButtons { - text-align: left; -} - #issueReporterTimeButtons > .votingButtons > .segmentTimeButton { font-weight: bold; color: var(--sb-main-fg-color); diff --git a/src/popup.ts b/src/popup.ts index fffdf43c..7ae6f6d5 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -387,14 +387,14 @@ async function runThePopup(messageListener?: MessageListener): Promise { extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")"; } - const segmentTimeFromTo = utils.getFormattedTime(segmentTimes[i].segment[0], true) + " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true); - - const segmentTimeFromToNode = document.createTextNode(segmentTimeFromTo); const textNode = document.createTextNode(utils.shortCategoryName(segmentTimes[i].category) + extraInfo); + const segmentTimeFromToNode = document.createElement("div"); + segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) + " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true); + segmentTimeFromToNode.style.margin = "5px"; - sponsorTimeButton.appendChild(segmentTimeFromToNode); sponsorTimeButton.appendChild(categoryColorCircle); sponsorTimeButton.appendChild(textNode); + sponsorTimeButton.appendChild(segmentTimeFromToNode); const votingButtons = document.createElement("div"); votingButtons.classList.add("votingButtons");