Update MkDrive.folder.vue

CHANGELOG.md

@@ -14,6 +14,14 @@
   - デフォルト値は「ローカルのコンテンツだけ公開」になっています
 
 ### Client
+- Feat: ドライブのUIが強化されました
+  - 複数のファイルをまとめて移動できるようになりました
+- Feat: ファイルのアップロードUIが一新されました
+  - アップロード前にファイル情報を確認できるようになりました
+	- 圧縮の品質を選択できるようになりました
+	- アップロードに失敗したときに再試行できるようになりました
+	- アップロード前に画像のクロッピングを行えるようになりました
+	- ファイルサイズのチェックは圧縮後の実際にアップロードされるサイズで行われるようになりました
 - Feat: サーバー初期設定ウィザードが実装されました
   - 簡単なウィザードに従うだけで、サーバーに最適な設定が適用されます
 - Feat: Websocket接続を行わずにMisskeyを利用するNo Websocketモードが実装されました(beta)

locales/index.d.ts

@@ -11904,6 +11904,36 @@ export interface Locale extends ILocale {
          */
         "doneConfirm": string;
     };
+    "_clientPerformanceIssueTip": {
+        /**
+         * バッテリー消費が多いと感じたら
+         */
+        "title": string;
+        /**
+         * アドブロッカーを無効にしてください
+         */
+        "makeSureDisabledAdBlocker": string;
+        /**
+         * アドブロッカーはパフォーマンスに影響を及ぼすことがあります。OSの機能やブラウザの機能・アドオンなどでアドブロッカーが有効になっていないか確認してください。
+         */
+        "makeSureDisabledAdBlocker_description": string;
+        /**
+         * カスタムCSSを無効にしてください
+         */
+        "makeSureDisabledCustomCss": string;
+        /**
+         * スタイルを上書きするとパフォーマンスに影響を及ぼすことがあります。カスタムCSSや、スタイルを上書きする拡張機能が有効になっていないか確認してください。
+         */
+        "makeSureDisabledCustomCss_description": string;
+        /**
+         * 拡張機能を無効にしてください
+         */
+        "makeSureDisabledAddons": string;
+        /**
+         * 一部の拡張機能はクライアントの動作に干渉しパフォーマンスに影響を及ぼすことがあります。ブラウザの拡張機能を無効にして改善するか確認してください。
+         */
+        "makeSureDisabledAddons_description": string;
+    };
 }
 declare const locales: {
     [lang: string]: Locale;

locales/ja-JP.yml

@@ -3184,3 +3184,12 @@ _uploader:
   savedXPercent: "{x}%節約"
   abortConfirm: "アップロードされていないファイルがありますが、中止しますか？"
   doneConfirm: "アップロードされていないファイルがありますが、完了しますか？"
+
+_clientPerformanceIssueTip:
+  title: "バッテリー消費が多いと感じたら"
+  makeSureDisabledAdBlocker: "アドブロッカーを無効にしてください"
+  makeSureDisabledAdBlocker_description: "アドブロッカーはパフォーマンスに影響を及ぼすことがあります。OSの機能やブラウザの機能・アドオンなどでアドブロッカーが有効になっていないか確認してください。"
+  makeSureDisabledCustomCss: "カスタムCSSを無効にしてください"
+  makeSureDisabledCustomCss_description: "スタイルを上書きするとパフォーマンスに影響を及ぼすことがあります。カスタムCSSや、スタイルを上書きする拡張機能が有効になっていないか確認してください。"
+  makeSureDisabledAddons: "拡張機能を無効にしてください"
+  makeSureDisabledAddons_description: "一部の拡張機能はクライアントの動作に干渉しパフォーマンスに影響を及ぼすことがあります。ブラウザの拡張機能を無効にして改善するか確認してください。"

packages/frontend/src/components/MkDrive.folder.vue

@@ -18,14 +18,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@dragstart="onDragstart"
 	@dragend="onDragend"
 >
-	<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="prefer.s.uploadFolder == folder.id" :class="$style.upload">
+	<svg :class="[$style.shape]" viewBox="0 0 200 150" preserveAspectRatio="none">
+		<path d="M190,25C195.523,25 200,29.477 200,35C200,58.415 200,116.585 200,140C200,145.523 195.523,150 190,150C155.86,150 44.14,150 10,150C4.477,150 0,145.523 0,140C0,112.727 0,37.273 0,10C0,4.477 4.477,0 10,-0C26.642,0 59.332,0 70.858,0C73.51,-0 76.054,1.054 77.929,2.929C82.74,7.74 92.26,17.26 97.071,22.071C98.946,23.946 101.49,25 104.142,25C118.808,25 168.535,25 190,25Z" style="fill:var(--MI_THEME-driveFolderBg);"/>
+	</svg>
+	<div :class="$style.name">{{ folder.name }}</div>
+	<div v-if="prefer.s.uploadFolder == folder.id" :class="$style.upload">
 		{{ i18n.ts.uploadFolder }}
-	</p>
+	</div>
 	<button v-if="selectMode" class="_button" :class="$style.checkboxWrapper" @click.prevent.stop="checkboxClicked">
 		<div :class="[$style.checkbox, { [$style.checked]: isSelected }]"></div>
 	</button>
@@ -58,7 +57,7 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{
 	(ev: 'chosen', v: Misskey.entities.DriveFolder): void;
 	(ev: 'unchose', v: Misskey.entities.DriveFolder): void;
-	(ev: 'upload', file: File, folder: Misskey.entities.DriveFolder);
+	(ev: 'upload', files: File[], folder: Misskey.entities.DriveFolder);
 	(ev: 'dragstart'): void;
 	(ev: 'dragend'): void;
 }>();
@@ -133,9 +132,7 @@ function onDrop(ev: DragEvent) {
 
 	// ファイルだったら
 	if (ev.dataTransfer.files.length > 0) {
-		for (const file of Array.from(ev.dataTransfer.files)) {
-			emit('upload', file, props.folder);
-		}
+		emit('upload', Array.from(ev.dataTransfer.files), props.folder);
 		return;
 	}
 
@@ -322,10 +319,9 @@ function onContextmenu(ev: MouseEvent) {
 <style lang="scss" module>
 .root {
 	position: relative;
-	padding: 8px;
-	height: 64px;
-	background: var(--MI_THEME-driveFolderBg);
-	border-radius: 4px;
+	height: 90px;
+	padding: 24px 16px;
+	box-sizing: border-box;
 	cursor: pointer;
 
 	&.draghover {
@@ -343,6 +339,14 @@ function onContextmenu(ev: MouseEvent) {
 	}
 }
 
+.shape {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
 .checkboxWrapper {
 	position: absolute;
 	border-radius: 50%;
@@ -384,7 +388,6 @@ function onContextmenu(ev: MouseEvent) {
 }
 
 .name {
-	margin: 0;
 	font-size: 0.9em;
 }
 
@@ -395,7 +398,6 @@ function onContextmenu(ev: MouseEvent) {
 }
 
 .upload {
-	margin: 4px 4px;
 	font-size: 0.8em;
 	text-align: right;
 }

packages/frontend/src/components/MkDrive.navFolder.vue

@@ -30,7 +30,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'upload', file: File, folder?: Misskey.entities.DriveFolder | null): void;
+	(ev: 'upload', files: File[], folder?: Misskey.entities.DriveFolder | null): void;
 }>();
 
 const draghover = ref(false);
@@ -83,9 +83,7 @@ function onDrop(ev: DragEvent) {
 
 	// ファイルだったら
 	if (ev.dataTransfer.files.length > 0) {
-		for (const file of Array.from(ev.dataTransfer.files)) {
-			emit('upload', file, props.folder);
-		}
+		emit('upload', Array.from(ev.dataTransfer.files), props.folder);
 		return;
 	}
 

packages/frontend/src/components/MkDrive.vue

@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:class="[$style.navPathItem, { [$style.navCurrent]: folder == null }]"
 					:parentFolder="folder"
 					@click="cd(null)"
-					@upload="upload"
+					@upload="onUploadRequested"
 				/>
 				<template v-for="f in hierarchyFolders">
 					<span :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						:parentFolder="folder"
 						:class="[$style.navPathItem]"
 						@click="cd(f)"
-						@upload="upload"
+						@upload="onUploadRequested"
 					/>
 				</template>
 				<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
@@ -74,7 +74,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						@chosen="chooseFolder"
 						@unchose="unchoseFolder"
 						@click="cd(f)"
-						@upload="upload"
+						@upload="onUploadRequested"
 						@dragstart="isDragSource = true"
 						@dragend="isDragSource = false"
 					/>
@@ -112,7 +112,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						/>
 					</TransitionGroup>
 				</MkStickyContainer>
-				<MkButton v-show="filesPaginator.canFetchOlder.value" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
+				<MkButton v-show="filesPaginator.canFetchOlder.value" :class="$style.loadMore" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
 
 			<div v-if="filesPaginator.items.value.length == 0 && foldersPaginator.items.value.length == 0 && !fetching" :class="$style.empty">
@@ -377,6 +377,12 @@ function onDrop(ev: DragEvent) {
 	//#endregion
 }
 
+function onUploadRequested(files: File[], folder: Misskey.entities.DriveFolder | null) {
+	os.launchUploader(files, {
+		folderId: folder?.id ?? null,
+	});
+}
+
 async function urlUpload() {
 	const { canceled, result: url } = await os.inputText({
 		title: i18n.ts.uploadFromUrl,
@@ -795,6 +801,7 @@ onBeforeUnmount(() => {
 }
 
 .main {
+	min-height: 100cqh;
 	user-select: none;
 
 	&.fetching {
@@ -820,6 +827,10 @@ onBeforeUnmount(() => {
 	background-color: color(from var(--MI_THEME-bg) srgb r g b / 0.85);
 }
 
+.loadMore {
+	margin: 16px auto;
+}
+
 .footer {
 	padding: 8px 16px;
 	font-size: 90%;

packages/frontend/src/composables/use-pagination.ts

@@ -159,7 +159,7 @@ export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Miss
 					canFetchOlder.value = true;
 				}
 			}
-		}, err => {
+		}).finally(() => {
 			fetchingOlder.value = false;
 		});
 	}

packages/frontend/src/pages/settings/preferences.vue

@@ -601,6 +601,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 								</MkSwitch>
 							</MkPreferenceContainer>
 						</SearchMarker>
+
+						<MkInfo>
+							<div class="_gaps_s">
+								<div>{{ i18n.ts._clientPerformanceIssueTip.title }}</div>
+								<div>
+									<div><b>{{ i18n.ts._clientPerformanceIssueTip.makeSureDisabledAdBlocker }}</b></div>
+									<div>{{ i18n.ts._clientPerformanceIssueTip.makeSureDisabledAdBlocker_description }}</div>
+								</div>
+								<div>
+									<div><b>{{ i18n.ts._clientPerformanceIssueTip.makeSureDisabledCustomCss }}</b></div>
+									<div>{{ i18n.ts._clientPerformanceIssueTip.makeSureDisabledCustomCss_description }}</div>
+								</div>
+								<div>
+									<div><b>{{ i18n.ts._clientPerformanceIssueTip.makeSureDisabledAddons }}</b></div>
+									<div>{{ i18n.ts._clientPerformanceIssueTip.makeSureDisabledAddons_description }}</div>
+								</div>
+							</div>
+						</MkInfo>
 					</div>
 				</MkFolder>
 			</SearchMarker>