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

#213 - Media folder design

Browse Source
This commit is contained in:
Elio Struyf
2021-12-26 17:19:31 +01:00
parent 092eb0fd2a
commit cb80a10de2
4 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboardWebView/components/Media/FolderItem.tsx
+6 -4
View File
@@ -16,11 +16,13 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({ folder,
const relFolderPath = wsFolder ? folder.replace(wsFolder, '') : folder;
return (
<li className={`group relative bg-gray-200 dark:bg-vulcan-300 hover:shadow-xl dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800 p-4`}>
<button className={`w-full flex flex-col items-center`} onClick={() => setSelectedFolder(folder)}>
<FolderIcon className={`h-auto w-1/2`} />
<li className={`group relative hover:shadow-xl dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800 p-4`}>
<button className={`w-full flex flex-row items-center h-full`} onClick={() => setSelectedFolder(folder)}>
<div>
<FolderIcon className={`h-12 w-12 mr-4`} />
</div>
<p className="text-sm font-bold pointer-events-none flex items-center">
<p className="text-sm font-bold pointer-events-none flex items-center text-left overflow-hidden break-words">
{basename(relFolderPath)}
</p>
</button>
src/dashboardWebView/components/Media/List.tsx
+7 -3
View File
@@ -1,10 +1,14 @@
import * as React from 'react';
export interface IListProps {}
export interface IListProps {
gap?: number;
}
export const List: React.FunctionComponent<IListProps> = ({gap, children}: React.PropsWithChildren<IListProps>) => {
const gapClass = gap !== undefined ? `gap-y-${gap}` : `gap-y-8`;
export const List: React.FunctionComponent<IListProps> = ({children}: React.PropsWithChildren<IListProps>) => {
return (
<ul role="list" 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">
<ul role="list" className={`grid grid-cols-2 gap-x-4 ${gapClass} sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8`}>
{children}
</ul>
);
src/dashboardWebView/components/Media/Media.tsx
+1 -1
View File
@@ -113,7 +113,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWi
{
folders && folders.length > 0 && (
<div className={`mb-8`}>
<List>
<List gap={0}>
{
folders && folders.map((folder) => (
<FolderItem key={folder} folder={folder} staticFolder={settings?.staticFolder} wsFolder={settings?.wsFolder} />