Noah Petherbridge
9b54fec059
Make some improvements to the mobile web layout: * The Who List button now will always be on the top right corner of conversation threads, including when you are in a DM. This makes navigating easier as you don't need to leave your DM and return to a public channel before being able to access the Who List. * In the top panel for DM threads, remove the Profile and Close buttons. Instead, the Close button will be on the DM itself on the Channels list. * When you are in a DM thread, and your chat partner is on camera, their camera button will appear in the title bar for easy access and visibility. * In a DM thread, clicking the username in the chat title bar will open their profile card.
90 lines
2.5 KiB
Vue
90 lines
2.5 KiB
Vue
<script>
|
|
export default {
|
|
props: {
|
|
visible: Boolean,
|
|
isConfirm: Boolean,
|
|
title: String,
|
|
icon: String,
|
|
message: String,
|
|
},
|
|
data() {
|
|
return {
|
|
username: '',
|
|
};
|
|
},
|
|
mounted() {
|
|
window.addEventListener('keyup', (e) => {
|
|
if (!this.visible) return;
|
|
|
|
if (e.key === 'Enter') {
|
|
return this.callback();
|
|
}
|
|
|
|
if (e.key == 'Escape') {
|
|
return this.close();
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
callback() {
|
|
this.$emit('close');
|
|
this.$emit('callback');
|
|
},
|
|
close() {
|
|
this.$emit('close');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="modal" :class="{ 'is-active': visible }">
|
|
<div class="modal-background"></div>
|
|
|
|
<div class="modal-content">
|
|
<div class="card">
|
|
<header class="card-header has-background-info">
|
|
<p class="card-header-title">
|
|
<i v-if="icon" :class="icon" class="mr-2"></i>
|
|
{{ title }}
|
|
</p>
|
|
<button class="delete mr-3 mt-3" aria-label="close" @click.prevent="close"></button>
|
|
</header>
|
|
|
|
<div class="card-content">
|
|
<form @submit.prevent="callback()">
|
|
|
|
<p class="literal mb-4">{{ message }}</p>
|
|
|
|
<div class="columns is-centered is-mobile">
|
|
<div class="column is-narrow">
|
|
<button type="submit"
|
|
class="button is-success px-5">
|
|
OK
|
|
</button>
|
|
<button v-if="isConfirm"
|
|
type="button"
|
|
class="button is-link ml-3 px-5"
|
|
@click="close">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.modal {
|
|
/* a high priority modal over other modals. note: bulma's default z-index is 40 for modals */
|
|
z-index: 42;
|
|
}
|
|
|
|
.literal {
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|