monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-14 11:39:35 +09:00
parent ce5506f331
commit 5e02f0d325
1 changed files with 181 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

193
packages/frontend/src/components/MkWindow.vue
View file

@ -1,34 +1,41 @@
<template> <template>
<Transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')"> <Transition
<div v-if="showing" ref="rootEl" class="ebkgocck" :class="{ maximized }"> :enter-active-class="$store.state.animation ? $style.transition_window_enterActive : ''"
<div class="body _shadow" @mousedown="onBodyMousedown" @keydown="onKeydown"> :leave-active-class="$store.state.animation ? $style.transition_window_leaveActive : ''"
<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu"> :enter-from-class="$store.state.animation ? $style.transition_window_enterFrom : ''"
<span class="left"> :leave-to-class="$store.state.animation ? $style.transition_window_leaveTo : ''"
<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> appear
@after-leave="$emit('closed')"
>
<div v-if="showing" ref="rootEl" :class="[$style.root, { [$style.maximized]: maximized }]">
<div :class="$style.body" class="_shadow" @mousedown="onBodyMousedown" @keydown="onKeydown">
<div :class="[$style.header, { [$style.mini]: mini }]" @contextmenu.prevent.stop="onContextmenu">
<span :class="$style.headerLeft">
<button v-for="button in buttonsLeft" v-tooltip="button.title" class="_button" :class="[$style.headerButton, { [$style.highlighted]: button.highlighted }]" @click="button.onClick"><i :class="button.icon"></i></button>
</span> </span>
<span class="title" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown"> <span :class="$style.headerTitle" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown">
<slot name="header"></slot> <slot name="header"></slot>
</span> </span>
<span class="right"> <span :class="$style.headerRight">
<button v-for="button in buttonsRight" 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 buttonsRight" v-tooltip="button.title" class="_button" :class="[$style.headerButton, { [$style.highlighted]: button.highlighted }]" @click="button.onClick"><i :class="button.icon"></i></button>
<button v-if="canResize && maximized" v-tooltip="i18n.ts.windowRestore" class="button _button" @click="unMaximize()"><i class="ti ti-picture-in-picture"></i></button> <button v-if="canResize && maximized" v-tooltip="i18n.ts.windowRestore" class="_button" :class="$style.headerButton" @click="unMaximize()"><i class="ti ti-picture-in-picture"></i></button>
<button v-else-if="canResize && !maximized" v-tooltip="i18n.ts.windowMaximize" class="button _button" @click="maximize()"><i class="ti ti-rectangle"></i></button> <button v-else-if="canResize && !maximized" v-tooltip="i18n.ts.windowMaximize" class="_button" :class="$style.headerButton" @click="maximize()"><i class="ti ti-rectangle"></i></button>
<button v-if="closeButton" v-tooltip="i18n.ts.close" class="button _button" @click="close()"><i class="ti ti-x"></i></button> <button v-if="closeButton" v-tooltip="i18n.ts.close" class="_button" :class="$style.headerButton" @click="close()"><i class="ti ti-x"></i></button>
</span> </span>
</div> </div>
<div class="body"> <div :class="$style.content">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
<template v-if="canResize"> <template v-if="canResize">
<div class="handle top" @mousedown.prevent="onTopHandleMousedown"></div> <div :class="$style.handleTop" @mousedown.prevent="onTopHandleMousedown"></div>
<div class="handle right" @mousedown.prevent="onRightHandleMousedown"></div> <div :class="$style.handleRight" @mousedown.prevent="onRightHandleMousedown"></div>
<div class="handle bottom" @mousedown.prevent="onBottomHandleMousedown"></div> <div :class="$style.handleBottom" @mousedown.prevent="onBottomHandleMousedown"></div>
<div class="handle left" @mousedown.prevent="onLeftHandleMousedown"></div> <div :class="$style.handleLeft" @mousedown.prevent="onLeftHandleMousedown"></div>
<div class="handle top-left" @mousedown.prevent="onTopLeftHandleMousedown"></div> <div :class="$style.handleTopLeft" @mousedown.prevent="onTopLeftHandleMousedown"></div>
<div class="handle top-right" @mousedown.prevent="onTopRightHandleMousedown"></div> <div :class="$style.handleTopRight" @mousedown.prevent="onTopRightHandleMousedown"></div>
<div class="handle bottom-right" @mousedown.prevent="onBottomRightHandleMousedown"></div> <div :class="$style.handleBottomRight" @mousedown.prevent="onBottomRightHandleMousedown"></div>
<div class="handle bottom-left" @mousedown.prevent="onBottomLeftHandleMousedown"></div> <div :class="$style.handleBottomLeft" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
</template> </template>
</div> </div>
</Transition> </Transition>
@ -407,22 +414,31 @@ defineExpose({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.window-enter-active, .window-leave-active { .transition_window_enterActive,
.transition_window_leaveActive {
transition: opacity 0.2s, transform 0.2s !important; transition: opacity 0.2s, transform 0.2s !important;
} }
.window-enter-from, .window-leave-to { .transition_window_enterFrom,
.transition_window_leaveTo {
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transform: scale(0.9); transform: scale(0.9);
} }
.ebkgocck { .root {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
&.maximized {
> .body { > .body {
border-radius: 0;
}
}
}
.body {
overflow: clip; overflow: clip;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -430,8 +446,9 @@ defineExpose({
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: var(--radius); border-radius: var(--radius);
}
> .header { .header {
--height: 39px; --height: 39px;
&.mini { &.mini {
@ -450,9 +467,9 @@ defineExpose({
//border-bottom: solid 1px var(--divider); //border-bottom: solid 1px var(--divider);
font-size: 95%; font-size: 95%;
font-weight: bold; font-weight: bold;
}
> .left, > .right { .headerButton {
> .button {
height: var(--height); height: var(--height);
width: var(--height); width: var(--height);
@ -463,18 +480,17 @@ defineExpose({
&.highlighted { &.highlighted {
color: var(--accent); color: var(--accent);
} }
} }
}
> .left { .headerLeft {
margin-right: 16px; margin-right: 16px;
} }
> .right { .headerRight {
min-width: 16px; min-width: 16px;
} }
> .title { .headerTitle {
flex: 1; flex: 1;
position: relative; position: relative;
line-height: var(--height); line-height: var(--height);
@ -482,91 +498,90 @@ defineExpose({
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
cursor: move; cursor: move;
} }
}
> .body { .content {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
background: var(--panel); background: var(--panel);
container-type: inline-size; container-type: inline-size;
} }
}
> .handle { $handleSize: 8px;
$size: 8px;
.handle {
position: absolute; position: absolute;
}
&.top { .handleTop {
top: -($size); composes: handle;
top: -($handleSize);
left: 0; left: 0;
width: 100%; width: 100%;
height: $size; height: $handleSize;
cursor: ns-resize; cursor: ns-resize;
} }
&.right { .handleRight {
composes: handle;
top: 0; top: 0;
right: -($size); right: -($handleSize);
width: $size; width: $handleSize;
height: 100%; height: 100%;
cursor: ew-resize; cursor: ew-resize;
} }
&.bottom { .handleBottom {
bottom: -($size); composes: handle;
bottom: -($handleSize);
left: 0; left: 0;
width: 100%; width: 100%;
height: $size; height: $handleSize;
cursor: ns-resize; cursor: ns-resize;
} }
&.left { .handleLeft {
composes: handle;
top: 0; top: 0;
left: -($size); left: -($handleSize);
width: $size; width: $handleSize;
height: 100%; height: 100%;
cursor: ew-resize; cursor: ew-resize;
} }
&.top-left { .handleTopLeft {
top: -($size); composes: handle;
left: -($size); top: -($handleSize);
width: $size * 2; left: -($handleSize);
height: $size * 2; width: $handleSize * 2;
height: $handleSize * 2;
cursor: nwse-resize; cursor: nwse-resize;
} }
&.top-right { .handleTopRight {
top: -($size); composes: handle;
right: -($size); top: -($handleSize);
width: $size * 2; right: -($handleSize);
height: $size * 2; width: $handleSize * 2;
height: $handleSize * 2;
cursor: nesw-resize; cursor: nesw-resize;
} }
&.bottom-right { .handleBottomRight {
bottom: -($size); composes: handle;
right: -($size); bottom: -($handleSize);
width: $size * 2; right: -($handleSize);
height: $size * 2; width: $handleSize * 2;
height: $handleSize * 2;
cursor: nwse-resize; cursor: nwse-resize;
} }
&.bottom-left { .handleBottomLeft {
bottom: -($size); composes: handle;
left: -($size); bottom: -($handleSize);
width: $size * 2; left: -($handleSize);
height: $size * 2; width: $handleSize * 2;
height: $handleSize * 2;
cursor: nesw-resize; cursor: nesw-resize;
}
}
&.maximized {
> .body {
border-radius: 0;
}
}
} }
</style> </style>