Unify room welcome header handling
Also, add the "WelcomeHeaderChannel" component
This commit is contained in:
N-Pex
parent
0dc449feaa
commit
e28c58d8ba
8 changed files with 134 additions and 56 deletions
85
src/components/welcome_headers/WelcomeHeaderChannel.vue
Normal file
85
src/components/welcome_headers/WelcomeHeaderChannel.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div class="created-room-welcome-header">
|
||||
<div class="mt-2" v-if="roomJoinRule == 'public'">
|
||||
<i18n path="room_welcome.join_channel" tag="span">
|
||||
<template v-slot:link>
|
||||
<div style="position:relative;display:inline-block">
|
||||
<a @click.stop="copyPublicLink" :href="publicRoomLink" class="text-break">{{ publicRoomLink }}</a>
|
||||
<v-btn v-if="publicRoomLinkCopied" id="btn-copy-room-link" color="#444444" depressed
|
||||
style="position:absolute;left:0;top:0" class="filled-button link-copied-in-place">{{
|
||||
$t("room_info.link_copied") }}</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</i18n>
|
||||
</div>
|
||||
<div class="mt-2" v-else-if="roomJoinRule == 'invite'">
|
||||
{{ $t("room_welcome.join_invite") }}
|
||||
</div>
|
||||
<div class="mt-2" v-if="roomMessageRetention() > 0">
|
||||
<i18n path="room_welcome.info_retention" tag="span">
|
||||
<template v-slot:time>
|
||||
<b>{{ messageRetentionDisplay }}</b>
|
||||
</template>
|
||||
</i18n>
|
||||
</div>
|
||||
<div class="mt-2" v-if="roomMessageRetention() > 0">
|
||||
<a href="#" text @click.prevent="showMessageRetentionDialog = true">
|
||||
{{ $t("room_welcome.change") }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<v-btn id="btn-got-it" text @click.stop="$emit('close')" class="text-transform-0">
|
||||
{{ $t("room_welcome.got_it") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<MessageRetentionDialog :show="showMessageRetentionDialog" :room="room" @close="showMessageRetentionDialog = false"
|
||||
v-on:message-retention-update="onMessageRetention" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MessageRetentionDialog from '../MessageRetentionDialog.vue';
|
||||
import roomInfoMixin from "../roomInfoMixin";
|
||||
|
||||
export default {
|
||||
name: "WelcomeHeaderChannel",
|
||||
mixins: [roomInfoMixin],
|
||||
components: {
|
||||
MessageRetentionDialog
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
publicRoomLinkCopied: false,
|
||||
showMessageRetentionDialog: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onMessageRetention(ignoredretention) {
|
||||
this.updateMessageRetention();
|
||||
},
|
||||
copyPublicLink() {
|
||||
const self = this;
|
||||
this.$copyText(this.publicRoomLink).then(
|
||||
function (ignored) {
|
||||
// Success!
|
||||
self.publicRoomLinkCopied = true;
|
||||
setInterval(() => {
|
||||
// Hide again
|
||||
self.publicRoomLinkCopied = false;
|
||||
}, 3000);
|
||||
},
|
||||
function (e) {
|
||||
console.log(e);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
</style>
|
||||
65
src/components/welcome_headers/WelcomeHeaderDirectChat.vue
Normal file
65
src/components/welcome_headers/WelcomeHeaderDirectChat.vue
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<div style="text-align: center;">
|
||||
<div class="created-room-welcome-header">
|
||||
<div class="mt-2" v-if="privateParty">{{ $t("room_welcome.direct_info", { you: $matrix.currentUserDisplayName, user: privateParty.name }) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import roomInfoMixin from "../roomInfoMixin";
|
||||
|
||||
export default {
|
||||
name: "WelcomeHeaderDirectChat",
|
||||
mixins: [roomInfoMixin],
|
||||
computed: {
|
||||
roomHistoryDescription() {
|
||||
const visibility = this.$matrix.getRoomHistoryVisibility(this.room);
|
||||
switch (visibility) {
|
||||
case "world_readable":
|
||||
return this.$t("room_welcome.room_history_is", {
|
||||
type: this.$t("message.room_history_world_readable"),
|
||||
});
|
||||
case "shared":
|
||||
return this.$t("room_welcome.room_history_is", {
|
||||
type: this.$t("message.room_history_shared"),
|
||||
});
|
||||
case "invited":
|
||||
return this.$t("room_welcome.room_history_is", {
|
||||
type: this.$t("message.room_history_invited"),
|
||||
});
|
||||
case "joined":
|
||||
return this.$t("room_welcome.room_history_joined");
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
publicRoomLinkCopied: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
copyPublicLink() {
|
||||
const self = this;
|
||||
this.$copyText(this.publicRoomLink).then(
|
||||
function (ignored) {
|
||||
// Success!
|
||||
self.publicRoomLinkCopied = true;
|
||||
setInterval(() => {
|
||||
// Hide again
|
||||
self.publicRoomLinkCopied = false;
|
||||
}, 3000);
|
||||
},
|
||||
function (e) {
|
||||
console.log(e);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
</style>
|
||||
96
src/components/welcome_headers/WelcomeHeaderRoom.vue
Normal file
96
src/components/welcome_headers/WelcomeHeaderRoom.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<div class="created-room-welcome-header">
|
||||
<div>{{ $t("room_welcome.info") }}</div>
|
||||
<div class="mt-2" v-if="roomJoinRule == 'public'">
|
||||
<i18n path="room_welcome.join_public" tag="span">
|
||||
<template v-slot:link>
|
||||
<div style="position:relative;display:inline-block">
|
||||
<a @click.stop="copyPublicLink" :href="publicRoomLink" class="text-break">{{ publicRoomLink }}</a>
|
||||
<v-btn
|
||||
v-if="publicRoomLinkCopied"
|
||||
id="btn-copy-room-link"
|
||||
color="#444444"
|
||||
depressed
|
||||
style="position:absolute;left:0;top:0"
|
||||
class="filled-button link-copied-in-place"
|
||||
>{{ $t("room_info.link_copied") }}</v-btn
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</i18n>
|
||||
</div>
|
||||
<div class="mt-2" v-else-if="roomJoinRule == 'invite'">
|
||||
{{ $t("room_welcome.join_invite") }}
|
||||
</div>
|
||||
<div class="mt-2">{{ $t("room_welcome.info_permissions") }}</div>
|
||||
<div class="mt-2" v-if="roomIsEncrypted">
|
||||
{{ $t("room_welcome.encrypted") }}
|
||||
</div>
|
||||
<div class="mt-2" v-if="roomHistoryDescription">
|
||||
{{ roomHistoryDescription }}
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<v-btn id="btn-got-it" text @click.stop="$emit('close')" class="text-transform-0">
|
||||
{{ $t("room_welcome.got_it") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import roomInfoMixin from "../roomInfoMixin";
|
||||
|
||||
export default {
|
||||
name: "WelcomeHeaderRoom",
|
||||
mixins: [roomInfoMixin],
|
||||
computed: {
|
||||
roomHistoryDescription() {
|
||||
const visibility = this.$matrix.getRoomHistoryVisibility(this.room);
|
||||
switch (visibility) {
|
||||
case "world_readable":
|
||||
return this.$t("room_welcome.room_history_is", {
|
||||
type: this.$t("message.room_history_world_readable"),
|
||||
});
|
||||
case "shared":
|
||||
return this.$t("room_welcome.room_history_is", {
|
||||
type: this.$t("message.room_history_shared"),
|
||||
});
|
||||
case "invited":
|
||||
return this.$t("room_welcome.room_history_is", {
|
||||
type: this.$t("message.room_history_invited"),
|
||||
});
|
||||
case "joined":
|
||||
return this.$t("room_welcome.room_history_joined");
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
publicRoomLinkCopied: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
copyPublicLink() {
|
||||
const self = this;
|
||||
this.$copyText(this.publicRoomLink).then(
|
||||
function (ignored) {
|
||||
// Success!
|
||||
self.publicRoomLinkCopied = true;
|
||||
setInterval(() => {
|
||||
// Hide again
|
||||
self.publicRoomLinkCopied = false;
|
||||
}, 3000);
|
||||
},
|
||||
function (e) {
|
||||
console.log(e);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue