mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-09-19 20:51:28 +02:00
Popup.html redesign
This commit is contained in:
parent
a4d9d83989
commit
34ea13ecba
3 changed files with 61 additions and 32 deletions
|
@ -11,14 +11,12 @@
|
|||
color: var(--sb-main-fg-color);
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 13px;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
width: calc(100% - 6px);
|
||||
height: calc(100% - 36px);
|
||||
overflow-y: unset;
|
||||
padding: 18px 3px;
|
||||
height: calc(100% - 22px);
|
||||
padding: 22px 3px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
@ -47,6 +45,7 @@ div.logoText>p, .recordingSubtitle {
|
|||
border-radius: 25px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
min-height: 24px;
|
||||
height: 24px;
|
||||
width: 152px;
|
||||
display: block;
|
||||
|
@ -131,10 +130,21 @@ div.logoText>p, .recordingSubtitle {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
#videoInfo {
|
||||
#mainControls, #sponsorTimesSkipsDoneContainer, .toggleSwitchContainer {
|
||||
margin-bottom: 2px !important;
|
||||
}
|
||||
|
||||
.recordingSubtitle {
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.logoText {
|
||||
margin-bottom: 6px !important;
|
||||
}
|
||||
|
||||
#videoInfo, .sidebyside, #sponsorTimesSkipsDoneContainer, .largeButton {
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
/* additional buttons */
|
||||
|
||||
#additionalButtons {
|
||||
|
@ -163,14 +173,15 @@ label>svg>path {
|
|||
fill: var(--sb-main-fg-color);
|
||||
}
|
||||
|
||||
label>p, #disableExtension>p, #usernameValue, #usernameElement > p,#sponsorTimesContributionsContainer > p {
|
||||
label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponsorTimesContributionsContainer > div > p, #usernameElement > div > #setUsername > #setUsernameStatusContainer > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#usernameElement > p, #sponsorTimesContributionsContainer {
|
||||
#usernameElement > div > p, #sponsorTimesContributionsContainer {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
|
||||
.grayedOut>label>svg>path {
|
||||
fill: var(--sb-gray-fg-color);
|
||||
}
|
||||
|
@ -192,8 +203,19 @@ label>svg, button#optionsButton>img, .logoText>img, #usernameValue {
|
|||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
#usernameElement {
|
||||
width: 137px;
|
||||
#mainControls>label, #additionalButtons>button, div#setUsernameContainer>button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#usernameElement > div, #sponsorTimesContributionsContainer > div {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.sidebyside > #usernameElement, .sidebyside > #sponsorTimesContributionsContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#usernameValue{
|
||||
|
@ -201,21 +223,25 @@ label>svg, button#optionsButton>img, .logoText>img, #usernameValue {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#setUsername {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
#usernameInput {
|
||||
background: none;
|
||||
padding: 0;
|
||||
border: none;
|
||||
color: var(--sb-main-fg-color);
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
|
||||
/* footer */
|
||||
|
||||
#sbFooter {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
#sbFooter > a {
|
||||
color: var(--sb-main-fg-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* end reset */
|
||||
|
||||
#sponsorBlockPopupLogo {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
<div class="sidebyside">
|
||||
<div id="disableExtension">
|
||||
<!--github: mbledkowski/toggle-switch-->
|
||||
<label for="toggleSwitch" class="toggleSwitchContainer bottomSpace">
|
||||
<label for="toggleSwitch" class="toggleSwitchContainer">
|
||||
<input type="checkbox" style="display:none;" id="toggleSwitch" checked>
|
||||
<span class="switchBg shadow"></span>
|
||||
<span class="switchBg white"></span>
|
||||
|
@ -55,6 +55,7 @@
|
|||
<h1 class="recordingSubtitle">__MSG_yourWork__</h1>
|
||||
<div class="sidebyside">
|
||||
<div id="usernameElement">
|
||||
<div>
|
||||
<p>__MSG_Username__</p>
|
||||
<div id="setUsernameContainer">
|
||||
<p id="usernameValue"></p>
|
||||
|
@ -71,12 +72,15 @@
|
|||
<img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sponsorTimesContributionsContainer" style="display: none">
|
||||
<div>
|
||||
<p>__MSG_soFarUHSubmited__</p>
|
||||
<span id="sponsorTimesContributionsDisplay">
|
||||
0
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -104,7 +108,6 @@
|
|||
</div>
|
||||
<a class="discreteLink largeButton" href="https://sponsor.ajay.app/stats"
|
||||
target="_blank">__MSG_viewLeaderboard__</a>
|
||||
<button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>
|
||||
<footer id="sbFooter">
|
||||
<a href="https://sponsor.ajay.app" target="_blank" rel="noopener">Website</a> |
|
||||
<a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a> |
|
||||
|
|
30
src/popup.ts
30
src/popup.ts
|
@ -57,7 +57,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
"enableSkipping",
|
||||
"toggleSwitch",
|
||||
// Options
|
||||
"showNoticeAgain",
|
||||
//"showNoticeAgain",
|
||||
"optionsButton",
|
||||
// More controls
|
||||
//"submitTimes",
|
||||
|
@ -71,7 +71,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
"sponsorTimesViewsDisplay",
|
||||
"sponsorTimesViewsDisplayEndWord",
|
||||
// sponsorTimesOthersTimeSaved
|
||||
"sponsorTimesOthersTimeSavedContainer",
|
||||
//"sponsorTimesOthersTimeSavedContainer",
|
||||
"sponsorTimesOthersTimeSavedDisplay",
|
||||
"sponsorTimesOthersTimeSavedEndWord",
|
||||
// sponsorTimesSkipsDone
|
||||
|
@ -125,7 +125,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
//PageElements.disableSkipping.addEventListener("click", () => toggleSkipping(true));
|
||||
//PageElements.enableSkipping.addEventListener("click", () => toggleSkipping(false));
|
||||
//PageElements.submitTimes.addEventListener("click", submitTimes);
|
||||
PageElements.showNoticeAgain.addEventListener("click", showNoticeAgain);
|
||||
//PageElements.showNoticeAgain.addEventListener("click", showNoticeAgain);
|
||||
PageElements.setUsernameButton.addEventListener("click", setUsernameButton);
|
||||
PageElements.submitUsername.addEventListener("click", submitUsername);
|
||||
PageElements.optionsButton.addEventListener("click", openOptions);
|
||||
|
@ -167,9 +167,9 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
//if the don't show notice again variable is true, an option to
|
||||
// disable should be available
|
||||
let dontShowNotice = Config.config.dontShowNotice;
|
||||
if (dontShowNotice != undefined && dontShowNotice) {
|
||||
/*if (dontShowNotice != undefined && dontShowNotice) {
|
||||
PageElements.showNoticeAgain.style.display = "unset";
|
||||
}
|
||||
}*/
|
||||
|
||||
utils.sendRequestToServer("GET", "/api/getUsername?userID=" + Config.config.userID, (res) => {
|
||||
if (res.status === 200) {
|
||||
|
@ -179,13 +179,13 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
|
||||
//get the amount of times this user has contributed and display it to thank them
|
||||
if (Config.config.sponsorTimesContributed != undefined) {
|
||||
if (Config.config.sponsorTimesContributed !== 1) {
|
||||
//PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsors");
|
||||
/*if (Config.config.sponsorTimesContributed !== 1) {
|
||||
PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsors");
|
||||
} else {
|
||||
//PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsor");
|
||||
}
|
||||
PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsor");
|
||||
}*/
|
||||
PageElements.sponsorTimesContributionsDisplay.innerText = Config.config.sponsorTimesContributed;
|
||||
PageElements.sponsorTimesContributionsContainer.style.display = "unset";
|
||||
PageElements.sponsorTimesContributionsContainer.style.display = "flex";
|
||||
|
||||
//get the userID
|
||||
let userID = Config.config.userID;
|
||||
|
@ -220,7 +220,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
}
|
||||
|
||||
PageElements.sponsorTimesOthersTimeSavedDisplay.innerText = getFormattedHours(minutesSaved);
|
||||
PageElements.sponsorTimesOthersTimeSavedContainer.style.display = "unset";
|
||||
//PageElements.sponsorTimesOthersTimeSavedContainer.style.display = "unset";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
@ -784,11 +784,11 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
}
|
||||
}
|
||||
|
||||
function showNoticeAgain() {
|
||||
/*function showNoticeAgain() {
|
||||
Config.config.dontShowNotice = false;
|
||||
|
||||
PageElements.showNoticeAgain.style.display = "none";
|
||||
}
|
||||
}*/
|
||||
|
||||
function updateStartTimeChosen() {
|
||||
//update startTimeChosen letiable
|
||||
|
@ -834,7 +834,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
PageElements.usernameInput.style.display = "unset";
|
||||
|
||||
PageElements.setUsernameContainer.style.display = "none";
|
||||
PageElements.setUsername.style.display = "unset";
|
||||
PageElements.setUsername.style.display = "flex";
|
||||
PageElements
|
||||
PageElements.setUsernameStatusContainer.style.display = "none";
|
||||
} else {
|
||||
|
@ -1097,7 +1097,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
if (chrome.tabs != undefined) {
|
||||
//add the width restriction (because Firefox)
|
||||
let link = <HTMLLinkElement> document.getElementById("sponsorBlockStyleSheet");
|
||||
(<CSSStyleSheet> link.sheet).insertRule('.popupBody { width: 325 }', 0);
|
||||
//(<CSSStyleSheet> link.sheet).insertRule('.popupBody { width: 325 }', 0);
|
||||
|
||||
//this means it is actually opened in the popup
|
||||
runThePopup();
|
||||
|
|
Loading…
Reference in a new issue