Merge branch '584-update-profile-view' into 'dev'
Room details: Message history UX improvement See merge request keanuapp/keanuapp-weblite!283
This commit is contained in:
N Pex
commit
eec0df7c97
4 changed files with 91 additions and 146 deletions
|
|
@ -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_info": "You can set a timeout for automatically removing messages from the room.\nNote: the server must support this feature.",
|
||||
"message_retention": "Message History",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<div class="dialog-text">
|
||||
{{ $t("room_info.message_retention_info") }}
|
||||
</div>
|
||||
<h2>{{ $t("room_info.message_retention") }}</h2>
|
||||
</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 active-class="radio-active" v-for="p in retentionPeriods" :key="p.text" :label="p.text"
|
||||
: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-model="retention" class="my-0 py-0">
|
||||
<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" />
|
||||
</v-radio-group>
|
||||
</v-form>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row cols="12">
|
||||
<v-col cols="6">
|
||||
<v-btn depressed text block class="text-button" @click="showDialog = false">{{
|
||||
$t("menu.cancel") }}</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="6" align="center">
|
||||
<v-btn color="primary" :disabled="!isValid" depressed block class="filled-button"
|
||||
<v-row cols="12" class="justify-center mt-0">
|
||||
<v-col cols="4" class="py-0">
|
||||
<v-btn color="primary" :disabled="!isValid" depressed block class="filled-button my-0"
|
||||
@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,
|
||||
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 }),
|
||||
]
|
||||
retentionMaxValue: 60 * 60 * 24 * 500
|
||||
};
|
||||
},
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
return this.$t("room_info.message_retention_none");
|
||||
} else if (retention == 60 * 60 * 1000) {
|
||||
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");
|
||||
const retentionPeriodsFound = this.retentionPeriods.find(rp=>rp.value===retention)
|
||||
if(retentionPeriodsFound) {
|
||||
return retentionPeriodsFound.text
|
||||
}
|
||||
return this.$t("room_info.message_retention_other_seconds", { count: retention / 1000 });
|
||||
},
|
||||
|
||||
roomMessageRetention(maybeEvent) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue