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

62
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);
}
}
&.draghover {
&:after {
@ -310,24 +288,38 @@ function onContextmenu(ev: MouseEvent) {
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;
font-size: 0.9em;
color: var(--desktopDriveFolderFg);
}
> i {
.icon {
margin-right: 4px;
margin-left: 2px;
text-align: left;
}
}
> .upload {
.upload {
margin: 4px 4px;
font-size: 0.8em;
text-align: right;
color: var(--desktopDriveFolderFg);
}
}
</style>