mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-09-20 04:53:43 +02:00
Change segment list layout in popup
This commit is contained in:
parent
2808b76655
commit
87a7f85c24
2 changed files with 28 additions and 9 deletions
|
@ -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%;
|
||||||
|
@ -41,8 +49,12 @@
|
||||||
border: none;
|
border: none;
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot {
|
.dot {
|
||||||
|
|
25
src/popup.ts
25
src/popup.ts
|
@ -385,6 +385,12 @@ 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 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) + ": ";
|
const prefix = utils.shortCategoryName(segmentTimes[i].category) + ": ";
|
||||||
|
|
||||||
let extraInfo = "";
|
let extraInfo = "";
|
||||||
|
@ -395,14 +401,16 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||||
//this one is too short
|
//this one is too short
|
||||||
extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
|
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");
|
const votingButtons = document.createElement("div");
|
||||||
votingButtons.classList.add("votingButtons");
|
votingButtons.classList.add("votingButtons");
|
||||||
|
@ -411,7 +419,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;
|
||||||
|
@ -431,7 +439,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
|
||||||
|
@ -445,7 +453,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);
|
||||||
|
|
Loading…
Reference in a new issue