refactor(client): use css modules

This commit is contained in:
syuilo 2023-01-10 09:53:01 +09:00
parent 7823ba494f
commit e4179336e4

View file

@ -1,31 +1,28 @@
<template> <template>
<!-- sectionを利用しているのはdeck.vue側でcolumnに対してfirst-of-typeを効かせるため --> <!-- sectionを利用しているのはdeck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
<section <section
v-hotkey="keymap" class="dnpfarvg" v-hotkey="keymap"
:class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }" :class="[$style.root, { [$style.paged]: isMainColumn, [$style.naked]: naked, [$style.active]: active, [$style.isStacked]: isStacked, [$style.draghover]: draghover, [$style.dragging]: dragging, [$style.dropready]: dropready }]"
@dragover.prevent.stop="onDragover" @dragover.prevent.stop="onDragover"
@dragleave="onDragleave" @dragleave="onDragleave"
@drop.prevent.stop="onDrop" @drop.prevent.stop="onDrop"
> >
<header <header
:class="{ indicated }" :class="[$style.header, { [$style.indicated]: indicated }]"
draggable="true" draggable="true"
@click="goTop" @click="goTop"
@dragstart="onDragstart" @dragstart="onDragstart"
@dragend="onDragend" @dragend="onDragend"
@contextmenu.prevent.stop="onContextmenu" @contextmenu.prevent.stop="onContextmenu"
> >
<button v-if="isStacked && !isMainColumn" class="toggleActive _button" @click="toggleActive"> <button v-if="isStacked && !isMainColumn" :class="$style.toggleActive" class="_button" @click="toggleActive">
<template v-if="active"><i class="ti ti-chevron-up"></i></template> <template v-if="active"><i class="ti ti-chevron-up"></i></template>
<template v-else><i class="ti ti-chevron-down"></i></template> <template v-else><i class="ti ti-chevron-down"></i></template>
</button> </button>
<div class="action"> <span :class="$style.title"><slot name="header"></slot></span>
<slot name="action"></slot> <button v-tooltip="i18n.ts.settings" :class="$style.menu" class="_button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
</div>
<span class="header"><slot name="header"></slot></span>
<button v-tooltip="i18n.ts.settings" class="menu _button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
</header> </header>
<div v-show="active" ref="body"> <div v-show="active" ref="body" :class="$style.body">
<slot></slot> <slot></slot>
</div> </div>
</section> </section>
@ -245,8 +242,8 @@ function onDrop(ev) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.dnpfarvg { .root {
--root-margin: 10px; --root-margin: 10px;
--deckColumnHeaderHeight: 40px; --deckColumnHeaderHeight: 40px;
@ -293,7 +290,7 @@ function onDrop(ev) {
flex-basis: var(--deckColumnHeaderHeight); flex-basis: var(--deckColumnHeaderHeight);
min-height: var(--deckColumnHeaderHeight); min-height: var(--deckColumnHeaderHeight);
> header.indicated { > .header.indicated {
box-shadow: 4px 0px var(--accent) inset; box-shadow: 4px 0px var(--accent) inset;
} }
} }
@ -303,97 +300,82 @@ function onDrop(ev) {
-webkit-backdrop-filter: var(--blur, blur(10px)); -webkit-backdrop-filter: var(--blur, blur(10px));
backdrop-filter: var(--blur, blur(10px)); backdrop-filter: var(--blur, blur(10px));
> header { > .header {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
color: var(--fg);
> button {
color: var(--fg);
}
} }
} }
&.paged { &.paged {
background: var(--bg) !important; background: var(--bg) !important;
} }
}
> header { .header {
position: relative; position: relative;
display: flex; display: flex;
z-index: 2; z-index: 2;
line-height: var(--deckColumnHeaderHeight); line-height: var(--deckColumnHeaderHeight);
height: var(--deckColumnHeaderHeight); height: var(--deckColumnHeaderHeight);
padding: 0 16px; padding: 0 16px;
font-size: 0.9em; font-size: 0.9em;
color: var(--panelHeaderFg); color: var(--panelHeaderFg);
background: var(--panelHeaderBg); background: var(--panelHeaderBg);
box-shadow: 0 1px 0 0 var(--panelHeaderDivider); box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
cursor: pointer; cursor: pointer;
&, * { &, * {
user-select: none; user-select: none;
}
&.indicated {
box-shadow: 0 3px 0 0 var(--accent);
}
> .header {
display: inline-block;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
> span:only-of-type {
width: 100%;
}
> .toggleActive,
> .action > ::v-deep(*),
> .menu {
z-index: 1;
width: var(--deckColumnHeaderHeight);
line-height: var(--deckColumnHeaderHeight);
color: var(--faceTextButton);
&:hover {
color: var(--faceTextButtonHover);
}
&:active {
color: var(--faceTextButtonActive);
}
}
> .toggleActive, > .action {
margin-left: -16px;
}
> .action {
z-index: 1;
}
> .action:empty {
display: none;
}
> .menu {
margin-left: auto;
margin-right: -16px;
}
} }
> div { &.indicated {
height: calc(100% - var(--deckColumnHeaderHeight)); box-shadow: 0 3px 0 0 var(--accent);
overflow-y: auto;
overflow-x: hidden; // Safari does not supports clip
overflow-x: clip;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
container-type: inline-size;
background-color: var(--bg);
} }
} }
.title {
display: inline-block;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.toggleActive,
.menu {
z-index: 1;
width: var(--deckColumnHeaderHeight);
line-height: var(--deckColumnHeaderHeight);
color: var(--faceTextButton);
&:hover {
color: var(--faceTextButtonHover);
}
&:active {
color: var(--faceTextButtonActive);
}
}
.toggleActive {
margin-left: -16px;
}
.menu {
margin-left: auto;
margin-right: -16px;
}
.body {
height: calc(100% - var(--deckColumnHeaderHeight));
overflow-y: auto;
overflow-x: hidden; // Safari does not supports clip
overflow-x: clip;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
container-type: inline-size;
background-color: var(--bg);
}
</style> </style>