From b043c22437f492242f7ea432b52bd8ee04a612d7 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Fri, 29 Nov 2024 12:05:08 +0100 Subject: [PATCH 1/4] Add media folder actions and localization updates #892 --- CHANGELOG.md | 1 + l10n/bundle.l10n.json | 1 + src/dashboardWebView/DashboardMessage.ts | 2 + .../components/Media/FolderItem.tsx | 99 ++++++++++++++----- .../components/Media/FooterActions.tsx | 21 ++-- src/helpers/MediaLibrary.ts | 9 ++ src/listeners/dashboard/MediaListener.ts | 69 ++++++++++++- src/localization/localization.enum.ts | 4 + 8 files changed, 170 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f16d44f..ce15d93f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - [#705](https://github.com/estruyf/vscode-front-matter/issues/705): UX improvements for the panel view - [#887](https://github.com/estruyf/vscode-front-matter/issues/887): Added new `frontMatter.global.timezone` setting, by default it is set to `UTC` for date formatting - [#888](https://github.com/estruyf/vscode-front-matter/issues/888): Added the ability to prompt GitHub Copilot from a custom script/action +- [#892](https://github.com/estruyf/vscode-front-matter/issues/892): Added media folder common actions ### 🐞 Fixes diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json index 929dc82e..fdfd1080 100644 --- a/l10n/bundle.l10n.json +++ b/l10n/bundle.l10n.json @@ -247,6 +247,7 @@ "dashboard.media.folderItem.contentDirectory": "Content directory", "dashboard.media.folderItem.publicDirectory": "Public directory", + "dashboard.media.folderItem.deleteDescription": "Are you sure you want to delete the folder ({0})?", "dashboard.media.item.buttom.insert.image": "Insert image", "dashboard.media.item.buttom.insert.snippet": "Insert snippet", diff --git a/src/dashboardWebView/DashboardMessage.ts b/src/dashboardWebView/DashboardMessage.ts index 0cdce18f..4fd51a9d 100644 --- a/src/dashboardWebView/DashboardMessage.ts +++ b/src/dashboardWebView/DashboardMessage.ts @@ -42,6 +42,8 @@ export enum DashboardMessage { insertMedia = 'insertMedia', updateMediaMetadata = 'updateMediaMetadata', createMediaFolder = 'createMediaFolder', + updateMediaFolder = 'updateMediaFolder', + deleteMediaFolder = 'deleteMediaFolder', insertFile = 'insertFile', createHexoAssetFolder = 'createHexoAssetFolder', getUnmappedMedia = 'getUnmappedMedia', diff --git a/src/dashboardWebView/components/Media/FolderItem.tsx b/src/dashboardWebView/components/Media/FolderItem.tsx index e0b1b0d4..36acc73f 100644 --- a/src/dashboardWebView/components/Media/FolderItem.tsx +++ b/src/dashboardWebView/components/Media/FolderItem.tsx @@ -1,9 +1,14 @@ -import { FolderIcon } from '@heroicons/react/24/solid'; +import { FolderIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/solid'; import { basename, join } from 'path'; import * as React from 'react'; -import * as l10n from '@vscode/l10n'; -import { LocalizationKey } from '../../../localization'; +import { LocalizationKey, localize } from '../../../localization'; import useMediaFolder from '../../hooks/useMediaFolder'; +import { QuickAction } from '../Menu'; +import { messageHandler } from '@estruyf/vscode/dist/client'; +import { DashboardMessage } from '../../DashboardMessage'; +import { useState } from 'react'; +import { Alert } from '../Modals/Alert'; +import { parseWinPath } from '../../../helpers/parseWinPath'; export interface IFolderItemProps { folder: string; @@ -17,6 +22,7 @@ export const FolderItem: React.FunctionComponent = ({ staticFolder }: React.PropsWithChildren) => { const { updateFolder } = useMediaFolder(); + const [showAlert, setShowAlert] = useState(false); const relFolderPath = wsFolder ? folder.replace(wsFolder, '') : folder; @@ -25,28 +31,73 @@ export const FolderItem: React.FunctionComponent = ({ [relFolderPath, staticFolder] ); + const updateFolderName = React.useCallback(() => { + messageHandler.send(DashboardMessage.updateMediaFolder, { folder, wsFolder, staticFolder }) + }, []); + + const onDelete = React.useCallback(() => { + setShowAlert(true); + }, []); + + const confirmDeletion = React.useCallback(() => { + messageHandler.send(DashboardMessage.deleteMediaFolder, { folder }); + setShowAlert(false); + }, [folder]); + return ( -
  • - -
    • + + + {!isContentFolder && ( +
    + + + + + +
    + )} + + + {showAlert && ( + setShowAlert(false)} + trigger={confirmDeletion} + /> + )} + ); }; diff --git a/src/dashboardWebView/components/Media/FooterActions.tsx b/src/dashboardWebView/components/Media/FooterActions.tsx index 3782b56f..1346e3b7 100644 --- a/src/dashboardWebView/components/Media/FooterActions.tsx +++ b/src/dashboardWebView/components/Media/FooterActions.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import * as l10n from '@vscode/l10n'; import { QuickAction } from '../Menu'; -import { LocalizationKey } from '../../../localization'; +import { LocalizationKey, localize } from '../../../localization'; import { ClipboardIcon, CodeBracketIcon, EyeIcon, PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/solid'; import { useRecoilState } from 'recoil'; import { SelectedItemActionAtom } from '../../state'; @@ -36,25 +35,25 @@ export const FooterActions: React.FunctionComponent = ({ return (
    setSelectedItemAction({ path: media.fsPath, action: 'view' })}> setSelectedItemAction({ path: media.fsPath, action: 'edit' })}> {viewData?.filePath ? ( @@ -62,8 +61,8 @@ export const FooterActions: React.FunctionComponent = ({ = ({ {viewData?.position && snippets.length > 0 && (