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

#73 - Color enhancements

Browse Source
This commit is contained in:
Elio Struyf
2021-09-04 12:57:00 +02:00
parent 918f914c91
commit db3a584ab9
4 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pagesView/components/Header/Header.tsx
+15 -13
View File
@@ -44,25 +44,27 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
</div>
</div>
<div className="px-4 flex flex-col lg:flex-row items-center border-b border-gray-200 dark:border-whisper-600">
<div className={`w-full lg:w-auto`}>
<div className="px-4 flex flex-row items-center border-b border-gray-200 dark:border-whisper-600 justify-between">
<div>
<Navigation totalPages={totalPages} />
</div>
<div className={`my-4 lg:my-0 w-full flex items-center justify-between lg:justify-end space-x-4 lg:space-x-6 xl:space-x-8 order-first lg:order-last`}>
<Folders folders={folders} />
<Filter label={`Tag filter`} activeItem={crntTag} items={settings.tags} onClick={(value) => setCrntTag(value)} />
<Filter label={`Category filter`} activeItem={crntCategory} items={settings.categories} onClick={(value) => setCrntCategory(value)} />
<Grouping />
<Sorting />
<div>
<ViewSwitch />
</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-300`}>
<Folders folders={folders} />
<Filter label={`Tag filter`} activeItem={crntTag} items={settings.tags} onClick={(value) => setCrntTag(value)} />
<Filter label={`Category filter`} activeItem={crntCategory} items={settings.categories} onClick={(value) => setCrntCategory(value)} />
<Grouping />
<Sorting />
</div>
</div>
);
};
src/pagesView/components/Header/ViewSwitch.tsx
+2 -2
View File
@@ -26,11 +26,11 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (props: Rea
return (
<div className={`flex rounded-sm bg-vulcan-50 lg:mb-1`}>
<button className={`flex items-center p-2 rounded-l-sm ${view === ViewType.Grid ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'}`} onClick={toggleView}>
<button className={`flex items-center px-2 py-1 rounded-l-sm ${view === ViewType.Grid ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'}`} onClick={toggleView}>
<ViewGridIcon className={`w-4 h-4`} />
<span className={`sr-only`}>Change to grid</span>
</button>
<button className={`flex items-center p-2 rounded-r-sm ${view === ViewType.List ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'}`} onClick={toggleView}>
<button className={`flex items-center px-2 py-1 rounded-r-sm ${view === ViewType.List ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'}`} onClick={toggleView}>
<ViewListIcon className={`w-4 h-4`} />
<span className={`sr-only`}>Change to list</span>
</button>
src/pagesView/components/Item.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
} else if (view === ViewType.List) {
return (
<li className="relative">
<button 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 border-vulcan-50 hover:bg-vulcan-50 hover:bg-opacity-70`} onClick={openFile}>
<button 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 border-gray-300 hover:bg-gray-200 dark:border-vulcan-50 dark:hover:bg-vulcan-50 hover:bg-opacity-70`} onClick={openFile}>
<div className="col-span-8 font-bold truncate">
{title}
</div>
src/pagesView/components/List.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export const List: React.FunctionComponent<IListProps> = ({children}: React.Prop
if (view === ViewType.Grid) {
className = `grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8`;
} else if (view === ViewType.List) {
className = `-mx-5`;
className = `-mx-4`;
}
return (