graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 08:13:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-10 09:53:01 +09:00
parent 7823ba494f
commit e4179336e4
1 changed files with 74 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
packages/frontend/src/ui/deck/column.vue
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,21 +300,19 @@ 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;
> button {
color: var(--fg); 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;
@ -337,22 +332,19 @@ function onDrop(ev) {
&.indicated { &.indicated {
box-shadow: 0 3px 0 0 var(--accent); box-shadow: 0 3px 0 0 var(--accent);
} }
}
> .header { .title {
display: inline-block; display: inline-block;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
}
> span:only-of-type {
width: 100%; width: 100%;
} }
> .toggleActive, .toggleActive,
> .action > ::v-deep(*), .menu {
> .menu {
z-index: 1; z-index: 1;
width: var(--deckColumnHeaderHeight); width: var(--deckColumnHeaderHeight);
line-height: var(--deckColumnHeaderHeight); line-height: var(--deckColumnHeaderHeight);
@ -365,27 +357,18 @@ function onDrop(ev) {
&:active { &:active {
color: var(--faceTextButtonActive); color: var(--faceTextButtonActive);
} }
} }
> .toggleActive, > .action { .toggleActive {
margin-left: -16px; margin-left: -16px;
} }
> .action { .menu {
z-index: 1;
}
> .action:empty {
display: none;
}
> .menu {
margin-left: auto; margin-left: auto;
margin-right: -16px; margin-right: -16px;
} }
}
> div { .body {
height: calc(100% - var(--deckColumnHeaderHeight)); height: calc(100% - var(--deckColumnHeaderHeight));
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; // Safari does not supports clip overflow-x: hidden; // Safari does not supports clip
@ -394,6 +377,5 @@ function onDrop(ev) {
box-sizing: border-box; box-sizing: border-box;
container-type: inline-size; container-type: inline-size;
background-color: var(--bg); background-color: var(--bg);
}
} }
</style> </style>