PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2025-04-05 02:59:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge 14a19882f7 into 78550a6322

Browse source
This commit is contained in:
MareStare 2025-03-26 22:05:03 -04:00 • committed by GitHub
commit 97c177855e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 304 additions and 131 deletions
assets
css/elements
forms.css
js
settings.ts
lib/philomena_web
templates/setting
edit.html.slime
views
setting_view.ex

34
assets/css/elements/forms.css
View file

@ -92,6 +92,39 @@ textarea {
margin-bottom: 6px;
}
.field-help-button,
.field-help-button * {
font-style: italic;
cursor: pointer;
}
.field-help-button {
margin-left: 6px;
font-size: 0.8em;
color: var(--foreground-half-color);
border-color: var(--foreground-half-color);
border-style: dashed;
border-width: 1px;
border-radius: 10px;
padding: 4px;
/*
We want this to behave like a button, so double clicking on it
shouldn't trigger a selection
*/
user-select: none;
}
.field-help-button:hover {
background-color: var(--primary-light-color);
}
.field-help-content {
color: var(--foreground-half-color);
margin: 10px auto;
font-style: italic;
}
.field_with_errors {
background: var(--danger-color);
}
@ -107,6 +140,7 @@ span.help-block {
max-width: 30em;
width: 100%;
}
/* text input - grow to container size */
.hform__text {
flex: 1 0 auto;

17
assets/js/settings.ts
View file

@ -44,6 +44,22 @@ function setupAutocompleteSettings() {
});
}
function setupHelpExpansions() {
document.addEventListener('click', event => {
if (!(event.target instanceof HTMLElement)) {
return;
}
const helpButton = event.target.closest('.field-help-button');
if (!helpButton || !helpButton.nextElementSibling) {
return;
}
helpButton.nextElementSibling.classList.toggle('hidden');
});
}
export function setupSettings() {
if (!$('#js-setting-table')) return;
@ -58,4 +74,5 @@ export function setupSettings() {
setupThemeSettings();
setupAutocompleteSettings();
setupHelpExpansions();
}

360
lib/philomena_web/templates/setting/edit.html.slime
View file

@ -55,152 +55,242 @@ h1 Content Settings
br
' Do not share this URL with anyone, it may allow an attacker to compromise your account.
.block__tab.hidden.flex.flex--maybe-wrap data-tab="display"
div
.field
=> label f, :use_centered_layout
=> checkbox f, :use_centered_layout, class: "checkbox"
.fieldlabel: i Align content to the center of the page - try this option out if you browse the site on a tablet or a fairly wide screen.
.field
=> label f, :show_sidebar_and_watched_images
=> checkbox f, :show_sidebar_and_watched_images, class: "checkbox"
.fieldlabel: i Show the sidebar and new watched images on the homepage (the default) or hide it.
.field
=> label f, :hide_vote_counts
=> checkbox f, :hide_vote_counts, class: "checkbox"
.fieldlabel: i Hide upvote and downvote counts on images, showing only the overall score
.field
=> label f, :images_per_page
=> number_input f, :images_per_page, min: 1, max: 50, step: 1, class: "input"
= error_tag f, :images_per_page
.fieldlabel
i
' This is the number of images per page that are displayed on image listings and searches, up to a maximum of 50.
' For 1080p monitors, try 24.
.field
label> Theme
=> select f, :theme_name, themes(), class: "input"
= error_tag f, :theme_name
.fieldlabel: i General appearance of the theme
.field
label> Theme color
=> select f, :theme_color, theme_colors(), class: "input"
= error_tag f, :theme_color
.fieldlabel: i Color of the theme
.fieldlabel: strong Don't forget to save the settings to apply the theme!
.hidden#js-theme-paths data-theme-paths=Jason.encode!(theme_paths())
.field
=> label f, :scale_large_images
=> select f, :scale_large_images, scale_options(), class: "input"
= error_tag f, :scale_large_images
.block__tab.hidden data-tab="display"
= field_with_help( \
"Align content to the center of the page - try this option out if you " <> \
"browse the site on a tablet or a fairly wide screen.",
[ \
checkbox(f, :use_centered_layout, class: "checkbox"),
label(f, :use_centered_layout),
] \
)
.block__tab.hidden.flex.flex--maybe-wrap data-tab="comments"
div
.field
=> label f, :comments_newest_first, "Newest comments first"
=> checkbox f, :comments_newest_first
.fieldlabel: i Display the newest comments at the top of the page.
.field
=> label f, :comments_always_jump_to_last, "Show latest comment page"
=> checkbox f, :comments_always_jump_to_last
.fieldlabel
i
' This setting takes effect when the previous is disabled. Always jump to the latest page (enabled) or show the first page if the oldest comments are shown at the top of the page.
br
' Posting will always direct you to the latest page so that you can see your comment in context.
.field
=> label f, :comments_per_page
=> number_input f, :comments_per_page, min: 1, max: 100, step: 1, class: "input"
= error_tag f, :comments_per_page
.fieldlabel: i This is the number of comments per page that are displayed on image pages.
.field
=> label f, :messages_newest_first, "Newest messages first"
=> checkbox f, :messages_newest_first
.fieldlabel: i Show the newest messages first (enabled) or show the oldest messages at the top of a conversation. Enabling this makes it feel more like a top-posted email quote chain.
= field_with_help( \
"Show the sidebar and new watched images on the homepage (the default) or hide it.",
[ \
checkbox(f, :show_sidebar_and_watched_images, class: "checkbox"),
label(f, :show_sidebar_and_watched_images),
] \
)
.block__tab.hidden.flex.flex--maybe-wrap data-tab="notifications"
div
.field
=> label f, :watch_on_reply, "Subscribe on Reply"
=> checkbox f, :watch_on_reply, class: "checkbox"
.fieldlabel: i Subscribe on Reply means you'll be subscribed to things (images or topics) automatically as soon as you post a comment or reply, keeping you in the conversation.
.field
=> label f, :watch_on_upload, "Subscribe on Upload"
=> checkbox f, :watch_on_upload, class: "checkbox"
.fieldlabel: i Subscribe on Upload means you'll be subscribed to images automatically as soon as you upload, to help you keep track of comments.
.field
=> label f, :watch_on_new_topic, "Subscribe on New Threads"
=> checkbox f, :watch_on_new_topic, class: "checkbox"
.fieldlabel: i Subscribe on New Threads means you'll be subscribed to threads automatically as soon as you post, to help you keep track of replies.
= field_with_help( \
"Hide upvote and downvote counts on images, showing only the overall score",
[ \
checkbox(f, :hide_vote_counts, class: "checkbox"),
label(f, :hide_vote_counts),
] \
)
.block__tab.hidden.flex.flex--maybe-wrap data-tab="metadata"
div
.field
=> label f, :fancy_tag_field_on_upload, "Fancy tags - uploads"
=> checkbox f, :fancy_tag_field_on_upload, class: "checkbox"
.field
=> label f, :fancy_tag_field_on_edit, "Fancy tags - edits"
=> checkbox f, :fancy_tag_field_on_edit, class: "checkbox"
.fieldlabel: i The fancy tag editor gives you autosuggestions and visual representations of the tags, but is sometimes not desired - for instance when dealing with batch uploads where you might want to copy-paste tags. You can choose which type of editor to use by default here.
.field
=> label f, :anonymous_by_default
=> checkbox f, :anonymous_by_default, class: "checkbox"
.fieldlabel: i Check this box to post images and comments as anonymous by default, even if logged in.
= field_with_help( \
"The number of images per page that are displayed on image listings " <> \
"and searches, up to a maximum of 50. For 1080p monitors, try 24.",
[ \
number_input(f, :images_per_page, min: 1, max: 50, step: 1, class: "input"), \
label(f, :images_per_page), \
error_tag(f, :images_per_page) \
] \
)
.field
=> select f, :theme_name, themes(), class: "input"
label> Theme
= error_tag f, :theme_name
.field
=> select f, :theme_color, theme_colors(), class: "input"
label> Theme color
= error_tag f, :theme_color
.block.block--fixed.block--warning Don't forget to save the settings to apply the theme!
.hidden#js-theme-paths data-theme-paths=Jason.encode!(theme_paths())
.field
=> select f, :scale_large_images, scale_options(), class: "input"
=> label f, :scale_large_images
= error_tag f, :scale_large_images
.block__tab.hidden data-tab="comments"
= field_with_help( \
"Display the newest comments at the top of the page.", \
[ \
checkbox(f, :comments_newest_first, class: "checkbox"), \
label(f, :comments_newest_first, "Newest comments first"), \
] \
)
= field_with_help( \
"This setting takes effect when the previous is disabled. " <> \
"Always jump to the latest page (enabled) or show the first page " <> \
"if the oldest comments are shown at the top of the page.\n" <> \
"Posting will always direct you to the latest page " <> \
"so that you can see your comment in context.",
[ \
checkbox(f, :comments_always_jump_to_last, class: "checkbox"),
label(f, :comments_always_jump_to_last, "Show latest comment page"),
] \
)
= field_with_help( \
"The number of comments per page that are displayed on image pages.",
[ \
number_input(f, :comments_per_page, min: 1, max: 100, step: 1, class: "input"),
label(f, :comments_per_page),
error_tag(f, :comments_per_page),
] \
)
= field_with_help( \
"Show the newest messages first (enabled) or show the oldest messages " <> \
"at the top of a conversation. Enabling this makes it feel more like " <> \
"a top-posted email quote chain.",
[ \
checkbox(f, :messages_newest_first, class: "checkbox"),
label(f, :messages_newest_first, "Newest messages first"),
] \
)
.block__tab.hidden data-tab="notifications"
= field_with_help( \
"If enabled, you'll be subscribed to things (images or topics) " <> \
"automatically as soon as you post a comment or reply, keeping " <> \
"you in the conversation.",
[ \
checkbox(f, :watch_on_reply, class: "checkbox"), \
label(f, :watch_on_reply, "Subscribe on Reply"), \
] \
)
= field_with_help( \
"If enabled, you'll be subscribed to images automatically " <> \
"as soon as you upload, to help you keep track of comments.",
[ \
checkbox(f, :watch_on_upload, class: "checkbox"), \
label(f, :watch_on_upload, "Subscribe on Upload"), \
] \
)
= field_with_help( \
"If enabled you'll be subscribed to threads automatically as soon " <> \
"as you post, to help you keep track of replies.",
[ \
checkbox(f, :watch_on_new_topic, class: "checkbox"), \
label(f, :watch_on_new_topic, "Subscribe on New Threads"), \
] \
)
.block__tab.hidden data-tab="metadata"
.field
=> checkbox f, :fancy_tag_field_on_upload, class: "checkbox"
=> label f, :fancy_tag_field_on_upload, "Fancy tags - uploads"
= field_with_help( \
"The fancy tag editor gives you autosuggestions and visual " <> \
"representations of the tags, but is sometimes not desired - " <> \
"for instance when dealing with batch uploads where you might " <> \
"want to copy-paste tags. You can choose which type of editor " <> \
"to use by default here.",
[ \
checkbox(f, :fancy_tag_field_on_edit, class: "checkbox"), \
label(f, :fancy_tag_field_on_edit, "Fancy tags - edits"), \
] \
)
= field_with_help( \
"Check this box to post images and comments as anonymous by default, " <> \
"even if logged in.",
[ \
checkbox(f, :anonymous_by_default, class: "checkbox"), \
label(f, :anonymous_by_default), \
] \
)
.block__tab class=local_tab_class(@conn) data-tab="local"
.block.block--fixed.block--warning Settings on this tab are saved in the current browser. They are independent of your login.
= field_with_help( \
"Use high quality thumbnails on displays with a high pixel density. " <> \
"Requires more data than regular thumbnails.", \
[ \
checkbox(f, :hidpi, checked: @conn.cookies["hidpi"] == "true", class: "checkbox"), \
label(f, :hidpi, "Serve HiDPI thumbnails"), \
] \
)
= field_with_help( \
"Serve WebM/MP4 versions of GIF images when available. Good for " <> \
"lower-bandwidth connections, but the video versions may have missing " <> \
"start/end frames, and don't support transparency.", \
[ \
checkbox(f, :serve_webm, checked: @conn.cookies["serve_webm"] == "true", class: "checkbox"), \
label(f, :serve_webm, "Serve WebM"), \
] \
)
= field_with_help( \
"Use video thumbnails for WebM videos. Does not apply to GIF images.", \
[ \
checkbox(f, :webm, checked: @conn.cookies["webm"] == "true", class: "checkbox"), \
label(f, :webm, "Use video thumbnails"), \
] \
)
= field_with_help( \
"Automatically enable audio on video pages when they are loaded.", \
[ \
checkbox(f, :unmute_videos, checked: @conn.cookies["unmute_videos"] == "true", class: "checkbox"), \
label(f, :unmute_videos, "Enable video audio by default"), \
] \
)
= field_with_help( \
"Hide the uploader and date posted information on image pages.", \
[ \
checkbox(f, :hide_uploader, checked: @conn.cookies["hide_uploader"] == "true", class: "checkbox"), \
label(f, :hide_uploader), \
] \
)
= field_with_help( \
"Don't attempt to filter tag suggestions using your current filter.", \
[ \
checkbox(f, :unfilter_tag_suggestions, checked: @conn.cookies["unfilter_tag_suggestions"] == "true", class: "checkbox"), \
label(f, :unfilter_tag_suggestions), \
] \
)
= field_with_help( \
"Hide score information for images.", \
[ \
checkbox(f, :hide_score, checked: @conn.cookies["hide_score"] == "true", class: "checkbox"), \
label(f, :hide_score), \
] \
)
= field_with_help( \
"Show streams marked as NSFW on the channels page.", \
[ \
checkbox(f, :chan_nsfw, checked: @conn.cookies["chan_nsfw"] == "true", class: "checkbox"), \
label(f, :chan_nsfw, "Show NSFW channels"), \
] \
)
.field
=> label f, :hidpi, "Serve HiDPI thumbnails"
=> checkbox f, :hidpi, checked: @conn.cookies["hidpi"] == "true"
.fieldlabel: i Use high quality thumbnails on displays with a high pixel density. Requires more data than regular thumbnails.
.field
=> label f, :serve_webm, "Serve WebM"
=> checkbox f, :serve_webm, checked: @conn.cookies["serve_webm"] == "true"
.fieldlabel: i Serve WebM/MP4 versions of GIF images when available. Good for lower-bandwidth connections, but the video versions may have missing start/end frames, and do not support transparency.
.field
=> label f, :webm, "Use video thumbnails"
=> checkbox f, :webm, checked: @conn.cookies["webm"] == "true"
.fieldlabel: i Use video thumbnails for WebM videos. Does not apply to GIF images.
.field
=> label f, :unmute_videos, "Enable video audio by default"
=> checkbox f, :unmute_videos, checked: @conn.cookies["unmute_videos"] == "true"
.fieldlabel: i Automatically enable audio on video pages when they are loaded.
.field
=> label f, :hide_uploader
=> checkbox f, :hide_uploader, checked: @conn.cookies["hide_uploader"] == "true"
.fieldlabel: i Hide the uploader and date posted information on image pages.
.field
=> label f, :unfilter_tag_suggestions
=> checkbox f, :unfilter_tag_suggestions, checked: @conn.cookies["unfilter_tag_suggestions"] == "true"
.fieldlabel: i Don't attempt to filter tag suggestions using your current filter.
.field
=> label f, :hide_score
=> checkbox f, :hide_score, checked: @conn.cookies["hide_score"] == "true"
.fieldlabel: i Hide score information for images.
.field
=> label f, :chan_nsfw, "Show NSFW channels"
=> checkbox f, :chan_nsfw, checked: @conn.cookies["chan_nsfw"] == "true"
.fieldlabel: i Show streams marked as NSFW on the channels page.
.field
=> checkbox f, :enable_search_ac, checked: @conn.cookies["enable_search_ac"] == "true", class: "checkbox"
=> label f, :enable_search_ac, "Enable search auto-completion"
=> checkbox f, :enable_search_ac, checked: @conn.cookies["enable_search_ac"] == "true"
.autocomplete-settings class=if(@conn.cookies["enable_search_ac"] != "true", do: "hidden", else: "")
.field
=> checkbox f,
:autocomplete_search_history_hidden,
checked: @conn.cookies["autocomplete_search_history_hidden"] == "true",
class: "checkbox"
=> label f,
:autocomplete_search_history_hidden,
"Hide search history in auto-completion"
=> checkbox f,
:autocomplete_search_history_hidden,
checked: @conn.cookies["autocomplete_search_history_hidden"] == "true"
.autocomplete-search-history-settings[
class=if(@conn.cookies["autocomplete_search_history_hidden"] == "true", do: "hidden", else: "")
]
.field
=> label f,
:autocomplete_search_history_max_suggestions_when_typing,
"Maximum number of search history suggestions in autocompletion when typing"
=> number_input f,
:autocomplete_search_history_max_suggestions_when_typing,
min: 0,
@ -208,12 +298,20 @@ h1 Content Settings
step: 1,
value: @conn.cookies["autocomplete_search_history_max_suggestions_when_typing"] || 3,
class: "input"
=> label f,
:autocomplete_search_history_max_suggestions_when_typing,
"Maximum number of search history suggestions in auto-completion when typing"
= if staff?(@conn.assigns.current_user) do
.field
=> label f, :hide_staff_tools
=> checkbox f, :hide_staff_tools, checked: @conn.cookies["hide_staff_tools"] == "true"
.fieldlabel: i Hide most of the staff tools (e.g. IPs, anon names) making your site appear as if you weren't staff, this is useful when browsing in public.
= field_with_help( \
"Hide most of the staff tools (e.g. IPs, anon names) making your site " <> \
"appear as if you weren't staff, this is useful when browsing in public.",
[ \
checkbox(f, :hide_staff_tools, checked: @conn.cookies["hide_staff_tools"] == "true", class: "checkbox"),
label(f, :hide_staff_tools),
] \
)
= if !@conn.assigns.current_user do
.block__tab.hidden data-tab="join-the-herd"

24
lib/philomena_web/views/setting_view.ex
View file

@ -38,4 +38,28 @@ defmodule PhilomenaWeb.SettingView do
def staff?(%{role: role}), do: role != "user"
def staff?(_), do: false
def field_with_help(title, children) do
content =
children
|> Enum.intersperse(" ")
|> Enum.concat([
content_tag :span, class: "field-help-button" do
[
content_tag(:i, "", class: "fa-regular fa-question-circle"),
" Help"
]
end,
content_tag :div, class: "field-help-content hidden" do
[
# The `title` is static and doesn't include dynamic user input.
# sobelow_skip ["XSS.Raw"]
raw(text_to_html(title)),
tag(:hr)
]
end
])
content_tag(:div, content, class: "field", title: title)
end
end