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

5 files changed, 37 insertions, 2 deletions

diff --git a/activities/views/compose.py b/activities/views/compose.py
index 3c2e3a8..08b54ab 100644
--- a/activities/views/compose.py
+++ b/activities/views/compose.py
@@ -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
+                    """,
                 },
             )
         )
diff --git a/activities/views/timelines.py b/activities/views/timelines.py
index b7a67c6..bcc6e7f 100644
--- a/activities/views/timelines.py
+++ b/activities/views/timelines.py
@@ -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
+                    """,
                 },
             )
         )
diff --git a/static/css/style.css b/static/css/style.css
index 267549a..80a26ab 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -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;
diff --git a/templates/activities/_menu.html b/templates/activities/_menu.html
index 4676831..b5c4faf 100644
--- a/templates/activities/_menu.html
+++ b/templates/activities/_menu.html
@@ -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 %}
diff --git a/templates/activities/compose.html b/templates/activities/compose.html
index 7065863..9587559 100644
--- a/templates/activities/compose.html
+++ b/templates/activities/compose.html
@@ -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 %}