diff --git a/CHANGELOG.md b/CHANGELOG.md index 8b226b5f..ef0a876d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ - [#821](https://github.com/estruyf/vscode-front-matter/issues/821): Added URI handler to support command links from the documentation - [#822](https://github.com/estruyf/vscode-front-matter/issues/822): Added docs to the panel & dashboard views - [#829](https://github.com/estruyf/vscode-front-matter/issues/829): UI extensibility is now generally available +- [#831](https://github.com/estruyf/vscode-front-matter/issues/831): Added "select all" action bar button to the content and media dashboards ### 🐞 Fixes diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json index bedf64e4..944f60b5 100644 --- a/l10n/bundle.l10n.json +++ b/l10n/bundle.l10n.json @@ -154,6 +154,7 @@ "dashboard.filters.languageFilter.all": "All", "dashboard.header.actionsBar.itemsSelected": "{0} selected", + "dashboard.header.actionsBar.selectAll": "Select all", "dashboard.header.actionsBar.alertDelete.title": "Delete selected files", "dashboard.header.actionsBar.alertDelete.description": "Are you sure you want to delete the selected files?", diff --git a/src/dashboardWebView/components/Contents/Overview.tsx b/src/dashboardWebView/components/Contents/Overview.tsx index 246b3205..47012869 100644 --- a/src/dashboardWebView/components/Contents/Overview.tsx +++ b/src/dashboardWebView/components/Contents/Overview.tsx @@ -6,7 +6,7 @@ import { useRecoilState, useRecoilValue } from 'recoil'; import { groupBy } from '../../../helpers/GroupBy'; import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMatterIcon'; import { GroupOption } from '../../constants/GroupOption'; -import { GroupingSelector, PageAtom, ViewSelector } from '../../state'; +import { GroupingSelector, PageAtom, PagedItems, ViewSelector } from '../../state'; import { Item } from './Item'; import { List } from './List'; import usePagination from '../../hooks/usePagination'; @@ -34,6 +34,7 @@ export const Overview: React.FunctionComponent = ({ const page = useRecoilValue(PageAtom); const { pageSetNr } = usePagination(settings?.dashboardState.contents.pagination); const view = useRecoilValue(ViewSelector); + const [, setPagedItems] = useRecoilState(PagedItems); const pagedPages = useMemo(() => { if (pageSetNr) { @@ -100,6 +101,10 @@ export const Overview: React.FunctionComponent = ({ return { groupKeys, groupedPages }; }, [pages, grouping, settings?.draftField]); + React.useEffect(() => { + setPagedItems(pagedPages.map((page) => page.fmFilePath)); + }, [pagedPages]); + React.useEffect(() => { messageHandler.request(DashboardMessage.getPinnedItems).then((items) => { setIsReady(true); diff --git a/src/dashboardWebView/components/Header/ActionsBar.tsx b/src/dashboardWebView/components/Header/ActionsBar.tsx index af034c42..612a7f17 100644 --- a/src/dashboardWebView/components/Header/ActionsBar.tsx +++ b/src/dashboardWebView/components/Header/ActionsBar.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { NavigationType, Page } from '../../models'; -import { CommandLineIcon, PencilIcon, TrashIcon, ChevronDownIcon, XMarkIcon, EyeIcon, LanguageIcon } from '@heroicons/react/24/outline'; +import { CommandLineIcon, PencilIcon, TrashIcon, ChevronDownIcon, XMarkIcon, EyeIcon, LanguageIcon, CheckIcon } from '@heroicons/react/24/outline'; import { useRecoilState, useRecoilValue } from 'recoil'; -import { MultiSelectedItemsAtom, SelectedItemActionAtom, SelectedMediaFolderSelector, SettingsSelector } from '../../state'; +import { MultiSelectedItemsAtom, PagedItems, SelectedItemActionAtom, SelectedMediaFolderSelector, SettingsSelector } from '../../state'; import { ActionsBarItem } from './ActionsBarItem'; import * as l10n from '@vscode/l10n'; import { LocalizationKey } from '../../../localization'; @@ -29,6 +29,7 @@ export const ActionsBar: React.FunctionComponent = ({ const selectedFolder = useRecoilValue(SelectedMediaFolderSelector); const settings = useRecoilValue(SettingsSelector); const { files } = useFilesContext(); + const pagedItems = useRecoilValue(PagedItems); const viewFile = React.useCallback(() => { if (selectedFiles.length === 1) { @@ -66,6 +67,10 @@ export const ActionsBar: React.FunctionComponent = ({ } }, [selectedFiles]); + const selectAllItems = React.useCallback(() => { + setSelectedFiles([...pagedItems]); + }, [pagedItems]); + const languageActions = React.useMemo(() => { const actions: React.ReactNode[] = []; @@ -192,6 +197,7 @@ export const ActionsBar: React.FunctionComponent = ({ 1} onClick={viewFile} + title={l10n.t(LocalizationKey.commonView)} > - { - selectedFiles.length > 0 && ( - - ) - } - +
+ { + selectedFiles.length > 0 && ( + setSelectedFiles([])} + title={l10n.t(LocalizationKey.dashboardHeaderActionsBarItemsSelected, selectedFiles.length)} + > + + ) + } + + +
+
+ {l10n.t(LocalizationKey.dashboardHeaderActionsBarSelectAll)} +
+
+ {showAlert && ( = ({ dismiss={() => setShowAlert(false)} trigger={onDeleteConfirm} /> - )} + ) + } ); }; \ No newline at end of file diff --git a/src/dashboardWebView/components/Header/ActionsBarItem.tsx b/src/dashboardWebView/components/Header/ActionsBarItem.tsx index 91a34e43..cfe12eb4 100644 --- a/src/dashboardWebView/components/Header/ActionsBarItem.tsx +++ b/src/dashboardWebView/components/Header/ActionsBarItem.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { cn } from '../../../utils/cn'; export interface IActionsBarItemProps { + title?: string; className?: string; disabled?: boolean; onClick?: () => void; @@ -11,11 +12,13 @@ export const ActionsBarItem: React.FunctionComponent = ({ children, className, disabled, - onClick + onClick, + title }: React.PropsWithChildren) => { return (