Merge pull request #3462 from carlobeltrame/single-click-unlocking

Double-clicking is not an expected interaction on the web
ecamp · May 16, 2023 · 5347183 · 5347183
2 parents a8de2bc + 85358f2
commit 5347183
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 42 deletions.
diff --git a/frontend/src/components/generic/LockIcon.vue → ...end/src/components/generic/LockButton.vue b/frontend/src/components/generic/LockIcon.vue → ...end/src/components/generic/LockButton.vue
@@ -1,26 +1,25 @@
 <template>
   <v-tooltip :disabled="tooltip == ''" bottom>
     <template #activator="{ on }">
-      <v-icon v-if="value" small v-on="{ dblclick: iconDblClick, ...on }">
-        mdi-lock-open-variant
-      </v-icon>
-      <v-icon
-        v-else
-        small
-        color="grey"
+      <button
+        :aria-label="tooltip"
+        :aria-disabled="disabledForGuest"
+        class="v-btn v-btn--icon v-btn--round v-size--small"
         :class="{ 'e-shake-lock': shake }"
-        v-on="{ dblclick: iconDblClick, ...on }"
+        @click="onClick"
+        v-on="on"
       >
-        mdi-lock
-      </v-icon>
+        <v-icon v-if="value" small>mdi-lock-open-variant</v-icon>
+        <v-icon v-else small>mdi-lock</v-icon>
+      </button>
     </template>
     <span>{{ tooltip }}</span>
   </v-tooltip>
 </template>
 
 <script>
 export default {
-  name: 'LockIcon',
+  name: 'LockButton',
   props: {
     value: {
       type: Boolean,
@@ -44,32 +43,28 @@ export default {
   computed: {
     tooltip() {
       if (this.disabledForGuest) {
-        return this.$tc('components.generic.lockIcon.guestsCannotEdit')
+        return this.$tc('components.generic.lockButton.guestsCannotEdit')
       }
       if (this.message) {
         return this.message
       }
       if (!this.value) {
-        return this.$tc('components.generic.lockIcon.doubleClickToUnlock')
+        return this.$tc('components.generic.lockButton.clickToUnlock')
       }
-      return ''
+      return this.$tc('components.generic.lockButton.clickToLock')
     },
   },
   methods: {
-    iconDblClick() {
+    onClick() {
       if (!this.disabledForGuest) {
-        this.$emit('dblclick')
+        this.$emit('click')
       }
     },
   },
 }
 </script>
 
 <style scoped>
-.v-icon {
-  cursor: pointer;
-}
-
 .e-shake-lock {
   animation: horizontal-shaking 0.5s linear 1;
 }

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
@@ -152,9 +152,10 @@
       }
     },
     "generic": {
-      "lockIcon": {
-        "doubleClickToUnlock": "Doppelklick um zu entsperren",
-        "guestsCannotEdit": "Gäste haben keinen Bearbeitungszugriff"
+      "lockButton": {
+        "clickToLock": "Klicken um zu sperren",
+        "clickToUnlock": "Klicken um zu entsperren",
+        "guestsCannotEdit": "Gäste können nicht bearbeiten"
       }
     },
     "layout": {
@@ -432,7 +433,6 @@
         "title": "Admin"
       },
       "campProgram": {
-        "guestsCannotEdit": "Gäste können das Grobprogramm nicht bearbeiten",
         "reminderLockedCreate": "Ziehen zum Erstellen ist nur im entsperrten Modus möglich.",
         "reminderLockedMove": "Ziehen zum Verschieben ist nur im entsperrten Modus möglich.",
         "title": "Grobprogramm"

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -152,8 +152,9 @@
       }
     },
     "generic": {
-      "lockIcon": {
-        "doubleClickToUnlock": "Double click to unlock",
+      "lockButton": {
+        "clickToLock": "Click to lock",
+        "clickToUnlock": "Click to unlock",
         "guestsCannotEdit": "Guests have no permission to edit"
       }
     },
@@ -432,7 +433,6 @@
         "title": "Admin"
       },
       "campProgram": {
-        "guestsCannotEdit": "A guest cannot edit the picasso",
         "reminderLockedCreate": "Drag to create is only possible in unlocked mode.",
         "reminderLockedMove": "Drag to move is only possible in unlocked mode.",
         "title": "Picasso"

diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
@@ -144,8 +144,9 @@
       }
     },
     "generic": {
-      "lockIcon": {
-        "doubleClickToUnlock": "Double-clique pour déverrouiller",
+      "lockButton": {
+        "clickToLock": "Clique pour verrouiller",
+        "clickToUnlock": "Clique pour déverrouiller",
         "guestsCannotEdit": "Les invités n'ont pas le droit de modifier"
       }
     },
@@ -416,7 +417,6 @@
         "title": "Admin"
       },
       "campProgram": {
-        "guestsCannotEdit": "Un invité ne peut pas modifier le picasso",
         "reminderLockedCreate": "Glisser pour créer n'est possible qu'en mode déverrouillé.",
         "reminderLockedMove": "Faire glisser pour se déplacer n'est possible qu'en mode déverrouillé.",
         "title": "Picasso"

diff --git a/frontend/src/locales/it.json b/frontend/src/locales/it.json
@@ -144,8 +144,9 @@
       }
     },
     "generic": {
-      "lockIcon": {
-        "doubleClickToUnlock": "Doppio clic per sbloccare",
+      "lockButton": {
+        "clickToLock": "Clic per bloccare",
+        "clickToUnlock": "Clic per sbloccare",
         "guestsCannotEdit": "Gli ospiti non hanno il permesso di modificare"
       }
     },
@@ -416,7 +417,6 @@
         "title": "Admin"
       },
       "campProgram": {
-        "guestsCannotEdit": "Un ospite non può modificare il picasso",
         "reminderLockedCreate": "Trascinare per creare è possibile solo in modalità sbloccata.",
         "reminderLockedMove": "Trascinare per spostarsi è possibile solo in modalità sbloccata.",
         "title": "Picasso"

diff --git a/frontend/src/views/camp/CampProgram.vue b/frontend/src/views/camp/CampProgram.vue
@@ -7,12 +7,11 @@ Show all activity schedule entries of a single period.
     <template #title-actions>
       <period-switcher :period="period" />
       <v-spacer />
-      <LockIcon
+      <LockButton
         v-model="editMode"
         :shake="showReminder"
         :disabled-for-guest="!isContributor"
-        :message="$tc('views.camp.campProgram.guestsCannotEdit')"
-        @dblclick="editMode = !editMode"
+        @click="editMode = !editMode"
       />
       <v-menu offset-y>
         <template #activator="{ on, attrs }">
@@ -64,7 +63,7 @@ import ScheduleEntries from '@/components/program/ScheduleEntries.vue'
 import PeriodSwitcher from '@/components/program/PeriodSwitcher.vue'
 import DownloadNuxtPdf from '@/components/print/print-nuxt/DownloadNuxtPdfListItem.vue'
 import DownloadReactPdf from '@/components/print/print-react/DownloadReactPdfListItem.vue'
-import LockIcon from '@/components/generic/LockIcon.vue'
+import LockButton from '@/components/generic/LockButton.vue'
 import LockUnlockListItem from '@/components/generic/LockUnlockListItem.vue'
 
 export default {
@@ -76,7 +75,7 @@ export default {
     ContentCard,
     Picasso,
     ScheduleEntries,
-    LockIcon,
+    LockButton,
     LockUnlockListItem,
   },
   mixins: [campRoleMixin],

diff --git a/frontend/src/views/camp/Story.vue b/frontend/src/views/camp/Story.vue
@@ -3,10 +3,10 @@
     <template #title-actions>
       <period-switcher :period="period" :route-name="'camp/period/story'" />
       <v-spacer />
-      <LockIcon
+      <LockButton
         v-model="editing"
         :disabled-for-guest="!isContributor"
-        @dblclick="editing = !editing"
+        @click="editing = !editing"
       />
       <v-menu offset-y>
         <template #activator="{ on, attrs }">
@@ -36,7 +36,7 @@ import StoryPeriod from '@/components/story/StoryPeriod.vue'
 import { campRoleMixin } from '@/mixins/campRoleMixin'
 import DownloadNuxtPdf from '@/components/print/print-nuxt/DownloadNuxtPdfListItem.vue'
 import DownloadReactPdf from '@/components/print/print-react/DownloadReactPdfListItem.vue'
-import LockIcon from '@/components/generic/LockIcon.vue'
+import LockButton from '@/components/generic/LockButton.vue'
 import LockUnlockListItem from '@/components/generic/LockUnlockListItem.vue'
 
 export default {
@@ -46,7 +46,7 @@ export default {
     ContentCard,
     DownloadReactPdf,
     DownloadNuxtPdf,
-    LockIcon,
+    LockButton,
     LockUnlockListItem,
   },
   mixins: [campRoleMixin],