add: user status
This commit is contained in:
trisua
parent
1724f798ca
commit
a009ef9e34
10 changed files with 259 additions and 138 deletions
|
|
@ -1,6 +1,7 @@
|
|||
{% extends "root.html" %} {% block head %}
|
||||
<title>Chats - {{ config.name }}</title>
|
||||
{% endblock %} {% block body %} {{ macros::nav(selected="chats") }}
|
||||
{% endblock %} {% block body %} {{ macros::nav(selected="chats",
|
||||
hide_user_menu=true) }}
|
||||
<nav class="chats_nav">
|
||||
<button
|
||||
class="flex gap-2 items-center active"
|
||||
|
|
@ -44,59 +45,64 @@
|
|||
{% endif %} {% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="sidebar flex flex-col gap-2" id="channels_list">
|
||||
<div class="title flex justify-between">
|
||||
{% if community %}
|
||||
<b class="name shorter">
|
||||
{% if community.context.display_name %} {{
|
||||
community.context.display_name }} {% else %} {{ community.title
|
||||
}} {% endif %}
|
||||
</b>
|
||||
{% else %}
|
||||
<b>{{ text "chats:label.my_chats" }}</b>
|
||||
{% endif %}
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="camo small"
|
||||
onclick="trigger('atto::hooks::dropdown', [event])"
|
||||
exclude="dropdown"
|
||||
>
|
||||
{{ icon "ellipsis" }}
|
||||
</button>
|
||||
<div class="sidebar flex flex-col gap-2 justify-between" id="channels_list">
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<div class="title flex justify-between">
|
||||
{% if community %}
|
||||
<b class="name shorter">
|
||||
{% if community.context.display_name %} {{
|
||||
community.context.display_name }} {% else %} {{
|
||||
community.title }} {% endif %}
|
||||
</b>
|
||||
{% else %}
|
||||
<b>{{ text "chats:label.my_chats" }}</b>
|
||||
{% endif %}
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="camo small"
|
||||
onclick="trigger('atto::hooks::dropdown', [event])"
|
||||
exclude="dropdown"
|
||||
>
|
||||
{{ icon "ellipsis" }}
|
||||
</button>
|
||||
|
||||
<div class="inner">
|
||||
{% if selected_community != 0 %}
|
||||
<a href="/community/{{ selected_community }}">
|
||||
{{ icon "book-heart" }}
|
||||
<span
|
||||
>{{ text "communities:label.show_community" }}</span
|
||||
>
|
||||
</a>
|
||||
{% endif %} {% if can_manage_channels %}
|
||||
<a href="/community/{{ selected_community }}/manage">
|
||||
{{ icon "settings" }}
|
||||
<span>{{ text "general:action.manage" }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
<div class="inner">
|
||||
{% if selected_community != 0 %}
|
||||
<a href="/community/{{ selected_community }}">
|
||||
{{ icon "book-heart" }}
|
||||
<span
|
||||
>{{ text "communities:label.show_community"
|
||||
}}</span
|
||||
>
|
||||
</a>
|
||||
{% endif %} {% if can_manage_channels %}
|
||||
<a href="/community/{{ selected_community }}/manage">
|
||||
{{ icon "settings" }}
|
||||
<span>{{ text "general:action.manage" }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if can_manage_channels %}
|
||||
<a
|
||||
class="button w-full justify-start quaternary"
|
||||
href="/community/{{ selected_community }}/manage#/channels"
|
||||
>
|
||||
{{ icon "plus" }}
|
||||
<span>{{ text "communities:action.create_channel" }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<turbo-frame
|
||||
id="channels_list_frame"
|
||||
src="/chats/{{ selected_community }}/{{ selected_channel }}/_channels"
|
||||
target="_top"
|
||||
></turbo-frame>
|
||||
</div>
|
||||
|
||||
{% if can_manage_channels %}
|
||||
<a
|
||||
class="button w-full justify-start quaternary"
|
||||
href="/community/{{ selected_community }}/manage#/channels"
|
||||
>
|
||||
{{ icon "plus" }}
|
||||
<span>{{ text "communities:action.create_channel" }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<turbo-frame
|
||||
id="channels_list_frame"
|
||||
src="/chats/{{ selected_community }}/{{ selected_channel }}/_channels"
|
||||
target="_top"
|
||||
></turbo-frame>
|
||||
{{ components::user_plate(user=user, show_menu=true) }}
|
||||
</div>
|
||||
|
||||
{% if channel %}
|
||||
|
|
@ -253,7 +259,7 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidebar .title {
|
||||
.sidebar .title:not(.dropdown *) {
|
||||
padding: 1rem;
|
||||
border-bottom: solid 1px var(--color-super-lowered);
|
||||
}
|
||||
|
|
@ -321,6 +327,10 @@
|
|||
.chats_nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
height: calc(100dvh - 42px * 2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -973,4 +973,128 @@ can_manage_message=false, grouped=false) -%}
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endmacro %} {% macro user_menu() -%}
|
||||
<div class="inner">
|
||||
<b class="title">{{ user.username }}</b>
|
||||
<a href="/@{{ user.username }}">
|
||||
{{ icon "circle-user-round" }}
|
||||
<span>{{ text "auth:link.my_profile" }}</span>
|
||||
</a>
|
||||
|
||||
<a href="/settings">
|
||||
{{ icon "settings" }}
|
||||
<span>{{ text "auth:link.settings" }}</span>
|
||||
</a>
|
||||
|
||||
{% if is_helper %}
|
||||
<b class="title">{{ text "general:label.mod" }}</b>
|
||||
|
||||
<a href="/mod_panel/audit_log">
|
||||
{{ icon "scroll-text" }}
|
||||
<span>{{ text "general:link.audit_log" }}</span>
|
||||
</a>
|
||||
|
||||
<a href="/mod_panel/reports">
|
||||
{{ icon "flag" }}
|
||||
<span>{{ text "general:link.reports" }}</span>
|
||||
</a>
|
||||
|
||||
<a href="/mod_panel/ip_bans">
|
||||
{{ icon "ban" }}
|
||||
<span>{{ text "general:link.ip_bans" }}</span>
|
||||
</a>
|
||||
|
||||
<a href="/mod_panel/stats">
|
||||
{{ icon "chart-line" }}
|
||||
<span>{{ text "general:link.stats" }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<b class="title">{{ config.name }}</b>
|
||||
|
||||
<a href="https://github.com/trisuaso/tetratto">
|
||||
{{ icon "code" }}
|
||||
<span>{{ text "general:link.source_code" }}</span>
|
||||
</a>
|
||||
|
||||
<a href="https://trisuaso.github.io/tetratto">
|
||||
{{ icon "book" }}
|
||||
<span>{{ text "general:link.reference" }}</span>
|
||||
</a>
|
||||
|
||||
<div class="title"></div>
|
||||
<button onclick="trigger('me::switch_account')">
|
||||
{{ icon "ellipsis" }}
|
||||
<span>{{ text "general:action.switch_account" }}</span>
|
||||
</button>
|
||||
|
||||
<button class="red" onclick="trigger('me::logout')">
|
||||
{{ icon "log-out" }}
|
||||
<span>{{ text "auth:action.logout" }}</span>
|
||||
</button>
|
||||
</div>
|
||||
{%- endmacro %} {% macro user_status(other_user) -%} {% if
|
||||
other_user.settings.status %}
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{{ other_user.settings.status }}</span>
|
||||
|
||||
<!-- connection icon -->
|
||||
{% if (other_user.connections.LastFm[1].data and
|
||||
other_user.connections.LastFm[1].data.track) or
|
||||
(other_user.connections.Spotify[1].data and
|
||||
other_user.connections.Spotify[1].data.track) %} {{ icon "music" }} {% endif
|
||||
%}
|
||||
</div>
|
||||
{% elif other_user.connections.LastFm[0].data.name and
|
||||
other_user.connections.LastFm[1].data and
|
||||
other_user.connections.LastFm[1].data.track %}
|
||||
<div class="flex items-center gap-2">
|
||||
{{ icon "music" }}
|
||||
<span
|
||||
><b>Listening to</b> {{ other_user.connections.LastFm[1].data.artist
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
{% elif other_user.connections.Spotify[0].data.name and
|
||||
other_user.connections.Spotify[1].data and
|
||||
other_user.connections.Spotify[1].data.track %}
|
||||
<div class="flex items-center gap-2">
|
||||
{{ icon "music" }}
|
||||
<span
|
||||
><b>Listening to</b> {{ other_user.connections.Spotify[1].data.artist
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
{% endif %} {%- endmacro %} {% macro user_plate(user, show_menu=false,
|
||||
secondary=false) -%}
|
||||
<div
|
||||
class="flex gap-2 items-center card tiny user_plate {% if secondary %}secondary{% endif %}"
|
||||
>
|
||||
<a href="/@{{ user.username }}">
|
||||
{{ self::avatar(username=user.username, size="42px",
|
||||
selector_type="username") }}
|
||||
</a>
|
||||
|
||||
<div
|
||||
class="flex justify-center flex-col"
|
||||
style="{% if show_menu %}width: 60%{% endif %}"
|
||||
>
|
||||
{{ self::full_username(user=user) }}
|
||||
<div class="user_status">{{ self::user_status(other_user=user) }}</div>
|
||||
</div>
|
||||
|
||||
{% if show_menu %}
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="camo small square"
|
||||
onclick="trigger('atto::hooks::dropdown', [event])"
|
||||
exclude="dropdown"
|
||||
>
|
||||
{{ icon "settings" c(dropdown-arrow) }}
|
||||
</button>
|
||||
|
||||
{{ self::user_menu() }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% macro nav(selected="", show_lhs=true) -%}
|
||||
{% macro nav(selected="", show_lhs=true, hide_user_menu=false) -%}
|
||||
<nav>
|
||||
<div class="content_container">
|
||||
<div class="flex nav_side">
|
||||
|
|
@ -72,79 +72,21 @@
|
|||
>
|
||||
</a>
|
||||
|
||||
{% if not hide_user_menu %}
|
||||
<div class="dropdown">
|
||||
<!-- prettier-ignore -->
|
||||
<button
|
||||
class="flex-row title"
|
||||
onclick="trigger('atto::hooks::dropdown', [event])"
|
||||
exclude="dropdown"
|
||||
style="gap: 0.25rem !important"
|
||||
>
|
||||
{{ components::avatar(username=user.username, size="24px") }}
|
||||
{{ icon "chevron-down" c(dropdown-arrow) }}
|
||||
{{ components::avatar(username=user.username, size="24px")
|
||||
}} {{ icon "chevron-down" c(dropdown-arrow) }}
|
||||
</button>
|
||||
|
||||
<div class="inner">
|
||||
<b class="title">{{ user.username }}</b>
|
||||
<a href="/@{{ user.username }}">
|
||||
{{ icon "circle-user-round" }}
|
||||
<span>{{ text "auth:link.my_profile" }}</span>
|
||||
</a>
|
||||
|
||||
<a href="/settings">
|
||||
{{ icon "settings" }}
|
||||
<span>{{ text "auth:link.settings" }}</span>
|
||||
</a>
|
||||
|
||||
{% if is_helper %}
|
||||
<b class="title">{{ text "general:label.mod" }}</b>
|
||||
|
||||
<a href="/mod_panel/audit_log">
|
||||
{{ icon "scroll-text" }}
|
||||
<span>{{ text "general:link.audit_log" }}</span>
|
||||
</a>
|
||||
|
||||
<a href="/mod_panel/reports">
|
||||
{{ icon "flag" }}
|
||||
<span>{{ text "general:link.reports" }}</span>
|
||||
</a>
|
||||
|
||||
<a href="/mod_panel/ip_bans">
|
||||
{{ icon "ban" }}
|
||||
<span>{{ text "general:link.ip_bans" }}</span>
|
||||
</a>
|
||||
|
||||
<a href="/mod_panel/stats">
|
||||
{{ icon "chart-line" }}
|
||||
<span>{{ text "general:link.stats" }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<b class="title">{{ config.name }}</b>
|
||||
|
||||
<a href="https://github.com/trisuaso/tetratto">
|
||||
{{ icon "code" }}
|
||||
<span>{{ text "general:link.source_code" }}</span>
|
||||
</a>
|
||||
|
||||
<a href="https://trisuaso.github.io/tetratto">
|
||||
{{ icon "book" }}
|
||||
<span>{{ text "general:link.reference" }}</span>
|
||||
</a>
|
||||
|
||||
<div class="title"></div>
|
||||
<button onclick="trigger('me::switch_account')">
|
||||
{{ icon "ellipsis" }}
|
||||
<span>{{ text "general:action.switch_account" }}</span>
|
||||
</button>
|
||||
|
||||
<button class="red" onclick="trigger('me::logout')">
|
||||
{{ icon "log-out" }}
|
||||
<span>{{ text "auth:action.logout" }}</span>
|
||||
</button>
|
||||
</div>
|
||||
{{ components::user_menu() }}
|
||||
</div>
|
||||
{% else %}
|
||||
{% endif %} {% else %}
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="title"
|
||||
|
|
|
|||
|
|
@ -5,17 +5,23 @@
|
|||
<span>{{ text "auth:label.followers" }}</span>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="card flex flex-wrap gap-4 flex-collapse">
|
||||
<!-- prettier-ignore -->
|
||||
{% for item in list %}
|
||||
<div class="card-nest">
|
||||
<div class="card small">
|
||||
Since <span class="date">{{ item[0].created }}</span>
|
||||
</div>
|
||||
|
||||
{{ components::user_card(user=item[1]) }}
|
||||
</div>
|
||||
{{ components::user_plate(user=item[1], secondary=true) }}
|
||||
{% endfor %} {{ components::pagination(page=page, items=list|length) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.user_plate {
|
||||
width: calc(50% - 0.5rem);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.user_plate {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -5,17 +5,23 @@
|
|||
<span>{{ text "auth:label.following" }}</span>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="card flex flex-wrap gap-4 flex-collapse">
|
||||
<!-- prettier-ignore -->
|
||||
{% for item in list %}
|
||||
<div class="card-nest">
|
||||
<div class="card small">
|
||||
Since <span class="date">{{ item[0].created }}</span>
|
||||
</div>
|
||||
|
||||
{{ components::user_card(user=item[1]) }}
|
||||
</div>
|
||||
{{ components::user_plate(user=item[1], secondary=true) }}
|
||||
{% endfor %} {{ components::pagination(page=page, items=list|length) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.user_plate {
|
||||
width: calc(50% - 0.5rem);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.user_plate {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -926,6 +926,11 @@
|
|||
settings.biography,
|
||||
"textarea",
|
||||
],
|
||||
[
|
||||
["status", "Status"],
|
||||
settings.status,
|
||||
"textarea",
|
||||
],
|
||||
[
|
||||
["warning", "Profile warning"],
|
||||
settings.warning,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue