[pronouns][editor] make the instruction and validation message crystal clear

2021-08-29 10:40:37 +02:00 · 2021-08-29 10:40:37 +02:00 · dd163b083d
parent 201a7e60f3
commit dd163b083d
15 changed files with 130 additions and 76 deletions
--- 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>

--- 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>
--- 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">
--- 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.'
--- 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.'
--- 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.'
--- 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é.'
--- 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.'
--- 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.'
--- 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.'
--- 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.'
--- 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.'
--- 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: '我們不發布您的生日，只發布計算出的年齡。'
--- 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">
--- 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>