Merge branch 'UI-tweaks' into 'dev'

Allow three dot menu to be opened on another message...

See merge request keanuapp/keanuapp-weblite!307

src/components/Chat.vue

@@ -1740,10 +1740,17 @@ export default {
 
     showContextMenuForEvent(e) {
       const event = e.event;
-      this.selectedEvent = event;
+      if (this.selectedEvent == event) {
-      this.updateRecentEmojis();
+        this.showContextMenu = !this.showContextMenu;
-      this.showContextMenu = !this.showContextMenu;
+      } else {
-      this.showContextMenuAnchor = e.anchor;
+        this.showContextMenu = false;
+        this.$nextTick(() => {
+          this.selectedEvent = event;
+          this.updateRecentEmojis();
+          this.showContextMenu = true;
+          this.showContextMenuAnchor = e.anchor;
+        })
+      }
     },
 
     showAvatarMenuForEvent(e) {
@@ -1761,6 +1768,7 @@ export default {
       if (this.showContextMenu) {
         this.showContextMenu = false;
         this.showContextMenuAnchor = null;
+        this.selectedEvent = null;
         e.preventDefault();
       }
     },

src/components/CreateRoom.vue

@@ -105,6 +105,9 @@
 
     <input id="room-avatar-picker" ref="avatar" type="file" name="avatar" @change="handlePickedAvatar($event)"
       accept="image/*" class="d-none" />
+
+    <input id="user-avatar-picker" ref="useravatar" type="file" name="user-avatar" @change="handlePickedUserAvatar($event)" accept="image/*" class="d-none" />
+
     <v-dialog v-model="enterRoomDialog" :width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'">
       <v-card>
         <v-container v-if="canEditProfile" class="pa-10">
@@ -112,9 +115,11 @@
             <v-col class="py-0">
               <div class="text-start font-weight-bold">{{ $t("join.choose_name") }}</div>
               <v-select ref="avatar" :items="availableAvatars" cache-items outlined dense @change="selectAvatar"
-                :value="availableAvatars[0]" single-line autofocus>
+                :value="selectedProfile">
                 <template v-slot:selection>
-                  <v-text-field background-color="transparent" solo flat hide-details @click.native.stop="{}"
+                  <v-text-field background-color="transparent" solo flat hide-details   
+                    @click.native.stop="(event) => event.target.focus()"                 
+                    @focus="$event.target.select()"
                     v-model="selectedProfile.name"></v-text-field>
                 </template>
                 <template v-slot:item="data">
@@ -126,7 +131,7 @@
               </v-select>
             </v-col>
             <v-col cols="2" class="py-0">
-              <v-avatar @click="showAvatarPickerList">
+              <v-avatar @click="showUserAvatarPicker">
                 <v-img v-if="selectedProfile" :src="selectedProfile.image" />
               </v-avatar>
             </v-col>
@@ -586,6 +591,21 @@ export default {
     showAvatarPickerList() {
       this.$refs.avatar.$refs.input.click();
     },
+
+    /**
+     * Show picker to select user avatar file
+     */
+     showUserAvatarPicker() {
+      if (this.step == steps.INITIAL) {
+        this.$refs.useravatar.click();
+      }
+    },
+
+    handlePickedUserAvatar(event) {
+      util.loadAvatarFromFile(event, (image) => {
+        this.selectedProfile.image = image;
+      });
+    },
   }
 };
 </script>

src/components/Join.vue

@@ -18,7 +18,7 @@
         </div>
 
         <hr class="my-10 join-line" />
-        <div class="font-weight-black mb-4" v-if="!currentUser">Choose a name to use.</div>
+        <div class="font-weight-black mb-4" v-if="!currentUser">{{ $t("join.choose_name") }}</div>
 
         <v-row v-if="canEditProfile">
           <v-col cols="10" sm="7" class="py-0">
@@ -29,7 +29,7 @@
               outlined
               dense
               @change="selectAvatar"
-              :value="availableAvatars[0]"
+              :value="selectedProfile"
               single-line
               autofocus
             >
@@ -39,10 +39,8 @@
                   solo
                   flat
                   hide-details
-                  @click.native.stop="
+                  @click.native.stop="(event) => event.target.focus()"                 
-                    {
+                  @focus="$event.target.select()"
-                    }
-                  "
                   v-model="selectedProfile.name"
                 ></v-text-field>
               </template>