Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-12 06:27:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

popup.html code cleanup & simplification

Browse Source
This commit is contained in:
Nikita Krupin
2022-05-02 22:26:51 -04:00
parent 123d7af5eb
commit 42511cb667
3 changed files with 53 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/popup.css
View File

@@ -496,7 +496,6 @@
} }
#usernameElement { #usernameElement {
z-index: 2;
padding: 8px; padding: 8px;
} }
@@ -550,7 +549,7 @@
* Left align "Username" and "Submissions" labels * Left align "Username" and "Submissions" labels
*/ */
#usernameElement > div > span, #usernameElement > span,
#sponsorTimesContributionsContainer { #sponsorTimesContributionsContainer {
text-align: start; text-align: start;
} }
@@ -590,13 +589,11 @@
* Improve alignment of username and submissions * Improve alignment of username and submissions
*/ */
#usernameElement > div, #usernameElement,
#sponsorTimesContributionsContainer > div { #sponsorTimesContributionsContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: start; justify-content: start;
/* flex-flow: column nowrap; */
/* align-items: flex-start; */
} }
/* /*

91
public/popup.html
View File

@@ -15,7 +15,6 @@
__MSG_betaServerWarning__ __MSG_betaServerWarning__
</div> </div>
<header class="sbPopupLogo"> <header class="sbPopupLogo">
<img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo"> <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
<p class="u-mZ" style="margin: auto;">SponsorBlock</p> <p class="u-mZ" style="margin: auto;">SponsorBlock</p>
@@ -29,11 +28,13 @@
<button id="refreshSegmentsButton" title="__MSG_refreshSegments__"> <button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
<img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" /> <img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
</button> </button>
<!-- Video Segments -->
<div id="issueReporterContainer"> <div id="issueReporterContainer">
<div id="issueReporterTimeButtons"></div> <div id="issueReporterTimeButtons"></div>
</div> </div>
</div> </div>
<!-- Toggle Box -->
<div class="sbControlsMenu"> <div class="sbControlsMenu">
<label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item"> <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
<input type="checkbox" style="display:none;" id="whitelistToggle"> <input type="checkbox" style="display:none;" id="whitelistToggle">
@@ -55,6 +56,7 @@
<span id="disableSkipping">__MSG_disableSkipping__</span> <span id="disableSkipping">__MSG_disableSkipping__</span>
<span id="enableSkipping" style="display: none">__MSG_enableSkipping__</span> <span id="enableSkipping" style="display: none">__MSG_enableSkipping__</span>
</label> </label>
<!-- Settings link, re-positioned to top-right -->
<button id="optionsButton" data-hover="__MSG_Options__" title="__MSG_OptionsInfo__"> <button id="optionsButton" data-hover="__MSG_Options__" title="__MSG_OptionsInfo__">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M24 13.6v-3.2c-1.7-.6-2.7-.8-3.2-2h0c-.5-1.3.1-2.1.8-3.7l-2.3-2.3c-1.6.7-2.4 1.4-3.7.8h0c-1.3-.5-1.4-1.6-2-3.2h-3.2c-.6 1.6-.7 2.7-2 3.2h0c-1.3.5-2.1-.1-3.7-.8L2.4 4.7c.7 1.6 1.4 2.4.8 3.7s-1.6 1.4-3.2 2v3.2c1.6.6 2.7.7 3.2 2 .5 1.3-.1 2.2-.8 3.7l2.3 2.3c1.6-.7 2.4-1.4 3.7-.8h0c1.3.5 1.4 1.6 2 3.2h3.2c.6-1.6.8-2.7 2-3.2h0c1.3-.5 2.1.1 3.7.9l2.3-2.3c-.7-1.6-1.4-2.4-.8-3.7s1.6-1.4 3.2-2zM12 16a4 4 0 1 1 0-8 4 4 0 1 1 0 8z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M24 13.6v-3.2c-1.7-.6-2.7-.8-3.2-2h0c-.5-1.3.1-2.1.8-3.7l-2.3-2.3c-1.6.7-2.4 1.4-3.7.8h0c-1.3-.5-1.4-1.6-2-3.2h-3.2c-.6 1.6-.7 2.7-2 3.2h0c-1.3.5-2.1-.1-3.7-.8L2.4 4.7c.7 1.6 1.4 2.4.8 3.7s-1.6 1.4-3.2 2v3.2c1.6.6 2.7.7 3.2 2 .5 1.3-.1 2.2-.8 3.7l2.3 2.3c1.6-.7 2.4-1.4 3.7-.8h0c1.3.5 1.4 1.6 2 3.2h3.2c.6-1.6.8-2.7 2-3.2h0c1.3-.5 2.1.1 3.7.9l2.3-2.3c-.7-1.6-1.4-2.4-.8-3.7s1.6-1.4 3.2-2zM12 16a4 4 0 1 1 0-8 4 4 0 1 1 0 8z"/></svg>
</button> </button>
@@ -64,6 +66,7 @@
__MSG_forceChannelCheckPopup__ __MSG_forceChannelCheckPopup__
</a> </a>
<!-- Submit box -->
<div id="mainControls" style="display: none"> <div id="mainControls" style="display: none">
<p class="sbHeader"> <p class="sbHeader">
__MSG_recordTimesDescription__ __MSG_recordTimesDescription__
@@ -76,69 +79,67 @@
<span id="submissionHint" style="display: none;">__MSG_submissionEditHint__</span> <span id="submissionHint" style="display: none;">__MSG_submissionEditHint__</span>
</div> </div>
<!-- Your Work --> <!-- Your Work dropdown -->
<details class="sbYourWorkCols"> <details class="sbYourWorkCols">
<summary class="recordingSubtitle sbHeader" style="padding: 8px 16px; cursor: pointer;">&nbsp;&nbsp;__MSG_yourWork__</summary> <summary class="sbHeader" style="padding: 8px 16px; cursor: pointer;">&nbsp;&nbsp;__MSG_yourWork__</summary>
<div> <div>
<!-- Username --> <!-- Username -->
<div id="usernameElement"> <div id="usernameElement">
<div> <span class="u-mZ grey-text">__MSG_Username__:
<span class="u-mZ grey-text">__MSG_Username__: <!-- loading/errors -->
<!-- loading/errors --> <span id="setUsernameStatus" class="u-mZ white-text" style="display: none"></span>
<span id="setUsernameStatusContainer" style="display: none"> </span>
<span id="setUsernameStatus" class="u-mZ white-text"></span> <div id="setUsernameContainer">
</span> <p id="usernameValue"></p>
</span> <button id="setUsernameButton" title="__MSG_setUsername__">
<div id="setUsernameContainer"> <img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
<p id="usernameValue"></p> </button>
<button id="setUsernameButton" title="__MSG_setUsername__"> <button id="copyUserID" title="__MSG_copyPublicID__">
<img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit"> <img src="/icons/clipboard.svg" alt="__MSG_copyPublicID__" width="16" height="16" id="sbPopupIconCopyUserID">
</button> </button>
<button id="copyUserID" title="__MSG_copyPublicID__"> </div>
<img src="/icons/clipboard.svg" alt="__MSG_copyPublicID__" width="16" height="16" id="sbPopupIconCopyUserID"> <div id="setUsername" style="display: none">
</button> <input id="usernameInput" placeholder="Username">
</div> <button id="submitUsername">
<div id="setUsername" style="display: none"> <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
<input id="usernameInput" placeholder="Username"> </button>
<button id="submitUsername">
<img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
</button>
</div>
</div> </div>
</div> </div>
<!-- Submissions --> <!-- Submissions -->
<div id="sponsorTimesContributionsContainer" class="hidden"> <div id="sponsorTimesContributionsContainer" class="hidden">
<div> <p class="u-mZ grey-text">__MSG_Submissions__:</p>
<p class="u-mZ grey-text">__MSG_Submissions__:</p> <span id="sponsorTimesContributionsDisplay">0</span>
<span id="sponsorTimesContributionsDisplay">
0
</span>
</div>
</div> </div>
</div> </div>
</details> </details>
<p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ"> <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ">
__MSG_savedPeopleFrom__ __MSG_savedPeopleFrom__
<b><span id="sponsorTimesViewsDisplay"> <b>
0 <span id="sponsorTimesViewsDisplay">0</span>
</span></b> </b>
<span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span> <span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
<br> <br />
(<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span> (
<span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b> <b>
<span>__MSG_youHaveSavedTimeEnd__</span>). <span id="sponsorTimesOthersTimeSavedDisplay">0</span>
<span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span>
</b>
<span>__MSG_youHaveSavedTimeEnd__</span>
).
</p> </p>
<p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ"> <p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ">
__MSG_youHaveSkipped__ __MSG_youHaveSkipped__
<b><span id="sponsorTimesSkipsDoneDisplay"> <b>
0 <span id="sponsorTimesSkipsDoneDisplay">0</span>
</span></b> </b>
<span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span> <span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
(<b><span id="sponsorTimeSavedDisplay"> (
0 <b>
</span> <span id="sponsorTimeSavedDisplay">0</span>
<span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span></b>). <span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span>
</b>
).
</p> </p>
<footer id="sbFooter"> <footer id="sbFooter">

8
src/popup.ts
View File

@@ -92,7 +92,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
// Username // Username
"setUsernameContainer", "setUsernameContainer",
"setUsernameButton", "setUsernameButton",
"setUsernameStatusContainer", "setUsernameStatus",
"setUsernameStatus", "setUsernameStatus",
"setUsername", "setUsername",
"usernameInput", "usernameInput",
@@ -599,7 +599,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
PageElements.setUsername.style.display = "flex"; PageElements.setUsername.style.display = "flex";
PageElements.setUsername.classList.add("SBExpanded"); PageElements.setUsername.classList.add("SBExpanded");
PageElements.setUsernameStatusContainer.style.display = "none"; PageElements.setUsernameStatus.style.display = "none";
PageElements.sponsorTimesContributionsContainer.classList.add("hidden"); PageElements.sponsorTimesContributionsContainer.classList.add("hidden");
} }
@@ -607,7 +607,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
//submit the new username //submit the new username
function submitUsername() { function submitUsername() {
//add loading indicator //add loading indicator
PageElements.setUsernameStatusContainer.style.display = "unset"; PageElements.setUsernameStatus.style.display = "unset";
PageElements.setUsernameStatus.innerText = chrome.i18n.getMessage("Loading"); PageElements.setUsernameStatus.innerText = chrome.i18n.getMessage("Loading");
utils.sendRequestToServer("POST", "/api/setUsername?userID=" + Config.config.userID + "&username=" + PageElements.usernameInput.value, function (response) { 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<void> {
PageElements.setUsername.classList.remove("SBExpanded"); PageElements.setUsername.classList.remove("SBExpanded");
PageElements.usernameValue.innerText = PageElements.usernameInput.value; PageElements.usernameValue.innerText = PageElements.usernameInput.value;
PageElements.setUsernameStatusContainer.style.display = "none"; PageElements.setUsernameStatus.style.display = "none";
PageElements.sponsorTimesContributionsContainer.classList.remove("hidden"); PageElements.sponsorTimesContributionsContainer.classList.remove("hidden");
} else { } else {