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

Implement new scoped groups from tailwind

Browse Source
This commit is contained in:
Elio Struyf
2023-02-05 14:39:28 +01:00
parent 38839470ac
commit baed139cc6
5 changed files with 8 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboardWebView/components/Contents/ContentActions.tsx
+3 -3
View File
@@ -84,17 +84,17 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
<>
<div
className={`${
listView ? '' : 'group-scoped absolute top-6 right-0'
listView ? '' : 'group/card absolute top-6 right-0'
} flex flex-col space-y-4`}
>
<div
className={`flex items-center border border-transparent group-scoped-hover:bg-gray-200 dark:group-scoped-hover:bg-vulcan-200 group-scoped-hover:border-gray-100 dark:group-scoped-hover:border-vulcan-50 rounded-full ${
className={`flex items-center border border-transparent group-hover/card:bg-gray-200 dark:group-hover/card:bg-vulcan-200 group-hover/card:border-gray-100 dark:group-hover/card:border-vulcan-50 rounded-full ${
listView ? '' : 'p-2 -mt-4'
}`}
>
<Menu as="div" className={`relative flex text-left ${listView ? '' : 'z-10'}`}>
{!listView && (
<div className="hidden group-scoped-hover:flex">
<div className="hidden group-hover/card:flex">
<QuickAction title={`View content`} onClick={onView}>
<EyeIcon className={`w-4 h-4`} aria-hidden="true" />
</QuickAction>
src/dashboardWebView/components/Media/Item.tsx
+5 -5
View File
@@ -422,7 +422,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
<>
<li className="group relative bg-gray-50 dark:bg-vulcan-200 shadow-md hover:shadow-xl dark:shadow-none dark:hover:bg-vulcan-100 border border-gray-200 dark:border-vulcan-50">
<button
className={`group-scoped relative bg-gray-200 dark:bg-vulcan-300 block w-full aspect-w-10 aspect-h-7 overflow-hidden h-48 ${
className={`group/button relative bg-gray-200 dark:bg-vulcan-300 block w-full aspect-w-10 aspect-h-7 overflow-hidden h-48 ${
isImageFile ? 'cursor-pointer' : 'cursor-default'
}`}
onClick={hasViewData ? undefined : openLightbox}
@@ -439,7 +439,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
</div>
{hasViewData && (
<div
className={`hidden group-scoped-hover:flex absolute top-0 right-0 bottom-0 left-0 items-center bg-vulcan-500 bg-opacity-70 justify-center`}
className={`hidden group-hover/button:flex absolute top-0 right-0 bottom-0 left-0 items-center bg-vulcan-500 bg-opacity-70 justify-center`}
>
<div
className={`h-full ${
@@ -472,10 +472,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({
)}
</button>
<div className={`relative py-4 pl-4 pr-12`}>
<div className={`group-scoped absolute top-4 right-4 flex flex-col space-y-4`}>
<div className="flex items-center border border-transparent group-scoped-hover:bg-gray-200 dark:group-scoped-hover:bg-vulcan-200 group-scoped-hover:border-gray-100 dark:group-scoped-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
<div className={`group/actions absolute top-4 right-4 flex flex-col space-y-4`}>
<div className="flex items-center border border-transparent group-hover/actions:bg-gray-200 dark:group-hover/actions:bg-vulcan-200 group-hover/actions:border-gray-100 dark:group-hover/actions:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
<Menu as="div" className="relative z-10 flex text-left">
<div className="hidden group-scoped-hover:flex">
<div className="hidden group-hover/actions:flex">
<QuickAction title="View media details" onClick={viewMediaDetails}>
<EyeIcon className={`w-4 h-4`} aria-hidden="true" />
</QuickAction>