bring back the badge editor

This commit is contained in:
2026-06-05 07:19:53 +03:00
parent c7ba23ad22
commit 6fab93ebeb
10 changed files with 426 additions and 12 deletions

View File

@@ -161,7 +161,7 @@
<a href="{{url_for('users.user_page', username=post.username)}}" class="usercard-username">{{post.display_name if post.display_name else post.username}}</a>
<abbr title="mention">@{{post.username}}</abbr>
<i>{{post.status}}</i>
{%- set badges=post.badges_json | fromjson -%}
{%- set badges=post.badges_json | fromjson | sort(attribute='sort_order') -%}
<div class="badges-container">
{%- for badge in badges -%}
{%- if badge.link -%}<a href="{{badge.link}}">{%- endif -%}
@@ -285,16 +285,16 @@
{%- endmacro %}
{% macro sortable_list(attr=none) -%}
<ol class="sortable-list plank even no-shadow minimal tertiary-bg" {% if attr %}{{ dict_to_attr(attr) }}{% endif %}>
<ol class="sortable-list" {% if attr %}{{ dict_to_attr(attr) }}{% endif %}>
{%- if caller -%}
{{ caller() }}
{%- endif -%}
</ol>
{%- endmacro %}
{% macro sortable_list_item(key, immovable=false, attr=none) -%}
{% macro sortable_list_item(key, immovable=false, attr=none, full=false) -%}
<li class="sortable-item{{ ' immovable' if immovable else '' }} plank even no-shadow {{'secondary-bg' if immovable else ''}}" data-sortable-list-key="{{key}}" {% if attr %}{{ dict_to_attr(attr) }}{% endif %}>
<span class="dragger plank minimal even no-shadow tertiary-bg" draggable="{{ 'true' if not immovable else 'false' }}">{{ icn_dragger() }}</span>
<div class="sortable-item-inner">{{ caller() }}</div>
<div class="sortable-item-inner {{full and 'full' or ''}}">{{ caller() }}</div>
</li>
{%- endmacro %}

View File

@@ -0,0 +1,51 @@
{%- macro badge_input(uploads, label='', link='', selected=none, id=none) -%}
{%- set defaults = uploads | selectattr('user_id', 'none') | list | sort(attribute='file_path') -%}
{%- set user = uploads | selectattr('user_id') | list -%}
{%- if selected is not none -%}
{%- set selected_href = (uploads | selectattr('id', 'equalto', selected) | list)[0].file_path -%}
{%- else -%}
{% set selected_href = defaults[0].file_path %}
{%- endif -%}
<input type="hidden" name="id[]" value="{{id and id or '-1'}}">
<div class="badge-editor-badge-container">
<div class="badge-editor-badge-select">
<select name="badge_choice[]" required data-s="badgeEditorSetPreview badgeEditorToggleFilePicker" data-listen="change">
<optgroup label="Default">
{%- for upload in defaults -%}
<option data-file-path="{{upload.file_path}}" value="{{upload.id}}" {{selected==upload.id and 'selected' or ''}}>{{upload.file_path | basename_noext}}</option>
{%- endfor -%}
</optgroup>
<optgroup label="Your uploads">
{%- for upload in user -%}
<option data-file-path="{{upload.file_path}}" value="{{upload.id}}" {{selected==upload.id and 'selected' or ''}}>{{upload.original_filename | basename_noext}}</option>
{%- endfor -%}
<option value="custom">Upload new&hellip;</option>
</optgroup>
</select>
<img class="badge-button" src="{{selected_href}}" data-r="badgeEditorSetPreview badgeEditorSetPreviewCustom">
</div>
<div class="badge-editor-file-picker hidden" data-r="badgeEditorToggleFilePicker">
<button data-s="badgeEditorShowFilePicker" type="button" class="alt">Upload&hellip;</button>
<input data-s="badgeEditorFileSelected" data-r="badgeEditorShowFilePicker" type="file" accept="image/png, image/jpeg, image/jpg, image/webp" name="badge_file[]">
</div>
<input type="text" required placeholder="Label" value="{{label}}" autocomplete="off" name="label[]">
<input type="url" placeholder="(Optional) Link" value="{{link}}" autocomplete="off" name="link[]" pattern="https://.*">
<button type="button" class="critical" data-s="badgeEditorDelete">Delete</button>
</div>
{%- endmacro -%}
{%- from 'common/macros.html' import sortable_list, sortable_list_item -%}
<button type="button" data-s="badgeEditorAddBadge" data-r="setBadgeCount">Add badge</button>
<input type="submit" value="Save badges">
<span data-r="setBadgeCount">0/10</span>
{%- call() sortable_list(attr={'data-r': 'badgeEditorAddBadge'}) -%}
{%- for badge in badges -%}
{%- call() sortable_list_item('badge', full=true, attr={'data-r': 'badgeEditorDelete badgeEditorAssignImgId'}) -%}
{{badge_input(badge_uploads, badge.label, badge.link, badge.upload, badge.id)}}
{%- endcall -%}
{%- endfor -%}
{%- endcall -%}
<script type="text/html" id="badge-template">
{%- call() sortable_list_item('badge', full=true, attr={'data-r': 'badgeEditorDelete'}) -%}
{{- badge_input(badge_uploads) -}}
{%- endcall -%}
</script>

View File

@@ -72,9 +72,12 @@
</form>
</fieldset>#}
<fieldset class="plank">
<bitty-8 data-connect="/static/js/bits/badge-editor.js"></bitty-8>
<legend>Badges</legend>
<div>Loading badges&hellip;</div>
<div>If badges fail to load, make sure JS is enabled.</div>
<form method="POST" action="{{url_for('users.save_badges', username=get_active_user().username)}}" data-listen="submit" data-r="badgeEditorInit" enctype="multipart/form-data">
<p>Loading badges&hellip;</p>
<p>If badges fail to load, make sure JS is enabled.</p>
</form>
</fieldset>
{%- if user.can_invite() -%}
<fieldset class="plank" id="invite">