#303 - new menu position

package.json

@@ -1719,6 +1719,7 @@
     "rimraf": "^3.0.2",
     "style-loader": "2.0.0",
     "tailwindcss": "^2.2.7",
+    "tailwindcss-nested-groups": "^1.2.4",
     "ts-loader": "8.0.3",
     "tslint": "6.1.3",
     "typescript": "^4.5.4",

src/dashboardWebView/components/Contents/ContentActions.tsx

@@ -49,23 +49,24 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
   
   return (
     <>
-      <div className={`absolute top-4 right-4 flex flex-col space-y-4`}>       
-        <div className="flex items-center border border-transparent group-hover:bg-gray-200 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:flex'>
-            <QuickAction 
-              title={`View content`}
-              onClick={onView}>
-              <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
-            </QuickAction>
-            
-            <QuickAction 
-              title={`Delete content`}
-              onClick={onDelete}>
-              <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
-            </QuickAction>
-          </div>
-
+      <div className={`group-scope absolute top-6 right-0 flex flex-col space-y-4`}>       
+        <div className="flex items-center border border-transparent group-scope-hover:bg-gray-200 dark:group-scope-hover:bg-vulcan-200 group-scope-hover:border-gray-100 dark:group-scope-hover:border-vulcan-50 rounded-full p-2 -mt-4">
+          
           <Menu as="div" className="relative z-10 flex text-left">
+            <div className='hidden group-scope-hover:flex'>
+              <QuickAction 
+                title={`View content`}
+                onClick={onView}>
+                <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
+              </QuickAction>
+              
+              <QuickAction 
+                title={`Delete content`}
+                onClick={onDelete}>
+                <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
+              </QuickAction>
+            </div>
+
             <ActionMenuButton title={`Menu`} />
 
             <MenuItems widthClass='w-40'>

src/dashboardWebView/components/Contents/Item.tsx

@@ -34,7 +34,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
   if (view === DashboardViewType.Grid) {
     return (
       <li className="relative">
-        <button className={`group cursor-pointer flex flex-wrap items-start content-start h-full w-full bg-gray-50 dark:bg-vulcan-200 text-vulcan-500 dark:text-whisper-500 text-left overflow-hidden shadow-md dark:shadow-none hover:shadow-xl dark:hover:bg-vulcan-100 border border-gray-200 dark:border-vulcan-50`}
+        <button className={`group cursor-pointer flex flex-wrap items-start content-start h-full w-full bg-gray-50 dark:bg-vulcan-200 text-vulcan-500 dark:text-whisper-500 text-left shadow-md dark:shadow-none hover:shadow-xl dark:hover:bg-vulcan-100 border border-gray-200 dark:border-vulcan-50`}
                 onClick={openFile}>
 
           <div className="relative h-36 w-full overflow-hidden border-b border-gray-100 dark:border-vulcan-100 dark:group-hover:border-vulcan-200">
@@ -49,17 +49,17 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
             }
           </div>
 
-          <ContentActions 
-            title={title}
-            path={fmFilePath}
-            scripts={settings?.scripts}
-            onOpen={openFile} />
-
-          <div className="p-4 w-full">
+          <div className="relative p-4 w-full">
             <div className={`flex justify-between items-center`}>
               <Status draft={draft} />
 
-              <DateField value={date} />
+              <DateField className={`mr-4`} value={date} />
+
+              <ContentActions 
+                title={title}
+                path={fmFilePath}
+                scripts={settings?.scripts}
+                onOpen={openFile} />
             </div>
 
             <h2 className="mt-2 mb-2 font-bold">{title}</h2>

src/dashboardWebView/components/DateField.tsx

@@ -3,10 +3,11 @@ import * as React from 'react';
 import { DateHelper } from '../../helpers/DateHelper';
 
 export interface IDateFieldProps {
+  className?: string;
   value: Date | string;
 }
 
-export const DateField: React.FunctionComponent<IDateFieldProps> = ({value}: React.PropsWithChildren<IDateFieldProps>) => {
+export const DateField: React.FunctionComponent<IDateFieldProps> = ({className, value}: React.PropsWithChildren<IDateFieldProps>) => {
   const [ dateValue, setDateValue ] = React.useState<string>("");
 
   React.useEffect(() => {
@@ -24,6 +25,6 @@ export const DateField: React.FunctionComponent<IDateFieldProps> = ({value}: Rea
   }
 
   return (
-    <span className={`text-vulcan-100 dark:text-whisper-900 text-xs`}>{dateValue}</span>
+    <span className={`${className || ""} text-vulcan-100 dark:text-whisper-900 text-xs`}>{dateValue}</span>
   );
 };

src/dashboardWebView/components/Menu/ActionMenuButton.tsx

@@ -3,8 +3,8 @@ import {DotsVerticalIcon} from '@heroicons/react/outline';
 import * as React from 'react';
 
 export interface IActionMenuButtonProps {
-    title: string;
-    disabled?: boolean;
+  title: string;
+  disabled?: boolean;
 }
 
 export const ActionMenuButton: React.FunctionComponent<IActionMenuButtonProps> = ({ title, disabled }: React.PropsWithChildren<IActionMenuButtonProps>) => {

tailwind.config.js

@@ -112,6 +112,7 @@ module.exports = {
     extend: {},
   },
   plugins: [
-    require("@tailwindcss/forms")
+    require("@tailwindcss/forms"),
+    require("tailwindcss-nested-groups"),
   ],
 }