From 07c4e693198f2d8cd527b1bd1c8fc479a6350324 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 31 Mar 2022 10:15:47 +0200
Subject: [PATCH] Update media menu

---
 .../components/Media/Item.tsx                 | 104 +++++++++---------
 1 file changed, 52 insertions(+), 52 deletions(-)

diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx
index bba461c9..d460ad82 100644
--- a/src/dashboardWebView/components/Media/Item.tsx
+++ b/src/dashboardWebView/components/Media/Item.tsx
@@ -215,61 +215,61 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
           </div>
         </button>
         <div className={`relative py-4 pl-4 pr-12`}>
-          <div className={`absolute top-4 right-4 flex flex-col space-y-4`}>
+          <div className={`group-scope 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 media details'
-                  onClick={viewMediaDetails}>
-                  <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
-                </QuickAction>
-
-                <QuickAction 
-                  title='Edit metadata'
-                  onClick={updateMetadata}>
-                  <PencilIcon className={`w-4 h-4`} aria-hidden="true" />
-                </QuickAction>
-
-                {
-                  viewData?.data?.filePath ? (
-                    <>
-                      <QuickAction 
-                        title={(viewData.data.metadataInsert && viewData.data.fieldName) ? `Insert image for your "${viewData.data.fieldName}" field` : `Insert image with markdown markup`}
-                        onClick={insertToArticle}>
-                        <PlusIcon className={`w-4 h-4`} aria-hidden="true" />
-                      </QuickAction>
-
-                      {
-                        (viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && (
-                          <QuickAction 
-                            title='Insert snippet'
-                            onClick={insertSnippet}>
-                            <CodeIcon className={`w-4 h-4`} aria-hidden="true" />
-                          </QuickAction>
-                        )
-                      }
-                    </>
-                  ) : (
-                    <>
-                      <QuickAction 
-                        title='Copy media path'
-                        onClick={copyToClipboard}>
-                        <ClipboardIcon className={`w-4 h-4`} aria-hidden="true" />
-                      </QuickAction>
-                    </>
-                  )
-                }
-
-                <QuickAction 
-                  title='Delete media file'
-                  onClick={deleteMedia}>
-                  <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
-                </QuickAction>
-              </div>
+            <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 -mr-2 -mt-2">
 
               <Menu as="div" className="relative z-10 flex text-left">
+                <div className='hidden group-scope-hover:flex'>
+                  <QuickAction 
+                    title='View media details'
+                    onClick={viewMediaDetails}>
+                    <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
+                  </QuickAction>
+
+                  <QuickAction 
+                    title='Edit metadata'
+                    onClick={updateMetadata}>
+                    <PencilIcon className={`w-4 h-4`} aria-hidden="true" />
+                  </QuickAction>
+
+                  {
+                    viewData?.data?.filePath ? (
+                      <>
+                        <QuickAction 
+                          title={(viewData.data.metadataInsert && viewData.data.fieldName) ? `Insert image for your "${viewData.data.fieldName}" field` : `Insert image with markdown markup`}
+                          onClick={insertToArticle}>
+                          <PlusIcon className={`w-4 h-4`} aria-hidden="true" />
+                        </QuickAction>
+
+                        {
+                          (viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && (
+                            <QuickAction 
+                              title='Insert snippet'
+                              onClick={insertSnippet}>
+                              <CodeIcon className={`w-4 h-4`} aria-hidden="true" />
+                            </QuickAction>
+                          )
+                        }
+                      </>
+                    ) : (
+                      <>
+                        <QuickAction 
+                          title='Copy media path'
+                          onClick={copyToClipboard}>
+                          <ClipboardIcon className={`w-4 h-4`} aria-hidden="true" />
+                        </QuickAction>
+                      </>
+                    )
+                  }
+
+                  <QuickAction 
+                    title='Delete media file'
+                    onClick={deleteMedia}>
+                    <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
+                  </QuickAction>
+                </div>
+
                 <ActionMenuButton title={`Menu`} />
 
                 <MenuItems widthClass='w-40'>