oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

refactor

Browse source
This commit is contained in:
syuilo 2023-05-29 20:05:46 +09:00
parent 19b96ff650
commit 101e8d7adb
2 changed files with 128 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

86
packages/frontend/src/components/MkDrive.folder.vue
View file

@ -1,7 +1,6 @@
<template>
<div
class="rghtznwe"
:class="{ draghover }"
:class="[$style.root, { [$style.draghover]: draghover }]"
draggable="true"
:title="title"
@click="onClick"
@ -15,15 +14,15 @@
@dragstart="onDragstart"
@dragend="onDragend"
>
<p class="name">
<template v-if="hover"><i class="ti ti-folder ti-fw"></i></template>
<template v-if="!hover"><i class="ti ti-folder ti-fw"></i></template>
<p :class="$style.name">
<template v-if="hover"><i :class="$style.icon" class="ti ti-folder ti-fw"></i></template>
<template v-if="!hover"><i :class="$style.icon" class="ti ti-folder ti-fw"></i></template>
{{ folder.name }}
</p>
<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
<p v-if="defaultStore.state.uploadFolder == folder.id" :class="$style.upload">
{{ i18n.ts.uploadFolder }}
</p>
<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
<button v-if="selectMode" class="_button" :class="[$style.checkbox, { [$style.checked]: isSelected }]" @click.prevent.stop="checkboxClicked"></button>
</div>
</template>
@ -267,35 +266,14 @@ function onContextmenu(ev: MouseEvent) {
}
</script>
<style lang="scss" scoped>
.rghtznwe {
<style lang="scss" module>
.root {
position: relative;
padding: 8px;
height: 64px;
background: var(--driveFolderBg);
border-radius: 4px;
&, * {
cursor: pointer;
}
*:not(.checkbox) {
pointer-events: none;
}
> .checkbox {
position: absolute;
bottom: 8px;
right: 8px;
width: 16px;
height: 16px;
background: #fff;
border: solid 1px #000;
&.checked {
background: var(--accent);
}
}
cursor: pointer;
&.draghover {
&:after {
@ -310,24 +288,38 @@ function onContextmenu(ev: MouseEvent) {
border-radius: 4px;
}
}
}
> .name {
margin: 0;
font-size: 0.9em;
color: var(--desktopDriveFolderFg);
.checkbox {
position: absolute;
bottom: 8px;
right: 8px;
width: 16px;
height: 16px;
background: #fff;
border: solid 1px #000;
> i {
margin-right: 4px;
margin-left: 2px;
text-align: left;
}
}
> .upload {
margin: 4px 4px;
font-size: 0.8em;
text-align: right;
color: var(--desktopDriveFolderFg);
&.checked {
background: var(--accent);
}
}
.name {
margin: 0;
font-size: 0.9em;
color: var(--desktopDriveFolderFg);
}
.icon {
margin-right: 4px;
margin-left: 2px;
text-align: left;
}
.upload {
margin: 4px 4px;
font-size: 0.8em;
text-align: right;
color: var(--desktopDriveFolderFg);
}
</style>