Merge pull request #2339 from tf/motif-indicator

Improve motif indicator

Author: tf

entry_types/scrolled/package/spec/frontend/v1/MotifArea-spec.js

@@ -96,6 +96,31 @@ describe('MotifArea', () => {
     expect(container.firstChild).toHaveStyle('height: 0px');
   });
 
+  it('does not apply visible class when image does not have motif area', () => {
+    const {container} =
+      renderInEntry(
+        () => <MotifArea file={useFile({collectionName: 'imageFiles', permaId: 100})} />,
+        {
+          wrapper: ({children}) => (
+            <MotifAreaVisibilityProvider visible={true}>
+              {children}
+            </MotifAreaVisibilityProvider>
+          ),
+          seed: {
+            imageFiles: [
+              {
+                permaId: 100,
+                width: 200,
+                height: 100
+              }
+            ]
+          }
+        }
+      );
+
+    expect(container.firstChild).not.toHaveClass(styles.visible);
+  });
+
   describe('onUpdate prop', () => {
     const seed = {
       imageFiles: [

entry_types/scrolled/package/src/frontend/MotifArea.module.css

@@ -1,6 +1,5 @@
 .root {
   position: absolute;
-  background: radial-gradient(transparent, currentColor);
   z-index: 2;
   opacity: 0;
   pointer-events: none;
@@ -13,6 +12,53 @@
   -webkit-transform: translateZ(0);
 }
 
+.root::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(transparent, currentColor);
+  opacity: 0.15;
+}
+
 .visible {
-  opacity: 0.2;
+  opacity: 1;
+}
+
+.corner {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-color: currentColor;
+  border-style: solid;
+  border-width: 0;
+  border-radius: 3px;
+  opacity: 0.5;
+}
+
+.topLeft {
+  top: 0;
+  left: 0;
+  border-top-width: 3px;
+  border-left-width: 3px;
+}
+
+.topRight {
+  top: 0;
+  right: 0;
+  border-top-width: 3px;
+  border-right-width: 3px;
+}
+
+.bottomLeft {
+  bottom: 0;
+  left: 0;
+  border-bottom-width: 3px;
+  border-left-width: 3px;
+}
+
+.bottomRight {
+  bottom: 0;
+  right: 0;
+  border-bottom-width: 3px;
+  border-right-width: 3px;
 }

entry_types/scrolled/package/src/frontend/v1/MotifArea.js

@@ -35,12 +35,18 @@ export const MotifArea = function MotifArea(props) {
     return null;
   }
 
+  const hasMotifArea = !!props.file.motifAreaOffsetRect;
+
   return (
     <div ref={setElementRef}
-         className={classNames(styles.root, {[styles.visible]: visible})}
+         className={classNames(styles.root, {[styles.visible]: visible && hasMotifArea})}
          style={position}
          onMouseEnter={props.onMouseEnter}
          onMouseLeave={props.onMouseLeave}>
+      <div className={classNames(styles.corner, styles.topLeft)} />
+      <div className={classNames(styles.corner, styles.topRight)} />
+      <div className={classNames(styles.corner, styles.bottomLeft)} />
+      <div className={classNames(styles.corner, styles.bottomRight)} />
     </div>
   );
 };