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
138
crates/app/src/public/html/communities/create_post.html
Normal file
138
crates/app/src/public/html/communities/create_post.html
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
{% extends "root.html" %} {% block head %}
|
||||
<title>Create post - {{ 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">
|
||||
<span class="flex items-center gap-2">
|
||||
{{ icon "pen" }}
|
||||
<span>{{ text "communities:label.create_post" }}</span>
|
||||
</span>
|
||||
|
||||
<button onclick="cancel_create_post()" class="quaternary small red">
|
||||
{{ icon "x" }}
|
||||
<span>{{ text "dialog:action.cancel" }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="card tertiary">
|
||||
<div class="card-nest">
|
||||
<div class="card small flex flex-row gap-2 items-center">
|
||||
{{ components::community_avatar(id=config.town_square,
|
||||
community=false, size="32px") }}
|
||||
|
||||
<select
|
||||
id="community_to_post_to"
|
||||
onchange="update_community_avatar(event)"
|
||||
>
|
||||
<option value="{{ config.town_square }}" selected>
|
||||
<!-- prettier-ignore -->
|
||||
{% if town_square.context.display_name %}
|
||||
{{ town_square.context.display_name }}
|
||||
{% else %}
|
||||
{{ town_square.title }}
|
||||
{% endif %}
|
||||
</option>
|
||||
|
||||
{% for community in communities %}
|
||||
<option value="{{ community.id }}">
|
||||
<!-- prettier-ignore -->
|
||||
{% if community.context.display_name %}
|
||||
{{ community.context.display_name }}
|
||||
{% else %}
|
||||
{{ community.title }}
|
||||
{% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="card flex flex-col gap-2"
|
||||
onsubmit="create_post_from_form_town_square(event)"
|
||||
>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="content"
|
||||
>{{ text "communities:label.content" }}</label
|
||||
>
|
||||
<textarea
|
||||
type="text"
|
||||
name="content"
|
||||
id="content"
|
||||
placeholder="content"
|
||||
required
|
||||
minlength="2"
|
||||
maxlength="4096"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button class="primary">
|
||||
{{ text "communities:action.create" }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function create_post_from_form_town_square(e) {
|
||||
e.preventDefault();
|
||||
await trigger("atto::debounce", ["posts::create"]);
|
||||
fetch("/api/v1/posts", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
content: e.target.content.value,
|
||||
community: document.getElementById(
|
||||
"community_to_post_to",
|
||||
).selectedOptions[0].value,
|
||||
}),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
res.message,
|
||||
]);
|
||||
|
||||
if (res.ok) {
|
||||
setTimeout(() => {
|
||||
window.location.href = `/post/${res.payload}`;
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function update_community_avatar(e) {
|
||||
const element = e.target.parentElement.querySelector(".avatar");
|
||||
const id = e.target.selectedOptions[0].value;
|
||||
|
||||
element.setAttribute("title", id);
|
||||
element.setAttribute("alt", `${id}'s avatar`);
|
||||
|
||||
element.src = `/api/v1/communities/${id}/avatar`;
|
||||
}
|
||||
|
||||
async function cancel_create_post() {
|
||||
if (
|
||||
!(await trigger("atto::confirm", [
|
||||
"Are you sure you would like to do this? Your post content will be lost.",
|
||||
]))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.history.back();
|
||||
|
||||
setTimeout(() => {
|
||||
// if we couldn't go back after 1 whole second, just go home
|
||||
window.location.href = "/";
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -125,6 +125,14 @@
|
|||
"{{ post.context.comments_enabled }}",
|
||||
"checkbox",
|
||||
],
|
||||
[
|
||||
[
|
||||
"reposts_enabled",
|
||||
"Allow people to repost/quote your post",
|
||||
],
|
||||
"{{ post.context.reposts_enabled }}",
|
||||
"checkbox",
|
||||
],
|
||||
[
|
||||
["reposts_enabled", "Allow people to repost your post"],
|
||||
"{{ post.context.reposts_enabled }}",
|
||||
|
|
|
|||
|
|
@ -163,7 +163,8 @@ show_community %}
|
|||
{% endif %}
|
||||
</b>
|
||||
|
||||
{% if post.context.is_pinned %} {{ icon "pin" }} {% endif %}
|
||||
{% if post.context.is_pinned or post.context.is_profile_pinned %} {{
|
||||
icon "pin" }} {% endif %}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -217,25 +218,28 @@ show_community %}
|
|||
</div>
|
||||
|
||||
<div class="flex justify-between items-center gap-2 w-full">
|
||||
{% if user %} {% if post.context.repost and
|
||||
post.context.repost.reposting %}
|
||||
<a
|
||||
href="/post/{{ post.context.repost.reposting }}"
|
||||
class="button small camo"
|
||||
>
|
||||
{{ icon "expand" }}
|
||||
<span>{{ text "communities:label.expand_original" }}</span>
|
||||
</a>
|
||||
{% else %}
|
||||
{% if user %}
|
||||
<div
|
||||
class="flex gap-1 reactions_box"
|
||||
hook="check_reactions"
|
||||
hook-arg:id="{{ post.id }}"
|
||||
>
|
||||
{{ components::likes(id=post.id, asset_type="Post",
|
||||
likes=post.likes, dislikes=post.dislikes) }}
|
||||
<!-- prettier-ignore -->
|
||||
{% if post.content|length > 0 %}
|
||||
{{ components::likes(id=post.id, asset_type="Post", likes=post.likes, dislikes=post.dislikes) }}
|
||||
{% endif %}
|
||||
|
||||
{% if post.context.repost and post.context.repost.reposting %}
|
||||
<a
|
||||
href="/post/{{ post.context.repost.reposting }}"
|
||||
class="button small camo"
|
||||
title='{{ text "communities:label.expand_original" }}'
|
||||
>
|
||||
{{ icon "expand" }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %} {% else %}
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
|
||||
|
|
@ -454,76 +458,8 @@ user.settings.private_last_online or is_helper %}
|
|||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %} {%- endmacro %} {% macro town_square_post_form() -%} {% if
|
||||
config.town_square and user %}
|
||||
<div class="card-nest">
|
||||
<div class="card small flex flex-col">
|
||||
<div class="flex items-center gap-2">
|
||||
{{ icon "pencil" }}
|
||||
<span>{{ text "communities:label.create_post" }}</span>
|
||||
</div>
|
||||
|
||||
<span class="fade"
|
||||
>Posts created here go to the
|
||||
<a href="/api/v1/communities/find/{{ config.town_square }}"
|
||||
>town square</a
|
||||
>
|
||||
community!</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="card flex flex-col gap-2"
|
||||
onsubmit="create_post_from_form_town_square(event)"
|
||||
>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="content">{{ text "communities:label.content" }}</label>
|
||||
<textarea
|
||||
type="text"
|
||||
name="content"
|
||||
id="content"
|
||||
placeholder="content"
|
||||
required
|
||||
minlength="2"
|
||||
maxlength="4096"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button class="primary">{{ text "communities:action.create" }}</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function create_post_from_form_town_square(e) {
|
||||
e.preventDefault();
|
||||
await trigger("atto::debounce", ["posts::create"]);
|
||||
fetch("/api/v1/posts", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
content: e.target.content.value,
|
||||
community: "{{ config.town_square }}",
|
||||
}),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
res.message,
|
||||
]);
|
||||
|
||||
if (res.ok) {
|
||||
setTimeout(() => {
|
||||
window.location.href = `/post/${res.payload}`;
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endif %} {%- endmacro %} {% macro theme(user) -%} {% if user %} {% if
|
||||
user.settings.theme_hue %}
|
||||
{% endif %} {%- endmacro %} {% macro theme(user, theme_preference) -%} {% if
|
||||
user %} {% if user.settings.theme_hue %}
|
||||
<style>
|
||||
:root, * {
|
||||
--hue: {{ user.settings.theme_hue }} !important;
|
||||
|
|
@ -542,10 +478,10 @@ user.settings.theme_hue %}
|
|||
}
|
||||
</style>
|
||||
|
||||
{% if user.settings.theme_preference %}
|
||||
{% if theme_preference %}
|
||||
<script>
|
||||
function match_user_theme() {
|
||||
const pref = "{{ user.settings.theme_preference }}".toLowerCase();
|
||||
const pref = "{{ theme_preference }}".toLowerCase();
|
||||
|
||||
if (pref === "auto") {
|
||||
return;
|
||||
|
|
@ -558,8 +494,38 @@ user.settings.theme_hue %}
|
|||
match_user_theme();
|
||||
}, 150);
|
||||
</script>
|
||||
{% endif %} {% endif %} {% endif %} {%- endmacro %} {% macro quote_form() -%} {%
|
||||
if config.town_square and user %}
|
||||
{% endif %} {% endif %}
|
||||
<!-- prettier-ignore -->
|
||||
<div style="display: none;">
|
||||
{{ components::theme_color(color=user.settings.theme_color_surface, css="color-surface") }}
|
||||
{{ components::theme_color(color=user.settings.theme_color_text, css="color-text") }}
|
||||
|
||||
{{ components::theme_color(color=user.settings.theme_color_lowered, css="color-lowered") }}
|
||||
{{ components::theme_color(color=user.settings.theme_color_text_lowered, css="color-text-lowered") }}
|
||||
{{ components::theme_color(color=user.settings.theme_color_super_lowered, css="color-super-lowered") }}
|
||||
|
||||
{{ components::theme_color(color=user.settings.theme_color_raised, css="color-raised") }}
|
||||
{{ components::theme_color(color=user.settings.theme_color_text_raised, css="color-text-raised") }}
|
||||
{{ components::theme_color(color=user.settings.theme_color_super_raised, css="color-super-raised") }}
|
||||
|
||||
{{ components::theme_color(color=user.settings.theme_color_primary, css="color-primary") }}
|
||||
{{ components::theme_color(color=user.settings.theme_color_text_primary, css="color-text-primary") }}
|
||||
{{ components::theme_color(color=user.settings.theme_color_primary_lowered, css="color-primary-lowered") }}
|
||||
|
||||
{{ components::theme_color(color=user.settings.theme_color_secondary, css="color-secondary") }}
|
||||
{{ components::theme_color(color=user.settings.theme_color_text_secondary, css="color-text-secondary") }}
|
||||
{{ components::theme_color(color=user.settings.theme_color_secondary_lowered, css="color-secondary-lowered") }}
|
||||
</div>
|
||||
{% endif %} {%- endmacro %} {% macro theme_color(color, css) -%} {% if color %}
|
||||
<!-- prettier-ignore -->
|
||||
<style>
|
||||
:root,
|
||||
* {
|
||||
--{{ css }}: {{ color|color }} !important;
|
||||
}
|
||||
</style>
|
||||
{% endif %} {%- endmacro %} {% macro quote_form() -%} {% if config.town_square
|
||||
and user %}
|
||||
<div class="card-nest">
|
||||
<div class="card small flex flex-col">
|
||||
<div class="flex items-center gap-2">
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<div class="flex nav_side">
|
||||
{% if user %}
|
||||
<a
|
||||
href="javascript:document.getElementById('town_square_post_dialog').showModal()"
|
||||
href="/communities/intents/post"
|
||||
class="button"
|
||||
title="Create post"
|
||||
>
|
||||
|
|
@ -163,6 +163,7 @@
|
|||
<span>{{ text "general:link.home" }}</span>
|
||||
</a>
|
||||
|
||||
{% if user %}
|
||||
<a
|
||||
href="/following"
|
||||
class="{% if selected == 'following' %}active{% endif %}"
|
||||
|
|
@ -170,6 +171,7 @@
|
|||
{{ icon "earth" }}
|
||||
<span>{{ text "general:link.following" }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<a href="/popular" class="{% if selected == 'popular' %}active{% endif %}">
|
||||
{{ icon "trending-up" }}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
@ -298,26 +298,6 @@ macros -%}
|
|||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="town_square_post_dialog">
|
||||
<div class="inner flex flex-col gap-2">
|
||||
{{ components::town_square_post_form() }}
|
||||
|
||||
<div class="flex justify-between">
|
||||
<div></div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="bold red quaternary"
|
||||
onclick="document.getElementById('town_square_post_dialog').close()"
|
||||
type="button"
|
||||
>
|
||||
{{ icon "x" }} {{ text "dialog:action.close" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="quote_dialog">
|
||||
<div class="inner flex flex-col gap-2">
|
||||
{{ components::quote_form() }}
|
||||
|
|
@ -338,6 +318,7 @@ macros -%}
|
|||
</div>
|
||||
</dialog>
|
||||
{% endif %} {% if user and use_user_theme %} {{
|
||||
components::theme(user=user) }} {% endif %}
|
||||
components::theme(user=user,
|
||||
theme_preference=user.settings.theme_preference) }} {% endif %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue