fix(imagefield): blinking on hover when using position absolut fixed

snek-at · Sep 15, 2021 · d45c6f9 · d45c6f9
1 parent 0ddd13c
commit d45c6f9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/examples/my-gatsby-site/src/pages/index.js b/examples/my-gatsby-site/src/pages/index.js
@@ -147,7 +147,13 @@ const IndexPage = () => {
           alt: 'ta',
           title: 'daa'
         }}
-        style={{width: '100%'}}
+        style={{
+          width: '50%',
+          position: 'absolute',
+          height: '50vh',
+          top: 0,
+          left: 0
+        }}
       />
       <BlockContainer
         name="blockcontainer1"

diff --git a/packages/jaen-pages/src/containers/JaenImage/index.tsx b/packages/jaen-pages/src/containers/JaenImage/index.tsx
@@ -7,8 +7,6 @@ import {
 } from 'gatsby-plugin-image'
 import * as React from 'react'
 
-import {JaenImageContainer} from './style'
-
 const SnekFinder = loadable(() => import('@containers/SnekFinder'))
 
 export type ImageType = {
@@ -51,20 +49,33 @@ const JaenImage: React.FC<JaenImage> = ({
 
   const image = storeImage || initialImage
 
+  const editingStyle = editable
+    ? {
+        cursor: 'pointer',
+        boxShadow: '0 0 0 2.5px #48BB78',
+        transition: 'box-shadow 0.1s ease-in-out'
+      }
+    : {}
+
+  const imageProps = {
+    ...props.imageProps,
+    style: {...props.imageProps.style, ...editingStyle}
+  }
+
   return (
     <>
-      <JaenImageContainer editable={editable} onClick={handleFileClick}>
+      <div onClick={handleFileClick}>
         {storeImage || !contextImage ? (
-          <Image {...props.imageProps} {...image} />
+          <Image {...imageProps} {...image} />
         ) : (
           <GatsbyImage
             image={contextImage}
             title={image.title}
             alt={image.alt}
-            {...props.imageProps}
+            {...imageProps}
           />
         )}
-      </JaenImageContainer>
+      </div>
       {fileSelector.isOpen && (
         <SnekFinder
           mode="selector"

diff --git a/packages/jaen-pages/src/containers/JaenImage/style.ts b/packages/jaen-pages/src/containers/JaenImage/style.ts