#671 - Implement checkbox on media card

assets/media/styles.css

@@ -247,14 +247,6 @@
   background-color: var(--vscode-button-secondaryHoverBackground);
 }
 
-.table__cell {
-  overflow: hidden;
-}
-
-.table__title {
-  text-transform: capitalize;
-}
-
 .table__cell__seo_details {
   padding: 10px;
 }
@@ -281,11 +273,6 @@
   margin-left: 0.5rem;
 }
 
-.seo__status__note {
-  font-size: 10px;
-  padding: 3px 0;
-}
-
 /* Fields */
 .field__toggle {
   position: relative;
@@ -364,7 +351,7 @@ input:checked + .field__toggle__slider:before {
 }
 
 /* File list */
-.file_list vscode-label {
+.file_list label {
   border-bottom: 1px solid var(--vscode-foreground);
 }
 

l10n/bundle.l10n.json

@@ -37,6 +37,10 @@
   "common.back": "Back",
   "common.open": "Open",
   "common.openWithValue": "Open: {0}",
+  "common.view": "View",
+  "common.translate": "Translate",
+  "common.languages": "Languages",
+  "common.scripts": "Scripts",
 
   "loading.initPages": "Loading content",
 
@@ -146,6 +150,10 @@
   "dashboard.filters.languageFilter.label": "Locale",
   "dashboard.filters.languageFilter.all": "All",
 
+  "dashboard.header.actionsBar.itemsSelected": "{0} selected",
+  "dashboard.header.actionsBar.alertDelete.title": "Delete selected files",
+  "dashboard.header.actionsBar.alertDelete.description": "Are you sure you want to delete the selected files?",
+
   "dashboard.header.breadcrumb.home": "Home",
 
   "dashboard.header.clearFilters.title": "Clear filters, grouping, and sorting",
@@ -229,6 +237,9 @@
   "dashboard.media.folderCreation.hexo.create": "Create post asset folder",
   "dashboard.media.folderCreation.folder.create": "Create new folder",
 
+  "dashboard.media.folderItem.contentDirectory": "Content directory",
+  "dashboard.media.folderItem.publicDirectory": "Public directory",
+
   "dashboard.media.item.buttom.insert.image": "Insert image",
   "dashboard.media.item.buttom.insert.snippet": "Insert snippet",
 

package.json

@@ -2744,7 +2744,6 @@
   },
   "devDependencies": {
     "@actions/core": "^1.10.0",
-    "@bendera/vscode-webview-elements": "0.6.2",
     "@estruyf/vscode": "^1.1.0",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
@@ -2769,6 +2768,7 @@
     "@types/vscode": "^1.73.0",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
+    "@vscode-elements/elements": "^1.2.0",
     "@vscode/l10n": "^0.0.14",
     "@vscode/webview-ui-toolkit": "^1.2.2",
     "@webpack-cli/serve": "^1.7.0",
@@ -2816,7 +2816,7 @@
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.8.0",
     "react-sortable-hoc": "^2.0.0",
-    "recoil": "^0.4.1",
+    "recoil": "^0.7.7",
     "remark-gfm": "^3.0.1",
     "rimraf": "^3.0.2",
     "semver": "^7.3.8",

src/dashboardWebView/components/Common/ItemSelection.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import useSelectedItems from '../../hooks/useSelectedItems';
+import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
+import { useMemo } from 'react';
+
+export interface IItemSelectionProps {
+  filePath: string;
+  isRowItem?: boolean;
+}
+
+export const ItemSelection: React.FunctionComponent<IItemSelectionProps> = ({
+  filePath,
+  isRowItem
+}: React.PropsWithChildren<IItemSelectionProps>) => {
+  const { onMultiSelect, selectedFiles } = useSelectedItems();
+
+  const cssNames = useMemo(() => {
+    if (isRowItem) {
+      return 'block';
+    }
+    return `${selectedFiles.includes(filePath) ? 'block' : 'hidden'} absolute top-2 left-2`;
+  }, [isRowItem, selectedFiles]);
+
+  return (
+    <div className={`${cssNames} group-hover:block`}>
+      <VSCodeCheckbox
+        style={{
+          boxShadow: isRowItem ? "" : "0 0 3px var(--frontmatter-border-preserve)"
+        }}
+        onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+          e.stopPropagation();
+          onMultiSelect(filePath);
+        }}
+        checked={selectedFiles.includes(filePath)} />
+    </div>
+  );
+};

src/dashboardWebView/components/Contents/Contents.tsx

@@ -11,6 +11,7 @@ import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { TelemetryEvent } from '../../../constants';
 import { PageLayout } from '../Layout/PageLayout';
+import { FilesProvider } from '../../providers/FilesProvider';
 
 export interface IContentsProps {
   pages: Page[];
@@ -32,18 +33,20 @@ export const Contents: React.FunctionComponent<IContentsProps> = ({
   }, []);
 
   return (
-    <PageLayout folders={pageFolders} totalPages={pageItems.length}>
-      <div className="w-full flex-grow max-w-full mx-auto pb-6">
-        {loading ? <Spinner type={loading} /> : <Overview pages={pageItems} settings={settings} />}
-      </div>
+    <FilesProvider files={pageItems}>
+      <PageLayout folders={pageFolders} totalPages={pageItems.length}>
+        <div className="w-full flex-grow max-w-full mx-auto pb-6">
+          {loading ? <Spinner type={loading} /> : <Overview pages={pageItems} settings={settings} />}
+        </div>
 
-      <SponsorMsg
-        beta={settings?.beta}
-        version={settings?.versionInfo}
-        isBacker={settings?.isBacker}
-      />
+        <SponsorMsg
+          beta={settings?.beta}
+          version={settings?.versionInfo}
+          isBacker={settings?.isBacker}
+        />
 
-      <img className='hidden' src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes%2Fmetrics%2Fdashboards&slug=content" alt="Content metrics" />
-    </PageLayout>
+        <img className='hidden' src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes%2Fmetrics%2Fdashboards&slug=content" alt="Content metrics" />
+      </PageLayout>
+    </FilesProvider>
   );
 };

src/dashboardWebView/components/Contents/Item.tsx

@@ -17,6 +17,7 @@ import { useNavigate } from 'react-router-dom';
 import { routePaths } from '../..';
 import useCard from '../../hooks/useCard';
 import { I18nLabel } from './I18nLabel';
+import { ItemSelection } from '../Common/ItemSelection';
 
 export interface IItemProps extends Page { }
 
@@ -133,6 +134,8 @@ export const Item: React.FunctionComponent<IItemProps> = ({
             }
           </button>
 
+          <ItemSelection filePath={pageData.fmFilePath} />
+
           <div className="relative p-4 w-full grow">
             {
               (statusPlaceholder || datePlaceholder) && (
@@ -232,6 +235,8 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           className={`px-5 cursor-pointer w-full text-left grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8 py-2 border-b hover:bg-opacity-70 border-[var(--frontmatter-border)] hover:bg-[var(--vscode-sideBar-background)]`}
         >
           <div className="col-span-8 font-bold truncate flex items-center space-x-4">
+            <ItemSelection filePath={pageData.fmFilePath} isRowItem />
+
             <button
               title={escapedTitle ? l10n.t(LocalizationKey.commonOpenWithValue, escapedTitle) : l10n.t(LocalizationKey.commonOpen)}
               onClick={openFile}>

src/dashboardWebView/components/Contents/PinnedItem.tsx

@@ -7,6 +7,7 @@ import { messageHandler } from '@estruyf/vscode/dist/client';
 import useCard from '../../hooks/useCard';
 import { SettingsSelector } from '../../state';
 import { useRecoilValue } from 'recoil';
+import { ItemSelection } from '../Common/ItemSelection';
 
 export interface IPinnedItemProps extends Page { }
 
@@ -21,7 +22,7 @@ export const PinnedItem: React.FunctionComponent<IPinnedItemProps> = ({
   }, [pageData.fmFilePath]);
 
   return (
-    <li className='group flex w-full border border-[var(--frontmatter-border)] rounded bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-sideBarTitle-foreground)]'>
+    <li className='group flex w-full border border-[var(--frontmatter-border)] rounded bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-sideBarTitle-foreground)] relative'>
       <button onClick={openFile} className='relative h-full w-1/3'>
         {
           pageData["fmPreviewImage"] ? (
@@ -41,6 +42,8 @@ export const PinnedItem: React.FunctionComponent<IPinnedItemProps> = ({
         }
       </button>
 
+      <ItemSelection filePath={pageData.fmFilePath} />
+
       <button onClick={openFile} className='relative w-2/3 p-4 pr-6 text-left flex items-start'>
         <p className='font-bold'>{escapedTitle}</p>