From 87a7f85c24f9647c3771ce692805ec20d4aab268 Mon Sep 17 00:00:00 2001
From: Nanobyte <nanobyte@ymail.com>
Date: Thu, 31 Dec 2020 20:59:12 +0100
Subject: [PATCH] Change segment list layout in popup

---
 public/popup.css | 12 ++++++++++++
 src/popup.ts     | 25 ++++++++++++++++---------
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/public/popup.css b/public/popup.css
index 2aa096a6..c658a8af 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -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 {
diff --git a/src/popup.ts b/src/popup.ts
index db34325c..d07a651d 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -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);