mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-09-20 04:53:43 +02:00
Merge pull request #606 from MRuy/popup-design-changes
Change segment list layout in popup
This commit is contained in:
commit
6525f1ba87
2 changed files with 25 additions and 14 deletions
|
@ -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%;
|
||||
|
@ -43,6 +51,7 @@
|
|||
outline: none;
|
||||
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dot {
|
||||
|
@ -277,8 +286,6 @@ background-color:#ec1c1c;
|
|||
min-height: 16px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.SBWhitelistIcon>path {
|
||||
|
|
28
src/popup.ts
28
src/popup.ts
|
@ -372,8 +372,12 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
|||
const sponsorTimeButton = document.createElement("button");
|
||||
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 = "";
|
||||
if (segmentTimes[i].hidden === SponsorHideType.Downvoted) {
|
||||
//this one is downvoted
|
||||
|
@ -382,14 +386,15 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
|||
//this one is too short
|
||||
extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
|
||||
}
|
||||
|
||||
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";
|
||||
|
||||
sponsorTimeButton.innerText = prefix + utils.getFormattedTime(segmentTimes[i].segment[0], true) + " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true) + extraInfo;
|
||||
|
||||
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");
|
||||
sponsorTimeButton.appendChild(categoryColorCircle);
|
||||
sponsorTimeButton.appendChild(textNode);
|
||||
sponsorTimeButton.appendChild(segmentTimeFromToNode);
|
||||
|
||||
const votingButtons = document.createElement("div");
|
||||
votingButtons.classList.add("votingButtons");
|
||||
|
@ -398,7 +403,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;
|
||||
|
@ -427,7 +432,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
|
||||
|
@ -441,7 +446,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);
|
||||
|
|
Loading…
Reference in a new issue