1453a0f5cf
* enhance: apply same safe area processing to the tab bar * fix: remove unnecessary bottom space on messaging room * enhance bottom spacing * fix size of `minBottomSpacing`
62 lines
1.2 KiB
Vue
62 lines
1.2 KiB
Vue
<template>
|
|
<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" @click="resetDisconnected">
|
|
<div>{{ i18n.ts.disconnectedFromServer }}</div>
|
|
<div class="command">
|
|
<button class="_textButton" @click="reload">{{ i18n.ts.reload }}</button>
|
|
<button class="_textButton">{{ i18n.ts.doNothing }}</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onUnmounted } from 'vue';
|
|
import { stream } from '@/stream';
|
|
import { i18n } from '@/i18n';
|
|
|
|
let hasDisconnected = $ref(false);
|
|
|
|
function onDisconnected() {
|
|
hasDisconnected = true;
|
|
}
|
|
|
|
function resetDisconnected() {
|
|
hasDisconnected = false;
|
|
}
|
|
|
|
function reload() {
|
|
location.reload();
|
|
}
|
|
|
|
stream.on('_disconnected_', onDisconnected);
|
|
|
|
onUnmounted(() => {
|
|
stream.off('_disconnected_', onDisconnected);
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nsbbhtug {
|
|
position: fixed;
|
|
z-index: 16385;
|
|
bottom: calc(var(--minBottomSpacing) + var(--margin));
|
|
right: var(--margin);
|
|
margin: 0;
|
|
padding: 6px 12px;
|
|
font-size: 0.9em;
|
|
color: #fff;
|
|
background: #000;
|
|
opacity: 0.8;
|
|
border-radius: 4px;
|
|
max-width: 320px;
|
|
|
|
> .command {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
> button {
|
|
padding: 0.7em;
|
|
}
|
|
}
|
|
}
|
|
</style>
|