yagich/pyrom
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add badges

Browse Source
This commit is contained in:
Lera Elvoé
2025-12-09 03:33:27 +03:00
parent 1539486456
commit dbf0150a5e
43 changed files with 913 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
app/templates/common/macros.html
View File

@@ -138,6 +138,17 @@
</form>
{% endmacro %}
{% macro badge_button(badge) %}
{% set img_url = badge.file_path if badge.file_path else badge.get_image_url() %}
{% if badge.link %}
<a href="{{badge.link}}" rel="noopener noreferrer me" target="_blank">
{% endif %}
<img class="badge-button" src="{{img_url}}" alt="{{badge.label}}" title="{{badge.label}}"></img>
{% if badge.link %}
</a>
{% endif %}
{% endmacro %}
{% macro full_post(
post, render_sig = True, is_latest = False,
editing = False, active_user = None, no_reply = false,
@@ -161,6 +172,11 @@
{% if post['status'] %}
<em class="user-status">{{ post['status'] }}</em>
{% endif %}
<div class="badges-container">
{% for badge_data in (post.badges_json | fromjson) %}
{{ badge_button(badge_data) }}
{% endfor %}
</div>
</div>
</div>
@@ -306,3 +322,40 @@
</div>
</div>
{% endmacro %}
{% macro badge_editor_single(options={}, selected=none, fp_hidden=true, badge=none) %}
{% set defaults = options | selectattr('user_id', 'none') | list | sort(attribute='file_path') %}
{% set uploads = options | selectattr('user_id') | list %}
{% if selected is not none %}
{% set selected_href = (options | selectattr('id', 'equalto', selected) | list)[0].file_path %}
{% else %}
{% set selected_href = defaults[0].file_path %}
{% endif %}
<bitty-7-0 data-connect="{{ '/static/js/bitties/pyrom-bitty.js' | cachebust }} BadgeEditorBadge" data-listeners="click input submit change">
<div class="settings-badge-container" data-receive="deleteBadge">
<div class="settings-badge-select">
<select data-send="badgeUpdatePreview badgeToggleFilePicker" name="badge_choice[]" required>
<optgroup label="Default">
{% for option in defaults %}
<option data-file-path="{{ option.file_path }}" value="{{ option.id }}" {{ "selected" if selected==option.id else "" }}>{{option.file_path | basename_noext}}</option>
{% endfor %}
</optgroup>
<optgroup label="Your uploads">
{% for option in uploads %}
<option data-file-path="{{ option.file_path }}" value="{{ option.id }}" {{ "selected" if selected==option.id else "" }}>{{option.original_filename | basename_noext}}</option>
{% endfor %}
<option value="custom">Upload new...</option>
</optgroup>
</select>
<img class="badge-button" data-receive="badgeUpdatePreview badgeUpdatePreviewCustom" src="{{ selected_href }}"></img>
</div>
<div class="settings-badge-file-picker{{ " hidden" if fp_hidden else ""}}" data-receive="badgeToggleFilePicker">
<button data-send="openBadgeFilePicker" type=button>Browse&hellip;</button>
<input data-receive="openBadgeFilePicker badgeErrorSize badgeErrorDim badgeHideErrors" data-send="badgeUpdatePreviewCustom" type="file" accept="image/*" class="hidden" name="badge_file[]">
</div>
<input type="text" required placeholder="Label" name="badge_label[]" value="{{badge.label}}">
<input type="text" placeholder="(Optional) Link" name="badge_link[]" value="{{badge.link}}">
<button data-send="deleteBadge" type="button" class="critical" title="Delete">X</button>
</div>
</bitty-7-0>
{% endmacro %}

4
app/templates/components/badge_editor_badges.html Normal file
View File

@@ -0,0 +1,4 @@
{% from 'common/macros.html' import badge_editor_single with context %}
{% for badge in badges %}
{{ badge_editor_single(options=uploads, selected=badge.upload, badge=badge) }}
{% endfor %}

2
app/templates/components/badge_editor_template.html Normal file
View File

@@ -0,0 +1,2 @@
{% from 'common/macros.html' import badge_editor_single with context %}
{{ badge_editor_single(options=uploads) }}

2
app/templates/guides/user-guides/01-introduction.html
View File

@@ -53,7 +53,7 @@
<p>A post is split up into five sections:</p>
<ol>
<li>Usercard
<ul><li>The post author's information shows up to the left of the post. This includes their avatar, display name, mention, and status.</li></ul>
<ul><li>The post author's information shows up to the left of the post. This includes their avatar, display name, mention, status, and badges.</li></ul>
</li>
<li>Post actions
<ul><li>This shows the time and date when the post has been made (or edited), and buttons for actions you can perform on the post, such as quoting or editing.</li></ul>

1
app/templates/guides/user-guides/02-profiles.html
View File

@@ -10,6 +10,7 @@
<li>Their username and display name;</li>
<li>Their status;</li>
<li>Their signature;</li>
<li>Their badges;</li>
<li>Their stats:
<ul>
<li>Their permission level (regular user, moderator, etc);</li>

30
app/templates/guides/user-guides/03-settings.html
View File

@@ -51,7 +51,35 @@
</section>
<section class="guide-section">
<h2 id="password">Changing your password</h2>
<p>You can change your password by typing it in the "New password" field and again in the "Confirm new password" field, then pressing the <button class="warn">Change password</button> button. The passwords in the two fields must match.</p>
<p>You can change your password by typing your desired new password in the "New password" field and again in the "Confirm new password" field, then pressing the <button class="warn">Change password</button> button. The passwords in the two fields must match.</p>
</section>
<section class="guide-section">
<h2 id="badges">Badges</h2>
<p>Badges, also known as buttons, are 88x31 images that you can use to add more flair to your profile or link to other websites.</p>
<p>Badges you set will be shown on the usercard in threads and on your profile page. You can have up to 10 badges.</p>
<p>To add a badge, press the "Add badge" button. A badge editor will be added. A badge consists of three parts:</p>
<ol>
<li>Image
<ul>
<li>{{ config.SITE_NAME }} provides a selection of default badges that you can use. You may select one by using the dropdown, under the "Default" category.</li>
<li>Alternatively, you may upload your own image. To do so, select the "Upload…" option in the dropdown, under the "Your uploads" category. A <button>Browse…</button> button will appear, letting you select a file. The image must be exactly 88x31 pixels and may not be over 500KB in size.<br>
Custom badge images that you have uploaded before can be reused and will appear under "Your uploads". If a badge image you've uploaded before is not used by any of your badges, it will be deleted and you will have to upload it again if you wish to reuse it.<br>
Other users can not use images you've uploaded as part of their badges unless they download it manually.</li>
</ul>
</li>
<li>Label
<ul>
<li>The label will be shown when the badge is hovered over. It will also be the badge image's alt text.</li>
</ul>
</li>
<li>Link
<ul>
<li>Optionally, you may turn the badge into a clickable button by providing a link. The link will open in a new tab when pressed, and will use <code class="inline-code">rel="me"</code> so you can use your profile as verification on platforms like Mastodon.</li>
</ul>
</li>
</ol>
<p>If a badge is not valid, its editor and any invalid fields will have a dashed border.</p>
<p>You can delete a badge by pressing the <button class="critical">X</button> button. Your changes are not saved until you press the <button>Save badges</button> button.</p>
</section>
<section class="guide-section">
<h2 id="deleting">Deleting your account</h2>

10
app/templates/users/settings.html
View File

@@ -53,6 +53,16 @@
<input class="warn" type="submit" value="Change password">
</form>
</fieldset>
<fieldset>
<legend>Badges</legend>
<a href="{{ url_for('guides.guide_page', category='user-guides', slug='settings', _anchor='badges')}}">Badges help</a>
<bitty-7-0 data-connect="{{ '/static/js/bitties/pyrom-bitty.js' | cachebust }} BadgeEditorForm" data-listeners="click input submit change">
<form data-use="badgeEditorPrepareSubmit" data-init='loadBadgeEditor' data-receive='addBadge' method='post' enctype='multipart/form-data' action='{{ url_for('users.save_badges', username=active_user.username) }}'>
<div>Loading badges&hellip;</div>
<div>If badges fail to load, JS may be disabled.</div>
</form>
</bitty-7-0>
</fieldset>
</div>
<div>
<a class="linkbutton critical" href="{{ url_for('users.delete_page', username=active_user.username) }}">Delete account</a>

7
app/templates/users/user.html
View File

@@ -1,4 +1,4 @@
{% from 'common/macros.html' import timestamp %}
{% from 'common/macros.html' import timestamp, badge_button %}
{% extends 'base.html' %}
{% block title %}{{ target_user.get_readable_name() }}'s profile{% endblock %}
{% block content %}
@@ -54,6 +54,11 @@
Signature:
<div>{{ target_user.signature_rendered | safe }}</div>
{% endif %}
<div class="badges-container">
{% for badge in target_user.get_badges() %}
{{ badge_button(badge) }}
{% endfor %}
</div>
</div>
</div>
<div class="user-page-stats">