From 83d5f64db6190f604b62788dece417267d51b3e5 Mon Sep 17 00:00:00 2001
From: Mark Veidemanis <m@zm.is>
Date: Fri, 26 Aug 2022 18:05:24 +0100
Subject: [PATCH] Replace checkboxes with switches and fix sentiment visibility

---
 core/templates/ui/drilldown/drilldown.html | 80 ++++++++++++++--------
 1 file changed, 53 insertions(+), 27 deletions(-)

diff --git a/core/templates/ui/drilldown/drilldown.html b/core/templates/ui/drilldown/drilldown.html
index 25f938d..eb2a3ea 100644
--- a/core/templates/ui/drilldown/drilldown.html
+++ b/core/templates/ui/drilldown/drilldown.html
@@ -140,7 +140,7 @@
                 <input
                   id="full_query"
                   type="checkbox"
-                  class="switch is-rounded"
+                  class="switch is-rounded is-info"
                   {% if params.query_full is not None %}checked="checked"{% else %}none{% endif %}
                   {% if not perms.core.query_search %}disabled{% endif %}
                   data-script="on click toggle .is-hidden on #query_full">
@@ -187,20 +187,24 @@
               </p>
             </div>
             <div class="control">
-              <label class="button has-text-link">
-                <input type="checkbox"
-                       name="dedup"
-                       {% if params.dedup == "on" %}
-                         checked
-                       {% endif %}>
-                <span class="icon" data-tooltip="Deduplicate results">
-                  <i class="fa-solid fa-copy"></i>
-                </span>
-              </label>
+              <div class="field">
+                <input
+                  id="dedup_switch"
+                  type="checkbox"
+                  class="switch is-rounded is-info"
+                  name="dedup"
+                  {% if params.dedup == "on" %}
+                    checked="checked"
+                  {% endif %}>
+                <label
+                  for="dedup_switch">
+                  Deduplicate results
+                </label>
+              </div>
             </div>
           </div>
           <div class="column is-narrow">
-            <div id="sentiment block">
+            <div id="sentiment">
               <div class="field has-addons">
                 <div class="control">
                   <input
@@ -231,25 +235,31 @@
               </div>
               <div class="control">
                 <label class="radio button has-text-link">
-                  
                   <input type="radio"
                          value="below"
+                         class="sentiment-radio"
                          {% if params.sentiment_method == 'below' %}
                            checked
                          {% endif %}
-                         name="sentiment_method">
+                         name="sentiment_method"
+                         {% if params.check_sentiment != "on" %}
+                           disabled
+                         {% endif %}>
                   <span class="icon" data-tooltip="Below">
                     <i class="fa-solid fa-face-frown"></i>
                   </span>
                 </label>
                 <label class="radio button has-text-link is-hidden">
-
                   <input type="radio"
                          value="exact"
+                         class="sentiment-radio"
                          {% if params.sentiment_method == 'exact' %}
                            checked
                          {% endif %}
-                         name="sentiment_method">
+                         name="sentiment_method"
+                         {% if params.check_sentiment != "on" %}
+                           disabled
+                         {% endif %}>
                   <span class="icon" data-tooltip="Exact">
                     <i class="fa-solid fa-face-smile"></i>
                   </span>
@@ -257,10 +267,14 @@
                 <label class="radio button has-text-link">
                   <input type="radio"
                          value="above"
+                         class="sentiment-radio"
                          {% if params.sentiment_method == 'above' %}
                            checked
                          {% endif %}
-                         name="sentiment_method">
+                         name="sentiment_method"
+                         {% if params.check_sentiment != "on" %}
+                           disabled
+                         {% endif %}>
                   <span class="icon" data-tooltip="Above">
                     <i class="fa-solid fa-face-smile"></i>
                   </span>
@@ -268,25 +282,37 @@
                 <label class="radio button has-text-link">
                   <input type="radio"
                          value="nonzero"
+                         class="sentiment-radio"
                          {% if params.sentiment_method == 'nonzero' %}
                            checked
                          {% endif %}
-                         name="sentiment_method">
+                         name="sentiment_method"
+                         {% if params.check_sentiment != "on" %}
+                           disabled
+                         {% endif %}>
                   <span class="icon" data-tooltip="Nonzero">
                     <i class="fa-solid fa-face-meh-blank"></i>
                   </span>
                 </label>
               </div>
             </div>
-            <label class="checkbox button mt-5">
-              <input type="checkbox"
-                     name="check_sentiment"
-                     {% if params.check_sentiment == "on" %}
-                       checked
-                     {% endif %}
-                     data-script="on click toggle @disabled on #sliderWithValue then toggle @disabled on #sentiment">
-                     Check sentiment
-            </label>
+            <div class="control">
+              <div class="field">
+                <input
+                  id="sentiment_switch"
+                  type="checkbox"
+                  class="switch is-rounded is-info"
+                  name="check_sentiment"
+                  data-script="on click toggle @disabled on #sliderWithValue then toggle @disabled on #sentiment then toggle @disabled on .sentiment-radio"
+                  {% if params.check_sentiment == "on" %}
+                    checked
+                  {% endif %}>
+                <label
+                  for="sentiment_switch">
+                  Check sentiment
+                </label>
+              </div>
+            </div>
           </div>
           <div class="column is-narrow">
             <div id="date">