mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-01 07:35:57 +09:00
Code

refactor(client): use css modules

Browse Source
This commit is contained in:
syuilo 2023-01-15 11:30:40 +09:00
parent daddec8362
commit 7738a36014
1 changed files with 18 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/frontend/src/ui/_common_/stream-indicator.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" @click="resetDisconnected"> <div v-if="true || hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" :class="$style.root" class="_panel _shadow" @click="resetDisconnected">
<div>{{ i18n.ts.disconnectedFromServer }}</div> <div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.disconnectedFromServer }}</div>
<div class="command"> <div :class="$style.command" class="_buttons">
<button class="_textButton" @click="reload">{{ i18n.ts.reload }}</button> <MkButton :class="$style.commandButton" small primary @click="reload">{{ i18n.ts.reload }}</MkButton>
<button class="_textButton">{{ i18n.ts.doNothing }}</button> <MkButton :class="$style.commandButton" small>{{ i18n.ts.doNothing }}</MkButton>
</div> </div>
</div> </div>
</template> </template>
@ -12,6 +12,10 @@
import { onUnmounted } from 'vue'; import { onUnmounted } from 'vue';
import { stream } from '@/stream'; import { stream } from '@/stream';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os';
const zIndex = os.claimZIndex('high');
let hasDisconnected = $ref(false); let hasDisconnected = $ref(false);
@ -34,28 +38,22 @@ onUnmounted(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.nsbbhtug { .root {
position: fixed; position: fixed;
z-index: 16385; z-index: v-bind(zIndex);
bottom: calc(var(--minBottomSpacing) + var(--margin)); bottom: calc(var(--minBottomSpacing) + var(--margin));
right: var(--margin); right: var(--margin);
margin: 0; margin: 0;
padding: 6px 12px; padding: 12px;
font-size: 0.9em; font-size: 0.9em;
color: #fff;
background: #000;
opacity: 0.8;
border-radius: 4px;
max-width: 320px; max-width: 320px;
}
> .command { .command {
display: flex; margin-top: 8px;
justify-content: space-around; }
> button { .commandButton {
padding: 0.7em;
}
}
} }
</style> </style>