diff --git a/CHANGELOG.md b/CHANGELOG.md index 86828ffb..f1caa206 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ - [#768](https://github.com/estruyf/vscode-front-matter/issues/768): Update broken link to the documentation - [#771](https://github.com/estruyf/vscode-front-matter/issues/771): Fix lowercase `data` tab label - [#782](https://github.com/estruyf/vscode-front-matter/issues/782): Fix for setting the correct view when inserting media or snippets +- [#786](https://github.com/estruyf/vscode-front-matter/issues/786): Remove on startup as VSCode now triggers on known commands ## [10.0.2] - 2024-03-01 diff --git a/package.json b/package.json index 1be9fa47..509933d6 100644 --- a/package.json +++ b/package.json @@ -50,8 +50,7 @@ }, "activationEvents": [ "workspaceContains:**/.frontmatter", - "workspaceContains:**/frontmatter.json", - "onStartupFinished" + "workspaceContains:**/frontmatter.json" ], "main": "./dist/extension.js", "contributes": { diff --git a/src/dashboardWebView/components/Common/DateField.tsx b/src/dashboardWebView/components/Common/DateField.tsx index 737d94ed..1c260f8c 100644 --- a/src/dashboardWebView/components/Common/DateField.tsx +++ b/src/dashboardWebView/components/Common/DateField.tsx @@ -36,7 +36,7 @@ export const DateField: React.FunctionComponent = ({ } return ( - + {dateValue} ); diff --git a/src/dashboardWebView/components/Common/ItemSelection.tsx b/src/dashboardWebView/components/Common/ItemSelection.tsx index b8de29e1..716b6e23 100644 --- a/src/dashboardWebView/components/Common/ItemSelection.tsx +++ b/src/dashboardWebView/components/Common/ItemSelection.tsx @@ -5,27 +5,27 @@ import { useMemo } from 'react'; export interface IItemSelectionProps { filePath: string; - isRowItem?: boolean; + show?: boolean; } export const ItemSelection: React.FunctionComponent = ({ filePath, - isRowItem + show }: React.PropsWithChildren) => { const { onMultiSelect, selectedFiles } = useSelectedItems(); const cssNames = useMemo(() => { - if (isRowItem) { + if (show) { return 'block'; } return `${selectedFiles.includes(filePath) ? 'block' : 'hidden'} absolute top-2 left-2`; - }, [isRowItem, selectedFiles]); + }, [show, selectedFiles]); return (
) => { e.stopPropagation(); diff --git a/src/dashboardWebView/components/Contents/FooterActions.tsx b/src/dashboardWebView/components/Contents/FooterActions.tsx index 1dcfc991..2f16c5de 100644 --- a/src/dashboardWebView/components/Contents/FooterActions.tsx +++ b/src/dashboardWebView/components/Contents/FooterActions.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import * as l10n from '@vscode/l10n'; import { QuickAction } from '../Menu'; -import { EyeIcon, GlobeEuropeAfricaIcon, TrashIcon } from '@heroicons/react/24/outline'; +import { EyeIcon, GlobeEuropeAfricaIcon, TrashIcon } from '@heroicons/react/24/solid'; import { LocalizationKey } from '../../../localization'; import { openFile, openOnWebsite } from '../../utils'; import { useRecoilState } from 'recoil'; import { SelectedItemActionAtom } from '../../state'; +// import { ItemSelection } from '../Common/ItemSelection'; export interface IFooterActionsProps { filePath: string; @@ -19,7 +20,9 @@ export const FooterActions: React.FunctionComponent = ({ const [, setSelectedItemAction] = useRecoilState(SelectedItemActionAtom); return ( -
+
+ {/* */} + = ({ ...pageData }: React.PropsWithChildren) => { + const { selectedFiles } = useSelectedItems(); const view = useRecoilValue(ViewSelector); const settings = useRecoilValue(SettingsSelector); const draftField = useMemo(() => settings?.draftField, [settings]); const cardFields = useMemo(() => settings?.dashboardState?.contents?.cardFields, [settings?.dashboardState?.contents?.cardFields]); const { escapedTitle, escapedDescription } = useCard(pageData, settings?.dashboardState?.contents?.cardFields); - const navigate = useNavigate(); const { titleHtml, descriptionHtml, dateHtml, statusHtml, tagsHtml, imageHtml, footerHtml } = useExtensibility({ fmFilePath: pageData.fmFilePath, date: pageData.date, @@ -41,6 +42,8 @@ export const Item: React.FunctionComponent = ({ pageData }); + const isSelected = useMemo(() => selectedFiles.includes(pageData.fmFilePath), [selectedFiles, pageData.fmFilePath]); + const onOpenFile = React.useCallback(() => { openFile(pageData.fmFilePath); }, [pageData.fmFilePath]); @@ -107,12 +110,12 @@ export const Item: React.FunctionComponent = ({ return (
  • @@ -194,27 +197,7 @@ export const Item: React.FunctionComponent = ({ tagsHtml ? (
    ) : ( - tags && tags.length > 0 && ( -
    - {tags.map( - (tag, index) => tag && ( - - ) - )} -
    - ) + ) }
    @@ -238,7 +221,7 @@ export const Item: React.FunctionComponent = ({ 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)]`} >
    - + + ); +}; \ No newline at end of file diff --git a/src/dashboardWebView/components/Contents/Tags.tsx b/src/dashboardWebView/components/Contents/Tags.tsx new file mode 100644 index 00000000..e1fe48d9 --- /dev/null +++ b/src/dashboardWebView/components/Contents/Tags.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import { Tag } from './Tag'; + +export interface ITagsProps { + values?: string[]; + tagField?: string | null | undefined; +} + +export const Tags: React.FunctionComponent = ({ + values, + tagField +}: React.PropsWithChildren) => { + if (!values || values.length === 0) { + return null; + } + + return ( +
    + {values.map( + (tag, index) => tag && ( + + ) + )} +
    + ); +}; \ No newline at end of file diff --git a/src/dashboardWebView/components/Media/FooterActions.tsx b/src/dashboardWebView/components/Media/FooterActions.tsx index fab383a4..cd473f01 100644 --- a/src/dashboardWebView/components/Media/FooterActions.tsx +++ b/src/dashboardWebView/components/Media/FooterActions.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import * as l10n from '@vscode/l10n'; import { QuickAction } from '../Menu'; import { LocalizationKey } from '../../../localization'; -import { ClipboardIcon, CodeBracketIcon, EyeIcon, PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline'; +import { ClipboardIcon, CodeBracketIcon, EyeIcon, PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/solid'; import { useRecoilState } from 'recoil'; import { SelectedItemActionAtom } from '../../state'; import { MediaInfo, Snippet, ViewData } from '../../../models'; diff --git a/src/dashboardWebView/index.tsx b/src/dashboardWebView/index.tsx index a8f25f6d..24a93426 100644 --- a/src/dashboardWebView/index.tsx +++ b/src/dashboardWebView/index.tsx @@ -52,7 +52,8 @@ export const routePaths: { [name: string]: string } = { }; const mutationObserver = new MutationObserver((_, __) => { - updateCssVariables(); + const darkMode = document.body.classList.contains('vscode-dark'); + updateCssVariables(darkMode); }); const elm = document.querySelector('#app'); @@ -67,7 +68,7 @@ if (elm) { const webviewUrl = elm?.getAttribute('data-webview-url'); const isCrashDisabled = elm?.getAttribute('data-is-crash-disabled'); - updateCssVariables(); + updateCssVariables(document.body.classList.contains('vscode-dark')); mutationObserver.observe(document.body, { childList: false, attributes: true }); if (isProd === 'true' && isCrashDisabled === 'false') { diff --git a/src/dashboardWebView/utils/darkenColor.ts b/src/dashboardWebView/utils/darkenColor.ts index 84fd577c..c71f9976 100644 --- a/src/dashboardWebView/utils/darkenColor.ts +++ b/src/dashboardWebView/utils/darkenColor.ts @@ -57,7 +57,9 @@ export const darkenColor = (color: string | undefined, percentage: number) => { // Check if the color is in rgba format if (color.startsWith('rgba')) { // Extract the alpha value - const alpha = Number(color.match(/[\d\.]+$/)); + const alphaMatch = color.match(/[\d\.]+(?=\))/); + const alpha = alphaMatch ? Number(alphaMatch[0]) : 1; + console.log('alpha:', alpha); return `rgba(${darkenedR}, ${darkenedG}, ${darkenedB}, ${alpha})`; } diff --git a/src/dashboardWebView/utils/updateCssVariables.ts b/src/dashboardWebView/utils/updateCssVariables.ts index 3a2ad906..df3aa2c0 100644 --- a/src/dashboardWebView/utils/updateCssVariables.ts +++ b/src/dashboardWebView/utils/updateCssVariables.ts @@ -1,7 +1,7 @@ import { darkenColor } from './darkenColor'; import { preserveColor } from './preserveColor'; -export const updateCssVariables = () => { +export const updateCssVariables = (isDarkTheme: boolean = true) => { const styles = getComputedStyle(document.documentElement); // Lightbox @@ -83,4 +83,9 @@ export const updateCssVariables = () => { '--frontmatter-sideBar-background', darkenColor(sideBarBg, 2) || 'var(--vscode-sideBar-background)' ); + + document.documentElement.style.setProperty( + '--frontmatter-border-active', + darkenColor(borderColor, isDarkTheme ? -30 : 30) || 'var(--vscode-activityBar-activeBorder)' + ); }; diff --git a/src/hooks/useDarkMode.tsx b/src/hooks/useDarkMode.tsx index 3453ee52..c8d1d5b1 100644 --- a/src/hooks/useDarkMode.tsx +++ b/src/hooks/useDarkMode.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react'; +import { useEffect } from 'react'; export default function useDarkMode() { const setTheme = (elm: HTMLElement) => {