add: slightly more advanced theming
add: profile "before you view" warning
This commit is contained in:
trisua
parent
52ac144953
commit
2ec7e54a8e
20 changed files with 790 additions and 153 deletions
|
|
@ -144,20 +144,24 @@
|
|||
</div>
|
||||
|
||||
<div class="card flex gap-2 flex-wrap">
|
||||
{% if not is_blocking %} {% if not is_following %}
|
||||
<button onclick="toggle_follow_user()">
|
||||
{% if not is_blocking %}
|
||||
<button
|
||||
onclick="toggle_follow_user(event)"
|
||||
class="{% if is_following %} hidden{% endif %}"
|
||||
atto_tag="user.follow"
|
||||
>
|
||||
{{ icon "user-plus" }}
|
||||
<span>{{ text "auto:action.follow" }}</span>
|
||||
</button>
|
||||
{% else %}
|
||||
|
||||
<button
|
||||
onclick="toggle_follow_user()"
|
||||
class="quaternary red"
|
||||
onclick="toggle_follow_user(event)"
|
||||
class="quaternary red{% if not is_following %} hidden{% endif %}"
|
||||
atto_tag="user.unfollow"
|
||||
>
|
||||
{{ icon "user-minus" }}
|
||||
<span>{{ text "auto:action.unfollow" }}</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<button
|
||||
onclick="toggle_block_user()"
|
||||
|
|
@ -185,7 +189,11 @@
|
|||
{% endif %}
|
||||
|
||||
<script>
|
||||
globalThis.toggle_follow_user = () => {
|
||||
globalThis.toggle_follow_user = async (e) => {
|
||||
await trigger("atto::debounce", [
|
||||
"users::follow",
|
||||
]);
|
||||
|
||||
fetch(
|
||||
"/api/v1/auth/user/{{ profile.id }}/follow",
|
||||
{
|
||||
|
|
@ -198,6 +206,34 @@
|
|||
res.ok ? "success" : "error",
|
||||
res.message,
|
||||
]);
|
||||
|
||||
if (
|
||||
e.target.getAttribute(
|
||||
"atto_tag",
|
||||
) === "user.follow"
|
||||
) {
|
||||
document
|
||||
.querySelector(
|
||||
'[atto_tag="user.follow"]',
|
||||
)
|
||||
.classList.add("hidden");
|
||||
document
|
||||
.querySelector(
|
||||
'[atto_tag="user.unfollow"]',
|
||||
)
|
||||
.classList.remove("hidden");
|
||||
} else {
|
||||
document
|
||||
.querySelector(
|
||||
'[atto_tag="user.unfollow"]',
|
||||
)
|
||||
.classList.add("hidden");
|
||||
document
|
||||
.querySelector(
|
||||
'[atto_tag="user.follow"]',
|
||||
)
|
||||
.classList.remove("hidden");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -253,6 +289,16 @@
|
|||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{% if not use_user_theme %} {{ components::theme(user=profile) }} {% endif %} {%
|
||||
endblock %}
|
||||
{% if not is_self %}
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
// check for warning
|
||||
trigger("warnings::open", [
|
||||
"{{ profile.id }}",
|
||||
"{{ warning_hash }}",
|
||||
"?warning=true",
|
||||
]);
|
||||
}, 150);
|
||||
</script>
|
||||
{% endif %} {% if not use_user_theme %} {{ components::theme(user=profile,
|
||||
theme_preference=profile.settings.profile_theme) }} {% endif %} {% endblock %}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@
|
|||
{{ text "settings:tab.profile" }}
|
||||
</a>
|
||||
|
||||
<a data-tab-button="theme" href="#/theme">
|
||||
{{ text "settings:tab.theme" }}
|
||||
</a>
|
||||
|
||||
<a data-tab-button="sessions" href="#/sessions">
|
||||
{{ text "settings:tab.sessions" }}
|
||||
</a>
|
||||
|
|
@ -334,6 +338,46 @@
|
|||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="w-full hidden flex flex-col gap-2" data-tab="theme">
|
||||
<div class="card tertiary flex flex-col gap-2" id="theme_settings">
|
||||
<div class="card-nest" ui_ident="profile_theme">
|
||||
<div class="card small">
|
||||
<b>Profile theme</b>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<select
|
||||
onchange="set_setting_field('profile_theme', event.target.selectedOptions[0].value)"
|
||||
>
|
||||
<option
|
||||
value="Auto"
|
||||
selected="{% if user.settings.profile_theme == 'Auto' %}true{% else %}false{% endif %}"
|
||||
>
|
||||
Auto
|
||||
</option>
|
||||
<option
|
||||
value="Light"
|
||||
selected="{% if user.settings.profile_theme == 'Light' %}true{% else %}false{% endif %}"
|
||||
>
|
||||
Light
|
||||
</option>
|
||||
<option
|
||||
value="Dark"
|
||||
selected="{% if user.settings.profile_theme == 'Dark' %}true{% else %}false{% endif %}"
|
||||
>
|
||||
Dark
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onclick="save_settings()" id="save_button">
|
||||
{{ icon "check" }}
|
||||
<span>{{ text "general:action.save" }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<script type="application/json" id="settings_json">{{ user_settings_serde|safe }}</script>
|
||||
|
||||
|
|
@ -641,6 +685,7 @@
|
|||
document.getElementById("account_settings");
|
||||
const profile_settings =
|
||||
document.getElementById("profile_settings");
|
||||
const theme_settings = document.getElementById("theme_settings");
|
||||
|
||||
ui.refresh_container(account_settings, [
|
||||
"change_password",
|
||||
|
|
@ -652,6 +697,7 @@
|
|||
"change_avatar",
|
||||
"change_banner",
|
||||
]);
|
||||
ui.refresh_container(theme_settings, ["profile_theme"]);
|
||||
|
||||
ui.generate_settings_ui(
|
||||
account_settings,
|
||||
|
|
@ -666,6 +712,11 @@
|
|||
settings.biography,
|
||||
"textarea",
|
||||
],
|
||||
[
|
||||
["warning", "Profile warning"],
|
||||
settings.warning,
|
||||
"textarea",
|
||||
],
|
||||
],
|
||||
settings,
|
||||
);
|
||||
|
|
@ -695,7 +746,14 @@
|
|||
"{{ profile.settings.private_last_seen }}",
|
||||
"checkbox",
|
||||
],
|
||||
[[], "Theme", "title"],
|
||||
],
|
||||
settings,
|
||||
);
|
||||
|
||||
ui.generate_settings_ui(
|
||||
theme_settings,
|
||||
[
|
||||
[[], "Theme builder", "title"],
|
||||
[
|
||||
["theme_hue", "Theme hue (integer 0-255)"],
|
||||
"{{ profile.settings.theme_hue }}",
|
||||
|
|
@ -719,6 +777,137 @@
|
|||
"{{ profile.settings.disable_other_themes }}",
|
||||
"checkbox",
|
||||
],
|
||||
[[], "Theme builder", "title"],
|
||||
[[], "Override individual colors.", "text"],
|
||||
// surface
|
||||
[
|
||||
["theme_color_surface", "Surface"],
|
||||
"{{ profile.settings.theme_color_surface }}",
|
||||
"color",
|
||||
{
|
||||
description: "Page background.",
|
||||
},
|
||||
],
|
||||
[
|
||||
["theme_color_text", "Text"],
|
||||
"{{ profile.settings.theme_color_text }}",
|
||||
"color",
|
||||
{
|
||||
description:
|
||||
"Text on elements with the surface backgrounds.",
|
||||
},
|
||||
],
|
||||
// lowered
|
||||
[[], "", "divider"],
|
||||
[
|
||||
["theme_color_lowered", "Lowered"],
|
||||
"{{ profile.settings.theme_color_lowered }}",
|
||||
"color",
|
||||
{
|
||||
description:
|
||||
"Some cards, buttons, or anything else with a darker background color than the surface.",
|
||||
},
|
||||
],
|
||||
[
|
||||
["theme_color_text_lowered", "Text"],
|
||||
"{{ profile.settings.theme_color_text_lowered }}",
|
||||
"color",
|
||||
{
|
||||
description:
|
||||
"Text on elements with the lowered backgrounds.",
|
||||
},
|
||||
],
|
||||
[
|
||||
["theme_color_super_lowered", "Super lowered"],
|
||||
"{{ profile.settings.theme_color_super_lowered }}",
|
||||
"color",
|
||||
{
|
||||
description: "Borders.",
|
||||
},
|
||||
],
|
||||
// raised
|
||||
[[], "", "divider"],
|
||||
[
|
||||
["theme_color_raised", "Raised"],
|
||||
"{{ profile.settings.theme_color_raised }}",
|
||||
"color",
|
||||
{
|
||||
description:
|
||||
"Some cards, buttons, or anything else with a lighter background color than the surface.",
|
||||
},
|
||||
],
|
||||
[
|
||||
["theme_color_text_raised", "Text"],
|
||||
"{{ profile.settings.theme_color_text_raised }}",
|
||||
"color",
|
||||
{
|
||||
description:
|
||||
"Text on elements with the raised backgrounds.",
|
||||
},
|
||||
],
|
||||
[
|
||||
["theme_color_super_raised", "Super raised"],
|
||||
"{{ profile.settings.theme_color_super_raised }}",
|
||||
"color",
|
||||
{
|
||||
description: "Some borders.",
|
||||
},
|
||||
],
|
||||
// primary
|
||||
[[], "", "divider"],
|
||||
[
|
||||
["theme_color_primary", "Primary"],
|
||||
"{{ profile.settings.theme_color_primary }}",
|
||||
"color",
|
||||
{
|
||||
description:
|
||||
"Primary color; navigation bar, some buttons, etc.",
|
||||
},
|
||||
],
|
||||
[
|
||||
["theme_color_text_primary", "Text"],
|
||||
"{{ profile.settings.theme_color_text_primary }}",
|
||||
"color",
|
||||
{
|
||||
description:
|
||||
"Text on elements with the primary backgrounds.",
|
||||
},
|
||||
],
|
||||
[
|
||||
["theme_color_primary_lowered", "Primary lowered"],
|
||||
"{{ profile.settings.theme_color_primary_lowered }}",
|
||||
"color",
|
||||
{
|
||||
description: "Hover state for primary buttons.",
|
||||
},
|
||||
],
|
||||
// secondary
|
||||
[[], "", "divider"],
|
||||
[
|
||||
["theme_color_secondary", "Secondary"],
|
||||
"{{ profile.settings.theme_color_secondary }}",
|
||||
"color",
|
||||
{
|
||||
description: "Secondary color.",
|
||||
},
|
||||
],
|
||||
[
|
||||
["theme_color_text_secondary", "Text"],
|
||||
"{{ profile.settings.theme_color_text_secondary }}",
|
||||
"color",
|
||||
{
|
||||
description:
|
||||
"Text on elements with the secondary backgrounds.",
|
||||
},
|
||||
],
|
||||
[
|
||||
["theme_color_secondary_lowered", "Secondary lowered"],
|
||||
"{{ profile.settings.theme_color_secondary_lowered }}",
|
||||
"color",
|
||||
{
|
||||
description: "Hover state for secondary buttons.",
|
||||
},
|
||||
],
|
||||
],
|
||||
settings,
|
||||
);
|
||||
|
|
|
|||
37
crates/app/src/public/html/profile/warning.html
Normal file
37
crates/app/src/public/html/profile/warning.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
{% extends "root.html" %} {% block head %}
|
||||
<title>{{ profile.username }} (warning) - {{ config.name }}</title>
|
||||
{% endblock %} {% block body %} {{ macros::nav(selected="") }}
|
||||
<main class="flex flex-col gap-2">
|
||||
<div class="card-nest">
|
||||
<div class="card small flex items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
{{ components::avatar(username=profile.username, size="24px") }}
|
||||
<span>{{ profile.username }}</span>
|
||||
</div>
|
||||
|
||||
<b class="notification chip"
|
||||
>{{ text "auth:label.before_you_view" }}</b
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-2">
|
||||
<span class="no_p_margin"
|
||||
>{{ profile.settings.warning|markdown|safe }}</span
|
||||
>
|
||||
<div class="card w-full secondary flex gap-2">
|
||||
<button
|
||||
onclick="trigger('warnings::accept', ['{{ profile.id }}', '{{ warning_hash }}'])"
|
||||
>
|
||||
{{ icon "check" }}
|
||||
<span>{{ text "dialog:action.continue" }}</span>
|
||||
</button>
|
||||
|
||||
<a href="/" class="button red quaternary">
|
||||
{{ icon "x" }}
|
||||
<span>{{ text "general:action.back" }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue