Merge pull request #864 from Masaabu/better-popup-options

Better features options

Author: rgantzos

extras/popup/popup.css

@@ -68,15 +68,6 @@ a {
 
 .feature label {
   color: var(--primary-color);
-  position: relative;
-  top: -0.7rem;
-  margin-left: 0.5rem;
-}
-
-.feature input[type="checkbox"] {
-  display: inline-block;
-  width: 1.25rem;
-  cursor: pointer;
 }
 
 .feature > span {
@@ -108,9 +99,10 @@ a {
   margin-bottom: 0rem;
 }
 .feature p {
-  color: var(--secondary-color);
+  margin: 5px 0;
   opacity: 0.5;
   padding-right: 4rem;
+  color: var(--secondary-color);
 }
 
 .feature > input {
@@ -121,19 +113,18 @@ a {
 .feature input {
   padding: 0.1vw;
   height: 2rem;
-  margin-left: 0.5vw;
-  background-color: var(--theme);
+  margin-left: auto;
   border-radius: 1rem;
   outline: none;
   border: 0px;
+  background-color: var(--theme);
   color: white;
 }
 
 .feature input {
   color: var(--color);
   background-color: var(--feature-input-bg);
   padding-left: 1rem !important;
-  margin-bottom: 0.5rem;
 }
 .feature button {
   cursor: pointer;
@@ -238,14 +229,25 @@ a {
 .feature input {
   padding: 0.1vw;
   height: 2rem;
-  margin-left: 0.5vw;
+  margin-left: auto;
   border-radius: 1rem;
   outline: none;
   border: 0px;
   color: white;
   background-color: var(--feature-input-bg);
 }
 
+.feature input[type="checkbox"] {
+  display: inline-block;
+  width: 1.25rem;
+  min-width: 55px;
+  cursor: pointer;
+}
+.feature input[type="color"] {
+  padding: 0.1vw !important;
+  border-radius: 0.4rem;
+}
+
 /*Switch*/
 .switch {
   position: relative;
@@ -431,14 +433,17 @@ span.new-feature-tag.beta {
 }
 
 .special-switch {
-  position: relative;
   width: 55px;
   height: 28px;
+  margin-left: auto;
   transform: scale(80%);
-  float: right;
   position: relative;
-  top: -0.25rem;
-  margin: 0px;
+}
+
+.feature .option {
+  display: flex;
+  margin: 5px 0;
+  align-items: center;
 }
 
 .feature table,

extras/popup/popup.js

@@ -686,42 +686,33 @@ async function getFeatures() {
       for (var optionPlace in feature.options) {
         var option = feature.options[optionPlace];
         var input = document.createElement("input");
+        input.type = ["text", "checkbox", "number", "color"][option.type || 0];
         input.dataset.id = option.id;
         input.dataset.feature = feature.id;
-        input.placeholder = option.name;
-        input.type = ["text", "checkbox", "number", "color"][option.type || 0];
         var optionData = (await chrome.storage.sync.get(option.id))[option.id];
         input.value = optionData || "";
+        input.placeholder = `Enter ${input.type}`;
+        var optionDiv = document.createElement("div")
+        optionDiv.className = "option";
+        var label = document.createElement("label");
+        label.textContent = option.name;
+        optionDiv.appendChild(label)
+
         if (input.type === "checkbox") {
+          input.checked = optionData || false;
           var specialLabel = document.createElement("label");
           specialLabel.className = "special-switch";
-          input.className = "checkbox"
+          input.classList.add = "checkbox"
           var span = document.createElement("span");
           span.className = "slider round";
           specialLabel.appendChild(input);
           specialLabel.appendChild(span);
+          optionDiv.appendChild(specialLabel)
         } else {
-        div.appendChild(input);
-        }
-        if (input.type === "checkbox") {
-          let table = document.createElement("table")
-          let tr = document.createElement("tr")
-          table.appendChild(tr)
-
-          let td1 = document.createElement("td")
-          tr.appendChild(td1)
-          let td2 = document.createElement("td")
-          tr.appendChild(td2)
-
-          div.appendChild(table)
-
-          var label = document.createElement("label");
-          label.textContent = option.name;
-          label.style.marginLeft = "0px"
-          td1.appendChild(label);
-          td2.appendChild(specialLabel)
-          input.checked = optionData || false;
+          optionDiv.appendChild(input)
         }
+        div.appendChild(optionDiv)
+
         input.dataset.validation = btoa(
           JSON.stringify(option.validation || [])
         );

extras/style.css

@@ -122,6 +122,7 @@ a {
 }
 
 .feature p {
+  margin: 5px 0;
   opacity: 0.5;
   font-size: 0.8rem;
   padding-right: 4rem;
@@ -131,11 +132,10 @@ a {
 .feature input {
   padding: 0.1vw;
   height: 2rem;
-  margin-left: 0.5vw;
+  margin-left: auto;
   border-radius: 1rem;
   outline: none;
   padding-left: 1rem;
-  margin-bottom: 0.5rem;
   border: 0px;
   color: var(--primary-color);
   background-color: var(--feature-input-bg);
@@ -144,8 +144,13 @@ a {
 .feature input[type="checkbox"] {
   display: inline-block;
   width: 1.25rem;
+  min-width: 55px;
   cursor: pointer;
 }
+.feature input[type="color"] {
+  padding: 0.1vw;
+  border-radius: 0.4rem;
+}
 
 .feature > input {
   display: block;
@@ -188,9 +193,6 @@ a {
 
 .feature label {
   color: var(--primary-color);
-  position: relative;
-  top: -0.7rem;
-  margin-left: 0.5rem;
 }
 
 .feature > span {
@@ -793,14 +795,17 @@ span.new-feature-tag.beta {
 }
 
 .special-switch {
-  position: relative;
   width: 55px;
   height: 28px;
-  margin: 0px;
+  margin-left: auto;
   transform: scale(80%);
-  float: right;
   position: relative;
-  top: -0.25rem;
+}
+
+.feature .option {
+  display: flex;
+  margin: 5px 0;
+  align-items: center;
 }
 
 .feature table,