From 101e8d7adba6226437cccc96d18d7914eed125d8 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 29 May 2023 20:05:46 +0900
Subject: [PATCH] refactor
---
.../frontend/src/components/MkDrive.file.vue | 188 +++++++++---------
.../src/components/MkDrive.folder.vue | 86 ++++----
2 files changed, 128 insertions(+), 146 deletions(-)
diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index ab408b5008..f0641161be 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -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>
diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 156013b9aa..1969342402 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -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);
- }
- }
+ 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);
+.checkbox {
+ position: absolute;
+ bottom: 8px;
+ right: 8px;
+ width: 16px;
+ height: 16px;
+ background: #fff;
+ border: solid 1px #000;
- > i {
- margin-right: 4px;
- margin-left: 2px;
- text-align: left;
- }
- }
-
- > .upload {
- margin: 4px 4px;
- font-size: 0.8em;
- text-align: right;
- color: var(--desktopDriveFolderFg);
+ &.checked {
+ background: var(--accent);
}
}
+
+.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>