add: user theme_color_text_link setting
This commit is contained in:
trisua
parent
b9ffe00042
commit
535a854a47
6 changed files with 95 additions and 58 deletions
|
|
@ -128,11 +128,6 @@
|
|||
}
|
||||
|
||||
window.history.back();
|
||||
|
||||
setTimeout(() => {
|
||||
// if we couldn't go back after 1 whole second, just go home
|
||||
window.location.href = "/";
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -477,8 +477,7 @@ user %} {% if user.settings.theme_hue %}
|
|||
--lit: {{ user.settings.theme_lit }} !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% if theme_preference %}
|
||||
{% endif %} {% if theme_preference %}
|
||||
<script>
|
||||
function match_user_theme() {
|
||||
const pref = "{{ theme_preference }}".toLowerCase();
|
||||
|
|
@ -494,11 +493,12 @@ user %} {% if user.settings.theme_hue %}
|
|||
match_user_theme();
|
||||
}, 150);
|
||||
</script>
|
||||
{% endif %} {% 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_text_link, css="color-link") }}
|
||||
|
||||
{{ 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") }}
|
||||
|
|
|
|||
|
|
@ -11,19 +11,23 @@
|
|||
|
||||
<div class="pillmenu">
|
||||
<a data-tab-button="account" class="active" href="#/account">
|
||||
{{ text "settings:tab.account" }}
|
||||
{{ icon "smile" }}
|
||||
<span>{{ text "settings:tab.account" }}</span>
|
||||
</a>
|
||||
|
||||
<a data-tab-button="profile" href="#/profile">
|
||||
{{ text "settings:tab.profile" }}
|
||||
{{ icon "user-round" }}
|
||||
<span>{{ text "settings:tab.profile" }}</span>
|
||||
</a>
|
||||
|
||||
<a data-tab-button="theme" href="#/theme">
|
||||
{{ text "settings:tab.theme" }}
|
||||
{{ icon "paint-bucket" }}
|
||||
<span>{{ text "settings:tab.theme" }}</span>
|
||||
</a>
|
||||
|
||||
<a data-tab-button="sessions" href="#/sessions">
|
||||
{{ text "settings:tab.sessions" }}
|
||||
{{ icon "cookie" }}
|
||||
<span>{{ text "settings:tab.sessions" }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -200,37 +204,6 @@
|
|||
|
||||
<div class="w-full hidden flex flex-col gap-2" data-tab="profile">
|
||||
<div class="card tertiary flex flex-col gap-2" id="profile_settings">
|
||||
<div class="card-nest" ui_ident="theme_preference">
|
||||
<div class="card small">
|
||||
<b>Theme preference</b>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<select
|
||||
onchange="set_setting_field('theme_preference', event.target.selectedOptions[0].value)"
|
||||
>
|
||||
<option
|
||||
value="Auto"
|
||||
selected="{% if user.settings.theme_preference == 'Auto' %}true{% else %}false{% endif %}"
|
||||
>
|
||||
Auto
|
||||
</option>
|
||||
<option
|
||||
value="Light"
|
||||
selected="{% if user.settings.theme_preference == 'Light' %}true{% else %}false{% endif %}"
|
||||
>
|
||||
Light
|
||||
</option>
|
||||
<option
|
||||
value="Dark"
|
||||
selected="{% if user.settings.theme_preference == 'Dark' %}true{% else %}false{% endif %}"
|
||||
>
|
||||
Dark
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-nest" ui_ident="change_avatar">
|
||||
<div class="card small">
|
||||
<b>{{ text "settings:label.change_avatar" }}</b>
|
||||
|
|
@ -340,9 +313,44 @@
|
|||
|
||||
<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="theme_preference">
|
||||
<div class="card small">
|
||||
<b>Theme preference</b>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<select
|
||||
onchange="set_setting_field('theme_preference', event.target.selectedOptions[0].value)"
|
||||
>
|
||||
<option
|
||||
value="Auto"
|
||||
selected="{% if user.settings.theme_preference == 'Auto' %}true{% else %}false{% endif %}"
|
||||
>
|
||||
Auto
|
||||
</option>
|
||||
<option
|
||||
value="Light"
|
||||
selected="{% if user.settings.theme_preference == 'Light' %}true{% else %}false{% endif %}"
|
||||
>
|
||||
Light
|
||||
</option>
|
||||
<option
|
||||
value="Dark"
|
||||
selected="{% if user.settings.theme_preference == 'Dark' %}true{% else %}false{% endif %}"
|
||||
>
|
||||
Dark
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<span class="fade"
|
||||
>This represents your local site theme.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-nest" ui_ident="profile_theme">
|
||||
<div class="card small">
|
||||
<b>Profile theme</b>
|
||||
<b>Profile theme base</b>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
|
@ -368,6 +376,11 @@
|
|||
Dark
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<span class="fade"
|
||||
>This represents the site theme shown to users viewing
|
||||
your profile.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -693,11 +706,13 @@
|
|||
"two_factor_authentication",
|
||||
]);
|
||||
ui.refresh_container(profile_settings, [
|
||||
"theme_preference",
|
||||
"change_avatar",
|
||||
"change_banner",
|
||||
]);
|
||||
ui.refresh_container(theme_settings, ["profile_theme"]);
|
||||
ui.refresh_container(theme_settings, [
|
||||
"theme_preference",
|
||||
"profile_theme",
|
||||
]);
|
||||
|
||||
ui.generate_settings_ui(
|
||||
account_settings,
|
||||
|
|
@ -753,7 +768,21 @@
|
|||
ui.generate_settings_ui(
|
||||
theme_settings,
|
||||
[
|
||||
[
|
||||
[
|
||||
"disable_other_themes",
|
||||
"Disable the profile theme of other users",
|
||||
],
|
||||
"{{ profile.settings.disable_other_themes }}",
|
||||
"checkbox",
|
||||
],
|
||||
[[], "Theme builder", "title"],
|
||||
[
|
||||
[],
|
||||
"Allow the site to build the theme for you given a base hue, saturation, and lightness. Scroll down to the next section to manually build the theme.",
|
||||
"text",
|
||||
],
|
||||
|
||||
[
|
||||
["theme_hue", "Theme hue (integer 0-255)"],
|
||||
"{{ profile.settings.theme_hue }}",
|
||||
|
|
@ -769,15 +798,7 @@
|
|||
"{{ profile.settings.theme_lit }}",
|
||||
"input",
|
||||
],
|
||||
[
|
||||
[
|
||||
"disable_other_themes",
|
||||
"Disable the profile theme of other users",
|
||||
],
|
||||
"{{ profile.settings.disable_other_themes }}",
|
||||
"checkbox",
|
||||
],
|
||||
[[], "Theme builder", "title"],
|
||||
[[], "Manual theme builder", "title"],
|
||||
[[], "Override individual colors.", "text"],
|
||||
// surface
|
||||
[
|
||||
|
|
@ -797,6 +818,14 @@
|
|||
"Text on elements with the surface backgrounds.",
|
||||
},
|
||||
],
|
||||
[
|
||||
["theme_color_text_link", "Links"],
|
||||
"{{ profile.settings.theme_color_text_link }}",
|
||||
"color",
|
||||
{
|
||||
description: "Links on all elements.",
|
||||
},
|
||||
],
|
||||
// lowered
|
||||
[[], "", "divider"],
|
||||
[
|
||||
|
|
@ -874,7 +903,7 @@
|
|||
},
|
||||
],
|
||||
[
|
||||
["theme_color_primary_lowered", "Primary lowered"],
|
||||
["theme_color_primary_lowered", "Lowered"],
|
||||
"{{ profile.settings.theme_color_primary_lowered }}",
|
||||
"color",
|
||||
{
|
||||
|
|
@ -901,7 +930,7 @@
|
|||
},
|
||||
],
|
||||
[
|
||||
["theme_color_secondary_lowered", "Secondary lowered"],
|
||||
["theme_color_secondary_lowered", "Lowered"],
|
||||
"{{ profile.settings.theme_color_secondary_lowered }}",
|
||||
"color",
|
||||
{
|
||||
|
|
|
|||
|
|
@ -319,6 +319,12 @@ macros -%}
|
|||
</dialog>
|
||||
{% endif %} {% if user and use_user_theme %} {{
|
||||
components::theme(user=user,
|
||||
theme_preference=user.settings.theme_preference) }} {% endif %}
|
||||
theme_preference=user.settings.theme_preference) }}
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
trigger("atto::use_theme_preference");
|
||||
}, 150);
|
||||
</script>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -44,6 +44,10 @@ media_theme_pref();
|
|||
self.OBSERVERS = [];
|
||||
|
||||
// ...
|
||||
self.define("use_theme_preference", () => {
|
||||
media_theme_pref();
|
||||
});
|
||||
|
||||
self.define("try_use", (_, ns_name, callback) => {
|
||||
// attempt to get existing namespace
|
||||
if (globalThis._app_base.ns_store[`$${ns_name}`]) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue