adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-08-07 09:23:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update preview + snippets

Browse Source
This commit is contained in:
Elio Struyf
2023-07-17 19:23:44 -04:00
parent b289f2d6f4
commit ed8954b38a
5 changed files with 121 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
l10n/bundle.l10n.json
+17 -1
View File
@@ -7,6 +7,8 @@
"common.save": "Save",
"common.menu": "Menu",
"common.insert": "Insert",
"common.insert.snippet": "Insert snippet",
"common.update": "Update",
"common.error.message": "Sorry, something went wrong.",
"field.required": "Required field",
@@ -145,7 +147,6 @@
"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",
@@ -167,6 +168,21 @@
"dashboard.media.mediaSnippetForm.formDialog.title": "Insert media: {0}",
"dashboard.media.mediaSnippetForm.formDialog.description": "Insert the {0} media file into the current article",
"dashboard.preview.input.placeholder": "Enter a URL",
"dashboard.preview.button.navigate.title": "Navigate",
"dashboard.preview.button.refresh.title": "Refresh",
"dashboard.preview.button.open.title": "Open",
"dashboard.snippetsView.item.quickAction.editSnippet": "Edit snippet",
"dashboard.snippetsView.item.quickAction.deleteSnippet": "Delete snippet",
"dashboard.snippetsView.item.quickAction.viewSnippet": "View snippet file",
"dashboard.snippetsView.item.insert.formDialog.title": "Insert snippet: {0}",
"dashboard.snippetsView.item.insert.formDialog.description": "Insert the {0} snippet into the current article",
"dashboard.snippetsView.item.edit.formDialog.title": "Edit snippet: {0}",
"dashboard.snippetsView.item.edit.formDialog.description": "Edit the {0} snippet",
"dashboard.snippetsView.item.alert.title": "Delete snippet: {0}",
"dashboard.snippetsView.item.alert.description": "Are you sure you want to delete the {0} snippet?",
"panel.actions.title": "Actions",
"panel.actions.openDashboard": "Open dashboard",
"panel.actions.openPreview": "Open preview",
src/dashboardWebView/components/Media/Item.tsx
+2 -2
View File
@@ -521,7 +521,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
</QuickAction>
{viewData?.data?.position && mediaSnippets.length > 0 && (
<QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertSnippet)} onClick={insertSnippet}>
<QuickAction title={l10n.t(LocalizationKey.commonInsertSnippet)} onClick={insertSnippet}>
<CodeIcon className={`w-4 h-4`} aria-hidden="true" />
</QuickAction>
)}
@@ -678,7 +678,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
{showSnippetSelection && (
<InfoDialog
icon={<CodeIcon className="h-6 w-6" aria-hidden="true" />}
title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertSnippet)}
title={l10n.t(LocalizationKey.commonInsertSnippet)}
description={l10n.t(LocalizationKey.dashboardMediaItemInfoDialogSnippetDescription)}
dismiss={() => setShowSnippetSelection(false)}
>
src/dashboardWebView/components/Preview/Preview.tsx
+15 -4
View File
@@ -5,6 +5,8 @@ import { useEffect, useRef, useState } from 'react';
import { PreviewCommands } from '../../../constants';
import useThemeColors from '../../hooks/useThemeColors';
import { EventData } from '@estruyf/vscode/dist/models';
import * as l10n from '@vscode/l10n';
import { LocalizationKey } from '../../../localization';
export interface IPreviewProps {
url: string | null;
@@ -68,7 +70,7 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
navigateToUrl();
}
}}
placeholder="Enter a URL"
placeholder={l10n.t(LocalizationKey.dashboardPreviewInputPlaceholder)}
className="w-full m-[1px] h-full border-1 border-transparent text-xs py-1 px-2 focus:border-color-blue-500 bg-[var(--vscode-tab-activeBackground)] text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)] focus:text-[var(--vscode-tab-activeForeground)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-[var(--vscode-focusBorder)"
/>
@@ -76,15 +78,24 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
className={`actions flex items-center space-x-2 px-2 ${getColors('text-vulcan-500 dark:text-whisper-100', 'text-[var(--vscode-list-activeSelectionForeground)]')
}`}
>
<button title="Navigate" onClick={navigateToUrl} className={getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}>
<button
title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
onClick={navigateToUrl}
className={getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}>
<ArrowRightIcon className="w-4 h-4" aria-hidden="true" />
</button>
<button title="Refresh" onClick={onRefresh} className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
<button
title={l10n.t(LocalizationKey.dashboardPreviewButtonRefreshTitle)}
onClick={onRefresh}
className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
<RefreshIcon className="w-4 h-4" aria-hidden="true" />
</button>
<button title="Open" onClick={openInBrowser} className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
<button
title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
onClick={openInBrowser}
className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
<ExternalLinkIcon className="w-4 h-4" aria-hidden="true" />
</button>
</div>
src/dashboardWebView/components/SnippetsView/Item.tsx
+27 -21
View File
@@ -24,6 +24,8 @@ 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';
export interface IItemProps {
snippetKey: string;
@@ -203,7 +205,9 @@ export const Item: React.FunctionComponent<IItemProps> = ({
</div>
<div className="hidden group-hover:flex">
<QuickAction title={`Insert snippet`} onClick={() => setShowInsertDialog(true)}>
<QuickAction
title={l10n.t(LocalizationKey.commonInsertSnippet)}
onClick={() => setShowInsertDialog(true)}>
<PlusIcon className={`w-4 h-4`} aria-hidden="true" />
</QuickAction>
</div>
@@ -225,7 +229,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
<div className="hidden group-hover:flex">
{insertToContent && !snippet.isMediaSnippet && (
<>
<QuickAction title={`Insert snippet`} onClick={() => setShowInsertDialog(true)}>
<QuickAction title={l10n.t(LocalizationKey.commonInsertSnippet)} onClick={() => setShowInsertDialog(true)}>
<PlusIcon className={`w-4 h-4`} aria-hidden="true" />
</QuickAction>
</>
@@ -233,16 +237,22 @@ export const Item: React.FunctionComponent<IItemProps> = ({
{!snippet.sourcePath ? (
<>
<QuickAction title={`Edit snippet`} onClick={onOpenEdit}>
<QuickAction
title={l10n.t(LocalizationKey.dashboardSnippetsViewItemQuickActionEditSnippet)}
onClick={onOpenEdit}>
<PencilIcon className={`w-4 h-4`} aria-hidden="true" />
</QuickAction>
<QuickAction title={`Delete snippet`} onClick={() => setShowAlert(true)}>
<QuickAction
title={l10n.t(LocalizationKey.dashboardSnippetsViewItemQuickActionDeleteSnippet)}
onClick={() => setShowAlert(true)}>
<TrashIcon className={`w-4 h-4`} aria-hidden="true" />
</QuickAction>
</>
) : (
<QuickAction title={`View snippet file`} onClick={showFile}>
<QuickAction
title={l10n.t(LocalizationKey.dashboardSnippetsViewItemQuickActionViewSnippet)}
onClick={showFile}>
<EyeIcon className={`w-4 h-4`} aria-hidden="true" />
</QuickAction>
)}
@@ -260,15 +270,13 @@ export const Item: React.FunctionComponent<IItemProps> = ({
{showInsertDialog && (
<FormDialog
title={`Insert snippet: ${snippet.title || snippetKey}`}
description={`Insert the ${(
snippet.title || snippetKey
).toLowerCase()} snippet into the current article`}
title={l10n.t(LocalizationKey.dashboardSnippetsViewItemInsertFormDialogTitle, snippet.title || snippetKey)}
description={l10n.t(LocalizationKey.dashboardSnippetsViewItemInsertFormDialogDescription, (snippet.title || snippetKey).toLowerCase())}
isSaveDisabled={!insertToContent}
trigger={insertToArticle}
dismiss={() => setShowInsertDialog(false)}
okBtnText="Insert"
cancelBtnText="Cancel"
okBtnText={l10n.t(LocalizationKey.commonInsert)}
cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
>
<SnippetForm
ref={formRef}
@@ -281,13 +289,13 @@ export const Item: React.FunctionComponent<IItemProps> = ({
{showEditDialog && (
<FormDialog
title={`Edit snippet: ${snippet.title || snippetKey}`}
description={`Edit the ${(snippet.title || snippetKey).toLowerCase()} snippet`}
title={l10n.t(LocalizationKey.dashboardSnippetsViewItemEditFormDialogTitle, snippet.title || snippetKey)}
description={l10n.t(LocalizationKey.dashboardSnippetsViewItemEditFormDialogDescription, (snippet.title || snippetKey).toLowerCase())}
isSaveDisabled={!snippetTitle || !snippetOriginalBody}
trigger={onSnippetUpdate}
dismiss={reset}
okBtnText="Update"
cancelBtnText="Cancel"
okBtnText={l10n.t(LocalizationKey.commonUpdate)}
cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
>
<NewForm
title={snippetTitle}
@@ -304,12 +312,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({
{showAlert && (
<Alert
title={`Delete snippet: ${snippet.title || snippetKey}`}
description={`Are you sure you want to delete the ${(
snippet.title || snippetKey
).toLowerCase()} snippet?`}
okBtnText={`Delete`}
cancelBtnText={`Cancel`}
title={l10n.t(LocalizationKey.dashboardSnippetsViewItemAlertTitle, snippet.title || snippetKey)}
description={l10n.t(LocalizationKey.dashboardSnippetsViewItemAlertDescription, (snippet.title || snippetKey).toLowerCase())}
okBtnText={l10n.t(LocalizationKey.commonDelete)}
cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
dismiss={() => setShowAlert(false)}
trigger={onDelete}
/>
src/localization/localization.enum.ts
+60 -4
View File
@@ -31,6 +31,14 @@ export enum LocalizationKey {
* Insert
*/
commonInsert = 'common.insert',
/**
* Insert snippet
*/
commonInsertSnippet = 'common.insert.snippet',
/**
* Update
*/
commonUpdate = 'common.update',
/**
* Sorry, something went wrong.
*/
@@ -443,10 +451,6 @@ export enum LocalizationKey {
* Insert image with markdown markup
*/
dashboardMediaItemQuickActionInsertMarkdown = 'dashboard.media.item.quickAction.insert.markdown',
/**
* Insert snippet
*/
dashboardMediaItemQuickActionInsertSnippet = 'dashboard.media.item.quickAction.insert.snippet',
/**
* Copy media path
*/
@@ -515,6 +519,58 @@ export enum LocalizationKey {
* Insert the {0} media file into the current article
*/
dashboardMediaMediaSnippetFormFormDialogDescription = 'dashboard.media.mediaSnippetForm.formDialog.description',
/**
* Enter a URL
*/
dashboardPreviewInputPlaceholder = 'dashboard.preview.input.placeholder',
/**
* Navigate
*/
dashboardPreviewButtonNavigateTitle = 'dashboard.preview.button.navigate.title',
/**
* Refresh
*/
dashboardPreviewButtonRefreshTitle = 'dashboard.preview.button.refresh.title',
/**
* Open
*/
dashboardPreviewButtonOpenTitle = 'dashboard.preview.button.open.title',
/**
* Edit snippet
*/
dashboardSnippetsViewItemQuickActionEditSnippet = 'dashboard.snippetsView.item.quickAction.editSnippet',
/**
* Delete snippet
*/
dashboardSnippetsViewItemQuickActionDeleteSnippet = 'dashboard.snippetsView.item.quickAction.deleteSnippet',
/**
* View snippet file
*/
dashboardSnippetsViewItemQuickActionViewSnippet = 'dashboard.snippetsView.item.quickAction.viewSnippet',
/**
* Insert snippet: {0}
*/
dashboardSnippetsViewItemInsertFormDialogTitle = 'dashboard.snippetsView.item.insert.formDialog.title',
/**
* Insert the {0} snippet into the current article
*/
dashboardSnippetsViewItemInsertFormDialogDescription = 'dashboard.snippetsView.item.insert.formDialog.description',
/**
* Edit snippet: {0}
*/
dashboardSnippetsViewItemEditFormDialogTitle = 'dashboard.snippetsView.item.edit.formDialog.title',
/**
* Edit the {0} snippet
*/
dashboardSnippetsViewItemEditFormDialogDescription = 'dashboard.snippetsView.item.edit.formDialog.description',
/**
* Delete snippet: {0}
*/
dashboardSnippetsViewItemAlertTitle = 'dashboard.snippetsView.item.alert.title',
/**
* Are you sure you want to delete the {0} snippet?
*/
dashboardSnippetsViewItemAlertDescription = 'dashboard.snippetsView.item.alert.description',
/**
* Actions
*/