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

#505 - Header theming

Browse Source
This commit is contained in:
Elio Struyf
2023-02-07 17:47:07 +01:00
parent 5354619283
commit 4eea855d0f
6 changed files with 56 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboardWebView/components/ErrorView/index.tsx
+4 -1
View File
@@ -1,14 +1,17 @@
import { ExclamationIcon } from '@heroicons/react/solid';
import * as React from 'react';
import useThemeColors from '../../hooks/useThemeColors';
export interface IErrorViewProps {}
export const ErrorView: React.FunctionComponent<IErrorViewProps> = (
props: React.PropsWithChildren<IErrorViewProps>
) => {
const { getColors } = useThemeColors();
return (
<main className={`h-full w-full flex flex-col justify-center items-center space-y-2`}>
<ExclamationIcon className="w-24 h-24 text-red-500" />
<ExclamationIcon className={`w-24 h-24 ${getColors(`text-red-500`, `text-[var(--vscode-editorError-foreground)]`)}`} />
<p className="text-xl">Sorry, something went wrong.</p>
<p className="text-base">Please close the dashboard and try again.</p>
</main>
src/dashboardWebView/components/Header/Breadcrumb.tsx
+19 -3
View File
@@ -4,6 +4,7 @@ import * as React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { HOME_PAGE_NAVIGATION_ID } from '../../../constants';
import { parseWinPath } from '../../../helpers/parseWinPath';
import useThemeColors from '../../hooks/useThemeColors';
import { SearchAtom, SelectedMediaFolderAtom, SettingsAtom } from '../../state';
export interface IBreadcrumbProps {}
@@ -15,6 +16,7 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
const [, setSearchValue] = useRecoilState(SearchAtom);
const [folders, setFolders] = React.useState<string[]>([]);
const settings = useRecoilValue(SettingsAtom);
const { getColors } = useThemeColors();
const updateFolder = (folder: string) => {
setSearchValue('');
@@ -82,7 +84,10 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
<div className="flex items-center">
<button
onClick={() => setSelectedFolder(HOME_PAGE_NAVIGATION_ID)}
className="text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500"
className={getColors(
`text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
`text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`
)}
>
<CollectionIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
<span className="sr-only">Home</span>
@@ -94,7 +99,12 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
<li key={folder} className="flex">
<div className="flex items-center">
<svg
className="flex-shrink-0 h-5 w-5 text-gray-300 dark:text-whisper-900"
className={`flex-shrink-0 h-5 w-5 ${
getColors(
`text-gray-300 dark:text-whisper-900`,
`text-[var(--vscode-tab-inactiveForeground)]`
)
}`}
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
@@ -102,9 +112,15 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
>
<path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
</svg>
<button
onClick={() => updateFolder(folder)}
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500"
className={`ml-4 text-sm font-medium ${
getColors(
`text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
`text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`
)
}`}
>
{basename(folder)}
</button>
src/dashboardWebView/components/Header/ClearFilters.tsx
+8 -2
View File
@@ -15,8 +15,8 @@ import {
} from '../../state';
import { DefaultValue } from 'recoil';
import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';
import useThemeColors from '../../hooks/useThemeColors';
export const guardRecoilDefaultValue = (candidate: any): candidate is DefaultValue => {
if (candidate instanceof DefaultValue) return true;
@@ -29,6 +29,7 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
props: React.PropsWithChildren<IClearFiltersProps>
) => {
const [show, setShow] = React.useState(false);
const { getColors } = useThemeColors();
const folder = useRecoilValue(FolderSelector);
const tag = useRecoilValue(TagSelector);
@@ -63,7 +64,12 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
return (
<button
className="flex items-center hover:text-teal-600"
className={`flex items-center ${
getColors(
'hover:text-teal-600',
'hover:text-[var(--vscode-textLink-activeForeground)]'
)
}`}
onClick={reset}
title={`Clear filters, grouping, and sorting`}
>
src/dashboardWebView/components/Header/Header.tsx
+9 -3
View File
@@ -142,10 +142,16 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
return (
<div className={`w-full sticky top-0 z-40 ${
getColors(`bg-gray-100 dark:bg-vulcan-500`, `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`)
} `}>
getColors(
`bg-gray-100 dark:bg-vulcan-500`,
`bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`
)
}`}>
<div className={`mb-0 border-b ${
getColors(`bg-gray-100 dark:bg-vulcan-500 border-gray-200 dark:border-vulcan-300`, `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--vscode-editorWidget-border)]`)
getColors(
`bg-gray-100 dark:bg-vulcan-500 border-gray-200 dark:border-vulcan-300`,
`bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--vscode-editorWidget-border)]`
)
}`}>
<Tabs onNavigate={updateView} />
</div>
src/dashboardWebView/components/Header/PaginationStatus.tsx
+8 -1
View File
@@ -2,6 +2,7 @@ import * as React from 'react';
import { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import usePagination from '../../hooks/usePagination';
import useThemeColors from '../../hooks/useThemeColors';
import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
export interface IPaginationStatusProps {
@@ -19,6 +20,7 @@ export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> =
totalPages || 0,
totalMedia
);
const { getColors } = useThemeColors();
const totelItemsOnPage = useMemo(() => {
const items = (page + 1) * pageSetNr;
@@ -30,7 +32,12 @@ export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> =
return (
<div className="hidden sm:flex">
<p className="text-sm text-gray-500 dark:text-whisper-900">
<p className={`text-sm ${
getColors(
'text-gray-500 dark:text-whisper-900',
'text-[var(--vscode-tab-inactiveForeground)]'
)
}`}>
Showing <span className="font-medium">{page * pageSetNr + 1}</span> to{' '}
<span className="font-medium">{totelItemsOnPage}</span> of{' '}
<span className="font-medium">{totalItems}</span> results
src/dashboardWebView/components/Header/RefreshDashboardData.tsx
+8 -1
View File
@@ -4,6 +4,7 @@ import * as React from 'react';
import { useCallback } from 'react';
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
import { DashboardMessage } from '../../DashboardMessage';
import useThemeColors from '../../hooks/useThemeColors';
import { NavigationType } from '../../models';
import {
CategoryAtom,
@@ -32,6 +33,7 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
// Media
const resetPage = useResetRecoilState(PageAtom);
const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
const { getColors } = useThemeColors();
const refreshPages = () => {
setLoading(true);
@@ -60,7 +62,12 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
return (
<button
className={`mr-2 text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`}
className={`mr-2 ${
getColors(
'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500',
'text-[var(--vscode-foreground)] hover:text-[var(--vscode-textLink-foreground)]'
)
}`}
title="Refresh dashboard"
onClick={refresh}
>