Merge branch '578-room-members-ux-group-under-tabs-and-expansion-panel' into 'dev'

Room members ux: introduce Tabs and Expansion panels usage

Closes #578

See merge request keanuapp/keanuapp-weblite!278

src/assets/css/chat.scss

@@ -994,21 +994,12 @@ body {
     margin-left: 38px;
   }
 
-  .member::after {
-    content: " ";
-    display: block;
-    margin: 10px 0px;
-    bottom: 0px;
-    height: 1px;
-    background-color: #e1e1e1;
-    width: 100%;
-  }
-
   .show-all {
     color: black;
     font-size: 14 * $chat-text-size;
     font-weight: bold;
     margin-left: 10px;
+    padding: 10px;
     [dir="rtl"] & {
       margin-left: initial;
       margin-right: 10px;

src/assets/translations/en.json

@@ -23,6 +23,7 @@
   },
   "menu": {
     "start_private_chat": "Direct Message with this user",
+    "actions": "actions",
     "reply": "Reply",
     "edit": "Edit",
     "delete": "Delete",

src/components/DeviceList.vue

@@ -1,6 +1,5 @@
 <template>
   <v-list dense @click.native.stop="nullEvent">
-    <v-subheader>{{$t('device_list.title')}}</v-subheader>
     <v-list-item-group color="primary">
       <v-list-item
         v-for="device in devices"

src/components/RoomInfo.vue

@@ -166,58 +166,72 @@
         >{{ $t("room_info.members") }}<v-spacer></v-spacer>
         <div>{{ members.length }}</div></v-card-title
       >
-      <v-card-text>
-        <div
-          class="member ma-2"
-          v-for="(member, index) in members"
-          :key="member.userId"
-          v-show="showAllMembers || index < SHOW_MEMBER_LIMIT"
-          @click="toggleMemberExpanded(member)"
-        >
-          <v-avatar class="avatar" size="32" color="grey">
-            <img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
-            <span v-else class="white--text headline">{{
-              member.name.substring(0, 1).toUpperCase()
-            }}</span>
-          </v-avatar>
-          <span class="user-name">
-          {{
-            member.userId == $matrix.currentUserId
-              ? $t("room_info.user_you", {
-                  user: member.user ? member.user.displayName : member.name,
-                })
-              : $t("room_info.user", {
-                  user: member.user ? member.user.displayName : member.name,
-                })
-          }}
-          </span>
-          <span v-if="isAdmin(member)" class="user-power">
-            {{ $t("room_info.user_admin") }}
-          </span>
-          <span v-else-if="isModerator(member)" class="user-power">
-            {{ $t("room_info.user_moderator") }}
-          </span>
-          <div v-if="member.userId != $matrix.currentUserId && !$matrix.isDirectRoomWith(room, member.userId) && expandedMembers.includes(member)" class="start-private-chat clickable" @click="startPrivateChat(member.userId)">{{ $t("menu.start_private_chat") }}</div>
-          <div v-if="canKickUser(member) || canBanUser(member)">
-            <div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member)" class="mt-2">{{ String.fromCharCode(160) }}</div>
-            <div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member) && canKickUser(member)" class="start-private-chat clickable" @click="kickUser(member)">{{ $t("menu.user_kick") }}</div>
-            <div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member) && canBanUser(member)" class="start-private-chat clickable" @click="banUser(member)">{{ $t("menu.user_kick_and_ban") }}</div>
-          </div>
-          <div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member)" class="mt-2">{{ String.fromCharCode(160) }}</div>
-          <div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member) && !isAdmin(member) && canMakeAdmin(member)" class="start-private-chat clickable" @click="makeAdmin(member)">{{ $t("menu.user_make_admin") }}</div>
-          <div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member) && !isModerator(member) && !isAdmin(member) && canMakeModerator(member)" class="start-private-chat clickable" @click="makeModerator(member)">{{ $t("menu.user_make_moderator") }}</div>
-          <div v-if="member.userId != $matrix.currentUserId && expandedMembers.includes(member) && isModerator(member) && canRevokeModerator(member)" class="start-private-chat clickable" @click="revokeModerator(member)">{{ $t("menu.user_revoke_moderator") }}</div>
-          <DeviceList
-            v-if="expandedMembers.includes(member)"
-            :member="member"
-          />
-        </div>
-        <div class="show-all" @click="showAllMembers = !showAllMembers" v-if="members.length > SHOW_MEMBER_LIMIT">
-          {{
-            showAllMembers ? $t("room_info.hide_all") : $t("room_info.show_all")
-          }}
-        </div>
-      </v-card-text>
+      <v-expansion-panels>
+        <v-expansion-panel v-for="(member, index) in members" :key="member.userId">
+          <v-expansion-panel-header
+            class="member"
+            v-show="showAllMembers || index < SHOW_MEMBER_LIMIT"
+          >
+            <div>
+              <v-avatar class="avatar" size="32" color="grey">
+                <img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
+                <span v-else class="white--text headline">{{
+                  member.name.substring(0, 1).toUpperCase()
+                }}</span>
+              </v-avatar>
+              <span class="user-name">
+              {{
+                member.userId == $matrix.currentUserId
+                  ? $t("room_info.user_you", {
+                      user: member.user ? member.user.displayName : member.name,
+                    })
+                  : $t("room_info.user", {
+                      user: member.user ? member.user.displayName : member.name,
+                    })
+              }}
+              </span>
+              <span v-if="isAdmin(member)" class="user-power">
+                {{ $t("room_info.user_admin") }}
+              </span>
+              <span v-else-if="isModerator(member)" class="user-power">
+                {{ $t("room_info.user_moderator") }}
+              </span>
+            </div>
+          </v-expansion-panel-header>
+          <v-expansion-panel-content>
+            <v-tabs>
+              <v-tab v-if="member.userId != $matrix.currentUserId">{{ $t("menu.actions") }}</v-tab>
+              <v-tab>{{$t('device_list.title')}}</v-tab>
+              <!-- TODO: other rooms in common
+                <v-tab v-if="member.userId != $matrix.currentUserId">{{ $t("menu.common_room") }}</v-tab>
+              -->
+              <v-tab-item v-if="member.userId != $matrix.currentUserId">
+                <div class="py-3">
+                  <v-btn text v-if="member.userId != $matrix.currentUserId && !$matrix.isDirectRoomWith(room, member.userId)" class="start-private-chat clickable d-block text-none" @click="startPrivateChat(member.userId)">{{ $t("menu.start_private_chat") }}</v-btn>
+                  <div v-if="canKickUser(member) || canBanUser(member)">
+                    <div v-if="member.userId != $matrix.currentUserId" class="mt-2">{{ String.fromCharCode(160) }}</div>
+                    <v-btn text v-if="member.userId != $matrix.currentUserId && canKickUser(member)" class="start-private-chat clickable d-block text-none" @click="kickUser(member)">{{ $t("menu.user_kick") }}</v-btn>
+                    <v-btn text v-if="member.userId != $matrix.currentUserId && canBanUser(member)" class="start-private-chat clickable d-block text-none" @click="banUser(member)">{{ $t("menu.user_kick_and_ban") }}</v-btn>
+                  </div>
+                  <div v-if="member.userId != $matrix.currentUserId" class="mt-2">{{ String.fromCharCode(160) }}</div>
+                  <v-btn text v-if="member.userId != $matrix.currentUserId && !isAdmin(member) && canMakeAdmin(member)" class="start-private-chat clickable d-block text-none" @click="makeAdmin(member)">{{ $t("menu.user_make_admin") }}</v-btn>
+                  <v-btn text v-if="member.userId != $matrix.currentUserId && !isModerator(member) && !isAdmin(member) && canMakeModerator(member)" class="start-private-chat clickable d-block text-none" @click="makeModerator(member)">{{ $t("menu.user_make_moderator") }}</v-btn>
+                  <v-btn text v-if="member.userId != $matrix.currentUserId && isModerator(member) && canRevokeModerator(member)" class="start-private-chat clickable d-block text-none" @click="revokeModerator(member)">{{ $t("menu.user_revoke_moderator") }}</v-btn>
+                </div>
+              </v-tab-item>
+              <v-tab-item>
+                <DeviceList :member="member" />
+              </v-tab-item>
+              <!-- <v-tab-item v-if="member.userId != $matrix.currentUserId">
+              {{ "TODO" }}
+              </v-tab-item> -->
+            </v-tabs>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+      </v-expansion-panels>
+      <div class="show-all p-2" @click="showAllMembers = !showAllMembers" v-if="members.length > SHOW_MEMBER_LIMIT">
+        {{ showAllMembers ? $t("room_info.hide_all") : $t("room_info.show_all") }}
+      </div>
     </v-card>
 
     <!-- EXPORT CHAT -->
@@ -282,7 +296,6 @@ export default {
       showAllMembers: false,
       showLeaveConfirmation: false,
       showPurgeConfirmation: false,
-      expandedMembers: [],
       buildVersion: "",
       updatingJoinRule: false, // Flag if we are processing update curerntly
       joinRules: [
@@ -441,15 +454,6 @@ export default {
       this.$navigation.push({ name: "Profile" }, 1);
     },
 
-    toggleMemberExpanded(member) {
-      const index = this.expandedMembers.indexOf(member);
-      if (index > -1) {
-        this.expandedMembers.splice(index, 1);
-      } else {
-        this.expandedMembers.push(member);
-      }
-    },
-
     /**
      * Set room join rule.
      * @param joinRule One of "invite" or "public". Currently always disables guest access.