Merge branch '584-update-profile-view' into 'dev'

Room details: Message history UX improvement

See merge request keanuapp/keanuapp-weblite!283

src/assets/translations/en.json

@@ -314,20 +314,15 @@
     "download_chat": "Download chat",
     "read_only_room": "Read only room",
     "read_only_room_info": "Only admins and moderators are allowed to send to the room",
-    "message_retention": "Disappearing messages",
+    "message_retention": "Message History",
-    "message_retention_info": "You can set a timeout for automatically removing messages from the room.\nNote: the server must support this feature.",
+    "message_retention_info": "Messages sent within this time frame are viewable by anyone with the link.",
     "message_retention_none": "Off",
+    "message_retention_4_week": "4 weeks",
+    "message_retention_2_week": "2 weeks",
+    "message_retention_1_week": "1 week",
+    "message_retention_1_day": "1 day",
+    "message_retention_8_hours": "8 hours",
     "message_retention_1_hour": "1 Hour",
-    "message_retention_1_day": "1 Day",
-    "message_retention_1_week": "1 Week",
-    "message_retention_30_days": "30 Days",
-    "message_retention_365_days": "365 Days",
-    "message_retention_other": "Other",
-    "message_retention_other_seconds": "{count} Seconds",
-    "message_retention_other_seconds_unit": "Seconds",
-    "message_retention_other_required": "Value can not be empty",
-    "message_retention_other_too_small": "Value must be at least {count} seconds",
-    "message_retention_other_too_large": "Value can be at most {count} seconds",
     "make_public": "Make Public",
     "make_public_warning": "warning: Full message history will be visible to new participants",
     "direct_link": "My Direct Link",

src/components/MessageRetentionDialog.vue

@@ -1,42 +1,26 @@
 <template>
-  <v-dialog persistent v-model="showDialog" v-show="room" class="ma-0 pa-0"
+  <v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0"
     :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'">
     <div class="dialog-content text-center">
       <template>
-        <h2 class="dialog-title">{{ $t("room_info.message_retention") }}</h2>
+        <h2>{{ $t("room_info.message_retention") }}</h2>
-        <div class="dialog-text">
-          {{ $t("room_info.message_retention_info") }}
-        </div>
       </template>
       <v-container fluid>
         <v-row cols="12">
           <v-col cols="12">
             <v-form v-model="isValid">
-              <v-radio-group v-model="retention" :value-comparator="compareValue">
+              <v-radio-group v-model="retention" class="my-0 py-0">
-                <v-radio active-class="radio-active" v-for="p in retentionPeriods" :key="p.text" :label="p.text"
+                <v-radio active-class="radio-active" class="flex-row-reverse mb-0" v-for="p in retentionPeriods" :key="p.text" :label="p.text"
-                  :value="p.value">
+                  :value="p.value" />
-                  <template v-slot:label v-if="p.value === ''">
-                    <div :class="{ 'other': true, 'visible': selectedOther }"><span>{{ p.text }}</span>
-                      <v-text-field :show="selectedOther" ref="otherInput" background-color="transparent" height="20px"
-                        dense outlined x-hide-details autofocus v-model="retentionOther" single-line type="number"
-                        hide-spin-buttons :rules="otherInputRules"
-                        :suffix="$t('room_info.message_retention_other_seconds_unit')"></v-text-field>
-                    </div>
-                  </template>
-                </v-radio>
               </v-radio-group>
             </v-form>
           </v-col>
         </v-row>
-        <v-row cols="12">
+        <v-row cols="12" class="justify-center mt-0">
-          <v-col cols="6">
+          <v-col cols="4" class="py-0">
-            <v-btn depressed text block class="text-button" @click="showDialog = false">{{
+            <v-btn color="primary" :disabled="!isValid" depressed block class="filled-button my-0"
-              $t("menu.cancel") }}</v-btn>
-          </v-col>
-          <v-col cols="6" align="center">
-            <v-btn color="primary" :disabled="!isValid" depressed block class="filled-button"
               @click.stop="setRetention()">{{
-                $t("menu.ok") }}</v-btn>
+                $t("menu.done") }}</v-btn>
           </v-col>
         </v-row>
       </v-container>
@@ -61,42 +45,9 @@ export default {
     return {
       showDialog: false,
       isValid: true,
-      selectedOther: false,
       retention: 0,
-      retentionOther: 60, // Set same as min below
       retentionMinValue: 60,
-      retentionMaxValue: 60 * 60 * 24 * 500,
+      retentionMaxValue: 60 * 60 * 24 * 500
-      retentionPeriods: [
-        {
-          text: this.$t("room_info.message_retention_none"),
-          value: 0
-        },
-        {
-          text: this.$t("room_info.message_retention_1_hour"),
-          value: 3600 * 1000
-        },
-        {
-          text: this.$t("room_info.message_retention_1_day"),
-          value: 3600 * 24 * 1000
-        },
-        {
-          text: this.$t("room_info.message_retention_30_days"),
-          value: 3600 * 24 * 30 * 1000
-        },
-        {
-          text: this.$t("room_info.message_retention_365_days"),
-          value: 3600 * 24 * 365 * 1000
-        },
-        {
-          text: this.$t("room_info.message_retention_other"),
-          value: ''
-        },
-      ],
-      otherInputRules: [
-        v => !!v || this.$t("room_info.message_retention_other_required"),
-        v => (v && v >= this.retentionMinValue) || this.$t("room_info.message_retention_other_too_small", { count: this.retentionMinValue }),
-        v => (v && v <= this.retentionMaxValue) || this.$t("room_info.message_retention_other_too_large", { count: this.retentionMaxValue }),
-      ]
     };
   },
   watch: {
@@ -112,22 +63,6 @@ export default {
         // Showing, reset
         this.setInitialValue();
       }
-    },
-    retention(val) {
-      if (val === '') {
-        this.selectedOther = true;
-        this.retentionOther = this.retentionMaxValue;
-        this.$nextTick(() => {
-          this.$refs.otherInput[0].focus();
-        });
-      } else {
-        // If one of the other, it's not "other"
-        for (var i = 0; i < this.retentionPeriods.length; i++) {
-          if (this.retentionPeriods[i].value === val) {
-            this.selectedOther = false;
-          }
-        }
-      }
     }
   },
   mounted() {
@@ -137,41 +72,9 @@ export default {
     setInitialValue() {
       this.isValid = true;
       this.retention = this.roomMessageRetention();
-      let found = false;
-      for (var i = 0; i < this.retentionPeriods.length; i++) {
-        if (this.retentionPeriods[i].value !== '' && this.retentionPeriods[i].value === this.retention) {
-          found = true;
-          break;
-        }
-      }
-      if (!found) {
-        this.selectedOther = true;
-      }
-    },
-    compareValue(a, b) {
-      if (this.selectedOther) {
-        if (b === '') {
-          return true;
-        }
-        return false;
-      }
-      if (a === b) return true;
-      if (b === '') {
-        // If none of the other, it's "other"
-        for (var i = 0; i < this.retentionPeriods.length; i++) {
-          if (this.retentionPeriods[i].value === a) {
-            return false;
-          }
-        }
-        return true;
-      }
-      return false;
     },
     setRetention() {
       let ms = this.retention;
-      if (this.selectedOther) {
-        ms = this.retentionOther * 1000;
-      }
       if (ms === 0 || !ms) {
         // No expiry
         this.$matrix.matrixClient.sendStateEvent(
@@ -179,15 +82,15 @@ export default {
           "m.room.retention",
           { max_lifetime: 0 }
         );
-        this.showDialog = false;
       } else if (ms >= 1000 * this.retentionMinValue && ms <= 1000 * this.retentionMaxValue) {
         this.$matrix.matrixClient.sendStateEvent(
           this.room.roomId,
           "m.room.retention",
           { max_lifetime: ms }
         );
-        this.showDialog = false;
       }
+      this.$emit('message-retention-update', ms)
+      this.showDialog = false;
     }
   },
 };
@@ -196,10 +99,6 @@ export default {
 <style lang="scss">
 @import "@/assets/css/chat.scss";
 
-.v-radio:last-of-type {
-  align-items: start !important;
-}
-
 .v-radio .other {
   display: flex;
   min-height: 80px;
@@ -216,4 +115,8 @@ export default {
     display: inline-flex;
   }
 }
+
+.v-radio.flex-row-reverse {
+  height: 48px;
+}
 </style>

src/components/RoomInfo.vue

@@ -138,6 +138,36 @@
       </v-card-text>
     </v-card>
 
+    <v-card class="account ma-3" flat>
+      <v-card-title class="h2">{{ $t("room_info.message_retention") }}</v-card-title>
+      <v-card-text v-if="canViewRetentionPolicy">
+        <v-list v-if="canChangeRetentionPolicy">
+          <v-list-item link v-on:click="showMessageRetentionDialog = true" class="px-0">
+            <v-list-item-avatar class="mr-0 pb-0 mb-0">
+              <v-img
+                contain
+                width="24"
+                height="24"
+                src="@/assets/icons/timer.svg"
+              />
+            </v-list-item-avatar>
+            <v-list-item-content class="pb-0">
+              {{ messageRetention }}
+            </v-list-item-content>
+
+            <v-list-item-action class="pb-0 mb-0">
+              <v-icon>arrow_drop_down</v-icon>
+            </v-list-item-action>
+          </v-list-item>
+          <hr />
+        </v-list>
+        <div>
+          {{ $t("room_info.message_retention_info") }}
+        </div>
+      </v-card-text>
+
+    </v-card>
+
     <v-card class="account ma-3" flat v-if="(iAmAdmin() && availableRoomTypes.length > 1) || canChangeReadOnly() || canViewRetentionPolicy">
       <v-card-title class="h2 with-right-label"><div>{{ $t("room_info.experimental_features") }}</div><div></div></v-card-title>
       <v-card-text v-if="iAmAdmin() && availableRoomTypes.length > 1">
@@ -159,14 +189,6 @@
         v-model="readOnlyRoom"
       ></v-switch>
       </v-card-text>
-      <v-card-text class="with-right-label" style="align-items:center" v-if="canViewRetentionPolicy">
-        <div>
-          <div class="option-title">{{ $t('room_info.message_retention') }}</div>
-          <div class="option-text">{{ $t('room_info.message_retention_info') }}</div>
-        </div>
-        <div class="text-right">{{ messageRetention }}</div> 
-        <v-btn v-on:click="showMessageRetentionDialog = true" v-if="canChangeRetentionPolicy" icon size="x-small"><v-icon color="black">edit</v-icon></v-btn>
-      </v-card-text>
     </v-card>
 
     <v-card class="members ma-3" flat>
@@ -273,6 +295,7 @@
       :show="showMessageRetentionDialog"
       :room="room"
       @close="showMessageRetentionDialog = false"
+      v-on:message-retention-update="onMessageRetention"
     />
 
     <RoomExport :room="room" v-if="exporting" v-on:close="exporting = false" />
@@ -420,6 +443,10 @@ export default {
   },
 
   methods: {
+    onMessageRetention(retention){
+      const retentionPeriodsFound = this.retentionPeriods.find(rp => rp.value===retention)
+      this.messageRetention = retentionPeriodsFound.text
+    },
     onEvent(event) {
       if (this.room && this.room.roomId == event.getRoomId()) {
         // For this room

src/components/roomInfoMixin.js

@@ -14,6 +14,36 @@ export default {
       editedRoomTopic: "",
       isRoomTopicEditMode: false,
       roomTopicErrorMessage: null,
+      retentionPeriods: [
+        {
+          text: this.$t("room_info.message_retention_none"),
+          value: 0
+        },
+        {
+          text: this.$t("room_info.message_retention_4_week"),
+          value: 3600 * 24 * 28 * 1000
+        },
+        {
+          text: this.$t("room_info.message_retention_2_week"),
+          value: 3600 * 24 * 14 * 1000
+        },
+        {
+          text: this.$t("room_info.message_retention_1_week"),
+          value: 3600 * 24 * 7 * 1000
+        },
+        {
+          text: this.$t("room_info.message_retention_1_day"),
+          value: 3600 * 24 * 1000
+        },
+        {
+          text: this.$t("room_info.message_retention_8_hours"),
+          value: 3600 * 8 * 1000
+        },
+        {
+          text: this.$t("room_info.message_retention_1_hour"),
+          value: 3600 * 1000
+        }
+      ]
     };
   },
   mounted() {
@@ -135,20 +165,10 @@ export default {
      */
     roomMessageRetentionDisplay(maybeEvent) {
       const retention = this.roomMessageRetention(maybeEvent);
-      if (retention == 0) {
+      const retentionPeriodsFound = this.retentionPeriods.find(rp=>rp.value===retention)
-        return this.$t("room_info.message_retention_none");
+      if(retentionPeriodsFound) {
-      } else if (retention == 60 * 60 * 1000) {
+        return retentionPeriodsFound.text
-        return this.$t("room_info.message_retention_1_hour");
-      } else if (retention == 24 * 60 * 60 * 1000) {
-        return this.$t("room_info.message_retention_1_day");
-      } else if (retention == 7 * 24 * 60 * 60 * 1000) {
-        return this.$t("room_info.message_retention_1_week");
-      } else if (retention == 30 * 24 * 60 * 60 * 1000) {
-        return this.$t("room_info.message_retention_30_days");
-      } else if (retention == 365 * 24 * 60 * 60 * 1000) {
-        return this.$t("room_info.message_retention_365_days");
       }
-      return this.$t("room_info.message_retention_other_seconds", { count: retention / 1000 });
     },
 
     roomMessageRetention(maybeEvent) {