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

Added quick actions + some styling fixes

Browse Source
This commit is contained in:
Elio Struyf
2021-12-28 10:35:46 +01:00
parent 9b39649bde
commit 35a0327387
9 changed files with 75 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboardWebView/components/Header/Header.tsx
+1 -1
View File
@@ -105,7 +105,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
</div>
</div>
<div className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end space-x-4 lg:space-x-6 xl:space-x-8 bg-gray-200 border-b border-gray-300 dark:bg-vulcan-400 dark:border-vulcan-100`}>
<div className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end bg-gray-200 border-b border-gray-300 dark:bg-vulcan-400 dark:border-vulcan-100 space-x-4 lg:space-x-6 xl:space-x-8`}>
<ClearFilters />
<Folders />
src/dashboardWebView/components/Header/Searchbox.tsx
+5 -3
View File
@@ -4,9 +4,11 @@ import { useRecoilState } from 'recoil';
import { useDebounce } from '../../../hooks/useDebounce';
import { SearchAtom } from '../../state';
export interface ISearchboxProps {}
export interface ISearchboxProps {
placeholder?: string;
}
export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({}: React.PropsWithChildren<ISearchboxProps>) => {
export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({placeholder}: React.PropsWithChildren<ISearchboxProps>) => {
const [ value, setValue ] = React.useState('');
const [ debounceSearchValue, setDebounceValue ] = useRecoilState(SearchAtom);
const debounceSearch = useDebounce<string>(value, 500);
@@ -38,7 +40,7 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({}: React.Pr
type="search"
name="search"
className={`block w-full py-2 pl-10 pr-3 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none`}
placeholder="Search"
placeholder={placeholder || "Search"}
value={value}
onChange={handleChange}
/>
src/dashboardWebView/components/Header/Sorting.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({disableCustomSo
key={option.id}
title={option.title || option.name}
value={option}
isCurrent={option.id === crntSorting?.id}
isCurrent={option.id === crntSort.id}
onClick={(value) => updateSorting(value)} />
))}
</MenuItems>
src/dashboardWebView/components/Media/Item.tsx
+44 -4
View File
@@ -1,6 +1,6 @@
import { Messenger } from '@estruyf/vscode/dist/client';
import { Menu } from '@headlessui/react';
import {PhotographIcon} from '@heroicons/react/outline';
import {ArchiveIcon, ClipboardIcon, CodeIcon, PhotographIcon, PlusIcon} from '@heroicons/react/outline';
import { basename, dirname } from 'path';
import * as React from 'react';
import { useEffect } from 'react';
@@ -15,6 +15,7 @@ import { MenuItem, MenuItems } from '../Menu';
import { Alert } from '../Modals/Alert';
import { Metadata } from '../Modals/Metadata';
import { MenuButton } from './MenuButton'
import { QuickAction } from './QuickAction';
export interface IItemProps {
media: MediaInfo;
@@ -206,11 +207,50 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
<div className={`relative py-4 pl-4 pr-12`}>
<div className={`absolute top-4 right-4 flex flex-col space-y-4`}>
<div className="flex items-center">
<Menu as="div" className="relative z-10 inline-block text-left">
<div className="flex items-center border border-transparent group-hover:bg-gray-50 dark:group-hover:bg-vulcan-200 group-hover:border-gray-100 dark:group-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
<div className='hidden group-hover:inline-block h-5'>
{
viewData?.data?.filePath ? (
<>
<QuickAction
title='Insert image with markdown markup'
onClick={insertToArticle}>
<PlusIcon className={`h-5 w-5`} aria-hidden="true" />
</QuickAction>
{
(viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && (
<QuickAction
title='Insert snippet'
onClick={insertSnippet}>
<CodeIcon className={`h-5 w-5`} aria-hidden="true" />
</QuickAction>
)
}
</>
) : (
<>
<QuickAction
title='Copy media path'
onClick={copyToClipboard}>
<ClipboardIcon className={`h-5 w-5`} aria-hidden="true" />
</QuickAction>
<QuickAction
title='Delete media file'
onClick={deleteMedia}>
<ArchiveIcon className={`h-5 w-5`} aria-hidden="true" />
</QuickAction>
</>
)
}
</div>
<Menu as="div" className="relative z-10 inline-block text-left h-5">
<MenuButton title={`Menu`} />
<MenuItems>
<MenuItems widthClass='w-40'>
<MenuItem
title={`Edit metadata`}
onClick={updateMetadata}
src/dashboardWebView/components/Media/MediaHeaderTop.tsx
+2 -2
View File
@@ -68,10 +68,10 @@ export const MediaHeaderTop: React.FunctionComponent<IMediaHeaderTopProps> = ({}
return (
<nav
className="py-4 px-5 flex items-center justify-between border-b border-gray-300 dark:border-vulcan-100"
className="py-3 px-4 flex items-center justify-between border-b border-gray-300 dark:border-vulcan-100"
aria-label="Pagination"
>
<Searchbox />
<Searchbox placeholder={`Search in folder`} />
<PaginationStatus />
src/dashboardWebView/components/Media/QuickAction.tsx
+19
View File
@@ -0,0 +1,19 @@
import * as React from 'react';
export interface IQuickActionProps {
title: string;
onClick: () => void;
}
export const QuickAction: React.FunctionComponent<IQuickActionProps> = ({title, onClick, children}: React.PropsWithChildren<IQuickActionProps>) => {
return (
<button
type='button'
title={title}
onClick={onClick}
className={`px-2 group inline-flex justify-center text-sm font-medium text-vulcan-400 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600`}>
{children}
<span className='sr-only'>{title}</span>
</button>
);
};
src/dashboardWebView/components/Menu/MenuItem.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export const MenuItem: React.FunctionComponent<IMenuItemProps> = ({title, value,
<button
disabled={disabled}
onClick={() => onClick(value)}
className={`${!isCurrent ? `text-vulcan-500 dark:text-whisper-500` : `text-gray-500 dark:text-whisper-900`} block px-4 py-2 text-sm font-medium w-full text-left hover:bg-gray-100 hover:text-gray-700 dark:hover:text-whisper-600 dark:hover:bg-vulcan-100 disabled:bg-gray-500`}
className={`${!isCurrent ? `font-normal` : `font-bold`} text-gray-500 dark:text-whisper-900 block px-4 py-2 text-sm w-full text-left hover:bg-gray-100 hover:text-gray-700 dark:hover:text-whisper-600 dark:hover:bg-vulcan-100 disabled:bg-gray-500`}
>
{title}
</button>
src/dashboardWebView/components/Menu/MenuItems.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({widthClass,
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className={`${widthClass || "w-40"} origin-top-right absolute right-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`}>
<Menu.Items className={`${widthClass || ""} origin-top-right absolute right-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`}>
<div className="py-1">
{children}
</div>