Update UI to handle both click modes

frontend/src/components/files/ListingItem.vue

@@ -6,8 +6,8 @@
   @dragstart="dragStart"
   @dragover="dragOver"
   @drop="drop"
-  @click="click"
-  @dblclick="open"
+  @click="itemClick"
+  @dblclick="dblclick"
   @touchstart="touchstart"
   :data-dir="isDir"
   :aria-label="name"
@@ -26,6 +26,9 @@
       <p class="modified">
         <time :datetime="modified">{{ humanTime() }}</time>
       </p>
+
+      <input v-if="user.singleClick" v-bind:checked="isSelected"
+             class="selection" type="checkbox" @click.stop="click">
     </div>
   </div>
 </template>
@@ -47,7 +50,7 @@ export default {
   },
   props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
   computed: {
-    ...mapState(['selected', 'req', 'user', 'jwt']),
+    ...mapState(['user', 'selected', 'req', 'user', 'jwt']),
     ...mapGetters(['selectedCount']),
     isSelected () {
       return (this.selected.indexOf(this.index) !== -1)
@@ -170,8 +173,12 @@ export default {
 
       action(overwrite, rename)
     },
+    itemClick: function(event) {
+      if (this.user.singleClick) this.open()
+      else this.click(event)
+    },
     click: function (event) {
-      if (this.selectedCount !== 0) event.preventDefault()
+      if (!this.user.singleClick && this.selectedCount !== 0) event.preventDefault()
       if (this.$store.state.selected.indexOf(this.index) !== -1) {
         this.removeSelected(this.index)
         return
@@ -198,9 +205,12 @@ export default {
         return
       }
 
-      if (!event.ctrlKey && !this.$store.state.multiple) this.resetSelected()
+      if (!this.user.singleClick && !event.ctrlKey && !this.$store.state.multiple) this.resetSelected()
       this.addSelected(this.index)
     },
+    dblclick: function () {
+      if (!this.user.singleClick) this.open()
+    },
     touchstart () {
       setTimeout(() => {
         this.touches = 0

frontend/src/components/settings/UserForm.vue

@@ -24,6 +24,10 @@
       <input type="checkbox" :disabled="user.perm.admin" v-model="user.lockPassword"> {{ $t('settings.lockPassword') }}
     </p>
 
+    <p>
+      <input type="checkbox" v-model="user.singleClick"> {{ $t('settings.singleClick') }}
+    </p>
+
     <permissions :perm.sync="user.perm" />
     <commands v-if="isExecEnabled" :commands.sync="user.commands" />
 

frontend/src/css/listing.css

@@ -104,6 +104,12 @@
   width: calc(100% - 5vw);
 }
 
+#listing.mosaic .item .selection {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+
 #listing.list {
   flex-direction: column;
   width: 100%;
@@ -217,6 +223,11 @@
   font-weight: bold;
 }
 
+#listing.list .item .selection {
+  position: absolute;
+  right: 24px;
+}
+
 #listing #multiple-selection {
   position: fixed;
   bottom: -4em;

frontend/src/i18n/en.json

@@ -173,6 +173,7 @@
     "globalRules": "This is a global set of allow and disallow rules. They apply to every user. You can define specific rules on each user's settings to override this ones.",
     "allowSignup": "Allow users to signup",
     "createUserDir": "Auto create user home dir while adding new user",
+    "singleClick": "Use only single click gestures on the interface",
     "insertRegex": "Insert regex expression",
     "insertPath": "Insert the path",
     "userUpdated": "User updated!",