Room description editable

src/assets/css/chat.scss

@@ -804,6 +804,10 @@ $admin-fg: white;
   .topic {
     font-family: "Inter", sans-serif;
     font-size: 16px;
+
+    input {
+      text-align: center;
+    }
   }
 
   .created-by {

src/assets/translations/bo.json

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

src/assets/translations/de.json

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

src/assets/translations/en.json

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

src/assets/translations/es.json

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

src/assets/translations/fi.json

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

src/assets/translations/fr.json

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

src/assets/translations/it.json

@@ -51,7 +51,8 @@
         "purge_failed": "Impossibile pulire la stanza!",
         "room_list_invites": "Inviti",
         "room_list_rooms": "Stanze",
-        "room_name_required": ""
+        "room_name_required": "",
+        "room_topic_required": ""
     },
     "menu": {
         "reply": "Risposta",

src/assets/translations/nb_NO.json

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

src/assets/translations/pt_BR.json

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

src/assets/translations/ro.json

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

src/assets/translations/ug.json

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

src/assets/translations/zh_Hans.json

@@ -76,7 +76,8 @@
         "purge_removing_members": "移除成员",
         "purge_redacting_events": "编辑事件",
         "purge_set_room_state": "设置聊天室状态",
-        "room_name_required": ""
+        "room_name_required": "",
+        "room_topic_required": ""
     },
     "message": {
         "you": "您",

src/components/RoomInfo.vue

@@ -27,12 +27,13 @@
       <room-avatar-picker />
       <div :class="{'name':true,'cursor-default':!userCanPurgeRoom}">
         <span
-          v-if="!isEditMode"
+          v-if="!isRoomNameEditMode"
           @click="onRoomNameClicked()"
         >
           {{ roomName }}
         </span>
         <v-text-field
+          v-else
           v-model="editedRoomName"
           ref="editedRoomName"
           :rules="[(v) => !!v || $t('room.room_name_required')]"
@@ -43,14 +44,36 @@
           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="{'topic':true,'cursor-default':!userCanPurgeRoom}">
+        <span
+          v-if="!isRoomTopicEditMode"
+          @click="onRoomTopicClicked()"
+        >
+          {{ roomTopic }}
+        </span>
+        <v-text-field
+          v-else
+          v-model="editedRoomTopic"
+          ref="editedRoomTopic"
+          :rules="[(v) => !!v || $t('room.room_topic_required')]"
+          :error="roomTopicErrorMessage != null"
+          :error-messages="roomTopicErrorMessage"
+          required
+          color="black"
+          background-color="white"
+          autofocus
+          @blur="updateRoomTopic()"
+          @keyup.enter="updateRoomTopic()"
+          solo
+        >
+        </v-text-field>
+      </div>
       <div :class="{'created-by':true, 'cursor-default':!userCanPurgeRoom}">
         {{ $t("room_info.created_by", { user: creator }) }}
       </div>

src/components/RoomInfoBottomSheet.vue

@@ -10,7 +10,7 @@
         <div class="h4">{{$t('room_info_sheet.this_room')}}</div>
         <div
           class="h2"
-          v-if="!isEditMode"
+          v-if="!isRoomNameEditMode"
           @click="onRoomNameClicked()"
         >
           {{ roomName }}
@@ -26,7 +26,7 @@
           counter="50"
           background-color="white"
           autofocus
-          v-if="isEditMode"
+          v-if="isRoomNameEditMode"
           maxlength="50"
           @blur="updateRoomName()"
           @keyup.enter="updateRoomName()"

src/components/roomInfoMixin.js

@@ -5,8 +5,11 @@ export default {
       userCanChangeJoinRule: false,
       userCanPurgeRoom: false,
       editedRoomName: "",
-      isEditMode: false,
+      isRoomNameEditMode: false,
-      roomNameErrorMessage: null
+      roomNameErrorMessage: null,
+      editedRoomTopic: "",
+      isRoomTopicEditMode: false,
+      roomTopicErrorMessage: null,
     }
   },
   mounted() {
@@ -93,18 +96,32 @@ export default {
   methods: {
     onRoomNameClicked() {
       if(this.userCanPurgeRoom) {
-        this.isEditMode = !this.isEditMode;
+        this.isRoomNameEditMode = !this.isRoomNameEditMode;
         this.editedRoomName = this.roomName;
       }
     },
     updateRoomName() {
       if(this.editedRoomName) {
         this.$matrix.matrixClient.setRoomName(this.room.roomId, this.editedRoomName);
-        this.isEditMode = !this.isEditMode;
+        this.isRoomNameEditMode = !this.isRoomNameEditMode;
       } else {
         this.$refs.editedRoomName.focus();
       }
     },
+    onRoomTopicClicked() {
+      if(this.userCanPurgeRoom) {
+        this.isRoomTopicEditMode = !this.isRoomTopicEditMode;
+        this.editedRoomTopic = this.roomTopic;
+      }
+    },
+    updateRoomTopic() {
+      if(this.editedRoomTopic) {
+        this.$matrix.matrixClient.setRoomTopic(this.room.roomId, this.editedRoomTopic);
+        this.isRoomTopicEditMode = !this.isRoomTopicEditMode;
+      } else {
+        this.$refs.editedRoomTopic.focus();
+      }
+    },
     setRoomJoinRule(ignoredJoinRule) {
       // Do nothing in the general mixin, override in RoomInfo.vue
     },