feat(glossary): visually differentiate explanation

- color highlight whole block including explanation row to make groupping clear - use badge for rendering explanation See #11486 Related to #9082
WeblateOrg · May 3, 2024 · cf8e73a · cf8e73a
1 parent eebafdd
commit cf8e73a
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 10 deletions.
diff --git a/docs/changes.rst b/docs/changes.rst
@@ -7,6 +7,8 @@ Not yet released.
 
 **Improvements**
 
+* Visually highlight explanation in :ref:`glossary`.
+
 **Bug fixes**
 
 **Compatibility**

diff --git a/weblate/static/editor/full.js b/weblate/static/editor/full.js
@@ -468,7 +468,7 @@
 
   FullEditor.prototype.initGlossary = function () {
     /* Copy from glossary */
-    this.$editor.on("click", ".glossary-embed.clickable-row", (e) => {
+    this.$editor.on("click", ".glossary-embed", (e) => {
       /* Avoid copy when clicked on a link */
       if ($(e.target).parents("a").length > 0) {
         return;

diff --git a/weblate/static/style-bootstrap.css b/weblate/static/style-bootstrap.css
@@ -942,6 +942,9 @@ th.number {
 .clickable-row {
   cursor: pointer;
 }
+.unclickable-row {
+  cursor: not-allowed;
+}
 
 .clickable-row:hover {
   background-color: #e9eaec;
@@ -1988,3 +1991,10 @@ label .text-muted {
   background-color: #ccc;
   margin-bottom: 0;
 }
+
+tbody.danger {
+  background-color: #f2dede;
+}
+tbody.warning {
+  background-color: #fcf8e3;
+}
diff --git a/weblate/static/style-dark.css b/weblate/static/style-dark.css
@@ -2659,3 +2659,9 @@ a.language:hover {
 .editor-wrap > .highlighted-output.readonly {
   background-color: inherit;
 }
+tbody.danger {
+  background-color: rgb(62, 24, 24);
+}
+tbody.warning {
+  background-color: rgb(64, 54, 7);
+}
diff --git a/weblate/templates/snippets/glossary.html b/weblate/templates/snippets/glossary.html
@@ -3,12 +3,13 @@
 {% load icons %}
 
 {% for item in glossary %}
+  <tbody class="glossary-embed {% if "forbidden" in item.all_flags %}unclickable-row danger{% elif "read-only" in item.all_flags %}clickable-row warning{% else %}clickable-row{% endif %}">
   {% if "forbidden" in item.all_flags %}
-    <tr class="glossary-embed danger" title="{% trans "This translation is forbidden." %}">
+    <tr title="{% trans "This translation is forbidden." %}">
   {% elif "read-only" in item.all_flags %}
-    <tr class="glossary-embed clickable-row warning" title="{% trans "This term should not be translated." %}">
+    <tr title="{% trans "This term should not be translated." %}">
   {% else %}
-    <tr class="glossary-embed clickable-row" title="{% trans "Copy word into translation" %}">
+    <tr title="{% trans "Copy word into translation" %}">
   {% endif %}
     <td class="source">{{ item.source }}</td>
     <td class="target">
@@ -25,30 +26,31 @@
     {% if item.note %}
       <tr>
         <td colspan="4">
-          <em>
+          <span class="badge" title="{% trans "Source string description" %}">
           {{ item.note }}
-          </em>
+          </span>
         </td>
       </tr>
     {% endif %}
     {% if not item.is_source and item.explanation %}
       <tr>
         <td colspan="4">
-          <em>
+          <span class="badge" title="{% trans "Glossary translation explanation" %}">
           {{ item.explanation|markdown }}
-          </em>
+          </span>
         </td>
       </tr>
     {% endif %}
     {% if item.source_unit.explanation %}
       <tr>
         <td colspan="4">
-          <em>
+          <span class="badge" title="{% trans "Glossary string explanation" %}">
           {{ item.source_unit.explanation|markdown }}
-          </em>
+          </span>
         </td>
       </tr>
     {% endif %}
+  </tbody>
 {% empty %}
     <tr>
     <td colspan="4"><em>{% trans "No related strings found in the glossary." %}</em></td>