mirror of
https://github.com/jointakahe/takahe.git
synced 2024-11-25 16:51:00 +00:00
Add the character counter next to the Post button (#152)
This commit is contained in:
parent
9405698e3c
commit
6d473a83cc
5 changed files with 37 additions and 2 deletions
|
@ -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
|
||||
""",
|
||||
},
|
||||
)
|
||||
)
|
||||
|
|
|
@ -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
|
||||
""",
|
||||
},
|
||||
)
|
||||
)
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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 %}
|
||||
|
|
Loading…
Reference in a new issue