external/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2024-09-19 20:51:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

Change segment list layout in popup

Browse source
This commit is contained in:
Nanobyte 2020-12-31 20:59:12 +01:00
parent 2808b76655
commit 87a7f85c24
2 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
public/popup.css
View file

@ -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 {

25
src/popup.ts
View file

@ -385,6 +385,12 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
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<void> {
//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<void> {
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<void> {
//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<void> {
thanksForVotingText.classList.add("sponsorTimesThanksForVotingText");
voteStatusContainer.appendChild(thanksForVotingText);
votingButtons.append(categoryColorCircle);
votingButtons.append(sponsorTimeButton);
votingButtons.append(voteButtonsContainer);
votingButtons.append(voteStatusContainer);