Add Actions dropdown to topics in listings

Currently, this dropdown contains Bookmark and Ignore.

As part of this, Spectre.css's icons stylesheet is now included, for the
caret icon used on the dropdown button. This is excessive since it's the
only icon being used for now, but the whole thing only adds about 1.3kb
to the gzipped size of tildes.css.

tildes/scss/modules/_topic.scss

@@ -15,7 +15,7 @@
   grid-template-areas:
     "title    voting"
     "metadata voting"
-    "info     voting";
+    "info     actions";
   grid-template-columns: 1fr auto;
   grid-gap: 0.2rem;
 
@@ -72,6 +72,37 @@
   .topic-voting {
     grid-area: voting;
   }
+
+  .topic-actions {
+    grid-area: actions;
+  }
+}
+
+.topic-actions {
+  .btn {
+    height: auto;
+    padding: 0 0.2rem;
+    font-weight: normal;
+    border: 0;
+  }
+
+  .btn-post-action {
+    width: 100%;
+    justify-content: left;
+    font-weight: normal;
+  }
+
+  .dropdown-toggle .icon {
+    margin-left: 0.2rem;
+  }
+
+  .menu {
+    padding: 0.2rem;
+
+    li {
+      margin-top: 0;
+    }
+  }
 }
 
 .topic-categories {
@@ -149,8 +180,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 0.2rem;
-  margin-bottom: auto;
   padding: 0.2rem;
   height: auto;
   font-weight: normal;
@@ -361,7 +390,7 @@
       "title    voting"
       "metadata voting"
       "content  voting"
-      "info     voting";
+      "info     actions";
   }
 }
 

tildes/scss/themes/_theme_base.scss

@@ -399,6 +399,11 @@
     color: map-get($theme, "foreground-primary");
   }
 
+  .menu {
+    background-color: map-get($theme, "background-primary");
+    box-shadow: 0 0.1rem 0.2rem map-get($theme, "foreground-secondary");
+  }
+
   .message {
     header {
       color: map-get($theme, "foreground-highlight");
@@ -515,6 +520,20 @@
     }
   }
 
+  .topic-actions {
+    .btn-post-action {
+      color: map-get($theme, "link");
+
+      &:hover {
+        background-color: map-get($theme, "background-secondary");
+      }
+    }
+
+    .btn-post-action-used {
+      color: map-get($theme, "link-visited");
+    }
+  }
+
   .topic-listing {
     > li:nth-of-type(2n) {
       color:

tildes/tildes/models/topic/topic_query.py

@@ -56,10 +56,11 @@ class TopicQuery(PaginatedQuery):
 
     def _finalize(self) -> "TopicQuery":
         """Finalize the query before it's executed."""
+        # pylint: disable=self-cls-assignment
         self = super()._finalize()
 
         if self.filter_ignored:
-            self = self.filter(TopicIgnore.created_time == None)
+            self = self.filter(TopicIgnore.created_time == None)  # noqa
 
         return self
 
@@ -225,6 +226,7 @@ class TopicQuery(PaginatedQuery):
 
     def only_ignored(self) -> "TopicQuery":
         """Restrict the topics to ones that the user has ignored (generative)."""
+        # pylint: disable=self-cls-assignment
         self._only_ignored = True
         self = self.include_ignored()
 

tildes/tildes/templates/macros/buttons.jinja2

@@ -14,7 +14,7 @@
     {% set toggled_label = "Unbookmark" %}
   {% elif name == "ignore" %}
     {% set normal_label = "Ignore" %}
-    {% set toggled_label = "Un-ignore" %}
+    {% set toggled_label = "Unignore" %}
   {% elif name == "lock" %}
     {% set normal_label = "Lock" %}
     {% set toggled_label = "Unlock" %}

tildes/tildes/templates/macros/topics.jinja2

@@ -1,6 +1,7 @@
 {# Copyright (c) 2018 Tildes contributors <code@tildes.net> #}
 {# SPDX-License-Identifier: AGPL-3.0-or-later #}
 
+{% from 'macros/buttons.jinja2' import post_action_toggle_button with context %}
 {% from 'macros/datetime.jinja2' import adaptive_date_responsive %}
 {% from 'macros/links.jinja2' import link_to_group, link_to_user %}
 {% from 'utils.jinja2' import pluralize %}
@@ -115,6 +116,7 @@
 
     {{ topic_voting(topic) }}
 
+    {{ topic_actions(topic) }}
   </article>
 {% endmacro %}
 
@@ -190,6 +192,26 @@
   {% endif %}
 {% endmacro %}
 
+{% macro topic_actions(topic) %}
+  {% if request.has_any_permission(("bookmark", "ignore"), topic) %}
+    <div class="dropdown dropdown-right topic-actions">
+      <button class="btn dropdown-toggle">
+        Actions
+        <i class="icon icon-caret"></i>
+      </button>
+      <menu class="menu">
+        {% if request.has_permission("bookmark", topic) %}
+          {{ post_action_toggle_button("bookmark", topic, is_toggled=topic.user_bookmarked) }}
+        {% endif %}
+
+        {% if request.has_permission("ignore", topic) %}
+          {{ post_action_toggle_button("ignore", topic, is_toggled=topic.user_ignored) }}
+        {% endif %}
+      </ul>
+    </div>
+  {% endif %}
+{% endmacro %}
+
 {% macro topic_classes(topic) %}
   {% set classes = ['topic'] %}
 

tildes/tildes/views/ignored_topics.py

@@ -1,6 +1,6 @@
 """Views relating to ignored topics."""
 
-from typing import Optional, Type, Union
+from typing import Optional
 
 from pyramid.request import Request
 from pyramid.view import view_config

tildes/webassets.yaml

@@ -19,5 +19,6 @@ bundles:
     contents:
       # keep styles.css at the bottom so it can override Spectre
       - css/spectre-0.5.1/spectre.css
+      - css/spectre-0.5.1/spectre-icons.css
       - css/styles.css
     output: css/tildes.css