mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-01 15:45:58 +09:00
Code

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/client/src/components/modal-page-window.vue
View File

@ -1,6 +1,6 @@
<template>
<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">
<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>
@ -121,6 +121,7 @@ function onContextmenu(ev: MouseEvent) {
display: flex;
flex-direction: column;
contain: content;
border-radius: var(--radius);
--root-margin: 24px;
@ -139,6 +140,9 @@ function onContextmenu(ev: MouseEvent) {
white-space: nowrap;
overflow: hidden;
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);
> button {

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>

21
packages/client/src/components/ui/window.vue
View File

@ -1,7 +1,7 @@
<template>
<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
<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">
<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>
@ -14,12 +14,7 @@
<button v-if="closeButton" class="button _button" @click="close()"><i class="fas fa-times"></i></button>
</span>
</div>
<div v-if="padding" class="body">
<div class="_section">
<slot></slot>
</div>
</div>
<div v-else class="body">
<div class="body">
<slot></slot>
</div>
</div>
@ -67,11 +62,6 @@ export default defineComponent({
},
props: {
padding: {
type: Boolean,
required: false,
default: false,
},
initialWidth: {
type: Number,
required: false,
@ -399,7 +389,8 @@ export default defineComponent({
flex-direction: column;
contain: content;
width: 100%;
height: 100%;
height: 100%;
border-radius: var(--radius);
> .header {
--height: 45px;
@ -414,6 +405,9 @@ export default defineComponent({
flex-shrink: 0;
user-select: none;
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);
font-size: 95%;
@ -454,6 +448,7 @@ export default defineComponent({
> .body {
flex: 1;
overflow: auto;
background: var(--panel);
}
}

8
packages/client/src/style.scss
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 {
background: var(--popup);
border-radius: var(--radius);