Display remaining characters when editing display name and bio (#2219)

diff --git a/app/assets/javascripts/extras.jsx b/app/assets/javascripts/extras.jsx
index c13feceffef809f80fbf88917faf96619a7af809..29c37b9e1ad73ed6ea8b442051ce1b08042241d1 100644 (file)
--- a/app/assets/javascripts/extras.jsx
+++ b/app/assets/javascripts/extras.jsx
@@ -37,4 +37,12 @@ $(() => {
       $(e.target).parent().attr('style', null);
     }
   });
+
+  // used on /settings/profile
+  $('.account_display_name').on('input', e => {
+    $('.name-counter').text(30 - $(e.target).val().length)
+  });
+  $('.account_note').on('input', e => {
+    $('.note-counter').text(160 - $(e.target).val().length)
+  });
 });

diff --git a/app/views/settings/profiles/show.html.haml b/app/views/settings/profiles/show.html.haml
index b946853b1191c875d37deec40e6fdaa9368a2b1f..52373a959533e8bbf3c3200d3775c38ba602d22e 100644 (file)
--- a/app/views/settings/profiles/show.html.haml
+++ b/app/views/settings/profiles/show.html.haml
@@ -5,8 +5,8 @@
   = render 'shared/error_messages', object: @account
 
   .fields-group
-    = f.input :display_name, placeholder: t('simple_form.labels.defaults.display_name')
-    = f.input :note, placeholder: t('simple_form.labels.defaults.note')
+    = f.input :display_name, placeholder: t('simple_form.labels.defaults.display_name'), hint: t('simple_form.hints.defaults.display_name', counter: "<span class=\"name-counter\">#{30-@account.display_name.size}</span>").html_safe
+    = f.input :note, placeholder: t('simple_form.labels.defaults.note'), hint: t('simple_form.hints.defaults.note', counter: "<span class=\"note-counter\">#{160-@account.note.size}</span>").html_safe
     = f.input :avatar, wrapper: :with_label, hint: t('simple_form.hints.defaults.avatar')
     = f.input :header, wrapper: :with_label, hint: t('simple_form.hints.defaults.header')
 

diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml
index 5335b0927c7c3e51360425913af162669ef4d654..790d56452158725a7d45b4943998dcf6ceb41563 100644 (file)
--- a/config/locales/simple_form.en.yml
+++ b/config/locales/simple_form.en.yml
@@ -4,10 +4,10 @@ en:
     hints:
       defaults:
         avatar: PNG, GIF or JPG. At most 2MB. Will be downscaled to 120x120px
-        display_name: At most 30 characters
+        display_name: '%{counter} characters left'
         header: PNG, GIF or JPG. At most 2MB. Will be downscaled to 700x335px
         locked: Requires you to manually approve followers and defaults post privacy to followers-only
-        note: At most 160 characters
+        note: '%{counter} characters left'
       imports:
         data: CSV file exported from another Mastodon instance
       sessions: