Add the character counter next to the Post button (#152)

This commit is contained in:
TAKAHASHI Shuuji 2022-12-12 01:25:48 +09:00 committed by GitHub
parent 9405698e3c
commit 6d473a83cc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 2 deletions

View file

@ -30,6 +30,19 @@ class Compose(FormView):
"autofocus": "autofocus",
"maxlength": Config.lazy_system_value("post_length"),
"placeholder": "What's on your mind?",
"_": f"""
on load or input
set characters to my.value.trim().length
put { Config.system.post_length } - characters into #character-counter
if characters > { Config.system.post_length } then
set #character-counter's style.color to 'var(--color-text-error)'
add [@disabled=] to #post-button
else
set #character-counter's style.color to ''
remove @disabled from #post-button
end
""",
},
)
)

View file

@ -20,6 +20,19 @@ class Home(FormView):
widget=forms.Textarea(
attrs={
"placeholder": "What's on your mind?",
"_": f"""
on load or input
set characters to my.value.trim().length
put { Config.system.post_length } - characters into #character-counter
if characters > { Config.system.post_length } then
set #character-counter's style.color to 'var(--color-text-error)'
add [@disabled=] to #post-button
else
set #character-counter's style.color to ''
remove @disabled from #post-button
end
""",
},
)
)

View file

@ -93,11 +93,13 @@ td a {
--color-text-dull: #99a;
--color-text-main: #fff;
--color-text-link: rgb(176, 194, 206);
--color-text-error: #f44336;
--color-input-border: #000;
--color-input-border-active: #444b5d;
--color-button-main: #444b5d;
--color-button-main-hover: #515d7c;
--color-button-disabled: #7c9c97;
--color-bg3: #444b5d;
}
@ -666,6 +668,11 @@ button.toggle,
background: var(--color-bg-main);
}
button[disabled],
.button[disabled] {
background: var(--color-button-disabled);
}
button.left,
.button.left {
float: left;

View file

@ -60,8 +60,9 @@
{{ form.content_warning }}
<input type="hidden" name="visibility" value="{{ config_identity.default_post_visibility }}">
<div class="buttons">
<span id="character-counter">{{ config.post_length }}</span>
<span class="button toggle" _="on click toggle .enabled then toggle .hidden on #id_content_warning">CW</span>
<button>{% if config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button>
<button id="post-button">{% if config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button>
</div>
</form>
{% endif %}

View file

@ -34,7 +34,8 @@
{% endif %}
</fieldset>
<div class="buttons">
<button>{% if post %}Save Edits{% elif config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button>
<span id="character-counter">{{ config.post_length }}</span>
<button id="post-button">{% if post %}Save Edits{% elif config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button>
</div>
</form>
{% endblock %}