ドライブで複数選択できるようにした

locales/index.d.ts

@@ -79,6 +79,10 @@ export interface Locale {
     "files": string;
     "download": string;
     "driveFileDeleteConfirm": string;
+    "driveFilesDeleteConfirm": string;
+    "driveFilesSensitiveonConfirm": string;
+    "driveFilesSensitiveoffConfirm": string;
+    "driveFolderDeleteConfirm": string;
     "unfollowConfirm": string;
     "exportRequested": string;
     "importRequested": string;

locales/ja-JP.yml

@@ -76,6 +76,10 @@ export: "エクスポート"
 files: "ファイル"
 download: "ダウンロード"
 driveFileDeleteConfirm: "ファイル「{name}」を削除しますか？このファイルを使用した一部のコンテンツも削除されます。"
+driveFilesDeleteConfirm: "{name}つのファイルを削除しますか？このファイルを使用した一部のコンテンツも削除されます。"
+driveFilesSensitiveonConfirm: "{name}つのファイルをセンシティブにしますか？"
+driveFilesSensitiveoffConfirm: "{name}つのファイルのセンシティブを解除しますか？"
+driveFolderDeleteConfirm: "フォルダ「{name}」を削除しますか？このフォルダの中に存在するファイルを使用した一部のコンテンツも削除されます。"
 unfollowConfirm: "{name}のフォローを解除しますか？"
 exportRequested: "エクスポートをリクエストしました。これには時間がかかる場合があります。エクスポートが終わると、「ドライブ」に追加されます。"
 importRequested: "インポートをリクエストしました。これには時間がかかる場合があります。"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2023.9.3-prismisskey.2",
+	"version": "2023.9.3-prismisskey.3",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",
@@ -18,6 +18,7 @@
 		"build-assets": "node ./scripts/build-assets.mjs",
 		"build": "pnpm build-pre && pnpm -r build && pnpm build-assets",
 		"build-storybook": "pnpm --filter frontend build-storybook",
+		"build-and-start": "pnpm build && pnpm start",
 		"start": "pnpm check:connect && cd packages/backend && node ./built/boot/entry.js",
 		"start:test": "cd packages/backend && cross-env NODE_ENV=test node ./built/boot/entry.js",
 		"init": "pnpm migrate",

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

@@ -44,6 +44,7 @@ const props = withDefaults(defineProps<{
 	folder: Misskey.entities.DriveFolder;
 	isSelected?: boolean;
 	selectMode?: boolean;
+  selectedFiles?: string[];
 }>(), {
 	isSelected: false,
 	selectMode: false,
@@ -143,10 +144,19 @@ function onDrop(ev: DragEvent) {
 	if (driveFile != null && driveFile !== '') {
 		const file = JSON.parse(driveFile);
 		emit('removeFile', file.id);
-		os.api('drive/files/update', {
+    if (props.selectedFiles.length > 0) {
-			fileId: file.id,
+      props.selectedFiles.forEach((e)=>{
-			folderId: props.folder.id,
+        os.api('drive/files/update', {
-		});
+          fileId: e.id,
+          folderId: props.folder.id,
+        });
+      })
+    }else{
+      os.api('drive/files/update', {
+        fileId: file.id,
+        folderId: props.folder.id,
+      });
+    }
 	}
 	//#endregion
 
@@ -221,30 +231,120 @@ function rename() {
 }
 
 function deleteFolder() {
-	os.api('drive/folders/delete', {
+  os.api('drive/folders/show', {
-		folderId: props.folder.id,
+    folderId: props.folder.id,
-	}).then(() => {
+  }).then(async (r) => {
-		if (defaultStore.state.uploadFolder === props.folder.id) {
+
-			defaultStore.set('uploadFolder', null);
+    if (r.foldersCount > 0) {
-		}
+      await os.alert({
-	}).catch(err => {
+        type: 'error',
-		switch (err.id) {
+        title: i18n.ts.unableToDelete,
-			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
+        text: 'フォルダ内にフォルダが存在するため、削除できません。 \n フォルダ内のフォルダを削除してから試してみてください。',
-				os.alert({
+      });
-					type: 'error',
+    }
-					title: i18n.ts.unableToDelete,
+
-					text: i18n.ts.hasChildFilesOrFolders,
+    if (r.filesCount > 0) {
-				});
+
-				break;
+      const {canceled} = await os.confirm({
-			default:
+        type: 'warning',
-				os.alert({
+        text: i18n.t('driveFolderDeleteConfirm', {name: props.folder.name}),
-					type: 'error',
+      });
-					text: i18n.ts.unableToDelete,
+
-				});
+      if (canceled) return;
-		}
+
-	});
+      let allResults = [];
+      let Result = await os.api('drive/files', {folderId: props.folder.id, limit: 31});
+      allResults = allResults.concat(Result)
+      while (Result.length >= 31) {
+        const untilId = Result[Result.length - 1].id;
+        Result = await os.api('drive/files', { folderId: props.folder.id, limit: 31, untilId });
+        allResults = allResults.concat(Result); // pushをconcatに変更
+      }
+      allResults.forEach((r,i)=>{
+        os.api('drive/files/delete',{fileId: r.id})
+      })
+
+
+      os.api('drive/folders/show', {
+        folderId: props.folder.id,
+      }).then(async (r) =>{
+        if (r.filesCount > 0) {
+
+          let allResults = [];
+          let Result = await os.api('drive/files', {folderId: props.folder.id, limit: 31});
+          allResults = allResults.concat(Result)
+          while (Result.length >= 31) {
+            const untilId = Result[Result.length - 1].id;
+            Result = await os.api('drive/files', { folderId: props.folder.id, limit: 31, untilId });
+            allResults = allResults.concat(Result);
+          }
+          allResults.forEach((r,i)=>{
+            os.api('drive/files/delete',{fileId: r.id})
+          })
+
+          os.api('drive/folders/delete', {
+            folderId: props.folder.id,
+          }).then(() => {
+            if (defaultStore.state.uploadFolder === props.folder.id) {
+              defaultStore.set('uploadFolder', null);
+            }
+          }).catch(err => {
+            switch (err.id) {
+              case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
+                os.alert({
+                  type: 'error',
+                  title: i18n.ts.unableToDelete,
+                  text: i18n.ts.hasChildFilesOrFolders,
+                });
+                break;
+              default:
+                os.alert({
+                  type: 'error',
+                  text: i18n.ts.unableToDelete,
+                });
+            }
+          });
+
+          os.api('drive/folders/delete', {
+            folderId: props.folder.id,
+          })
+        }else{
+          os.api('drive/folders/delete', {
+            folderId: props.folder.id,
+          })
+        }
+      })
+
+    } else {
+
+      await os.api('drive/folders/delete', {
+        folderId: props.folder.id,
+      }).then(() => {
+        if (defaultStore.state.uploadFolder === props.folder.id) {
+          defaultStore.set('uploadFolder', null);
+        }
+      }).catch(err => {
+        switch (err.id) {
+          case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
+            os.alert({
+              type: 'error',
+              title: i18n.ts.unableToDelete,
+              text: i18n.ts.hasChildFilesOrFolders,
+            });
+            break;
+          default:
+            os.alert({
+              type: 'error',
+              text: i18n.ts.unableToDelete,
+            });
+        }
+      });
+    }
+  })
+
 }
 
+
 function setAsUploadFolder() {
 	defaultStore.set('uploadFolder', props.folder.id);
 }

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

@@ -26,6 +26,7 @@ import { i18n } from '@/i18n.js';
 const props = defineProps<{
 	folder?: Misskey.entities.DriveFolder;
 	parentFolder: Misskey.entities.DriveFolder | null;
+  selectedFiles: string[];
 }>();
 
 const emit = defineEmits<{
@@ -112,10 +113,19 @@ function onDrop(ev: DragEvent) {
 	if (driveFile != null && driveFile !== '') {
 		const file = JSON.parse(driveFile);
 		emit('removeFile', file.id);
-		os.api('drive/files/update', {
+		if (props.selectedFiles.length > 0) {
-			fileId: file.id,
+			props.selectedFiles.forEach((e) => {
-			folderId: props.folder ? props.folder.id : null,
+				os.api('drive/files/update', {
-		});
+					fileId: e.id,
+					folderId: props.folder ? props.folder.id : null,
+				});
+			});
+		} else {
+			os.api('drive/files/update', {
+				fileId: file.id,
+				folderId: props.folder ? props.folder.id : null,
+			});
+		}
 	}
 	//#endregion
 

packages/frontend/src/components/MkDrive.vue

@@ -10,6 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<XNavFolder
 				:class="[$style.navPathItem, { [$style.navCurrent]: folder == null }]"
 				:parentFolder="folder"
+        :selectedFiles="selectedFiles"
 				@move="move"
 				@upload="upload"
 				@removeFile="removeFile"
@@ -27,10 +28,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 					@removeFolder="removeFolder"
 				/>
 			</template>
-			<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
+			<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i
+				class="ti ti-chevron-right"
+			></i></span>
 			<span v-if="folder != null" :class="[$style.navPathItem, $style.navCurrent]">{{ folder.name }}</span>
 		</div>
-		<button class="_button" :class="$style.navMenu" @click="showMenu"><i class="ti ti-dots"></i></button>
+		<button v-if="!multiple" class="_button" :class="$style.navMenu" @click="filesSelect">複数選択モード</button>
+    <span   v-if="multiple && selectedFiles.length > 0"   style="padding-right: 12px; margin-top: auto; margin-bottom: auto;opacity: 0.5;">
+      ({{ number(selectedFiles.length) }})
+    </span>
+		<button v-if="multiple" class="_button" :class="$style.navMenu" @click="filesSelect">複数選択モード解除</button>
+		<button v-if="multiple && selectedFiles.length === 0" style="padding-right: 12px;" class="_button" @click="filesAllSelect">
+			全選択
+		</button>
+		<button v-if="multiple && selectedFiles.length !== 0" style="padding-right: 12px;" class="_button" @click="filesAllSelect">
+			全選択解除
+		</button>
+		<button class="_button" @click="showMenu"><i class="ti ti-dots"></i></button>
 	</nav>
 	<div
 		ref="main"
@@ -51,6 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:folder="f"
 					:selectMode="select === 'folder'"
 					:isSelected="selectedFolders.some(x => x.id === f.id)"
+          :selectedFiles="selectedFiles"
 					@chosen="chooseFolder"
 					@move="move"
 					@upload="upload"
@@ -73,6 +88,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:folder="folder"
 					:selectMode="select === 'file'"
 					:isSelected="selectedFiles.some(x => x.id === file.id)"
+          @click.shift.left.exact="filesSelect"
 					@chosen="chooseFile"
 					@dragstart="isDragSource = true"
 					@dragend="isDragSource = false"
@@ -83,14 +99,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			<div v-if="files.length == 0 && folders.length == 0 && !fetching" :class="$style.empty">
 				<div v-if="draghover">{{ i18n.t('empty-draghover') }}</div>
-				<div v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</div>
+				<div v-if="!draghover && folder == null">
+					<strong>{{
+						i18n.ts.emptyDrive
+					}}</strong><br/>{{ i18n.t('empty-drive-description') }}
+				</div>
 				<div v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</div>
 			</div>
 		</div>
 		<MkLoading v-if="fetching"/>
 	</div>
 	<div v-if="draghover" :class="$style.dropzone"></div>
-	<input ref="fileInput" style="display: none;" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/>
+	<input
+		ref="fileInput" style="display: none;" type="file" accept="*/*" multiple tabindex="-1"
+		@change="onChangeFileInput"
+	/>
 </div>
 </template>
 
@@ -107,23 +130,24 @@ import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { uploadFile, uploads } from '@/scripts/upload.js';
 import { claimAchievement } from '@/scripts/achievements.js';
+import number from "@/filters/number.js";
 
 const props = withDefaults(defineProps<{
-	initialFolder?: Misskey.entities.DriveFolder;
+  initialFolder?: Misskey.entities.DriveFolder;
-	type?: string;
+  type?: string;
-	multiple?: boolean;
+  multiple?: boolean;
-	select?: 'file' | 'folder' | null;
+  select?: 'file' | 'folder' | null;
 }>(), {
 	multiple: false,
 	select: null,
 });
 
 const emit = defineEmits<{
-	(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
+  (ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
-	(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
+  (ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
-	(ev: 'move-root'): void;
+  (ev: 'move-root'): void;
-	(ev: 'cd', v: Misskey.entities.DriveFolder | null): void;
+  (ev: 'cd', v: Misskey.entities.DriveFolder | null): void;
-	(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
+  (ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
 }>();
 
 const loadMoreFiles = shallowRef<InstanceType<typeof MkButton>>();
@@ -140,6 +164,8 @@ const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const uploadings = uploads;
 const connection = useStream().useChannel('drive');
 const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
+const multiple = ref(props.multiple || false);
+const select = ref(props.select || null);
 
 // ドロップされようとしているか
 const draghover = ref(false);
@@ -390,7 +416,7 @@ function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null
 
 function chooseFile(file: Misskey.entities.DriveFile) {
 	const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
-	if (props.multiple) {
+	if (multiple.value) {
 		if (isAlreadySelected) {
 			selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
 		} else {
@@ -409,7 +435,7 @@ function chooseFile(file: Misskey.entities.DriveFile) {
 
 function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
 	const isAlreadySelected = selectedFolders.value.some(f => f.id === folderToChoose.id);
-	if (props.multiple) {
+	if (multiple.value) {
 		if (isAlreadySelected) {
 			selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToChoose.id);
 		} else {
@@ -496,6 +522,7 @@ function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
 function removeFile(file: Misskey.entities.DriveFile | string) {
 	const fileId = typeof file === 'object' ? file.id : file;
 	files.value = files.value.filter(f => f.id !== fileId);
+  selectedFiles.value = selectedFiles.value.filter(f => f.id !== fileId);
 }
 
 function appendFile(file: Misskey.entities.DriveFile) {
@@ -505,6 +532,7 @@ function appendFile(file: Misskey.entities.DriveFile) {
 function appendFolder(folderToAppend: Misskey.entities.DriveFolder) {
 	addFolder(folderToAppend);
 }
+
 /*
 function prependFile(file: Misskey.entities.DriveFile) {
 	addFile(file, true);
@@ -621,31 +649,128 @@ function getMenu() {
 	}, {
 		text: i18n.ts.upload,
 		icon: 'ti ti-upload',
-		action: () => { selectLocalFile(); },
+		action: () => {
+			selectLocalFile();
+		},
 	}, {
 		text: i18n.ts.fromUrl,
 		icon: 'ti ti-link',
-		action: () => { urlUpload(); },
+		action: () => {
+			urlUpload();
+		},
 	}, null, {
 		text: folder.value ? folder.value.name : i18n.ts.drive,
 		type: 'label',
 	}, folder.value ? {
 		text: i18n.ts.renameFolder,
 		icon: 'ti ti-forms',
-		action: () => { renameFolder(folder.value); },
+		action: () => {
+			renameFolder(folder.value);
+		},
 	} : undefined, folder.value ? {
 		text: i18n.ts.deleteFolder,
 		icon: 'ti ti-trash',
-		action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
+		action: () => {
+			deleteFolder(folder.value as Misskey.entities.DriveFolder);
+		},
 	} : undefined, {
 		text: i18n.ts.createFolder,
 		icon: 'ti ti-folder-plus',
-		action: () => { createFolder(); },
+		action: () => {
+			createFolder();
+		},
 	}];
 }
 
+async function isSensitive(Files, isSensitive: boolean) {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.t(isSensitive ? 'driveFilesSensitiveonConfirm' : 'driveFilesSensitiveoffConfirm', { name: Files.length }),
+	});
+
+	if (canceled) return;
+	Files.forEach((file) => {
+		os.api('drive/files/update', {
+			fileId: file.id,
+			isSensitive,
+		});
+	});
+}
+
+async function fileDelete(Files) {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.t('driveFilesDeleteConfirm', { name: Files.length }),
+	});
+
+	if (canceled) return;
+	Files.forEach((file) => {
+		os.api('drive/files/delete', {
+			fileId: file.id,
+		});
+	});
+}
+
+function getFilesMenu(Files) {
+	return [{
+		text: i18n.ts.createNoteFromTheFile,
+		icon: 'ti ti-pencil',
+		action: () => {
+			if (Files.length >= 16) {
+				os.confirm({
+					type: 'warning',
+					text: '16ファイル以上添付しようとしています',
+				});
+				return;
+			} else {
+				os.post({
+					initialFiles: [...Files],
+				});
+			}
+		},
+	}, {
+		text: i18n.ts.unmarkAsSensitive,
+		icon: 'ti ti-eye',
+		action: () => {
+			isSensitive(Files, false);
+		},
+	}, {
+		text: i18n.ts.markAsSensitive,
+		icon: 'ti ti-eye-exclamation',
+		action: () => {
+			isSensitive(Files, true);
+		},
+	}, {
+		text: i18n.ts.delete,
+		icon: 'ti ti-trash',
+		danger: true,
+		action: () => {
+			fileDelete(Files);
+		},
+	}];
+}
+
+function filesSelect() {
+	multiple.value = !multiple.value;
+	select.value = (select.value === null) ? 'file' : null;
+	selectedFiles.value = [];
+}
+
+function filesAllSelect() {
+	if (selectedFiles.value.length === 0) {
+		selectedFiles.value = files.value;
+	} else {
+		selectedFiles.value = [];
+	}
+}
+
 function showMenu(ev: MouseEvent) {
-	os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	console.log(selectedFiles.value.length);
+	if (selectedFiles.value.length === 0) {
+		os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	} else {
+		os.popupMenu(getFilesMenu(selectedFiles.value), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	}
 }
 
 function onContextmenu(ev: MouseEvent) {
@@ -689,114 +814,117 @@ onBeforeUnmount(() => {
 
 <style lang="scss" module>
 .root {
-	display: flex;
+  display: flex;
-	flex-direction: column;
+  flex-direction: column;
-	height: 100%;
+  height: 100%;
 }
 
 .nav {
-	display: flex;
+  display: flex;
-	z-index: 2;
+  top: 0;
-	width: 100%;
+  position: sticky;
-	padding: 0 8px;
+  z-index: 1000;
-	box-sizing: border-box;
+  background-color: var(--bg);
-	overflow: auto;
+  width: 100%;
-	font-size: 0.9em;
+  padding: 0 8px;
-	box-shadow: 0 1px 0 var(--divider);
+  box-sizing: border-box;
-	user-select: none;
+  overflow: auto;
+  font-size: 0.9em;
+  box-shadow: 0 1px 0 var(--divider);
+  user-select: none;
 }
 
 .navPath {
-	display: inline-block;
+  display: inline-block;
-	vertical-align: bottom;
+  vertical-align: bottom;
-	line-height: 42px;
+  line-height: 42px;
-	white-space: nowrap;
+  white-space: nowrap;
 }
 
 .navPathItem {
-	display: inline-block;
+  display: inline-block;
-	margin: 0;
+  margin: 0;
-	padding: 0 8px;
+  padding: 0 8px;
-	line-height: 42px;
+  line-height: 42px;
-	cursor: pointer;
+  cursor: pointer;
 
-	&:hover {
+  &:hover {
-		text-decoration: underline;
+    text-decoration: underline;
-	}
+  }
 
-	&.navCurrent {
+  &.navCurrent {
-		font-weight: bold;
+    font-weight: bold;
-		cursor: default;
+    cursor: default;
 
-		&:hover {
+    &:hover {
-			text-decoration: none;
+      text-decoration: none;
-		}
+    }
-	}
+  }
 
-	&.navSeparator {
+  &.navSeparator {
-		margin: 0;
+    margin: 0;
-		padding: 0;
+    padding: 0;
-		opacity: 0.5;
+    opacity: 0.5;
-		cursor: default;
+    cursor: default;
-	}
+  }
 }
 
 .navMenu {
-	margin-left: auto;
+  margin-left: auto;
-	padding: 0 12px;
+  padding: 0 12px;
 }
 
 .main {
-	flex: 1;
+  flex: 1;
-	overflow: auto;
+  overflow: auto;
-	padding: var(--margin);
+  padding: var(--margin);
-	user-select: none;
+  user-select: none;
 
-	&.fetching {
+  &.fetching {
-		cursor: wait !important;
+    cursor: wait !important;
-		opacity: 0.5;
+    opacity: 0.5;
-		pointer-events: none;
+    pointer-events: none;
-	}
+  }
 
-	&.uploading {
+  &.uploading {
-		height: calc(100% - 38px - 100px);
+    height: calc(100% - 38px - 100px);
-	}
+  }
 }
 
 .folders,
 .files {
-	display: flex;
+  display: flex;
-	flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .folder,
 .file {
-	flex-grow: 1;
+  flex-grow: 1;
-	width: 128px;
+  width: 128px;
-	margin: 4px;
+  margin: 4px;
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .padding {
-	flex-grow: 1;
+  flex-grow: 1;
-	pointer-events: none;
+  pointer-events: none;
-	width: 128px + 8px;
+  width: 128px + 8px;
 }
 
 .empty {
-	padding: 16px;
+  padding: 16px;
-	text-align: center;
+  text-align: center;
-	pointer-events: none;
+  pointer-events: none;
-	opacity: 0.5;
+  opacity: 0.5;
 }
 
 .dropzone {
-	position: absolute;
+  position: absolute;
-	left: 0;
+  left: 0;
-	top: 38px;
+  top: 38px;
-	width: 100%;
+  width: 100%;
-	height: calc(100% - 38px);
+  height: calc(100% - 38px);
-	border: dashed 2px var(--focus);
+  border: dashed 2px var(--focus);
-	pointer-events: none;
+  pointer-events: none;
 }
 </style>