misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

chore(client): tweak client

Browse source
This commit is contained in:
syuilo 2022-06-26 19:41:21 +09:00
parent f834d6a813
commit 0ec266abf7
4 changed files with 20 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/client/src/components/ui/modal-window.vue
View file

@ -1,6 +1,6 @@
<template>
<MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
<div ref="rootEl" class="ebkgoccj _window _narrow_" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
<div ref="rootEl" class="ebkgoccj _narrow_" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
<div ref="headerEl" class="header">
<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="fas fa-times"></i></button>
<span class="title">
@ -9,12 +9,7 @@
<button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="fas fa-times"></i></button>
<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="fas fa-check"></i></button>
</div>
<div v-if="padding" class="body">
<div class="_section">
<slot :width="bodyWidth" :height="bodyHeight"></slot>
</div>
</div>
<div v-else class="body">
<div class="body">
<slot :width="bodyWidth" :height="bodyHeight"></slot>
</div>
</div>
@ -28,14 +23,12 @@ import MkModal from './modal.vue';
const props = withDefaults(defineProps<{
withOkButton: boolean;
okButtonDisabled: boolean;
padding: boolean;
width: number;
height: number | null;
scroll: boolean;
}>(), {
withOkButton: false,
okButtonDisabled: false,
padding: false,
width: 400,
height: null,
scroll: true,
@ -96,6 +89,7 @@ defineExpose({
display: flex;
flex-direction: column;
contain: content;
border-radius: var(--radius);
--root-margin: 24px;
@ -108,6 +102,9 @@ defineExpose({
$height-narrow: 42px;
display: flex;
flex-shrink: 0;
background: var(--windowHeader);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
box-shadow: 0px 1px var(--divider);
> button {
@ -143,6 +140,7 @@ defineExpose({
> .body {
overflow: auto;
background: var(--panel);
}
}
</style>