diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json index c7410152..6446021d 100644 --- a/l10n/bundle.l10n.json +++ b/l10n/bundle.l10n.json @@ -274,6 +274,8 @@ "dashboard.preview.button.refresh.title": "Refresh", "dashboard.preview.button.open.title": "Open", + "dashboard.snippetsView.item.type.content": "Content snippet", + "dashboard.snippetsView.item.type.media": "Media snippet", "dashboard.snippetsView.item.quickAction.editSnippet": "Edit snippet", "dashboard.snippetsView.item.quickAction.deleteSnippet": "Delete snippet", "dashboard.snippetsView.item.quickAction.viewSnippet": "View snippet file", diff --git a/src/dashboardWebView/components/SnippetsView/Item.tsx b/src/dashboardWebView/components/SnippetsView/Item.tsx index 762dbbed..8d64ecf5 100644 --- a/src/dashboardWebView/components/SnippetsView/Item.tsx +++ b/src/dashboardWebView/components/SnippetsView/Item.tsx @@ -1,8 +1,7 @@ +import * as l10n from '@vscode/l10n'; import { Messenger } from '@estruyf/vscode/dist/client'; import { CodeBracketIcon, - DocumentTextIcon, - PhotoIcon, } from '@heroicons/react/24/solid'; import * as React from 'react'; import { useCallback, useMemo, useRef, useState } from 'react'; @@ -17,9 +16,9 @@ import { Alert } from '../Modals/Alert'; import { FormDialog } from '../Modals/FormDialog'; import { NewForm } from './NewForm'; import SnippetForm, { SnippetFormHandle } from './SnippetForm'; -import * as l10n from '@vscode/l10n'; import { LocalizationKey } from '../../../localization'; import { FooterActions } from './FooterActions'; +import { ItemMenu } from './ItemMenu'; export interface IItemProps { snippetKey: string; @@ -153,20 +152,40 @@ export const Item: React.FunctionComponent = ({ return ( <>
  • -
    +

    - {snippet.isMediaSnippet ? ( - - ) : ( - - )} + {snippet.title || snippetKey}

    + setShowInsertDialog(true)} /> + } + > + setShowInsertDialog(true)} + onDelete={() => setShowAlert(true)} /> + + +
    + { + snippet.isMediaSnippet ? l10n.t(LocalizationKey.dashboardSnippetsViewItemTypeContent) : l10n.t(LocalizationKey.dashboardSnippetsViewItemTypeMedia) + } +
    +

    {snippet.description}

    diff --git a/src/dashboardWebView/components/SnippetsView/ItemMenu.tsx b/src/dashboardWebView/components/SnippetsView/ItemMenu.tsx new file mode 100644 index 00000000..56faa995 --- /dev/null +++ b/src/dashboardWebView/components/SnippetsView/ItemMenu.tsx @@ -0,0 +1,97 @@ +import * as React from 'react'; +import * as l10n from '@vscode/l10n'; +import { useCallback } from 'react'; +import { LocalizationKey } from '../../../localization'; +import { openFile } from '../../utils/MessageHandlers'; +import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../../components/shadcn/Dropdown'; +import { EllipsisHorizontalIcon } from '@heroicons/react/24/solid'; +import { EyeIcon, PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline'; + +export interface IItemMenuProps { + insertEnabled: boolean; + sourcePath?: string; + onEdit?: () => void; + onInsert: () => void; + onDelete?: () => void; +} + +export const ItemMenu: React.FunctionComponent = ({ + insertEnabled, + sourcePath, + onEdit, + onInsert, + onDelete, +}: React.PropsWithChildren) => { + + const showFile = useCallback(() => { + openFile(sourcePath); + }, [sourcePath]); + + if (!onEdit && !onDelete && !sourcePath && !insertEnabled) { + return null; + } + + return ( +
    +
    +
    + + + {l10n.t(LocalizationKey.commonMenu)} + + + + { + insertEnabled && ( + + + {l10n.t(LocalizationKey.commonInsertSnippet)} + + ) + } + + { + !sourcePath ? ( + <> + { + onEdit && ( + + + {l10n.t(LocalizationKey.dashboardSnippetsViewItemQuickActionEditSnippet)} + + ) + } + + { + onDelete && ( + + + {l10n.t(LocalizationKey.dashboardSnippetsViewItemQuickActionDeleteSnippet)} + + ) + } + + ) : ( + + + {l10n.t(LocalizationKey.dashboardSnippetsViewItemQuickActionViewSnippet)} + + ) + } + + +
    +
    +
    + ); +}; \ No newline at end of file diff --git a/src/localization/localization.enum.ts b/src/localization/localization.enum.ts index ec1086a7..33016e73 100644 --- a/src/localization/localization.enum.ts +++ b/src/localization/localization.enum.ts @@ -887,6 +887,14 @@ export enum LocalizationKey { * Open */ dashboardPreviewButtonOpenTitle = 'dashboard.preview.button.open.title', + /** + * Content snippet + */ + dashboardSnippetsViewItemTypeContent = 'dashboard.snippetsView.item.type.content', + /** + * Media snippet + */ + dashboardSnippetsViewItemTypeMedia = 'dashboard.snippetsView.item.type.media', /** * Edit snippet */