chore(client): tweak client

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

View file

@ -1,6 +1,6 @@
<template> <template>
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')"> <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
<div ref="rootEl" class="hrmcaedk _window _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }"> <div ref="rootEl" class="hrmcaedk _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
<div class="header" @contextmenu="onContextmenu"> <div class="header" @contextmenu="onContextmenu">
<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button> <button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
<span v-else style="display: inline-block; width: 20px"></span> <span v-else style="display: inline-block; width: 20px"></span>
@ -121,6 +121,7 @@ function onContextmenu(ev: MouseEvent) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
contain: content; contain: content;
border-radius: var(--radius);
--root-margin: 24px; --root-margin: 24px;
@ -139,6 +140,9 @@ function onContextmenu(ev: MouseEvent) {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
background: var(--windowHeader);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
box-shadow: 0px 1px var(--divider); box-shadow: 0px 1px var(--divider);
> button { > button {

View file

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

View file

@ -1,7 +1,7 @@
<template> <template>
<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')"> <transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
<div v-if="showing" class="ebkgocck"> <div v-if="showing" class="ebkgocck">
<div class="body _window _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown"> <div class="body _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu"> <div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
<span class="left"> <span class="left">
<button v-for="button in buttonsLeft" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button> <button v-for="button in buttonsLeft" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
@ -14,12 +14,7 @@
<button v-if="closeButton" class="button _button" @click="close()"><i class="fas fa-times"></i></button> <button v-if="closeButton" class="button _button" @click="close()"><i class="fas fa-times"></i></button>
</span> </span>
</div> </div>
<div v-if="padding" class="body"> <div class="body">
<div class="_section">
<slot></slot>
</div>
</div>
<div v-else class="body">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
@ -67,11 +62,6 @@ export default defineComponent({
}, },
props: { props: {
padding: {
type: Boolean,
required: false,
default: false,
},
initialWidth: { initialWidth: {
type: Number, type: Number,
required: false, required: false,
@ -399,7 +389,8 @@ export default defineComponent({
flex-direction: column; flex-direction: column;
contain: content; contain: content;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: var(--radius);
> .header { > .header {
--height: 45px; --height: 45px;
@ -414,6 +405,9 @@ export default defineComponent({
flex-shrink: 0; flex-shrink: 0;
user-select: none; user-select: none;
height: var(--height); height: var(--height);
background: var(--windowHeader);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
border-bottom: solid 1px var(--divider); border-bottom: solid 1px var(--divider);
font-size: 95%; font-size: 95%;
@ -454,6 +448,7 @@ export default defineComponent({
> .body { > .body {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
background: var(--panel);
} }
} }

View file

@ -338,14 +338,6 @@ hr {
} }
} }
._window {
background: var(--windowHeader);
border-radius: var(--radius);
contain: content;
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
}
._popup { ._popup {
background: var(--popup); background: var(--popup);
border-radius: var(--radius); border-radius: var(--radius);