From 813b2df1ac21994acfee55b751ab2a07ab0b8a89 Mon Sep 17 00:00:00 2001 From: Nikita Krupin Date: Sun, 1 May 2022 22:50:58 -0400 Subject: [PATCH 01/11] popup styling tweaks --- public/popup.css | 84 ++++++++++++++++++++++++++++++++++++++++++++--- public/popup.html | 42 ++++++++++++------------ 2 files changed, 100 insertions(+), 26 deletions(-) diff --git a/public/popup.css b/public/popup.css index 1f1dd637..a28f3d7f 100644 --- a/public/popup.css +++ b/public/popup.css @@ -1,11 +1,16 @@ :root { --sb-main-font-family: "Source Sans Pro", sans-serif; - --sb-main-bg-color: #222626; + --sb-main-bg-color: #111; --sb-main-fg-color: #fff; --sb-grey-bg-color: #333; + --sb-grey-fg-color: #999; --sb-red-bg-color: #cc1717; } +.grey-text { + color: var(--sb-grey-fg-color); +} + /* * Container when popup displayed in-page */ @@ -107,18 +112,76 @@ .sbPopupLogo { display: flex; + flex-direction: column; align-items: center; font-size: 32px; font-weight: bold; justify-content: center; user-select: none; - padding: 20px 0 10px; + padding: 1rem; } .sbPopupLogo img { - margin-right: 8px; + margin: 0.5rem 0; } +/* + * Options button + */ + +#optionsButton { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + background: none; + box-shadow: none; + border: none; + top: 26px; + right: 26px; + padding: 5px; + z-index: 69; + height: 2rem; + width: 2rem; +} +#optionsButton svg { + transition: transform 0.15s ease-in-out !important; + transform-origin: center center; + color: var(--sb-grey-fg-color); +} + +#optionsButton:hover svg { + color: var(--sb-main-fg-color); + transform: rotate(90deg); +} + +#optionsButton:active svg { + transform: scale(1.5); +} + +#optionsButton:before { + content: attr(data-hover); + opacity: 0; + pointer-events: none; + width: content; + color: var(--sb-main-fg-color); + background-color: var(--sb-grey-bg-color); + border-radius: 1rem; + padding: 0.25rem 0.5rem; + transition: .3s; + + position: absolute; + z-index: 1; + left: -200%; + top: 0.25rem; +} + +#optionsButton:hover:before { + opacity: 1; + transform: translateX(-5px); +} + + /* * Refresh segments button */ @@ -397,7 +460,7 @@ .sbYourWorkCols { display: flex; - margin: 0 20px 12px; + margin: 1rem; } .sbYourWorkCols > div { @@ -540,10 +603,21 @@ } #sbFooter a { + display: inline-block; color: var(--sb-main-fg-color); text-decoration: none; + background: #222; + cursor: pointer; + padding: 5px 16px; + border-radius: 4px; + font-weight: 500; + transition: 0.4s; + margin: 2px 1px; } +#sbFooter a:hover { + background: #444; +} /* * "Show Notice Again" button */ @@ -561,7 +635,7 @@ * Generic utilities */ - #sponsorBlockPopupBody .u-mZ { +#sponsorBlockPopupBody .u-mZ { margin: 0 !important; } diff --git a/public/popup.html b/public/popup.html index b1a241c4..175087b0 100644 --- a/public/popup.html +++ b/public/popup.html @@ -15,16 +15,17 @@ __MSG_betaServerWarning__ + - +
-

__MSG_noVideoID__

+

__MSG_noVideoID__

-

+

@@ -32,7 +33,7 @@
- +
-
@@ -80,9 +80,17 @@

__MSG_yourWork__

+
-

__MSG_Username__:

+

__MSG_Username__:

-
@@ -68,50 +68,55 @@

__MSG_recordTimesDescription__

- __MSG_popupHint__ -
- -
- -

__MSG_yourWork__

-
- -
-
-

__MSG_Username__:

-
-

- - -
- + __MSG_help__ __MSG_website__ __MSG_viewLeaderboard__ +
GitHub -
Discord Matrix - __MSG_help__ $ diff --git a/src/content.ts b/src/content.ts index 655259ef..897ebcb7 100644 --- a/src/content.ts +++ b/src/content.ts @@ -1708,7 +1708,6 @@ function openInfoMenu() { //make the logo source not 404 //query selector must be used since getElementByID doesn't work on a node and this isn't added to the document yet const logo = popup.querySelector("#sponsorBlockPopupLogo"); - const settings = popup.querySelector("#sbPopupIconSettings"); const edit = popup.querySelector("#sbPopupIconEdit"); const copy = popup.querySelector("#sbPopupIconCopyUserID"); const check = popup.querySelector("#sbPopupIconCheck"); @@ -1716,7 +1715,6 @@ function openInfoMenu() { const heart = popup.querySelector(".sbHeart"); const close = popup.querySelector("#sbCloseDonate"); logo.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png"); - settings.src = chrome.extension.getURL("icons/settings.svg"); edit.src = chrome.extension.getURL("icons/pencil.svg"); copy.src = chrome.extension.getURL("icons/clipboard.svg"); check.src = chrome.extension.getURL("icons/check.svg"); diff --git a/src/popup.ts b/src/popup.ts index 504229fc..5e14df8a 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -100,7 +100,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { "submitUsername", "sbPopupIconCopyUserID", // More - "submissionSection", + "submissionHint", "mainControls", "loadingIndicator", "videoFound", @@ -411,7 +411,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category]?.color; categoryColorCircle.classList.add("dot"); categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle"); - + let extraInfo = ""; if (segmentTimes[i].hidden === SponsorHideType.Downvoted) { //this one is downvoted @@ -420,26 +420,35 @@ async function runThePopup(messageListener?: MessageListener): Promise { //this one is too short extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")"; } else if (segmentTimes[i].hidden === SponsorHideType.Hidden) { - extraInfo = " (" + chrome.i18n.getMessage("manuallyHidden") + ")"; + extraInfo = " (" + chrome.i18n.getMessage("manuallyHidden") +")"; } - + const textNode = document.createTextNode(utils.shortCategoryName(segmentTimes[i].category) + extraInfo); const segmentTimeFromToNode = document.createElement("div"); if (segmentTimes[i].actionType === ActionType.Full) { segmentTimeFromToNode.innerText = chrome.i18n.getMessage("full"); } else { segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) + - (segmentTimes[i].actionType !== ActionType.Poi - ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true) - : ""); + (segmentTimes[i].actionType !== ActionType.Poi + ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true) + : ""); } - + segmentTimeFromToNode.style.margin = "5px"; + + // for inline-styling purposes + const labelContainer = document.createElement("div"); + labelContainer.appendChild(categoryColorCircle); - segmentSummary.appendChild(categoryColorCircle); - segmentSummary.appendChild(textNode); + const span = document.createElement('span'); + span.className = "summaryLabel"; + span.appendChild(textNode); + labelContainer.appendChild(span); + // for inline-styling purposes + + segmentSummary.appendChild(labelContainer); segmentSummary.appendChild(segmentTimeFromToNode); - + const votingButtons = document.createElement("details"); votingButtons.classList.add("votingButtons"); @@ -562,7 +571,8 @@ async function runThePopup(messageListener?: MessageListener): Promise { function updateSegmentEditingUI() { PageElements.sponsorStart.innerText = chrome.i18n.getMessage(creatingSegment ? "sponsorEnd" : "sponsorStart"); - PageElements.submissionSection.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none"; + PageElements.submitTimes.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none"; + PageElements.submissionHint.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none"; } //make the options div visible From 44f2de42dbe8f573fff6e35fe3c95b42f5343980 Mon Sep 17 00:00:00 2001 From: Nikita Krupin Date: Mon, 2 May 2022 21:28:22 -0400 Subject: [PATCH 04/11] tooltip spacing unit fixes --- public/popup.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/popup.css b/public/popup.css index 010c1fcc..5537fd22 100644 --- a/public/popup.css +++ b/public/popup.css @@ -106,7 +106,7 @@ } .sbPopupLogo img { - margin: 0.5rem; + margin: 8px; } /* @@ -169,14 +169,14 @@ width: content; color: var(--sb-main-fg-color); background-color: var(--sb-grey-bg-color); - border-radius: 1rem; - padding: 0.25rem 0.5rem; + border-radius: 16px; + padding: 4px 8px; transition: .3s; position: absolute; z-index: 1; left: -200%; - top: 0.25rem; + top: 4px; } #optionsButton:hover:before { From 123d7af5eba779ee7584c75638aa438d82954130 Mon Sep 17 00:00:00 2001 From: Nikita Krupin Date: Mon, 2 May 2022 21:32:54 -0400 Subject: [PATCH 05/11] mainControls better spacing --- public/popup.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/popup.css b/public/popup.css index 5537fd22..563f963c 100644 --- a/public/popup.css +++ b/public/popup.css @@ -421,7 +421,7 @@ #mainControls { margin: 16px; - padding: 8px; + padding: 8px 12px; border-radius: 8px; text-align: left; border: 2px solid var(--sb-grey-bg-color); From 42511cb66734ad70cc462df944568b4f6d13f6be Mon Sep 17 00:00:00 2001 From: Nikita Krupin Date: Mon, 2 May 2022 22:26:51 -0400 Subject: [PATCH 06/11] popup.html code cleanup & simplification --- public/popup.css | 9 ++--- public/popup.html | 91 ++++++++++++++++++++++++----------------------- src/popup.ts | 8 ++--- 3 files changed, 53 insertions(+), 55 deletions(-) diff --git a/public/popup.css b/public/popup.css index 563f963c..f4d15c9b 100644 --- a/public/popup.css +++ b/public/popup.css @@ -496,7 +496,6 @@ } #usernameElement { - z-index: 2; padding: 8px; } @@ -550,7 +549,7 @@ * Left align "Username" and "Submissions" labels */ -#usernameElement > div > span, +#usernameElement > span, #sponsorTimesContributionsContainer { text-align: start; } @@ -590,13 +589,11 @@ * Improve alignment of username and submissions */ -#usernameElement > div, -#sponsorTimesContributionsContainer > div { +#usernameElement, +#sponsorTimesContributionsContainer { display: flex; flex-direction: column; justify-content: start; - /* flex-flow: column nowrap; */ - /* align-items: flex-start; */ } /* diff --git a/public/popup.html b/public/popup.html index c444a16d..1bc5e1d1 100644 --- a/public/popup.html +++ b/public/popup.html @@ -15,7 +15,6 @@ __MSG_betaServerWarning__
-
+
+ @@ -64,6 +66,7 @@ __MSG_forceChannelCheckPopup__ + - +
-   __MSG_yourWork__ +   __MSG_yourWork__
-
- __MSG_Username__: - - - -
-

- - -
- + __MSG_Username__: + + + +
+

+ + +
+
diff --git a/src/popup.ts b/src/popup.ts index 5e14df8a..7b5a815e 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -92,7 +92,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { // Username "setUsernameContainer", "setUsernameButton", - "setUsernameStatusContainer", + "setUsernameStatus", "setUsernameStatus", "setUsername", "usernameInput", @@ -599,7 +599,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { PageElements.setUsername.style.display = "flex"; PageElements.setUsername.classList.add("SBExpanded"); - PageElements.setUsernameStatusContainer.style.display = "none"; + PageElements.setUsernameStatus.style.display = "none"; PageElements.sponsorTimesContributionsContainer.classList.add("hidden"); } @@ -607,7 +607,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { //submit the new username function submitUsername() { //add loading indicator - PageElements.setUsernameStatusContainer.style.display = "unset"; + PageElements.setUsernameStatus.style.display = "unset"; PageElements.setUsernameStatus.innerText = chrome.i18n.getMessage("Loading"); utils.sendRequestToServer("POST", "/api/setUsername?userID=" + Config.config.userID + "&username=" + PageElements.usernameInput.value, function (response) { @@ -620,7 +620,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { PageElements.setUsername.classList.remove("SBExpanded"); PageElements.usernameValue.innerText = PageElements.usernameInput.value; - PageElements.setUsernameStatusContainer.style.display = "none"; + PageElements.setUsernameStatus.style.display = "none"; PageElements.sponsorTimesContributionsContainer.classList.remove("hidden"); } else { From ccc1f4cad104a169b175ec1b9088a93bf8cd6a1c Mon Sep 17 00:00:00 2001 From: Nikita Krupin Date: Tue, 3 May 2022 00:05:04 -0400 Subject: [PATCH 07/11] popup.css organization in topological order --- public/popup.css | 521 +++++++++++++++++++--------------------------- public/popup.html | 2 +- 2 files changed, 213 insertions(+), 310 deletions(-) diff --git a/public/popup.css b/public/popup.css index f4d15c9b..2c2a28bf 100644 --- a/public/popup.css +++ b/public/popup.css @@ -1,48 +1,52 @@ :root { --sb-main-font-family: "Source Sans Pro", sans-serif; - --sb-main-bg-color: #212121; + --sb-main-bg-color: #222; --sb-main-fg-color: #fff; --sb-grey-bg-color: #333; --sb-grey-fg-color: #999; --sb-red-bg-color: #cc1717; } +/* + * Generic utilities + */ .grey-text { color: var(--sb-grey-fg-color); } .white-text { color: var(--sb-main-fg-color); } - -/* - * Container when popup displayed in-page - */ - -#sponsorBlockPopupContainer { +.sbHeader { + font-size: 20px; + font-weight: bold; + text-align: left; + margin: 0; +} +#sponsorBlockPopupBody .u-mZ { + margin: 0 !important; position: relative; - margin-bottom: 16px; +} + +#sponsorBlockPopupBody .hidden { + display: none !important; } /* - * Disable popup max height when displayed in-page + *
- +
  __MSG_yourWork__
From 9664bbea736a1d5254a42b765c1871059563f088 Mon Sep 17 00:00:00 2001 From: Ajay Date: Fri, 3 Jun 2022 01:38:32 -0400 Subject: [PATCH 08/11] Change alignment of some popup elements --- public/popup.css | 11 +++++++++ public/popup.html | 60 ++++++++++++++++++++++++----------------------- src/popup.ts | 2 +- 3 files changed, 43 insertions(+), 30 deletions(-) diff --git a/public/popup.css b/public/popup.css index 9b9905e2..46b690c4 100644 --- a/public/popup.css +++ b/public/popup.css @@ -268,6 +268,10 @@ white-space: normal; } +.sbVoteButtonsContainer { + text-align: right; +} + /* * Buttons that appear under a segment on click */ @@ -465,7 +469,14 @@ .sbYourWorkCols > div { display: flex; border-top: 2px solid var(--sb-grey-bg-color); + border-bottom: 2px solid var(--sb-grey-bg-color); } + +.sbStatsSentence { + padding-top: 5px; + padding-bottom: 5px; +} + /* * Increase font size of username input and display */ diff --git a/public/popup.html b/public/popup.html index 2c7cd6c1..b038706e 100644 --- a/public/popup.html +++ b/public/popup.html @@ -84,8 +84,10 @@
-
-   __MSG_yourWork__ +
+

+ __MSG_yourWork__ +

@@ -115,36 +117,36 @@ 0
-
- - + __MSG_Segments__ +
+ ( + + 0 + __MSG_minsLower__ + + __MSG_youHaveSavedTimeEnd__ + ) +

+ +