Add zen mode for feedback tags

Add "zen mode", where the inactive feedback tags are white (lightly
outlined) in the feedback message panels.
The feedback tags turn visible when the cursor is in the the tag panel
(or when the focus has been moved there with keyboard navigation).

The user can select to use this mode by checking a checkbox.
The mode is in use (and the opt-in checkbox is visible) only on devices
where hovering is possible.

The checkbox state persists even when the page is reloaded or the user
goes to a new page (saved via localStrorage).

Fixes #69

Author: etanttila

feedback/locale/fi/LC_MESSAGES/django.po

@@ -416,6 +416,18 @@ msgstr "Luettelo palautetägeistä"
 msgid "Unable to fetch student's response."
 msgstr "Opiskelijan vastauksen hakeminen ei onnistunut."
 
+#: feedback/templates/manage/_conversations_as_list.html
+msgid ""
+"Turns inactive feedback tags invisible. The feedback tag buttons reappear "
+"when hovering over the tag panel."
+msgstr ""
+"Muuttaa epäaktiiviset palautetägit näkymättömiksi. Palautetägipainikkeet "
+"näkyvät, kun hiiri on tägikentän päällä."
+
+#: feedback/templates/manage/_conversations_as_list.html
+msgid "Zen mode"
+msgstr "Zen-tila"
+
 #: feedback/templates/manage/_conversations_as_list.html
 msgid "No feedback shown as there are errors in the filter form"
 msgstr "Palautteita ei näytetä, sillä lomakkeessa on virhe"

feedback/static/feedback.css

@@ -7,6 +7,16 @@ body {
 	margin-right: 0.4em;
 }
 
+#pagination-and-zen {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-end;
+}
+#zen-mode {
+	display: none;
+	flex-shrink: 0;
+	margin-bottom: 10px;
+}
 
 /* Filter panel */
 
@@ -344,6 +354,17 @@ input[type="checkbox"].combosearch + label {
 	}
 }
 
+@media (hover: hover) {
+	#zen-mode {
+		display: block;
+	}
+	body:has( #zen-mode-cb:checked) .conversation-tag-panel:not(:hover):not(:has( *:focus-visible)) > .colortag:not(.colortag-active) {
+		background-color: white;
+		color: white;
+		border: var(--colortag-inactive-color) 1px solid;
+	}
+}
+
 /* Feedback exercise/chapter heading */
 .conversation-panel > .panel-heading {
 	padding: 0;

feedback/static/feedback.js

@@ -545,6 +545,15 @@ function toggleShowAll(event) {
 
 
 window.addEventListener("load", (event) => {
+
+  /* Set up zen mode checkbox (persist state on reload) */
+  if (localStorage.getItem('zenMode') == "true") {
+    document.getElementById("zen-mode-cb").checked = true;
+  }
+  document.getElementById("zen-mode-cb").addEventListener('change', (e) => {
+    localStorage.setItem('zenMode', e.target.checked);
+  });
+
   /* Set up showall buttons */
   const showallDivs = document.getElementsByClassName("toggle-showall");
   for (let i = 0; i < showallDivs.length; i++) {

feedback/templates/manage/_conversations_as_list.html

@@ -8,7 +8,19 @@
 {% endcomment %}
 
 {% include "_errors_box.html" %}
-{% include "_pagination.html" %}
+<div id="pagination-and-zen">
+	{% include "_pagination.html" %}
+
+	<div id="zen-mode"
+		data-toggle="tooltip"
+		title="{% translate 'Turns inactive feedback tags invisible. The feedback tag buttons reappear when hovering over the tag panel.' %}"
+	>
+		<input type="checkbox" id="zen-mode-cb" name="zen-mode-cb">
+		<label for="zen-mode-cb">
+			{% translate 'Zen mode' %}
+		</label>
+	</div>
+</div>
 
 {% for conv in conversations %}
 	<div class="panel panel-default feedback-response-panel">