mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-28 06:48:36 +09:00
Code

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

188
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,25 +8,27 @@
@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"/>
</div> <p :class="$style.labelText">{{ i18n.ts.avatar }}</p>
<div v-if="$i?.bannerId == file.id" class="label"> </div>
<img src="/client-assets/label.svg"/> <div v-if="$i?.bannerId == file.id" :class="[$style.label]">
<p>{{ i18n.ts.banner }}</p> <img :class="$style.labelImg" src="/client-assets/label.svg"/>
</div> <p :class="$style.labelText">{{ i18n.ts.banner }}</p>
<div v-if="file.isSensitive" class="label red"> </div>
<img src="/client-assets/label-red.svg"/> <div v-if="file.isSensitive" :class="[$style.label, $style.red]">
<p>{{ i18n.ts.nsfw }}</p> <img :class="$style.labelImg" src="/client-assets/label-red.svg"/>
</div> <p :class="$style.labelText">{{ i18n.ts.nsfw }}</p>
</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>
@ -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,82 +159,78 @@ function onDragend() {
color: #fff; color: #fff;
} }
} }
}
> .label { .label {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
&:before,
&:after {
content: "";
display: block;
position: absolute; position: absolute;
top: 0; z-index: 1;
left: 0; background: #0c7ac9;
pointer-events: none; }
&:before {
top: 0;
left: 57px;
width: 28px;
height: 8px;
}
&:after {
top: 57px;
left: 0;
width: 8px;
height: 28px;
}
&.red {
&:before, &:before,
&:after { &:after {
content: ""; background: #c12113;
display: block;
position: absolute;
z-index: 1;
background: #0c7ac9;
}
&:before {
top: 0;
left: 57px;
width: 28px;
height: 8px;
}
&:after {
top: 57px;
left: 0;
width: 8px;
height: 28px;
}
&.red {
&:before,
&:after {
background: #c12113;
}
}
> img {
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
> p {
position: absolute;
z-index: 3;
top: 19px;
left: -28px;
width: 120px;
margin: 0;
text-align: center;
line-height: 28px;
color: #fff;
transform: rotate(-45deg);
}
}
> .thumbnail {
width: 110px;
height: 110px;
margin: auto;
}
> .name {
display: block;
margin: 4px 0 0 0;
font-size: 0.8em;
text-align: center;
word-break: break-all;
color: var(--fg);
overflow: hidden;
> .ext {
opacity: 0.5;
} }
} }
} }
.labelImg {
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
.labelText {
position: absolute;
z-index: 3;
top: 19px;
left: -28px;
width: 120px;
margin: 0;
text-align: center;
line-height: 28px;
color: #fff;
transform: rotate(-45deg);
}
.thumbnail {
width: 110px;
height: 110px;
margin: auto;
}
.name {
display: block;
margin: 4px 0 0 0;
font-size: 0.8em;
text-align: center;
word-break: break-all;
color: var(--fg);
overflow: hidden;
}
</style> </style>

86
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 {
margin: 0; position: absolute;
font-size: 0.9em; bottom: 8px;
color: var(--desktopDriveFolderFg); right: 8px;
width: 16px;
height: 16px;
background: #fff;
border: solid 1px #000;
> i { &.checked {
margin-right: 4px; background: var(--accent);
margin-left: 2px;
text-align: left;
}
}
> .upload {
margin: 4px 4px;
font-size: 0.8em;
text-align: right;
color: var(--desktopDriveFolderFg);
} }
} }
.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> </style>