Resolve "Room setup: Not able to edit the room name once the room is created"

src/assets/css/_utilities.scss

@@ -1,5 +1,13 @@
 .cursor-pointer {
-    cursor: pointer;
+    cursor: pointer !important;
+}
+
+.cursor-default {
+    cursor: default !important;
+}
+
+.cursor-text {
+    cursor: text !important;
 }
 
 .text-transform-0 {

src/assets/css/chat.scss

@@ -782,6 +782,8 @@ $admin-fg: white;
     width: 64px !important;
     height: 64px !important;
     margin-bottom: 20px;
+    cursor: default;
+
     .headline {
       font-size: 70 * $chat-text-size !important;
     }
@@ -791,6 +793,9 @@ $admin-fg: white;
     font-family: "Poppins", sans-serif;
     font-size: 32px;
     font-weight: 800;
+    input {
+      text-align: center;
+    }
   }
 
   .topic {
@@ -1051,6 +1056,16 @@ $admin-fg: white;
     background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%), #f5f5f7;
     box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
     border-radius: 18px;
+
+    input {
+      text-align: center;
+    }
+
+    .h2 {
+      &:hover {
+        cursor: text;
+      }
+    }
   }
 
   .room-avatar {
@@ -1058,6 +1073,8 @@ $admin-fg: white;
     width: 44px !important;
     height: 44px !important;
     margin-bottom: 20px;
+    cursor: default;
+
     .headline {
       font-size: 70 * $chat-text-size !important;
     }

src/assets/translations/bo.json

@@ -132,7 +132,8 @@
         "purge_failed": "ཁ་བརྡ་ཁང་བཤིག་ཐུབ་མ་སོང་།",
         "purge_removing_members": "ཚོགས་མི་ཁག་ཕྱིར་འདོན།",
         "purge_redacting_events": "ཁ་བརྡ་གཙང་གསུབ།",
-        "purge_set_room_state": "ཁ་བརྡ་ཁང་གི་རྣམ་པ་སྒྲིག་འགོད།"
+        "purge_set_room_state": "ཁ་བརྡ་ཁང་གི་རྣམ་པ་སྒྲིག་འགོད།",
+        "room_name_required": ""
     },
     "message": {
         "users_are_typing": "{count} ཚོགས་མི་ཡིས་གཏགས་བཞིན་འདུག",

src/assets/translations/de.json

@@ -64,7 +64,8 @@
         "members": "keine Mitglieder | 1 Mitglied | {count} Mitglieder",
         "purge_removing_members": "Entfernen von Mitgliedern",
         "purge_failed": "Fehler beim Bereinigen des Raums!",
-        "room_list_rooms": "Räume"
+        "room_list_rooms": "Räume",
+        "room_name_required": ""
     },
     "room_welcome": {
         "info": "Herzlich willkommen! Hier sind ein paar Dinge, die du über deinen Raum wissen solltest:",

src/assets/translations/en.json

@@ -74,7 +74,8 @@
     "purge_removing_members": "Removing members",
     "purge_failed": "Failed to purge room!",
     "room_list_invites": "Invites",
-    "room_list_rooms": "Rooms"
+    "room_list_rooms": "Rooms",
+    "room_name_required": "Room name is required"
   },
   "room_welcome": {
     "info": "Welcome! Here are a few things to know about your room:",

src/assets/translations/es.json

@@ -143,7 +143,8 @@
         "purge_set_room_state": "Estado de la sala",
         "purge_removing_members": "Eliminar miembros",
         "purge_failed": "¡Fallo en la purga de la sala!",
-        "room_list_rooms": "Salas"
+        "room_list_rooms": "Salas",
+        "room_name_required": ""
     },
     "message": {
         "user_powerlevel_change_from_to": "{user} de {powerOld} a {powerNew}",

src/assets/translations/fi.json

@@ -104,7 +104,8 @@
     },
     "room": {
         "leave": "Poistu",
-        "room_list_rooms": "Huoneet"
+        "room_list_rooms": "Huoneet",
+        "room_name_required": ""
     },
     "room_welcome": {
         "room_history_is": "Huoneen historia on {type}.",

src/assets/translations/fr.json

@@ -64,7 +64,8 @@
         "purge_removing_members": "Suppression de membres",
         "room_list_invites": "Invitations",
         "room_list_rooms": "Salons",
-        "purge_redacting_events": "Rédaction des évènements"
+        "purge_redacting_events": "Rédaction des évènements",
+        "room_name_required": ""
     },
     "room_welcome": {
         "info": "Bienvenue ! Voici quelques informations à connaître sur votre salon :",

src/assets/translations/it.json

@@ -45,7 +45,8 @@
         "purge_redacting_events": "Redazione di eventi",
         "purge_failed": "Impossibile pulire la stanza!",
         "room_list_invites": "Inviti",
-        "room_list_rooms": "Stanze"
+        "room_list_rooms": "Stanze",
+        "room_name_required": ""
     },
     "menu": {
         "reply": "Risposta",

src/assets/translations/nb_NO.json

@@ -127,7 +127,8 @@
         "room_list_rooms": "Rom",
         "room_list_invites": "Invitasjoner",
         "purge_set_room_state": "Setter romtilstand",
-        "leave": "Forlat"
+        "leave": "Forlat",
+        "room_name_required": ""
     },
     "purge_room": {
         "n_seconds": "{seconds} sekunder",

src/assets/translations/pt_BR.json

@@ -87,7 +87,8 @@
         "purge_failed": "Houve uma falha ao eliminar a sala!",
         "room_list_invites": "Convites",
         "room_list_rooms": "Salas",
-        "invitations": "Você não tem convites | Você tem 1 convite | Você tem {count} convites"
+        "invitations": "Você não tem convites | Você tem 1 convite | Você tem {count} convites",
+        "room_name_required": ""
     },
     "room_welcome": {
         "info": "Bem-vindo! Aqui estão algumas coisas que você deve saber sobre a sua sala:",

src/assets/translations/ro.json

@@ -187,7 +187,8 @@
         "purge_redacting_events": "Redactarea evenimentelor",
         "purge_set_room_state": "Setarea stării camerei",
         "leave": "Lăsați",
-        "members": "fără membri | 1 membru | {count} membri"
+        "members": "fără membri | 1 membru | {count} membri",
+        "room_name_required": ""
     },
     "message": {
         "user_changed_guest_access_open": "{user} a permis oaspeților să intre în cameră",

src/assets/translations/ug.json

@@ -94,7 +94,8 @@
         "purge_redacting_events": "پائالىيەتلەرنى تەھرىرلەش",
         "purge_set_room_state": "مۇنازىرەخانىنىڭ شەرتىنى قۇرۇش",
         "leave": "كېتىش",
-        "members": "ئەزالار يوق | بىر ئەزا | [نەپەر] ئەزا"
+        "members": "ئەزالار يوق | بىر ئەزا | [نەپەر] ئەزا",
+        "room_name_required": ""
     },
     "leave": {
         "text_public_lastroom": "ئەگەر بۇ ئۆيگە يەنە قوشۇلماقچى بولسىڭىز ، يېڭى سالاھىيەت ئاستىدا قاتناشسىڭىز بولىدۇ. {ئىشلەتكۈچى} ، {ھەرىكەت} نى ساقلاش.",

src/assets/translations/zh_Hans.json

@@ -70,7 +70,8 @@
         "purge_failed": "删除聊天室失败了！",
         "purge_removing_members": "移除成员",
         "purge_redacting_events": "编辑事件",
-        "purge_set_room_state": "设置聊天室状态"
+        "purge_set_room_state": "设置聊天室状态",
+        "room_name_required": ""
     },
     "message": {
         "you": "您",

src/components/CreateRoom.vue

@@ -46,6 +46,7 @@
             color="black"
             :rules="roomNamerules"
             counter="50"
+            maxlength="50"
             background-color="white"
             v-on:keyup.enter="$refs.topic.focus()"
             :disabled="step > steps.INITIAL"

src/components/RoomAvatarPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-avatar :class="{'room-avatar':true, 'cursor-pointer':userCanPurgeRoom}" @click="userCanPurgeRoom?showRoomAvatarPicker:null" v-if="isRoomAvatarLoaded">
+  <v-avatar :class="{'room-avatar':true, 'cursor-pointer':userCanPurgeRoom}" @click="userCanPurgeRoom?showRoomAvatarPicker():null" v-if="isRoomAvatarLoaded">
     <v-img v-if="roomAvatar" :src="roomAvatar"/>
     <span v-else class="white--text headline">{{
       roomName.substring(0, 1).toUpperCase()

src/components/RoomInfo.vue

@@ -25,9 +25,33 @@
 
     <div class="members ma-3 pa-3 mt-0 pt-0 text-center">
       <room-avatar-picker />
-      <div class="name">{{ roomName }}</div>
+      <div :class="{'name':true,'cursor-default':!userCanPurgeRoom}">
+        <span
+          v-if="!isEditMode"
+          @click="onRoomNameClicked()"
+        >
+          {{ roomName }}
+        </span>
+        <v-text-field
+          v-model="editedRoomName"
+          ref="editedRoomName"
+          :rules="[(v) => !!v || $t('room.room_name_required')]"
+          :error="roomNameErrorMessage != null"
+          :error-messages="roomNameErrorMessage"
+          required
+          color="black"
+          counter="50"
+          background-color="white"
+          autofocus
+          v-if="isEditMode"
+          maxlength="50"
+          @blur="updateRoomName()"
+          @keyup.enter="updateRoomName()"
+          solo
+        ></v-text-field>
+      </div>
       <div class="topic">{{ roomTopic }}</div>
-      <div class="created-by">
+      <div :class="{'created-by':true, 'cursor-default':!userCanPurgeRoom}">
         {{ $t("room_info.created_by", { user: creator }) }}
       </div>
     </div>

src/components/RoomInfoBottomSheet.vue

@@ -8,7 +8,30 @@
       <div class="text-center current-room">
         <room-avatar-picker />
         <div class="h4">{{$t('room_info_sheet.this_room')}}</div>
-        <div class="h2">{{ roomName }}</div>
+        <div
+          class="h2"
+          v-if="!isEditMode"
+          @click="onRoomNameClicked()"
+        >
+          {{ roomName }}
+        </div>
+        <v-text-field
+          v-model="editedRoomName"
+          ref="editedRoomName"
+          :rules="[(v) => !!v || $t('room.room_name_required')]"
+          :error="roomNameErrorMessage != null"
+          :error-messages="roomNameErrorMessage"
+          required
+          color="black"
+          counter="50"
+          background-color="white"
+          autofocus
+          v-if="isEditMode"
+          maxlength="50"
+          @blur="updateRoomName()"
+          @keyup.enter="updateRoomName()"
+          solo
+        ></v-text-field>
         <v-btn
           id="btn-room-details"
           height="20px"

src/components/roomInfoMixin.js

@@ -3,7 +3,10 @@ export default {
     return {
       roomJoinRule: null,
       userCanChangeJoinRule: false,
-      userCanPurgeRoom: false
+      userCanPurgeRoom: false,
+      editedRoomName: "",
+      isEditMode: false,
+      roomNameErrorMessage: null
     }
   },
   mounted() {
@@ -88,6 +91,20 @@ export default {
     },
   },
   methods: {
+    onRoomNameClicked() {
+      if(this.userCanPurgeRoom) {
+        this.isEditMode = !this.isEditMode;
+        this.editedRoomName = this.roomName;
+      }
+    },
+    updateRoomName() {
+      if(this.editedRoomName) {
+        this.$matrix.matrixClient.setRoomName(this.room.roomId, this.editedRoomName);
+        this.isEditMode = !this.isEditMode;
+      } else {
+        this.$refs.editedRoomName.focus();
+      }
+    },
     setRoomJoinRule(ignoredJoinRule) {
       // Do nothing in the general mixin, override in RoomInfo.vue
     },

src/main.js

@@ -54,7 +54,7 @@ Vue.directive('blur', {
  * Handle long taps. Call with the timeout as argument (default 500ms) and the value
  * can be either one function called on long tap or two functions, the
  * first called on "short tap" and the other on "long tap".
- * 
+ *
  * Like this: v-linkTap:500="[tapped,longTapped]"
  */
 Vue.directive('longTap', {

src/plugins/utils.js

@@ -590,8 +590,8 @@ class Util {
 
     /**
      * Return number of whole days between the timestamps, at end of that day.
-     * @param {*} ts1 
+     * @param {*} ts1
-     * @param {*} ts2 
+     * @param {*} ts2
      */
     dayDiff(ts1, ts2) {
         var t1 = dayjs(ts1).endOf('day');