feat: display help in real time (monicahq/chandler#168)

monicahq · Aug 1, 2022 · 04b5116 · 04b5116
1 parent 946dff7
commit 04b5116
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 25 deletions.
diff --git a/config/monica.php b/config/monica.php
@@ -37,5 +37,12 @@
 
     'help_links' => [
         'last_updated_contacts' => 'vaults/dashboard#last-updated-contacts',
+        'settings_preferences_help' => 'account-settings/manage-preferences#help-display',
+        'settings_preferences_language' => 'account-settings/manage-preferences#language',
+        'settings_preferences_contact_names' => 'account-settings/manage-preferences#customize-contact-names',
+        'settings_preferences_date' => 'account-settings/manage-preferences#date-format',
+        'settings_preferences_numerical_format' => 'account-settings/manage-preferences#numerical-format',
+        'settings_preferences_timezone' => 'account-settings/manage-preferences#timezone',
+        'settings_preferences_maps' => 'account-settings/manage-preferences#maps-preferences',
     ],
 ];
diff --git a/lang/en/app.php b/lang/en/app.php
@@ -69,8 +69,7 @@
 
     'no_results' => 'No results',
 
-    'show_help' => 'Show help',
-    'hide_help' => 'Hide help',
+    'help_open_new_page' => 'This link will open in a new tab',
 
     'default_template_name' => 'Default template',
     'default_template_page_contact_information' => 'Contact information',

diff --git a/lang/fr/app.php b/lang/fr/app.php
@@ -69,8 +69,7 @@
 
     'no_results' => 'Pas de résultats',
 
-    'show_help' => 'Montrer l’aide',
-    'hide_help' => 'Cacher l’aide',
+    'help_open_new_page' => 'Ce lien ouvrira dans un nouvel onglet',
 
     'default_template_name' => 'Modèle par défaut',
     'default_template_page_contact_information' => 'Information du contact',

diff --git a/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
@@ -14,8 +14,11 @@ pre {
   <div class="mb-16">
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
-      <h3 class="mb-4 font-semibold sm:mb-0">
-        <span class="mr-1">🗓</span> {{ $t('settings.user_preferences_date_title') }}
+      <h3 class="mb-4 flex font-semibold sm:mb-0">
+        <span class="mr-1">🗓</span>
+        <span class="mr-2">{{ $t('settings.user_preferences_date_title') }}</span>
+
+        <help :url="$page.props.help_links.settings_preferences_date" :top="'5px'" />
       </h3>
       <pretty-button v-if="!editMode" :text="$t('app.edit')" @click="enableEditMode" />
     </div>
@@ -80,12 +83,14 @@ pre {
 import PrettyButton from '@/Shared/Form/PrettyButton';
 import PrettyLink from '@/Shared/Form/PrettyLink';
 import Errors from '@/Shared/Form/Errors';
+import Help from '@/Shared/Help';
 
 export default {
   components: {
     PrettyButton,
     PrettyLink,
     Errors,
+    Help,
   },
 
   props: {

diff --git a/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue b/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue
@@ -10,8 +10,11 @@ select {
   <div class="mb-16">
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
-      <h3 class="mb-4 font-semibold sm:mb-0">
-        <span class="mr-1">⁉️</span> {{ $t('settings.user_preferences_locale_title') }}
+      <h3 class="mb-4 flex font-semibold sm:mb-0">
+        <span class="mr-1">⁉️</span>
+        <span class="mr-2">{{ $t('settings.user_preferences_help_title') }}</span>
+
+        <help :url="$page.props.help_links.settings_preferences_help" :top="'5px'" />
       </h3>
     </div>
 
@@ -28,10 +31,12 @@ select {
 
 <script>
 import Errors from '@/Shared/Form/Errors';
+import Help from '@/Shared/Help';
 
 export default {
   components: {
     Errors,
+    Help,
   },
 
   props: {
@@ -60,6 +65,7 @@ export default {
         .post(this.data.url.store, this.form)
         .then((response) => {
           this.flash(this.$t('app.notification_flash_changes_saved'), 'success');
+          this.$page.props.auth.user.help_shown = this.form.checked;
         })
         .catch((error) => {
           this.form.errors = error.response.data;

diff --git a/resources/js/Pages/Settings/Preferences/Partials/Locale.vue b/resources/js/Pages/Settings/Preferences/Partials/Locale.vue
@@ -10,8 +10,11 @@ select {
   <div class="mb-16">
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
-      <h3 class="mb-4 font-semibold sm:mb-0">
-        <span class="mr-1">🗓</span> {{ $t('settings.user_preferences_locale_title') }}
+      <h3 class="mb-4 flex font-semibold sm:mb-0">
+        <span class="mr-1">🗓</span>
+        <span class="mr-2">{{ $t('settings.user_preferences_locale_title') }}</span>
+
+        <help :url="$page.props.help_links.settings_preferences_language" :top="'5px'" />
       </h3>
       <pretty-button v-if="!editMode" :text="$t('app.edit')" @click="enableEditMode" />
     </div>
@@ -51,13 +54,15 @@ select {
 import PrettyButton from '@/Shared/Form/PrettyButton';
 import PrettyLink from '@/Shared/Form/PrettyLink';
 import Errors from '@/Shared/Form/Errors';
+import Help from '@/Shared/Help';
 import { loadLanguageAsync, getActiveLanguage } from 'laravel-vue-i18n';
 
 export default {
   components: {
     PrettyButton,
     PrettyLink,
     Errors,
+    Help,
   },
 
   props: {

diff --git a/resources/js/Pages/Settings/Preferences/Partials/Maps.vue b/resources/js/Pages/Settings/Preferences/Partials/Maps.vue
@@ -8,8 +8,11 @@ input[type='radio'] {
   <div class="mb-16">
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
-      <h3 class="mb-4 font-semibold sm:mb-0">
-        <span class="mr-1">🗺️</span> {{ $t('settings.user_preferences_map_title') }}
+      <h3 class="mb-4 flex font-semibold sm:mb-0">
+        <span class="mr-1">🗺️</span>
+        <span class="mr-2">{{ $t('settings.user_preferences_map_title') }}</span>
+
+        <help :url="$page.props.help_links.settings_preferences_maps" :top="'5px'" />
       </h3>
       <pretty-button v-if="!editMode" :text="$t('app.edit')" @click="enableEditMode" />
     </div>
@@ -57,12 +60,14 @@ input[type='radio'] {
 import PrettyButton from '@/Shared/Form/PrettyButton';
 import PrettyLink from '@/Shared/Form/PrettyLink';
 import Errors from '@/Shared/Form/Errors';
+import Help from '@/Shared/Help';
 
 export default {
   components: {
     PrettyButton,
     PrettyLink,
     Errors,
+    Help,
   },
 
   props: {

diff --git a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
@@ -14,8 +14,11 @@ pre {
   <div class="mb-16">
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
-      <h3 class="mb-4 font-semibold sm:mb-0">
-        <span class="mr-1">👉</span> {{ $t('settings.user_preferences_name_order_title') }}
+      <h3 class="mb-4 flex font-semibold sm:mb-0">
+        <span class="mr-1">👉</span>
+        <span class="mr-2">{{ $t('settings.user_preferences_name_order_title') }}</span>
+
+        <help :url="$page.props.help_links.settings_preferences_contact_names" :top="'5px'" />
       </h3>
       <pretty-button v-if="!editMode" :text="$t('app.edit')" @click="enableEditMode" />
     </div>
@@ -163,13 +166,15 @@ import PrettyButton from '@/Shared/Form/PrettyButton';
 import PrettyLink from '@/Shared/Form/PrettyLink';
 import TextInput from '@/Shared/Form/TextInput';
 import Errors from '@/Shared/Form/Errors';
+import Help from '@/Shared/Help';
 
 export default {
   components: {
     PrettyButton,
     PrettyLink,
     TextInput,
     Errors,
+    Help,
   },
 
   props: {

diff --git a/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue
@@ -14,8 +14,11 @@ pre {
   <div class="mb-16">
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
-      <h3 class="mb-4 font-semibold sm:mb-0">
-        <span class="mr-1">💵</span> {{ $t('settings.user_preferences_number_format_title') }}
+      <h3 class="mb-4 flex font-semibold sm:mb-0">
+        <span class="mr-1">💵</span>
+        <span class="mr-2">{{ $t('settings.user_preferences_number_format_title') }}</span>
+
+        <help :url="$page.props.help_links.settings_preferences_numerical_format" :top="'5px'" />
       </h3>
       <pretty-button v-if="!editMode" :text="$t('app.edit')" @click="enableEditMode" />
     </div>
@@ -60,12 +63,14 @@ pre {
 import PrettyButton from '@/Shared/Form/PrettyButton';
 import PrettyLink from '@/Shared/Form/PrettyLink';
 import Errors from '@/Shared/Form/Errors';
+import Help from '@/Shared/Help';
 
 export default {
   components: {
     PrettyButton,
     PrettyLink,
     Errors,
+    Help,
   },
 
   props: {

diff --git a/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue b/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
@@ -10,8 +10,11 @@ select {
   <div class="mb-16">
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
-      <h3 class="mb-4 font-semibold sm:mb-0">
-        <span class="mr-1">🗓</span> {{ $t('settings.user_preferences_timezone_title') }}
+      <h3 class="mb-4 flex font-semibold sm:mb-0">
+        <span class="mr-1">🗓</span>
+        <span class="mr-2">{{ $t('settings.user_preferences_timezone_title') }}</span>
+
+        <help :url="$page.props.help_links.settings_preferences_timezone" :top="'5px'" />
       </h3>
       <pretty-button v-if="!editMode" :text="$t('app.edit')" @click="enableEditMode" />
     </div>
@@ -512,12 +515,14 @@ select {
 import PrettyButton from '@/Shared/Form/PrettyButton';
 import PrettyLink from '@/Shared/Form/PrettyLink';
 import Errors from '@/Shared/Form/Errors';
+import Help from '@/Shared/Help';
 
 export default {
   components: {
     PrettyButton,
     PrettyLink,
     Errors,
+    Help,
   },
 
   props: {

diff --git a/resources/js/Shared/Help.vue b/resources/js/Shared/Help.vue
@@ -5,13 +5,15 @@
     :data-url="finalURL"
     :style="'top:' + top"
     @click="goTo()">
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M15.6691 7.06514L14.5891 5.72514C14.4158 5.50263 14.3087 5.23575 14.2801 4.95514L14.0901 3.25714C14.0516 2.91784 13.8993 2.60161 13.6579 2.36005C13.4165 2.1185 13.1004 1.9659 12.7611 1.92714L11.0621 1.73714C10.7621 1.70714 10.5021 1.57814 10.2821 1.40814L8.94414 0.32914C8.67755 0.116069 8.34642 0 8.00514 0C7.66386 0 7.33273 0.116069 7.06614 0.32914L5.72614 1.40914C5.50374 1.58285 5.23686 1.69029 4.95614 1.71914L3.25814 1.90914C2.55814 1.98914 2.00814 2.53914 1.92814 3.23814L1.73814 4.93714C1.70814 5.23714 1.57914 5.49714 1.40914 5.71714L0.32914 7.05414C0.116069 7.32073 0 7.65186 0 7.99314C0 8.33442 0.116069 8.66555 0.32914 8.93214L1.40914 10.2721C1.57914 10.4921 1.68914 10.7521 1.71914 11.0421L1.90914 12.7401C1.98914 13.4401 2.53914 13.9901 3.23814 14.0701L4.93714 14.2601C5.23714 14.2901 5.49714 14.4191 5.71714 14.5891L7.05614 15.6691C7.60614 16.1081 8.38514 16.1081 8.93414 15.6691L10.2741 14.5891C10.4941 14.4191 10.7541 14.3091 11.0441 14.2791L12.7421 14.0891C13.4421 14.0091 13.9921 13.4591 14.0721 12.7601L14.2621 11.0611C14.2921 10.7611 14.4211 10.5011 14.5911 10.2811L15.6711 8.94214C15.8842 8.67555 16.0003 8.34442 16.0003 8.00314C16.0003 7.66186 15.8842 7.33073 15.6711 7.06414L15.6691 7.06514ZM8.99914 11.4991C8.99914 11.7791 8.77914 11.9991 8.49914 11.9991H7.49914C7.22914 11.9991 6.99914 11.7791 6.99914 11.4991V10.4991C6.99914 10.2191 7.22914 9.99914 7.49914 9.99914H8.49914C8.77914 9.99914 8.99914 10.2191 8.99914 10.4991V11.4991ZM10.5591 6.60914C10.4991 6.77914 10.3891 6.93914 10.2591 7.07914C10.1291 7.23914 10.1191 7.26914 9.92914 7.45914C9.76914 7.62914 9.61914 7.75914 9.40914 7.90914C9.29914 7.99914 9.20914 8.09914 9.12914 8.17914C9.04914 8.25914 8.98914 8.34914 8.93914 8.44914C8.88914 8.54914 8.85914 8.63914 8.82914 8.74914C8.79914 8.85914 8.79914 8.87914 8.79914 8.99914H7.12914C7.12914 8.77914 7.12914 8.68914 7.15914 8.51914C7.18914 8.32914 7.23914 8.15914 7.29914 7.99914C7.35914 7.85914 7.43914 7.71914 7.54914 7.57914C7.65914 7.44914 7.77914 7.32914 7.95914 7.19914C8.22914 7.00914 8.31914 6.89914 8.43914 6.67914C8.55914 6.45914 8.63914 6.29914 8.63914 6.08914C8.63914 5.81914 8.57914 5.63914 8.43914 5.50914C8.30914 5.37914 8.12914 5.31914 7.85914 5.31914C7.76914 5.31914 7.66914 5.33914 7.55914 5.36914C7.44914 5.39914 7.38914 5.45914 7.30914 5.52914C7.22914 5.59914 7.16914 5.63914 7.10914 5.72914C7.04555 5.80813 7.01348 5.90789 7.01914 6.00914H5.01914C5.01914 5.62914 5.14914 5.44914 5.28914 5.17914C5.44914 4.90914 5.64914 4.67914 5.89914 4.50914C6.14914 4.33914 6.44914 4.20914 6.77914 4.12914C7.10914 4.04914 7.47914 3.99914 7.86914 3.99914C8.30914 3.99914 8.69914 4.04914 9.03914 4.12914C9.37914 4.21914 9.66914 4.34914 9.91914 4.51914C10.1491 4.68914 10.3291 4.89914 10.4691 5.14914C10.5991 5.39914 10.6591 5.69914 10.6591 6.02914C10.6591 6.24914 10.6591 6.44914 10.5791 6.61914L10.5591 6.60914Z"
-        fill="#96A3BD" />
-    </svg>
+    <a-tooltip placement="topLeft" :title="$t('app.help_open_new_page')" arrow-point-at-center>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M15.6691 7.06514L14.5891 5.72514C14.4158 5.50263 14.3087 5.23575 14.2801 4.95514L14.0901 3.25714C14.0516 2.91784 13.8993 2.60161 13.6579 2.36005C13.4165 2.1185 13.1004 1.9659 12.7611 1.92714L11.0621 1.73714C10.7621 1.70714 10.5021 1.57814 10.2821 1.40814L8.94414 0.32914C8.67755 0.116069 8.34642 0 8.00514 0C7.66386 0 7.33273 0.116069 7.06614 0.32914L5.72614 1.40914C5.50374 1.58285 5.23686 1.69029 4.95614 1.71914L3.25814 1.90914C2.55814 1.98914 2.00814 2.53914 1.92814 3.23814L1.73814 4.93714C1.70814 5.23714 1.57914 5.49714 1.40914 5.71714L0.32914 7.05414C0.116069 7.32073 0 7.65186 0 7.99314C0 8.33442 0.116069 8.66555 0.32914 8.93214L1.40914 10.2721C1.57914 10.4921 1.68914 10.7521 1.71914 11.0421L1.90914 12.7401C1.98914 13.4401 2.53914 13.9901 3.23814 14.0701L4.93714 14.2601C5.23714 14.2901 5.49714 14.4191 5.71714 14.5891L7.05614 15.6691C7.60614 16.1081 8.38514 16.1081 8.93414 15.6691L10.2741 14.5891C10.4941 14.4191 10.7541 14.3091 11.0441 14.2791L12.7421 14.0891C13.4421 14.0091 13.9921 13.4591 14.0721 12.7601L14.2621 11.0611C14.2921 10.7611 14.4211 10.5011 14.5911 10.2811L15.6711 8.94214C15.8842 8.67555 16.0003 8.34442 16.0003 8.00314C16.0003 7.66186 15.8842 7.33073 15.6711 7.06414L15.6691 7.06514ZM8.99914 11.4991C8.99914 11.7791 8.77914 11.9991 8.49914 11.9991H7.49914C7.22914 11.9991 6.99914 11.7791 6.99914 11.4991V10.4991C6.99914 10.2191 7.22914 9.99914 7.49914 9.99914H8.49914C8.77914 9.99914 8.99914 10.2191 8.99914 10.4991V11.4991ZM10.5591 6.60914C10.4991 6.77914 10.3891 6.93914 10.2591 7.07914C10.1291 7.23914 10.1191 7.26914 9.92914 7.45914C9.76914 7.62914 9.61914 7.75914 9.40914 7.90914C9.29914 7.99914 9.20914 8.09914 9.12914 8.17914C9.04914 8.25914 8.98914 8.34914 8.93914 8.44914C8.88914 8.54914 8.85914 8.63914 8.82914 8.74914C8.79914 8.85914 8.79914 8.87914 8.79914 8.99914H7.12914C7.12914 8.77914 7.12914 8.68914 7.15914 8.51914C7.18914 8.32914 7.23914 8.15914 7.29914 7.99914C7.35914 7.85914 7.43914 7.71914 7.54914 7.57914C7.65914 7.44914 7.77914 7.32914 7.95914 7.19914C8.22914 7.00914 8.31914 6.89914 8.43914 6.67914C8.55914 6.45914 8.63914 6.29914 8.63914 6.08914C8.63914 5.81914 8.57914 5.63914 8.43914 5.50914C8.30914 5.37914 8.12914 5.31914 7.85914 5.31914C7.76914 5.31914 7.66914 5.33914 7.55914 5.36914C7.44914 5.39914 7.38914 5.45914 7.30914 5.52914C7.22914 5.59914 7.16914 5.63914 7.10914 5.72914C7.04555 5.80813 7.01348 5.90789 7.01914 6.00914H5.01914C5.01914 5.62914 5.14914 5.44914 5.28914 5.17914C5.44914 4.90914 5.64914 4.67914 5.89914 4.50914C6.14914 4.33914 6.44914 4.20914 6.77914 4.12914C7.10914 4.04914 7.47914 3.99914 7.86914 3.99914C8.30914 3.99914 8.69914 4.04914 9.03914 4.12914C9.37914 4.21914 9.66914 4.34914 9.91914 4.51914C10.1491 4.68914 10.3291 4.89914 10.4691 5.14914C10.5991 5.39914 10.6591 5.69914 10.6591 6.02914C10.6591 6.24914 10.6591 6.44914 10.5791 6.61914L10.5591 6.60914Z"
+          fill="#96A3BD" />
+      </svg>
+    </a-tooltip>
   </div>
 </template>