From 8812e0f0d0907f97de735d3249aab7f5b5ab3b86 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 21 Sep 2020 00:08:45 +0900
Subject: [PATCH] wip

---
 src/client/components/drive-window.vue        |  4 ++--
 src/client/components/drive.file.vue          |  4 ++--
 src/client/components/drive.folder.vue        |  4 ++--
 src/client/components/img-with-blurhash.vue   |  1 +
 src/client/components/instance-stats.vue      |  2 +-
 src/client/os.ts                              |  4 +++-
 src/client/pages/explore.vue                  |  2 +-
 src/client/pages/messaging/index.vue          | 11 +++++-----
 .../messaging/messaging-room.message.vue      | 22 +++++++------------
 src/client/widgets/calendar.vue               |  4 ++--
 src/client/widgets/photos.vue                 |  2 +-
 11 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/client/components/drive-window.vue b/src/client/components/drive-window.vue
index 0bb16c02a8..47392a01f4 100644
--- a/src/client/components/drive-window.vue
+++ b/src/client/components/drive-window.vue
@@ -1,5 +1,5 @@
 <template>
-<x-window ref="window" :width="800" :height="500" @close="$emit('done')" :with-ok-button="true" :ok-button-disabled="(type === 'file') && (selected.length === 0)" @ok="ok()">
+<x-window :width="800" :height="500" @close="$emit('done')" :with-ok-button="true" :ok-button-disabled="(type === 'file') && (selected.length === 0)" @ok="ok()">
 	<template #header>
 		{{ multiple ? ((type === 'file') ? $t('selectFiles') : $t('selectFolders')) : ((type === 'file') ? $t('selectFile') : $t('selectFolder')) }}
 		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(number) }})</span>
@@ -14,7 +14,7 @@
 import { defineComponent } from 'vue';
 import XDrive from './drive.vue';
 import XWindow from './window.vue';
-import number from '../filters/number';
+import number from '@/filters/number';
 import * as os from '@/os';
 
 export default defineComponent({
diff --git a/src/client/components/drive.file.vue b/src/client/components/drive.file.vue
index 458919ed0e..56dce1f3b0 100644
--- a/src/client/components/drive.file.vue
+++ b/src/client/components/drive.file.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="ncvczrfv"
-	:data-is-selected="isSelected"
+	:class="{ isSelected }"
 	@click="onClick"
 	draggable="true"
 	@dragstart="onDragstart"
@@ -238,7 +238,7 @@ export default defineComponent({
 		}
 	}
 
-	&[data-is-selected] {
+	&.isSelected {
 		background: var(--accent);
 
 		&:hover {
diff --git a/src/client/components/drive.folder.vue b/src/client/components/drive.folder.vue
index 9339f3ad75..c02d6df6b2 100644
--- a/src/client/components/drive.folder.vue
+++ b/src/client/components/drive.folder.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="rghtznwe"
-	:data-draghover="draghover"
+	:class="{ draghover }"
 	@click="onClick"
 	@mouseover="onMouseover"
 	@mouseout="onMouseout"
@@ -273,7 +273,7 @@ export default defineComponent({
 		}
 	}
 
-	&[data-draghover] {
+	&.draghover {
 		&:after {
 			content: "";
 			pointer-events: none;
diff --git a/src/client/components/img-with-blurhash.vue b/src/client/components/img-with-blurhash.vue
index 683d1e0856..8bcf1110c7 100644
--- a/src/client/components/img-with-blurhash.vue
+++ b/src/client/components/img-with-blurhash.vue
@@ -50,6 +50,7 @@ export default defineComponent({
 
 	methods: {
 		draw() {
+			if (this.hash == null) return;
 			const pixels = decode(this.hash, this.size, this.size);
 			const ctx = (this.$refs.canvas as HTMLCanvasElement).getContext('2d');
 			const imageData = ctx!.createImageData(this.size, this.size);
diff --git a/src/client/components/instance-stats.vue b/src/client/components/instance-stats.vue
index c3b912d187..133e57666e 100644
--- a/src/client/components/instance-stats.vue
+++ b/src/client/components/instance-stats.vue
@@ -126,7 +126,7 @@ import { defineComponent } from 'vue';
 import { faChartBar, faUser, faPencilAlt, faSync } from '@fortawesome/free-solid-svg-icons';
 import Chart from 'chart.js';
 import MkSelect from './ui/select.vue';
-import number from '../filters/number';
+import number from '@/filters/number';
 
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
 const negate = arr => arr.map(x => -x);
diff --git a/src/client/os.ts b/src/client/os.ts
index 8c1944a73a..69094169a1 100644
--- a/src/client/os.ts
+++ b/src/client/os.ts
@@ -149,7 +149,9 @@ export function selectDriveFile(multiple) {
 			type: 'file',
 			multiple
 		}).then(files => {
-			res(multiple ? files : files[0]);
+			if (files) {
+				res(multiple ? files : files[0]);
+			}
 		});
 	});
 }
diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue
index 84bb42b31f..a90d199e52 100644
--- a/src/client/pages/explore.vue
+++ b/src/client/pages/explore.vue
@@ -58,7 +58,7 @@ import { faChartLine, faPlus, faHashtag, faRocket } from '@fortawesome/free-soli
 import { faBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
 import XUserList from '@/components/user-list.vue';
 import MkContainer from '@/components/ui/container.vue';
-import number from '../filters/number';
+import number from '@/filters/number';
 import * as os from '@/os';
 
 export default defineComponent({
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index e7409892f1..a2cc0e36f7 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -7,9 +7,8 @@
 	<div class="history" v-if="messages.length > 0">
 		<router-link v-for="(message, i) in messages"
 			class="message _panel"
+			:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($store.state.i.id) : message.isRead }"
 			:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
-			:data-is-me="isMe(message)"
-			:data-is-read="message.groupId ? message.reads.includes($store.state.i.id) : message.isRead"
 			:data-index="i"
 			:key="message.id"
 		>
@@ -195,12 +194,12 @@ export default defineComponent({
 			&:active {
 			}
 
-			&[data-is-read],
-			&[data-is-me] {
+			&.isRead,
+			&.isMe {
 				opacity: 0.8;
 			}
 
-			&:not([data-is-me]):not([data-is-read]) {
+			&:not(.isMe):not(.isRead) {
 				> div {
 					background-image: url("/assets/unread.svg");
 					background-repeat: no-repeat;
@@ -287,7 +286,7 @@ export default defineComponent({
 	&.max-width_400px {
 		> .history {
 			> .message {
-				&:not([data-is-me]):not([data-is-read]) {
+				&:not(.isMe):not(.isRead) {
 					> div {
 						background-image: none;
 						border-left: solid 4px #3aa2dc;
diff --git a/src/client/pages/messaging/messaging-room.message.vue b/src/client/pages/messaging/messaging-room.message.vue
index a04836269a..3591b126b7 100644
--- a/src/client/pages/messaging/messaging-room.message.vue
+++ b/src/client/pages/messaging/messaging-room.message.vue
@@ -1,8 +1,8 @@
 <template>
-<div class="thvuemwp" :data-is-me="isMe">
+<div class="thvuemwp" :class="{ isMe }">
 	<mk-avatar class="avatar" :user="message.user"/>
 	<div class="content">
-		<div class="balloon" :data-no-text="message.text == null">
+		<div class="balloon" :class="{ noText: message.text == null }" >
 			<button class="delete-button" v-if="isMe" :title="$t('delete')" @click="del">
 				<img src="/assets/remove.png" alt="Delete"/>
 			</button>
@@ -241,7 +241,7 @@ export default defineComponent({
 		}
 	}
 
-	&:not([data-is-me]) {
+	&:not(.isMe) {
 		padding-left: var(--margin);
 
 		> .content {
@@ -252,11 +252,11 @@ export default defineComponent({
 				$color: var(--messageBg);
 				background: $color;
 
-				&[data-no-text] {
+				&.noText {
 					background: transparent;
 				}
 
-				&:not([data-no-text]):before {
+				&:not(.noText):before {
 					left: -14px;
 					border-top: solid 8px transparent;
 					border-right: solid 8px $color;
@@ -277,7 +277,7 @@ export default defineComponent({
 		}
 	}
 
-	&[data-is-me] {
+	&.isMe {
 		flex-direction: row-reverse;
 		padding-right: var(--margin);
 
@@ -290,11 +290,11 @@ export default defineComponent({
 				background: $me-balloon-color;
 				text-align: left;
 
-				&[data-no-text] {
+				&.noText {
 					background: transparent;
 				}
 
-				&:not([data-no-text]):before {
+				&:not(.noText):before {
 					right: -14px;
 					left: auto;
 					border-top: solid 8px transparent;
@@ -326,11 +326,5 @@ export default defineComponent({
 			}
 		}
 	}
-
-	&[data-is-deleted] {
-		> .balloon {
-			opacity: 0.5;
-		}
-	}
 }
 </style>
diff --git a/src/client/widgets/calendar.vue b/src/client/widgets/calendar.vue
index bd1c32e1ca..d464f27ec4 100644
--- a/src/client/widgets/calendar.vue
+++ b/src/client/widgets/calendar.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mkw-calendar" :class="{ _panel: !props.transparent }">
-	<div class="calendar" :data-is-holiday="isHoliday">
+	<div class="calendar" :class="{ isHoliday }">
 		<p class="month-and-year">
 			<span class="year">{{ $t('yearX', { year }) }}</span>
 			<span class="month">{{ $t('monthX', { month }) }}</span>
@@ -121,7 +121,7 @@ export default defineComponent({
 		width: 60%;
 		text-align: center;
 
-		&[data-is-holiday] {
+		&.isHoliday {
 			> .day {
 				color: #ef95a0;
 			}
diff --git a/src/client/widgets/photos.vue b/src/client/widgets/photos.vue
index e39eb4a8de..43e9729039 100644
--- a/src/client/widgets/photos.vue
+++ b/src/client/widgets/photos.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-container :show-header="props.showHeader" :naked="props.transparent" :class="$style.root" :data-transparent="props.transparent">
+<mk-container :show-header="props.showHeader" :naked="props.transparent" :class="$style.root" :data-transparent="props.transparent ? true : null">
 	<template #header><fa :icon="faCamera"/>{{ $t('_widgets.photos') }}</template>
 
 	<div class="">