iarv/vscode-front-matter
1
0
Fork 1
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-05-08 06:14:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

#662 - Always show the all articles tab

Browse Source
This commit is contained in:
Elio Struyf
2023-09-13 11:26:50 +02:00
parent acc0a9ad19
commit d74611e04f
5 changed files with 48 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -7,6 +7,7 @@
### 🎨 Enhancements
- [#659](https://github.com/estruyf/vscode-front-matter/issues/659): Implement a filter for the taxonomy dashboard
- [#662](https://github.com/estruyf/vscode-front-matter/issues/662): Always show the `all articles` tab with the page counter
### ⚡️ Optimizations
src/dashboardWebView/components/Contents/Item.tsx
+2 -8
View File
@@ -119,18 +119,12 @@ export const Item: React.FunctionComponent<IItemProps> = ({
return (
<li className="relative">
<div
className={`group flex flex-col items-start content-start h-full w-full text-left shadow-md dark:shadow-none hover:shadow-xl border rounded ${getColors(
'bg-gray-50 dark:bg-vulcan-200 text-vulcan-500 dark:text-whisper-500 dark:hover:bg-vulcan-100 border-gray-200 dark:border-vulcan-50',
'bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-sideBarTitle-foreground)] border-[var(--frontmatter-border)]'
)
className={`group flex flex-col items-start content-start h-full w-full text-left shadow-md dark:shadow-none hover:shadow-xl border rounded bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-sideBarTitle-foreground)] border-[var(--frontmatter-border)]
}`}
>
<button
onClick={openFile}
className={`relative h-36 w-full overflow-hidden border-b cursor-pointer ${getColors(
'border-gray-100 dark:border-vulcan-100 dark:group-hover:border-vulcan-200',
'border-[var(--frontmatter-border)]'
)
className={`relative h-36 w-full overflow-hidden border-b cursor-pointer border-[var(--frontmatter-border)]
}`}
>
{
src/dashboardWebView/components/Contents/Status.tsx
+14 -8
View File
@@ -1,8 +1,7 @@
import * as React from 'react';
import { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import useThemeColors from '../../hooks/useThemeColors';
import { SettingsAtom } from '../../state';
import { SettingsAtom, TabInfoAtom } from '../../state';
import * as l10n from '@vscode/l10n';
import { LocalizationKey } from '../../../localization';
@@ -13,8 +12,8 @@ export interface IStatusProps {
export const Status: React.FunctionComponent<IStatusProps> = ({
draft
}: React.PropsWithChildren<IStatusProps>) => {
const { getColors } = useThemeColors();
const settings = useRecoilValue(SettingsAtom);
const tabInfo = useRecoilValue(TabInfoAtom);
const draftField = useMemo(() => settings?.draftField, [settings]);
@@ -32,7 +31,7 @@ export const Status: React.FunctionComponent<IStatusProps> = ({
if (draftValue) {
return (
<span
className={`inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs ${getColors(`text-whisper-200 dark:text-vulcan-500 bg-teal-500`, `text-[var(--vscode-badge-foreground)] bg-[var(--vscode-badge-background)]`)}`}
className={`inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs text-[var(--vscode-badge-foreground)] bg-[var(--vscode-badge-background)]`}
>
{draftValue}
</span>
@@ -42,17 +41,24 @@ export const Status: React.FunctionComponent<IStatusProps> = ({
}
}
if (tabInfo && Object.keys(tabInfo).length <= 1) {
return null;
}
return (
<span
className={`draft__status
inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs
${getColors(`text-whisper-200 dark:text-vulcan-500`, ``)}
${draftValue ?
getColors(`bg-red-500`, 'bg-[var(--vscode-statusBarItem-errorBackground)] text-[var(--vscode-statusBarItem-errorForeground)]') :
getColors(`bg-teal-500`, 'bg-[var(--vscode-badge-background)] text-[var(--vscode-badge-foreground)]')
'bg-[var(--vscode-statusBarItem-errorBackground)] text-[var(--vscode-statusBarItem-errorForeground)]' :
'bg-[var(--vscode-badge-background)] text-[var(--vscode-badge-foreground)]'
}`}
>
{draftValue ? l10n.t(LocalizationKey.dashboardContentsStatusDraft) : l10n.t(LocalizationKey.dashboardContentsStatusPublished)}
{
draftValue ?
l10n.t(LocalizationKey.dashboardContentsStatusDraft) :
l10n.t(LocalizationKey.dashboardContentsStatusPublished)
}
</span>
);
};
src/dashboardWebView/components/Header/Navigation.tsx
+11 -13
View File
@@ -1,7 +1,7 @@
import * as React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { Tab } from '../../constants/Tab';
import { AllPagesAtom, SettingsAtom, TabAtom, TabInfoAtom } from '../../state';
import { SettingsAtom, TabAtom, TabInfoAtom } from '../../state';
import * as l10n from '@vscode/l10n';
import { LocalizationKey } from '../../../localization';
@@ -40,24 +40,22 @@ const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
export const Navigation: React.FunctionComponent<INavigationProps> = ({
}: React.PropsWithChildren<INavigationProps>) => {
const pages = useRecoilValue(AllPagesAtom);
const [crntTab, setCrntTab] = useRecoilState(TabAtom);
const tabInfo = useRecoilValue(TabInfoAtom);
const settings = useRecoilValue(SettingsAtom);
const tabs = [
{ name: l10n.t(LocalizationKey.dashboardHeaderNavigationAllArticles), id: Tab.All },
{ name: l10n.t(LocalizationKey.dashboardHeaderNavigationPublished), id: Tab.Published },
{ name: l10n.t(LocalizationKey.dashboardHeaderNavigationDraft), id: Tab.Draft }
];
const tabs = React.useMemo(() => {
const crntTabs = [
{ name: l10n.t(LocalizationKey.dashboardHeaderNavigationAllArticles), id: Tab.All }
];
const usesDraft = React.useMemo(() => {
return pages.some((x) => x.fmDraft);
}, [pages]);
if (settings?.draftField?.type === 'boolean' && tabInfo && Object.keys(tabInfo).length > 1) {
crntTabs.push({ name: l10n.t(LocalizationKey.dashboardHeaderNavigationPublished), id: Tab.Published });
crntTabs.push({ name: l10n.t(LocalizationKey.dashboardHeaderNavigationDraft), id: Tab.Draft });
}
if (!usesDraft) {
return null;
}
return crntTabs;
}, [settings?.draftField?.type, tabInfo]);
return (
<nav className="flex-1 -mb-px flex space-x-6 xl:space-x-8" aria-label="Tabs">
src/dashboardWebView/hooks/usePages.tsx
+20 -18
View File
@@ -20,7 +20,6 @@ import { Messenger } from '@estruyf/vscode/dist/client';
import { DashboardMessage } from '../DashboardMessage';
import { EventData } from '@estruyf/vscode/dist/models';
import { parseWinPath } from '../../helpers/parseWinPath';
import { format } from 'date-fns';
export default function usePages(pages: Page[]) {
const [pageItems, setPageItems] = useRecoilState(AllPagesAtom);
@@ -146,25 +145,28 @@ export default function usePages(pages: Page[]) {
// Draft field is a boolean field
const draftFieldName = draftField?.name || 'draft';
const drafts = crntPages.filter(
(page) => page[draftFieldName] == true || page[draftFieldName] === 'true'
);
const published = crntPages.filter(
(page) =>
page[draftFieldName] == false ||
page[draftFieldName] === 'false' ||
typeof page[draftFieldName] === 'undefined'
);
const usesDraft = crntPages.some(x => typeof x[draftFieldName] !== 'undefined');
if (usesDraft) {
const drafts = crntPages.filter(
(page) => page[draftFieldName] == true || page[draftFieldName] === 'true'
);
const published = crntPages.filter(
(page) =>
page[draftFieldName] == false ||
page[draftFieldName] === 'false' ||
typeof page[draftFieldName] === 'undefined'
);
draftTypes[Tab.Draft] = draftField?.invert ? published.length : drafts.length;
draftTypes[Tab.Published] = draftField?.invert ? drafts.length : published.length;
draftTypes[Tab.Draft] = draftField?.invert ? published.length : drafts.length;
draftTypes[Tab.Published] = draftField?.invert ? drafts.length : published.length;
if (tab === Tab.Published) {
crntPages = draftField?.invert ? drafts : published;
} else if (tab === Tab.Draft) {
crntPages = draftField?.invert ? published : drafts;
} else {
crntPages = crntPages;
if (tab === Tab.Published) {
crntPages = draftField?.invert ? drafts : published;
} else if (tab === Tab.Draft) {
crntPages = draftField?.invert ? published : drafts;
} else {
crntPages = crntPages;
}
}
}