Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki 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
Show stats Download patch file Download diff file Expand all files Collapse all files

58
packages/frontend/src/components/MkDrive.file.vue
View file

@ -1,7 +1,6 @@
<template> <template>
<div <div
class="ncvczrfv" :class="[$style.root, { [$style.isSelected]: isSelected }]"
:class="{ isSelected }"
draggable="true" draggable="true"
:title="title" :title="title"
@click="onClick" @click="onClick"
@ -9,26 +8,28 @@
@dragstart="onDragstart" @dragstart="onDragstart"
@dragend="onDragend" @dragend="onDragend"
> >
<div v-if="$i?.avatarId == file.id" class="label"> <div style="pointer-events: none;">
<img src="/client-assets/label.svg"/> <div v-if="$i?.avatarId == file.id" :class="[$style.label]">
<p>{{ i18n.ts.avatar }}</p> <img :class="$style.labelImg" src="/client-assets/label.svg"/>
<p :class="$style.labelText">{{ i18n.ts.avatar }}</p>
</div> </div>
<div v-if="$i?.bannerId == file.id" class="label"> <div v-if="$i?.bannerId == file.id" :class="[$style.label]">
<img src="/client-assets/label.svg"/> <img :class="$style.labelImg" src="/client-assets/label.svg"/>
<p>{{ i18n.ts.banner }}</p> <p :class="$style.labelText">{{ i18n.ts.banner }}</p>
</div> </div>
<div v-if="file.isSensitive" class="label red"> <div v-if="file.isSensitive" :class="[$style.label, $style.red]">
<img src="/client-assets/label-red.svg"/> <img :class="$style.labelImg" src="/client-assets/label-red.svg"/>
<p>{{ i18n.ts.nsfw }}</p> <p :class="$style.labelText">{{ i18n.ts.nsfw }}</p>
</div> </div>
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/> <MkDriveFileThumbnail :class="$style.thumbnail" :file="file" fit="contain"/>
<p class="name"> <p :class="$style.name">
<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span> <span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span> <span v-if="file.name.lastIndexOf('.') != -1" style="opacity: 0.5;">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
</p> </p>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -88,20 +89,13 @@ function onDragend() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.ncvczrfv { .root {
position: relative; position: relative;
padding: 8px 0 0 0; padding: 8px 0 0 0;
min-height: 180px; min-height: 180px;
border-radius: 8px; border-radius: 8px;
&, * {
cursor: pointer; cursor: pointer;
}
> * {
pointer-events: none;
}
&:hover { &:hover {
background: rgba(#000, 0.05); background: rgba(#000, 0.05);
@ -165,8 +159,9 @@ function onDragend() {
color: #fff; color: #fff;
} }
} }
}
> .label { .label {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -201,15 +196,16 @@ function onDragend() {
background: #c12113; background: #c12113;
} }
} }
}
> img { .labelImg {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 0; top: 0;
left: 0; left: 0;
} }
> p { .labelText {
position: absolute; position: absolute;
z-index: 3; z-index: 3;
top: 19px; top: 19px;
@ -221,15 +217,14 @@ function onDragend() {
color: #fff; color: #fff;
transform: rotate(-45deg); transform: rotate(-45deg);
} }
}
> .thumbnail { .thumbnail {
width: 110px; width: 110px;
height: 110px; height: 110px;
margin: auto; margin: auto;
} }
> .name { .name {
display: block; display: block;
margin: 4px 0 0 0; margin: 4px 0 0 0;
font-size: 0.8em; font-size: 0.8em;
@ -237,10 +232,5 @@ function onDragend() {
word-break: break-all; word-break: break-all;
color: var(--fg); color: var(--fg);
overflow: hidden; overflow: hidden;
> .ext {
opacity: 0.5;
}
}
} }
</style> </style>

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

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