Merge remote-tracking branch 'origin/pr/6818'

1 files changed, 129 insertions, 21 deletions

diff --git a/qutebrowser/html/settings.html b/qutebrowser/html/settings.html
index 44824eeac..dfbc5c168 100644
--- a/qutebrowser/html/settings.html
+++ b/qutebrowser/html/settings.html
@@ -13,22 +13,112 @@ var cset = function(option, value) {
 {% endblock %}
 
 {% block style %}
-table { border: 1px solid grey; border-collapse: collapse; }
-pre { margin: 2px; }
-th, td { border: 1px solid grey; padding: 0px 5px; }
-th { background: lightgrey; }
-th pre { color: grey; text-align: left; }
-input { width: 98%; }
-.setting { width: 75%; }
-.value { width: 25%; text-align: center; }
-.noscript, .noscript-text { color:red; }
-.noscript-text { margin-bottom: 5cm; }
-.option_description { margin: .5ex 0; color: grey; font-size: 80%; font-style: italic; white-space: pre-line; }
+table {
+    border-spacing: 10px;
+}
+
+tbody tr:nth-child(odd) {
+    background: #eaf4fb;
+}
+
+pre {
+    margin: 2px;
+}
+
+th {
+    padding: 10px;
+    border-radius: 5px;
+    background: #a6dfff;
+    text-align: left;
+    font-weight: normal;
+    font-size: 1.5rem;
+    color: #084c88;
+}
+
+td {
+    padding: 5px 5px;
+}
+
+th pre {
+    color: grey;
+    text-align: left;
+}
+
+input {
+    padding: 8px;
+    width: 98%;
+    box-sizing: border-box;
+    border-radius: 4px;
+    border: 1px solid #01cdd0;
+    font-size: 0.9rem;
+    font-family: DejaVu, serif;
+}
+
+input:focus {
+    outline: none;
+    border: 2px solid #7a589ea6;
+}
+
+input[type="radio"] {
+    position: absolute; /* Positions the radio button relative to the edges of its containing element */
+    -webkit-appearance: none; /* Removes its native styling */
+    width: min-content;
+    margin: 0;
+    border: none;
+}
+
+label {
+    cursor: pointer;
+    margin-bottom: 2px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    background-color: #dddddd;
+    color: #666666;
+}
+
+input[type="radio"]:checked + label {
+    background-color: #a6dfff;
+    color: #084c88;
+}
+
+.setting {
+    width: 60%;
+}
+
+.value {
+    width: 25%;
+    text-align: center;
+}
+
+.valid-value {
+    text-align: center;
+}
+
+.noscript, .noscript-text {
+    color: red;
+}
+
+.noscript-text {
+    margin-bottom: 5cm;
+}
+
+.option-description {
+    margin: .5ex 0;
+    color: #635d5dcf;
+    font-size: 80%;
+    font-style: italic;
+    white-space: pre-line;
+}
+
+.radio-button {
+    position: relative; /* The absolutely positioned element inside this tag (the radio button) gets positioned relative to it. */
+    display: inline-flex;
+    margin: 3px 1px;
+}
 {% endblock %}
 
 {% block content %}
 <noscript><h1 class="noscript">View Only</h1><p class="noscript-text">Changing settings requires javascript to be enabled!</p></noscript>
-<header><h1>{{ title }}</h1></header>
 <table>
     <tr>
         <th>Setting</th>
@@ -37,18 +127,36 @@ input { width: 98%; }
   {% for option in configdata.DATA.values()|sort(attribute='name') if not option.no_autoconfig %}
     <tr>
       <!-- FIXME: convert to string properly -->
-      <td class="setting">{{ option.name }} (Current: {{ confget(option.name) | string |truncate(100) }})
+      <td class="setting">{{ option.name }}
         {% if option.description %}
-          <p class="option_description">{{ option.description|e }}</p>
+          <p class="option-description">{{ option.description|e }}</p>
         {% endif %}
       </td>
-      <td class="value">
-        <input type="text"
-          id="input-{{ option.name }}"
-          onblur="cset('{{ option.name }}', this.value)"
-          value="{{ confget(option.name) }}">
-        </input>
-      </td>
+      {% if option.typ.valid_values is not none %}
+        <td class="valid-value">
+          {% for value in option.typ.valid_values.values %}
+	    <div class="radio-button">
+	      <input type="radio" id="input-{{ option.name }}-{{ loop.index0 }}"
+	        name="{{ option.name }}" value="{{ value }}"
+	        onclick="cset('{{ option.name }}', this.value)"
+	        {% if confget(option.name) == value %}
+		  checked
+		{% endif %}>
+	      <label for="input-{{ option.name }}-{{ loop.index0 }}">
+	        {{ value }}
+	      </label>
+	      </div>
+	  {% endfor %}
+	</td>
+      {% else %}
+        <td class="value">
+	  <input type="text"
+	    id="input-{{ option.name }}"
+	    onblur="cset('{{ option.name }}', this.value)"
+	    value="{{ confget(option.name) }}">
+	  </input>
+        </td>
+      {% endif %}
     </tr>
   {% endfor %}
 </table>