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

Merge pull request #606 from MRuy/popup-design-changes

Browse Source 
Change segment list layout in popup
This commit is contained in:
Ajay Ramachandran
2021-05-30 22:55:56 -04:00
committed by GitHub
parent a6b9af62f9 dabe3553a6
commit 6525f1ba87
2 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/popup.css
View File

@@ -10,6 +10,14 @@
display: none !important; display: none !important;
} }
.sponsorTimesCategoryColorCircle {
margin: 0 8px;
}
.voteButtonsContainer--hide {
display: none;
}
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
#sponsorBlockPopupBody { #sponsorBlockPopupBody {
width: 100%; width: 100%;
@@ -43,6 +51,7 @@
outline: none; outline: none;
cursor: pointer; cursor: pointer;
white-space: nowrap;
} }
.dot { .dot {
@@ -277,8 +286,6 @@ background-color:#ec1c1c;
min-height: 16px; min-height: 16px;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
height: 100%;
} }
.SBWhitelistIcon>path { .SBWhitelistIcon>path {

24
src/popup.ts
View File

@@ -372,7 +372,11 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
const sponsorTimeButton = document.createElement("button"); const sponsorTimeButton = document.createElement("button");
sponsorTimeButton.className = "segmentTimeButton popupElement"; sponsorTimeButton.className = "segmentTimeButton popupElement";
const prefix = utils.shortCategoryName(segmentTimes[i].category) + ": "; 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");
let extraInfo = ""; let extraInfo = "";
if (segmentTimes[i].hidden === SponsorHideType.Downvoted) { if (segmentTimes[i].hidden === SponsorHideType.Downvoted) {
@@ -383,13 +387,14 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")"; extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
} }
sponsorTimeButton.innerText = prefix + utils.getFormattedTime(segmentTimes[i].segment[0], true) + " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true) + extraInfo; 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";
const categoryColorCircle = document.createElement("span"); sponsorTimeButton.appendChild(categoryColorCircle);
categoryColorCircle.id = "sponsorTimesCategoryColorCircle" + UUID; sponsorTimeButton.appendChild(textNode);
categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category].color; sponsorTimeButton.appendChild(segmentTimeFromToNode);
categoryColorCircle.classList.add("dot");
categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle");
const votingButtons = document.createElement("div"); const votingButtons = document.createElement("div");
votingButtons.classList.add("votingButtons"); votingButtons.classList.add("votingButtons");
@@ -398,7 +403,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
const voteButtonsContainer = document.createElement("div"); const voteButtonsContainer = document.createElement("div");
voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID; voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
voteButtonsContainer.setAttribute("align", "center"); voteButtonsContainer.setAttribute("align", "center");
voteButtonsContainer.style.display = "none" voteButtonsContainer.classList.add('voteButtonsContainer--hide');
const upvoteButton = document.createElement("img"); const upvoteButton = document.createElement("img");
upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID; upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
@@ -427,7 +432,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
//add click listener to open up vote panel //add click listener to open up vote panel
sponsorTimeButton.addEventListener("click", function() { sponsorTimeButton.addEventListener("click", function() {
voteButtonsContainer.style.removeProperty("display"); voteButtonsContainer.classList.toggle("voteButtonsContainer--hide");
}); });
// Will contain request status // Will contain request status
@@ -441,7 +446,6 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
thanksForVotingText.classList.add("sponsorTimesThanksForVotingText"); thanksForVotingText.classList.add("sponsorTimesThanksForVotingText");
voteStatusContainer.appendChild(thanksForVotingText); voteStatusContainer.appendChild(thanksForVotingText);
votingButtons.append(categoryColorCircle);
votingButtons.append(sponsorTimeButton); votingButtons.append(sponsorTimeButton);
votingButtons.append(voteButtonsContainer); votingButtons.append(voteButtonsContainer);
votingButtons.append(voteStatusContainer); votingButtons.append(voteStatusContainer);