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

188
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,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>
<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>
<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="thumbnail" :file="file" fit="contain"/>
<MkDriveFileThumbnail :class="$style.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>
<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>
</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 {
.label {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
&:before,
&:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
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 {
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;
}
}
> 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;
background: #c12113;
}
}
}
.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>