wip

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({

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 {

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;

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);

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);

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]);
+			}
 		});
 	});
 }

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({

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;

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>

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;
 			}

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="">