Skip to content
Snippets Groups Projects
Commit 101e8d7a authored by syuilo's avatar syuilo
Browse files

refactor

parent 19b96ff6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/frontend/src/components/MkDrive.file.vue
+ 85
− 95
View file @ 101e8d7a
<template>
<div
class="ncvczrfv"
:class="{ isSelected }"
:class="[$style.root, { [$style.isSelected]: isSelected }]"
draggable="true"
:title="title"
@click="onClick"
......@@ -9,25 +8,27 @@
@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="[$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="[$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="$style.thumbnail" :file="file" fit="contain"/>
<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" style="opacity: 0.5;">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
</p>
</div>
<div v-if="$i?.bannerId == file.id" class="label">
<img src="/client-assets/label.svg"/>
<p>{{ 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>
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
<p class="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>
</p>
</div>
</template>
......@@ -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;
}
cursor: pointer;
&:hover {
background: rgba(#000, 0.05);
......@@ -165,82 +159,78 @@ function onDragend() {
color: #fff;
}
}
}
.label {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
> .label {
&:before,
&:after {
content: "";
display: block;
position: absolute;
z-index: 1;
background: #0c7ac9;
}
&:before {
top: 0;
left: 57px;
width: 28px;
height: 8px;
}
&:after {
top: 57px;
left: 0;
pointer-events: none;
width: 8px;
height: 28px;
}
&.red {
&:before,
&:after {
content: "";
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;
}
background: #c12113;
}
}
}
> img {
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
.labelImg {
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);
}
}
.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;
}
.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;
}
}
.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>
packages/frontend/src/components/MkDrive.folder.vue
+ 39
− 47
View file @ 101e8d7a
<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);
> i {
margin-right: 4px;
margin-left: 2px;
text-align: left;
}
.checkbox {
position: absolute;
bottom: 8px;
right: 8px;
width: 16px;
height: 16px;
background: #fff;
border: solid 1px #000;
&.checked {
background: var(--accent);
}
}
> .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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment