From dd163b083d647bcdacf9a01ed23d468e2a21bb34 Mon Sep 17 00:00:00 2001
From: Avris <andre@avris.it>
Date: Sun, 29 Aug 2021 10:40:37 +0200
Subject: [PATCH] [pronouns][editor] make the instruction and validation
 message crystal clear

---
 components/ListInput.vue        | 23 ++++++-----
 components/OpinionListInput.vue | 71 +++++++++++++++++++--------------
 components/SourceSubmitForm.vue | 19 +++++----
 locale/de/translations.suml     |  7 +++-
 locale/en/translations.suml     |  9 +++--
 locale/es/translations.suml     |  7 +++-
 locale/fr/translations.suml     |  7 +++-
 locale/nl/translations.suml     |  8 +++-
 locale/no/translations.suml     |  8 +++-
 locale/pl/translations.suml     |  6 ++-
 locale/pt/translations.suml     |  7 +++-
 locale/yi/translations.suml     | 12 +++++-
 locale/zh/translations.suml     |  6 ++-
 routes/profileEditor.vue        | 10 +++--
 routes/pronouns.vue             |  6 +--
 15 files changed, 130 insertions(+), 76 deletions(-)

diff --git a/components/ListInput.vue b/components/ListInput.vue
index 63c65fdc..bdda48c7 100644
--- a/components/ListInput.vue
+++ b/components/ListInput.vue
@@ -1,16 +1,19 @@
 <template>
     <draggable tag="ul" v-model="iVal" handle=".handle" ghostClass="ghost" @end="$emit('input', iVal)" class="list-unstyled" :group="group">
         <li v-for="(v, i) in iVal" ref="items">
-            <div class="input-group input-group-sm mb-1">
-                <button class="btn btn-light border handle" type="button" :aria-label="$t('table.sort')">
-                    <Icon v="bars"/>
-                </button>
-                <slot v-bind:val="iVal[i]" v-bind:update="curry(update)(i)">
-                    <input v-model="iVal[i]" type="text" class="form-control" required/>
-                </slot>
-                <button class="btn btn-outline-danger" type="button" @click.prevent="remove(i)" :aria-label="$t('crud.remove')">
-                    <Icon v="times"/>
-                </button>
+            <div>
+                <div class="input-group input-group-sm mb-1">
+                    <button class="btn btn-light border handle" type="button" :aria-label="$t('table.sort')">
+                        <Icon v="bars"/>
+                    </button>
+                    <slot v-bind:val="iVal[i]" v-bind:update="curry(update)(i)">
+                        <input v-model="iVal[i]" type="text" class="form-control" required/>
+                    </slot>
+                    <button class="btn btn-outline-danger" type="button" @click.prevent="remove(i)" :aria-label="$t('crud.remove')">
+                        <Icon v="times"/>
+                    </button>
+                </div>
+                <slot name="validation" v-bind:val="iVal[i]"></slot>
             </div>
         </li>
 
diff --git a/components/OpinionListInput.vue b/components/OpinionListInput.vue
index 09065e18..459ebafd 100644
--- a/components/OpinionListInput.vue
+++ b/components/OpinionListInput.vue
@@ -1,34 +1,38 @@
 <template>
-    <ListInput v-model="v" :prototype="{key: '', value: 0}" v-slot="s" :group="group">
-        <button type="button" :class="['btn', parseInt(s.val.value) === 1 ? 'btn-primary' : 'btn-outline-secondary']"
-                :aria-label="$t('profile.opinion.yes')"
-                :title="$t('profile.opinion.yes')"
-                @click="s.update({key: s.val.key, value: 1})">
-            <Icon v="heart"/>
-        </button>
-        <button type="button" :class="['btn', parseInt(s.val.value) === 2 ? 'btn-primary' : 'btn-outline-secondary']"
-                :aria-label="$t('profile.opinion.jokingly')"
-                :title="$t('profile.opinion.jokingly')"
-                @click="s.update({key: s.val.key, value: 2})">
-            <Icon v="grin-tongue"/>
-        </button>
-        <button type="button" :class="['btn', parseInt(s.val.value) === 0 ? 'btn-primary' : 'btn-outline-secondary']"
-                :aria-label="$t('profile.opinion.meh')"
-                :title="$t('profile.opinion.meh')"
-                @click="s.update({key: s.val.key, value: 0})">
-            <Icon v="thumbs-up"/>
-        </button>
-        <button type="button" :class="['btn', parseInt(s.val.value) === -1 ? 'btn-primary' : 'btn-outline-secondary']"
-                :aria-label="$t('profile.opinion.no')"
-                :title="$t('profile.opinion.no')"
-                @click="s.update({key: s.val.key, value: -1})">
-            <Icon v="thumbs-down"/>
-        </button>
-        <input v-model="s.val.key" class="form-control mw-input" @keyup="s.update(s.val)" required/>
-        <small v-if="validation && s.val.key && validation(s.val.key)" class="input-group-text bg-danger text-white">
-            <Icon v="exclamation-triangle"/>
-            <span class="ml-1">{{$t(validation(s.val.key))}}</span>
-        </small>
+    <ListInput v-model="v" :prototype="{key: '', value: 0}" :group="group">
+        <template v-slot="s">
+            <button type="button" :class="['btn', parseInt(s.val.value) === 1 ? 'btn-primary' : 'btn-outline-secondary']"
+                    :aria-label="$t('profile.opinion.yes')"
+                    :title="$t('profile.opinion.yes')"
+                    @click="s.update({key: s.val.key, value: 1})">
+                <Icon v="heart"/>
+            </button>
+            <button type="button" :class="['btn', parseInt(s.val.value) === 2 ? 'btn-primary' : 'btn-outline-secondary']"
+                    :aria-label="$t('profile.opinion.jokingly')"
+                    :title="$t('profile.opinion.jokingly')"
+                    @click="s.update({key: s.val.key, value: 2})">
+                <Icon v="grin-tongue"/>
+            </button>
+            <button type="button" :class="['btn', parseInt(s.val.value) === 0 ? 'btn-primary' : 'btn-outline-secondary']"
+                    :aria-label="$t('profile.opinion.meh')"
+                    :title="$t('profile.opinion.meh')"
+                    @click="s.update({key: s.val.key, value: 0})">
+                <Icon v="thumbs-up"/>
+            </button>
+            <button type="button" :class="['btn', parseInt(s.val.value) === -1 ? 'btn-primary' : 'btn-outline-secondary']"
+                    :aria-label="$t('profile.opinion.no')"
+                    :title="$t('profile.opinion.no')"
+                    @click="s.update({key: s.val.key, value: -1})">
+                <Icon v="thumbs-down"/>
+            </button>
+            <input v-model="s.val.key" :class="['form-control', 'mw-input', invalid(s.val) ? 'border-danger' : '']" @keyup="s.update(s.val)" required/>
+        </template>
+        <template v-slot:validation="s">
+            <p v-if="invalid(s.val)" class="small text-danger">
+                <Icon v="exclamation-triangle"/>
+                <span class="ml-1">{{$t(validation(s.val.key))}}</span>
+            </p>
+        </template>
     </ListInput>
 </template>
 
@@ -40,6 +44,11 @@
             validation: {},
         },
         data() { return { v: this.value } },
-        watch: { v() { this.$emit('input', this.v); } }
+        watch: { v() { this.$emit('input', this.v); } },
+        methods: {
+            invalid(val) {
+                return this.validation && val.key && this.validation(val.key)
+            },
+        },
     }
 </script>
diff --git a/components/SourceSubmitForm.vue b/components/SourceSubmitForm.vue
index 2f0f5eaa..a94c875f 100644
--- a/components/SourceSubmitForm.vue
+++ b/components/SourceSubmitForm.vue
@@ -56,13 +56,18 @@
                     <p class="small text-muted mb-0">
                         <T>sources.submit.pronounsInfo</T>
                     </p>
-                    <ListInput v-model="form.pronouns" v-slot="s">
-                        <input v-model="s.val" type="text" class="form-control" @keyup="s.update(s.val)" required maxlength="24"/>
-                        <small v-if="s.val && !pronounLibrary.isCanonical(s.val) && !(config.sources.extraTypes || []).includes(s.val)"
-                               class="input-group-text bg-danger text-white">
-                            <Icon v="exclamation-triangle"/>
-                            <span class="ml-1"><T>profile.pronounsNotFound</T></span>
-                        </small>
+                    <ListInput v-model="form.pronouns">
+                        <template v-slot="s">
+                            <input v-model="s.val" type="text" class="form-control" @keyup="s.update(s.val)" required maxlength="24"/>
+                        </template>
+                        <template v-slot:validation="s">
+                            <p v-if="s.val && !pronounLibrary.isCanonical(s.val) && !(config.sources.extraTypes || []).includes(s.val)"
+                               class="small text-danger"
+                            >
+                                <Icon v="exclamation-triangle"/>
+                                <span class="ml-1"><T>profile.pronounsNotFound</T></span>
+                            </p>
+                        </template>
                     </ListInput>
                 </div>
                 <div class="form-group">
diff --git a/locale/de/translations.suml b/locale/de/translations.suml
index 624052a1..513656dd 100644
--- a/locale/de/translations.suml
+++ b/locale/de/translations.suml
@@ -407,8 +407,11 @@ profile:
     description: 'Beschreibung'
     names: 'Namen'
     pronouns: 'Pronomen'
-    pronounsInfo: 'Du kannst entweder ein Pronomen (z.B. „sier“ or „sie/ihr“) oder einen Link (z.B. „https://de.pronouns.page/dey“) oder vier benutzerdefinierten Formen (z.B. „xier/xies/xiem/xien“).'
-    pronounsNotFound: 'Wir können keinen Link zu diesem Pronomen finden!'
+    pronounsInfo: >
+        Du kannst entweder ein <strong>Pronomen</strong> (z.B. „sier“ or „sie/ihr“) oder einen <strong>Link</strong> (z.B. „https://de.pronouns.page/dey“)
+        oder <strong>vier benutzerdefinierten Formen</strong> (z.B. „xier/xies/xiem/xien“).
+    # TODO add: You can also use {/pronouns#generator=<strong>the generator</strong>} to fill out sentences with custom forms.
+    pronounsNotFound: 'Wir können keinen Link zu diesem Pronomen finden!'  # TODO 'Unrecognised format. Please check out the instruction above.'
     words: 'Wörter'
     birthday: 'Alter'
     birthdayInfo: 'Wir veröffentlichen nicht dein Geburtstag, sondern nur das errechnete Alter.'
diff --git a/locale/en/translations.suml b/locale/en/translations.suml
index a9de7778..5439128f 100644
--- a/locale/en/translations.suml
+++ b/locale/en/translations.suml
@@ -489,12 +489,15 @@ profile:
     names: 'Names'
     pronouns: 'Pronouns'
     pronounsInfo: >
-        You can enter a pronoun (eg. “they” or “she/her”)
-        or a link (eg. “https://en.pronouns.page/e”)
+        You can enter a <strong>pronoun</strong> (eg. “they” or “she/her”)
+        or a <strong>link</strong> (eg. “https://en.pronouns.page/e”)
         or the custom five forms (eg. “ze/zem/zir/zirs/zirself”).
         Keep in mind that <strong>all five forms</strong> are required in that case,
         otherwise the app can only guess what exactly do you mean.
-    pronounsNotFound: 'We can''t find a link to this pronoun!'
+        You can also use {/pronouns#generator=<strong>the generator</strong>} to fill out sentences with custom forms.
+        If your pronouns follow the {/pronouns#nameself=<strong>nameself pattern</strong>},
+        you can also use a colon shorthand (eg. “:star”).
+    pronounsNotFound: 'Unrecognised format. Please check out the instruction above.'
     words: 'Words'
     birthday: 'Age'
     birthdayInfo: 'We do not publish your birthday, just the calculated age.'
diff --git a/locale/es/translations.suml b/locale/es/translations.suml
index 5488a347..e088ee39 100644
--- a/locale/es/translations.suml
+++ b/locale/es/translations.suml
@@ -420,8 +420,11 @@ profile:
     description: 'Descripción'
     names: 'Nombres'
     pronouns: 'Pronombres'
-    pronounsInfo: 'Puedes introducir un pronombre (p. ej. “elle” o “ella”) o un enlace (“http://es.pronouns.page/ellx”).'
-    pronounsNotFound: '¡No podemos encontrar un enlace a este pronombre!'
+    pronounsInfo: >
+        Puedes introducir un <strong>pronombre</strong> (p. ej. “elle” o “ella”)
+        o un <strong>enlace</strong> (“http://es.pronouns.page/ellx”).
+    # TODO add: You can also use {/pronouns#generator=<strong>the generator</strong>} to fill out sentences with custom forms.
+    pronounsNotFound: '¡No podemos encontrar un enlace a este pronombre!'  # TODO 'Unrecognised format. Please check out the instruction above.'
     words: 'Palabras'
     birthday: 'Edad'
     birthdayInfo: 'No publicamos la fecha de tu cumpleaños, sólo la edad calculada.'
diff --git a/locale/fr/translations.suml b/locale/fr/translations.suml
index 8776c5d0..17e2378f 100644
--- a/locale/fr/translations.suml
+++ b/locale/fr/translations.suml
@@ -414,8 +414,11 @@ profile:
     description: 'Description'
     names: 'Noms'
     pronouns: 'Pronoms'
-    pronounsInfo: 'Vous pouvez entrer un pronom (ex. « ael » or « il/lui ») ou un lien (ex. « http://fr.pronouns.page/elle »).'
-    pronounsNotFound: 'Impossible de trouver un lien vers ce pronom !'
+    pronounsInfo: >
+        Vous pouvez entrer un <strong>pronom</strong> (ex. « ael » or « il/lui »)
+        ou un <strong>lien</strong> (ex. « http://fr.pronouns.page/elle »).
+    # TODO add: You can also use {/pronouns#generator=<strong>the generator</strong>} to fill out sentences with custom forms.
+    pronounsNotFound: 'Impossible de trouver un lien vers ce pronom !'  # TODO 'Unrecognised format. Please check out the instruction above.'
     words: 'Mots'
     birthday: ' ge'
     birthdayInfo: 'Nous ne publions pas votre date de naissance, seulement l’âge calculé.'
diff --git a/locale/nl/translations.suml b/locale/nl/translations.suml
index 463fb589..c0799b75 100644
--- a/locale/nl/translations.suml
+++ b/locale/nl/translations.suml
@@ -401,8 +401,12 @@ profile:
     description: 'Omschrijving'
     names: 'Namen'
     pronouns: 'Voornaamwoorden'
-    pronounsInfo: 'Je kunt een voornaamwoord (bijv. “die” of “zij/haar”) of een link (bijv. “http://nl.pronouns.page/zem”) of vijf eigen vormen (bijv. “hen/hen/hun/hunne/hunzelf”) invoeren.'
-    pronounsNotFound: 'We kunnen geen link naar dit voornaamwoord vinden!'
+    pronounsInfo: >
+        Je kunt een <strong>voornaamwoord</strong> (bijv. “die” of “zij/haar”)
+        of een <strong>link</strong> (bijv. “http://nl.pronouns.page/zem”)
+        of <strong>vijf eigen vormen</strong> (bijv. “hen/hen/hun/hunne/hunzelf”) invoeren.
+    # TODO add: You can also use {/pronouns#generator=<strong>the generator</strong>} to fill out sentences with custom forms.
+    pronounsNotFound: 'We kunnen geen link naar dit voornaamwoord vinden!'  # TODO 'Unrecognised format. Please check out the instruction above.'
     words: 'Woorden'
     birthday: 'Leeftijd'
     birthdayInfo: 'We laten jouw verjaardagsdatum niet zien, alleen de berekende leeftijd.'
diff --git a/locale/no/translations.suml b/locale/no/translations.suml
index c1656e97..0dc16783 100644
--- a/locale/no/translations.suml
+++ b/locale/no/translations.suml
@@ -412,8 +412,12 @@ profile:
     description: 'Beskrivelse'
     names: 'Navn'
     pronouns: 'Pronomen'
-    pronounsInfo: 'Du kan taste inn ett pronomen (feks. “de” eller “hun/henne” eller en link (feks. “http://no.pronouns.page/hun”).'
-    pronounsNotFound: 'Vi kan ikke finne en link til dette pronomenet!'
+    pronounsInfo: >
+        Du kan taste inn ett <strong>pronomen</strong> (feks. “de” eller “hun/henne”)
+        eller en <strong>link</strong> (feks. “http://no.pronouns.page/hun”).
+    # TODO add: or the <strong>custom five forms</strong> (eg. “ze/zem/zir/zirs/zirself”).
+    # TODO add: You can also use {/pronouns#generator=<strong>the generator</strong>} to fill out sentences with custom forms.
+    pronounsNotFound: 'Vi kan ikke finne en link til dette pronomenet!'  # TODO 'Unrecognised format. Please check out the instruction above.'
     words: 'Ord'
     birthday: 'Alder'
     birthdayInfo: 'Vi viser ikke bursdagen din, bare den kalkulerte alderen.'
diff --git a/locale/pl/translations.suml b/locale/pl/translations.suml
index 9fb76e0e..62cad592 100644
--- a/locale/pl/translations.suml
+++ b/locale/pl/translations.suml
@@ -989,8 +989,10 @@ profile:
     description: 'Opis'
     names: 'Imiona'
     pronouns: 'Zaimki'
-    pronounsInfo: 'Możesz tu wpisać zaimek (np. „onu”, „on/jego”) lub wkleić linka do niego (np. „https://zaimki.pl/ona/ich”).'
-    pronounsNotFound: 'Nie możemy znaleźć tego zaimka!'
+    pronounsInfo: >
+        Możesz tu wpisać <strong>zaimek</strong> (np. „onu”, „on/jego”) lub wkleić <strong>linka</strong> do niego (np. „https://zaimki.pl/ona/ich”).
+        Użyj {/zaimki#generator=<strong>generatora</strong>} by wypełnić luki w zdaniach niestandardowymi formami.'
+    pronounsNotFound: 'Niepoprawny format. Szczegóły w instrukcji powyżej'
     words: 'Słowa'
     birthday: 'Wiek'
     birthdayInfo: 'Nie pokazujemy publicznie pełnej daty urodzenia, jedynie obliczony wiek.'
diff --git a/locale/pt/translations.suml b/locale/pt/translations.suml
index ae64daba..4aa176ef 100644
--- a/locale/pt/translations.suml
+++ b/locale/pt/translations.suml
@@ -417,8 +417,11 @@ profile:
     description: 'Descrição'
     names: 'Nomes'
     pronouns: 'Pronomes'
-    pronounsInfo: 'Pode introduzir um pronome (p. ex. “ele” ou “ela”) ou um link (“http://pt.pronouns.page/elx”).'
-    pronounsNotFound: '˜Não podemos encontrar um link com este pronome!'
+    pronounsInfo: >
+        Pode introduzir um <strong>pronome</strong> (p. ex. “ele” ou “ela”)
+        ou um <strong>link</strong> (“http://pt.pronouns.page/elx”).
+    # TODO add: You can also use {/pronouns#generator=<strong>the generator</strong>} to fill out sentences with custom forms.
+    pronounsNotFound: '˜Não podemos encontrar um link com este pronome!'  # TODO 'Unrecognised format. Please check out the instruction above.'
     words: 'Palavras'
     birthday: 'Idade'
     birthdayInfo: 'Não publicamos a data do aniversário, somente a idade calculada.'
diff --git a/locale/yi/translations.suml b/locale/yi/translations.suml
index 9d96d9a7..ffde3f6a 100644
--- a/locale/yi/translations.suml
+++ b/locale/yi/translations.suml
@@ -420,8 +420,16 @@ profile:
     description: 'באַשרײַבונג'
     names: 'נעמען'
     pronouns: 'פּראָנאָמען'
-    pronounsInfo: 'You can enter a pronoun (eg. “they” or “she/sher”) or a link (eg. “http://en.pronouns.page/e”) or the custom five forms (eg. “ze/zem/zir/zirs/zirself”).'
-    pronounsNotFound: 'We can''t find a link to this pronoun!'
+    pronounsInfo: >
+        You can enter a <strong>pronoun</strong> (eg. “they” or “she/her”)
+        or a <strong>link</strong> (eg. “https://en.pronouns.page/e”)
+        or the custom five forms (eg. “ze/zem/zir/zirs/zirself”).
+        Keep in mind that <strong>all five forms</strong> are required in that case,
+        otherwise the app can only guess what exactly do you mean.
+        You can also use {/pronouns#generator=<strong>the generator</strong>} to fill out sentences with custom forms.
+        If your pronouns follow the {/pronouns#nameself=<strong>nameself pattern</strong>},
+        you can also use a colon shorthand (eg. “:star”).
+    pronounsNotFound: 'Unrecognised format. Please check out the instruction above.'
     words: 'װערטער'
     birthday: 'עלטער'
     birthdayInfo: 'We do not publish your birthday, just the calculated age.'
diff --git a/locale/zh/translations.suml b/locale/zh/translations.suml
index e68fb9e2..978c4f68 100644
--- a/locale/zh/translations.suml
+++ b/locale/zh/translations.suml
@@ -386,8 +386,10 @@ profile:
     description: '傳記'
     names: '名字'
     pronouns: '代詞'
-    pronounsInfo: '您可以輸入代詞（例如“他”或“他/你”）或鏈接（例如“ http://zh.pronouns.page/佢”'
-    pronounsNotFound: '我們找不到這個代詞的鏈接'
+    pronounsInfo: '您可以輸入代詞（例如“他”或“他/你”）或鏈接（例如“http://zh.pronouns.page/佢”）'
+    # TODO add <strong></strong> around the words "pronoun" and "link"
+    # TODO add: You can also use {/pronouns#generator=<strong>the generator</strong>} to fill out sentences with custom forms.
+    pronounsNotFound: '我們找不到這個代詞的鏈接'  # TODO 'Unrecognised format. Please check out the instruction above.'
     words: '詞匯'
     birthday: '嵗'
     birthdayInfo: '我們不發布您的生日，只發布計算出的年齡。'
diff --git a/routes/profileEditor.vue b/routes/profileEditor.vue
index 88967ae4..5a260780 100644
--- a/routes/profileEditor.vue
+++ b/routes/profileEditor.vue
@@ -69,11 +69,13 @@
                     <Icon v="link"/>
                     <T>profile.pronouns</T>
                 </h3>
-                <p class="small mb-2">
-                    <T>profile.pronounsInfo</T>
-                </p>
+                <div class="alert alert-info">
+                    <p class="small mb-0">
+                        <Icon v="info-circle"/>
+                        <T>profile.pronounsInfo</T>
+                    </p>
+                </div>
                 <OpinionListInput v-model="pronouns" :validation="validatePronoun"/>
-                <Answer question="custom-pronouns" small/>
             </section>
 
             <section class="form-group">
diff --git a/routes/pronouns.vue b/routes/pronouns.vue
index b134528e..288e7aaf 100644
--- a/routes/pronouns.vue
+++ b/routes/pronouns.vue
@@ -14,7 +14,7 @@
                     </div>
                     <SimplePronounList :pronouns="groupPronouns"/>
                 </li>
-                <li class="list-group-item">
+                <li class="list-group-item" id="generator">
                     <p class="h5">
                         <T>home.generator.header</T>
                     </p>
@@ -107,7 +107,7 @@
                         </div>
                     </div>
                 </li>
-                <li v-if="config.pronouns.multiple !== false" class="list-group-item">
+                <li v-if="config.pronouns.multiple !== false" class="list-group-item" id="multiple">
                     <p class="h5">
                         <Spelling :text="config.pronouns.multiple.name"/>
                     </p>
@@ -143,7 +143,7 @@
                         </div>
                     </div>
                 </li>
-                <li v-if="config.pronouns.null !== false" class="list-group-item">
+                <li v-if="config.pronouns.null !== false" class="list-group-item" id="nameself">
                     <p class="h5">
                         <Spelling :text="config.pronouns.null.description"/>
                     </p>