Browse Source

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.
merge-requests/88/head
Deimos 5 years ago
parent
commit
983df2027d
  1. 37
      tildes/scss/modules/_topic.scss
  2. 19
      tildes/scss/themes/_theme_base.scss
  3. 4
      tildes/tildes/models/topic/topic_query.py
  4. 2
      tildes/tildes/templates/macros/buttons.jinja2
  5. 22
      tildes/tildes/templates/macros/topics.jinja2
  6. 2
      tildes/tildes/views/ignored_topics.py
  7. 1
      tildes/webassets.yaml

37
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";
}
}

19
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:

4
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()

2
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" %}

22
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'] %}

2
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

1
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
Loading…
Cancel
Save