Update localization

l10n/bundle.l10n.json

@@ -5,6 +5,7 @@
   "common.clear": "Clear",
   "common.search": "Search",
   "common.save": "Save",
+  "common.menu": "Menu",
   "common.error.message": "Sorry, something went wrong.",
 
   "field.required": "Required field",
@@ -121,14 +122,16 @@
   "dashboard.layout.sponsor.review.label": "Review",
   "dashboard.layout.sponsor.review.msg": "Review Front Matter",
 
+  "dashboard.media.common.title": "Title",
+  "dashboard.media.common.caption": "Caption",
+  "dashboard.media.common.alt": "Alternate text",
+  "dashboard.media.common.size": "Size",
+
   "dashboard.media.dialog.title": "View details",
   "dashboard.media.panel.close": "Close panel",
   "dashboard.media.metadata.panel.title": "Update metadata",
   "dashboard.media.metadata.panel.description": "Please specify the metadata you want to set for the file.",
   "dashboard.media.metadata.panel.field.fileName": "Filename",
-  "dashboard.media.metadata.panel.field.title": "Title",
-  "dashboard.media.metadata.panel.field.caption": "Caption",
-  "dashboard.media.metadata.panel.field.alt": "Alternate text",
   "dashboard.media.metadata.panel.form.metadata.title": "Metadata",
   "dashboard.media.metadata.panel.form.information.title": "Information",
   "dashboard.media.metadata.panel.form.information.createdDate": "Created",
@@ -139,6 +142,17 @@
   "dashboard.media.folderCreation.hexo.create": "Create post asset folder",
   "dashboard.media.folderCreation.folder.create": "Create new folder",
 
+  "dashboard.media.item.quickAction.insert.field": "Insert image for your \"{0}\" field",
+  "dashboard.media.item.quickAction.insert.markdown": "Insert image with markdown markup",
+  "dashboard.media.item.quickAction.insert.snippet": "Insert snippet",
+  "dashboard.media.item.quickAction.copy.path": "Copy media path",
+  "dashboard.media.item.quickAction.delete": "Delete media file",
+  "dashboard.media.item.menuItem.edit.metadata": "Edit metadata",
+  "dashboard.media.item.menuItem.insert.image": "Insert image",
+  "dashboard.media.item.menuItem.reveal.media": "Reveal media",
+  "dashboard.media.item.infoDialog.snippet.description": "Select the media snippet to use for the current media file.",
+  "dashboard.media.item.alert.delete.description": "Are you sure you want to delete the file from the {0} folder?",
+
   "panel.actions.title": "Actions",
   "panel.actions.openDashboard": "Open dashboard",
   "panel.actions.openPreview": "Open preview",

src/dashboardWebView/components/Header/ClearFilters.tsx

@@ -13,11 +13,10 @@ import {
   DEFAULT_TAG_STATE,
   DEFAULT_CATEGORY_STATE
 } from '../../state';
-
 import { DefaultValue } from 'recoil';
 import { useEffect } from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
-import { l10n } from 'vscode';
+import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
 export const guardRecoilDefaultValue = (candidate: any): candidate is DefaultValue => {

src/dashboardWebView/components/Media/DetailsSlideOver.tsx

@@ -204,7 +204,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                   'text-[var(--vscode-editor-foreground)]'
                                 )
                                   }`}>
-                                  {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldTitle)}
+                                  {l10n.t(LocalizationKey.dashboardMediaCommonTitle)}
                                 </label>
                                 <div className="mt-1">
                                   <DetailsInput value={title || ""} onChange={(e) => setTitle(e.target.value)} />
@@ -219,7 +219,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                       'text-[var(--vscode-editor-foreground)]'
                                     )
                                       }`}>
-                                      {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldCaption)}
+                                      {l10n.t(LocalizationKey.dashboardMediaCommonCaption)}
                                     </label>
                                     <div className="mt-1">
                                       <DetailsInput value={caption || ""} onChange={(e) => setCaption(e.target.value)} isTextArea />
@@ -231,7 +231,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                       'text-[var(--vscode-editor-foreground)]'
                                     )
                                       }`}>
-                                      {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldAlt)}
+                                      {l10n.t(LocalizationKey.dashboardMediaCommonAlt)}
                                     </label>
                                     <div className="mt-1">
                                       <DetailsInput value={alt || ""} onChange={(e) => setAlt(e.target.value)} isTextArea />
@@ -288,12 +288,12 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                             )
                               }`}>
                               <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldFileName)} details={media.filename} />
-                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldTitle)} details={media.title || ""} />
+                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonTitle)} details={media.title || ""} />
 
                               {isImageFile && (
                                 <>
-                                  <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldCaption)} details={media.caption || ''} />
-                                  <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldAlt)} details={media.alt || ''} />
+                                  <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonCaption)} details={media.caption || ''} />
+                                  <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonAlt)} details={media.alt || ''} />
                                 </>
                               )}
                             </dl>

src/dashboardWebView/components/Media/FolderItem.tsx

@@ -1,4 +1,4 @@
-import { DocumentIcon, FolderIcon } from '@heroicons/react/solid';
+import { FolderIcon } from '@heroicons/react/solid';
 import { basename, join } from 'path';
 import * as React from 'react';
 import { useRecoilState } from 'recoil';
@@ -28,12 +28,11 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
 
   return (
     <li
-      className={`group relative p-4 ${
-        getColors(
-          'hover:bg-gray-200 dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800',
-          'hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
-        )
-      }`}
+      className={`group relative p-4 ${getColors(
+        'hover:bg-gray-200 dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800',
+        'hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
+      )
+        }`}
     >
       <button
         title={isContentFolder ? 'Content directory folder' : 'Public directory folder'}
@@ -43,12 +42,11 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
         <div className="relative mr-4">
           <FolderIcon className={`h-12 w-12`} />
           {isContentFolder && (
-            <span className={`font-extrabold absolute bottom-3 left-1/2 transform -translate-x-1/2 ${
-              getColors(
-                `text-whisper-800 dark:text-vulcan-500`,
-                `text-[var(--vscode-foreground)]`
-              )
-            }`}>
+            <span className={`font-extrabold absolute bottom-3 left-1/2 transform -translate-x-1/2 ${getColors(
+              `text-whisper-800 dark:text-vulcan-500`,
+              `text-[var(--vscode-foreground)]`
+            )
+              }`}>
               C
             </span>
           )}

src/dashboardWebView/components/Media/Item.tsx

@@ -38,6 +38,8 @@ import { DetailsSlideOver } from './DetailsSlideOver';
 import { usePopper } from 'react-popper';
 import { MediaSnippetForm } from './MediaSnippetForm';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IItemProps {
   media: MediaInfo;
@@ -68,7 +70,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
 
   const [referenceElement, setReferenceElement] = useState<any>(null);
   const [popperElement, setPopperElement] = useState<any>(null);
-  const { styles, attributes, forceUpdate } = usePopper(referenceElement, popperElement, {
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: 'bottom-end',
     strategy: 'fixed'
   });
@@ -510,8 +512,8 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                       <QuickAction
                         title={
                           viewData.data.metadataInsert && viewData.data.fieldName
-                            ? `Insert image for your "${viewData.data.fieldName}" field`
-                            : `Insert image with markdown markup`
+                            ? l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertField, viewData.data.fieldName)
+                            : l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertMarkdown)
                         }
                         onClick={insertToArticle}
                       >
@@ -519,26 +521,26 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                       </QuickAction>
 
                       {viewData?.data?.position && mediaSnippets.length > 0 && (
-                        <QuickAction title="Insert snippet" onClick={insertSnippet}>
+                        <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertSnippet)} onClick={insertSnippet}>
                           <CodeIcon className={`w-4 h-4`} aria-hidden="true" />
                         </QuickAction>
                       )}
                     </>
                   ) : (
                     <>
-                      <QuickAction title="Copy media path" onClick={copyToClipboard}>
+                      <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionCopyPath)} onClick={copyToClipboard}>
                         <ClipboardIcon className={`w-4 h-4`} aria-hidden="true" />
                       </QuickAction>
                     </>
                   )}
 
-                  <QuickAction title="Delete media file" onClick={deleteMedia}>
+                  <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionDelete)} onClick={deleteMedia}>
                     <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
                   </QuickAction>
                 </div>
 
                 <div ref={setReferenceElement} className={`flex`}>
-                  <ActionMenuButton title={`Menu`} />
+                  <ActionMenuButton title={l10n.t(LocalizationKey.commonMenu)} />
                 </div>
 
                 <div
@@ -552,7 +554,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                       title={
                         <div className="flex items-center">
                           <PencilIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                          <span>Edit metadata</span>
+                          <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemEditMetadata)}</span>
                         </div>
                       }
                       onClick={updateMetadata}
@@ -564,7 +566,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                           title={
                             <div className="flex items-center">
                               <PlusIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                              <span>Insert image</span>
+                              <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemInsertImage)}</span>
                             </div>
                           }
                           onClick={insertToArticle}
@@ -599,7 +601,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                                 className="mr-2 h-5 w-5 flex-shrink-0"
                                 aria-hidden={true}
                               />{' '}
-                              <span>Copy media path</span>
+                              <span>{l10n.t(LocalizationKey.dashboardMediaItemQuickActionCopyPath)}</span>
                             </div>
                           }
                           onClick={copyToClipboard}
@@ -613,7 +615,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                       title={
                         <div className="flex items-center">
                           <EyeIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                          <span>Reveal media</span>
+                          <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemRevealMedia)}</span>
                         </div>
                       }
                       onClick={revealMedia}
@@ -623,7 +625,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                       title={
                         <div className="flex items-center">
                           <TrashIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                          <span>Delete</span>
+                          <span>{l10n.t(LocalizationKey.commonDelete)}</span>
                         </div>
                       }
                       onClick={deleteMedia}
@@ -638,25 +640,33 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           </p>
           {!isImageFile && media.title && (
             <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
-              <b className={`mr-2`}>Title:</b>
+              <b className={`mr-2`}>
+                {l10n.t(LocalizationKey.dashboardMediaCommonTitle)}:
+              </b>
               <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.title}</span>
             </p>
           )}
           {media.caption && (
             <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
-              <b className={`mr-2`}>Caption:</b>
+              <b className={`mr-2`}>
+                {l10n.t(LocalizationKey.dashboardMediaCommonCaption)}:
+              </b>
               <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.caption}</span>
             </p>
           )}
           {!media.caption && media.alt && (
             <p className={`mt-2 text-xs font-medium pointer-events-none  flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
-              <b className={`mr-2`}>Alt:</b>
+              <b className={`mr-2`}>
+                {l10n.t(LocalizationKey.dashboardMediaCommonAlt)}:
+              </b>
               <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.alt}</span>
             </p>
           )}
           {(media?.size || media?.dimensions) && (
             <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
-              <b className={`mr-1`}>Size:</b>
+              <b className={`mr-1`}>
+                {l10n.t(LocalizationKey.dashboardMediaCommonSize)}:
+              </b>
               <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>
                 {getMediaDetails()}
               </span>
@@ -668,8 +678,8 @@ export const Item: React.FunctionComponent<IItemProps> = ({
       {showSnippetSelection && (
         <InfoDialog
           icon={<CodeIcon className="h-6 w-6" aria-hidden="true" />}
-          title="Insert snippet"
-          description="Select the media snippet to use for the current media file."
+          title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertSnippet)}
+          description={l10n.t(LocalizationKey.dashboardMediaItemInfoDialogSnippetDescription)}
           dismiss={() => setShowSnippetSelection(false)}
         >
           <ul className="flex justify-center">
@@ -711,10 +721,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({
 
       {showAlert && (
         <Alert
-          title={`Delete: ${basename(parseWinPath(media.fsPath) || '')}`}
-          description={`Are you sure you want to delete the file from the ${getFolder()} folder?`}
-          okBtnText={`Delete`}
-          cancelBtnText={`Cancel`}
+          title={`${l10n.t(LocalizationKey.commonDelete)}: ${basename(parseWinPath(media.fsPath) || '')}`}
+          description={l10n.t(LocalizationKey.dashboardMediaItemAlertDeleteDescription, getFolder())}
+          okBtnText={l10n.t(LocalizationKey.commonDelete)}
+          cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
           dismiss={() => setShowAlert(false)}
           trigger={confirmDeletion}
         />

src/localization/localization.enum.ts

@@ -23,6 +23,10 @@ export enum LocalizationKey {
    * Save
    */
   commonSave = 'common.save',
+  /**
+   * Menu
+   */
+  commonMenu = 'common.menu',
   /**
    * Sorry, something went wrong.
    */
@@ -359,6 +363,22 @@ export enum LocalizationKey {
    * Review Front Matter
    */
   dashboardLayoutSponsorReviewMsg = 'dashboard.layout.sponsor.review.msg',
+  /**
+   * Title
+   */
+  dashboardMediaCommonTitle = 'dashboard.media.common.title',
+  /**
+   * Caption
+   */
+  dashboardMediaCommonCaption = 'dashboard.media.common.caption',
+  /**
+   * Alternate text
+   */
+  dashboardMediaCommonAlt = 'dashboard.media.common.alt',
+  /**
+   * Size
+   */
+  dashboardMediaCommonSize = 'dashboard.media.common.size',
   /**
    * View details
    */
@@ -379,18 +399,6 @@ export enum LocalizationKey {
    * Filename
    */
   dashboardMediaMetadataPanelFieldFileName = 'dashboard.media.metadata.panel.field.fileName',
-  /**
-   * Title
-   */
-  dashboardMediaMetadataPanelFieldTitle = 'dashboard.media.metadata.panel.field.title',
-  /**
-   * Caption
-   */
-  dashboardMediaMetadataPanelFieldCaption = 'dashboard.media.metadata.panel.field.caption',
-  /**
-   * Alternate text
-   */
-  dashboardMediaMetadataPanelFieldAlt = 'dashboard.media.metadata.panel.field.alt',
   /**
    * Metadata
    */
@@ -423,6 +431,46 @@ export enum LocalizationKey {
    * Create new folder
    */
   dashboardMediaFolderCreationFolderCreate = 'dashboard.media.folderCreation.folder.create',
+  /**
+   * Insert image for your "{0}" field
+   */
+  dashboardMediaItemQuickActionInsertField = 'dashboard.media.item.quickAction.insert.field',
+  /**
+   * Insert image with markdown markup
+   */
+  dashboardMediaItemQuickActionInsertMarkdown = 'dashboard.media.item.quickAction.insert.markdown',
+  /**
+   * Insert snippet
+   */
+  dashboardMediaItemQuickActionInsertSnippet = 'dashboard.media.item.quickAction.insert.snippet',
+  /**
+   * Copy media path
+   */
+  dashboardMediaItemQuickActionCopyPath = 'dashboard.media.item.quickAction.copy.path',
+  /**
+   * Delete media file
+   */
+  dashboardMediaItemQuickActionDelete = 'dashboard.media.item.quickAction.delete',
+  /**
+   * Edit metadata
+   */
+  dashboardMediaItemMenuItemEditMetadata = 'dashboard.media.item.menuItem.edit.metadata',
+  /**
+   * Insert image
+   */
+  dashboardMediaItemMenuItemInsertImage = 'dashboard.media.item.menuItem.insert.image',
+  /**
+   * Reveal media
+   */
+  dashboardMediaItemMenuItemRevealMedia = 'dashboard.media.item.menuItem.reveal.media',
+  /**
+   * Select the media snippet to use for the current media file.
+   */
+  dashboardMediaItemInfoDialogSnippetDescription = 'dashboard.media.item.infoDialog.snippet.description',
+  /**
+   * Are you sure you want to delete the file from the {0} folder?
+   */
+  dashboardMediaItemAlertDeleteDescription = 'dashboard.media.item.alert.delete.description',
   /**
    * Actions
    */