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

#505 - Step + welcome view colors

Browse Source
This commit is contained in:
Elio Struyf
2023-02-08 19:27:48 +01:00
parent 716f7d1f0c
commit 20ee0e1ca5
30 changed files with 576 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboardWebView/components/Steps/StepsToGetStarted.tsx
+30 -15
View File
@@ -12,6 +12,7 @@ import { CheckCircleIcon, ChevronDownIcon } from '@heroicons/react/outline';
import { CheckCircleIcon as CheckCircleIconSolid } from '@heroicons/react/solid';
import { FrameworkDetectors } from '../../../constants/FrameworkDetectors';
import { join } from 'path';
import useThemeColors from '../../hooks/useThemeColors';
export interface IStepsToGetStartedProps {
settings: Settings;
@@ -28,6 +29,8 @@ const Folder = ({
folders: ContentFolder[];
addFolder: (folder: string) => void;
}) => {
const { getColors } = useThemeColors();
const isAdded = useMemo(
() => folders.find((f) => f.path.toLowerCase() === join(wsFolder, folder).toLowerCase()),
[folder, folders, wsFolder]
@@ -35,13 +38,12 @@ const Folder = ({
return (
<div
className={`text-sm flex items-center ${
isAdded ? 'text-teal-800' : 'text-vulcan-300 dark:text-whisper-800'
}`}
className={`text-sm flex items-center ${isAdded ? getColors('text-teal-800', 'text-[var(--vscode-textLink-foreground)]') : getColors('text-vulcan-300 dark:text-whisper-800', '')
}`}
>
<button
onClick={() => addFolder(folder)}
className="mr-2 hover:text-teal-500"
className={`mr-2 flex gap-2 items-center ${getColors('hover:text-teal-500', 'hover:text-[var(--vscode-textLink-activeForeground)]')}`}
title={`Add as a content folder to Front Matter`}
>
{isAdded ? (
@@ -49,8 +51,8 @@ const Folder = ({
) : (
<CheckCircleIcon className={`h-4 w-4`} />
)}
<span>{folder}</span>
</button>
<span>{folder}</span>
</div>
);
};
@@ -60,6 +62,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
}: React.PropsWithChildren<IStepsToGetStartedProps>) => {
const [framework, setFramework] = useState<string | null>(null);
const [taxImported, setTaxImported] = useState<boolean>(false);
const { getColors } = useThemeColors();
const frameworks: Framework[] = FrameworkDetectors.map((detector: any) => detector.framework);
@@ -102,8 +105,8 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
onClick: settings.initialized
? undefined
: () => {
Messenger.send(DashboardMessage.initializeProject);
}
Messenger.send(DashboardMessage.initializeProject);
}
},
{
id: `welcome-framework`,
@@ -116,27 +119,39 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
<Menu as="div" className="relative inline-block text-left mt-4">
<div>
<Menu.Button className="group flex justify-center text-vulcan-500 hover:text-vulcan-600 dark:text-whisper-500 dark:hover:text-whisper-600 p-2 rounded-md border border-vulcan-400 dark:border-white">
<Menu.Button className={`group flex justify-center p-2 rounded-md border ${getColors(
'text-vulcan-500 hover:text-vulcan-600 dark:text-whisper-500 dark:hover:text-whisper-600 border-vulcan-400 dark:border-white',
'text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]'
)
}`}>
{framework ? framework : 'Select your framework'}
<ChevronDownIcon
className="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:text-whisper-600 dark:group-hover:text-whisper-700"
className={`flex-shrink-0 -mr-1 ml-1 h-5 w-5 ${getColors(
'text-gray-400 group-hover:text-gray-500 dark:text-whisper-600 dark:group-hover:text-whisper-700',
''
)
}`}
aria-hidden="true"
/>
</Menu.Button>
</div>
<Menu.Items
className={`w-40 origin-top-left absolute left-0 z-10 mt-2 rounded-md shadow-2xl bg-white dark:bg-vulcan-500 ring-1 ring-vulcan-400 dark:ring-white ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto`}
className={`w-40 origin-top-left absolute left-0 z-10 mt-2 rounded-md shadow-2xl ring-1 ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto ${getColors(
'bg-white dark:bg-vulcan-500 ring-vulcan-400 dark:ring-white',
'bg-[var(--vscode-sideBar-background)] ring-[var(--frontmatter-border)]'
)
}`}
>
<div className="py-1">
<MenuItem
title={`other`}
value={`other`}
isCurrent={!framework}
onClick={(value) => setFrameworkAndSendMessage(value)}
onClick={(value: string) => setFrameworkAndSendMessage(value)}
/>
<hr />
<hr className={`border-[var(--frontmatter-border)]`} />
{frameworks.map((f) => (
<MenuItem
@@ -144,7 +159,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
title={f.name}
value={f.name}
isCurrent={f.name === framework}
onClick={(value) => setFrameworkAndSendMessage(value)}
onClick={(value: string) => setFrameworkAndSendMessage(value)}
/>
))}
</div>
@@ -169,7 +184,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
<div className="mt-4">
<div className="text-sm">Folders containing content:</div>
<div className="mt-1 space-y-1">
{settings?.dashboardState?.welcome?.contentFolders?.map((folder) => (
{settings?.dashboardState?.welcome?.contentFolders?.map((folder: string) => (
<Folder
key={folder}
folder={folder}
@@ -182,7 +197,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
</div>
)}
<p className="mt-4 text-vulcan-300 dark:text-gray-400">
<p className={`mt-4 ${getColors('text-vulcan-300 dark:text-gray-400', '')}`}>
<b>IMPORTANT</b>: You can perform this action by{' '}
<b>right-clicking on the folder in the explorer view</b>, and selecting{' '}
<b>register folder</b>.