Added hover and click indications for merch-card (#84)

* Added hover and click indications for merch-card * removed inline handlers * fixed small click bug --------- Co-authored-by: Ilyas Türkben <[email protected]>
adobecom · Nov 13, 2024 · e8a9b18 · e8a9b18
1 parent d3d45a1
commit e8a9b18
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 15 deletions.
diff --git a/studio/src/aem/render-view.js b/studio/src/aem/render-view.js
@@ -15,6 +15,7 @@ class RenderView extends LitElement {
     constructor() {
         super();
         this.forceUpdate = this.forceUpdate.bind(this);
+        this.tooltipTimeout = null;
     }
 
     createRenderRoot() {
@@ -44,25 +45,53 @@ class RenderView extends LitElement {
     renderItem(fragment) {
         const selected =
             this.parentElement.source.selectedFragments.includes(fragment);
-        return html`<merch-card
-            class="${selected ? 'selected' : ''}"
-            @dblclick="${(e) => this.handleDoubleClick(e, fragment)}"
-        >
-            <aem-fragment fragment="${fragment.id}" ims></aem-fragment>
-            <sp-status-light
-                size="l"
-                variant="${fragment.statusVariant}"
-            ></sp-status-light>
-            <div class="overlay" @click="${() => fragment.toggleSelection()}">
-                ${selected
-                    ? html`<sp-icon-remove slot="icon"></sp-icon-remove>`
-                    : html`<sp-icon-add slot="icon"></sp-icon-add>`}
-            </div>
-        </merch-card>`;
+        return html`<overlay-trigger placement="top"
+            ><merch-card
+                class="${selected ? 'selected' : ''}"
+                slot="trigger"
+                @click="${this.handleClick}"
+                @mouseleave="${this.handleMouseLeave}"
+                @dblclick="${(e) => this.handleDoubleClick(e, fragment)}"
+            >
+                <aem-fragment fragment="${fragment.id}" ims></aem-fragment>
+                <sp-status-light
+                    size="l"
+                    variant="${fragment.statusVariant}"
+                ></sp-status-light>
+                <div
+                    class="overlay"
+                    @click="${() => fragment.toggleSelection()}"
+                >
+                    ${selected
+                        ? html`<sp-icon-remove slot="icon"></sp-icon-remove>`
+                        : html`<sp-icon-add slot="icon"></sp-icon-add>`}
+                </div>
+            </merch-card>
+            <sp-tooltip slot="hover-content" placement="top"
+                >Double click the card to start editing.</sp-tooltip
+            >
+        </overlay-trigger>`;
+    }
+
+    handleClick(e) {
+        if (this.parentElement.inSelection) return;
+        clearTimeout(this.tooltipTimeout);
+        const currentTarget = e.currentTarget;
+        this.tooltipTimeout = setTimeout(() => {
+            currentTarget.classList.add('has-tooltip');
+        }, 500);
+    }
+
+    handleMouseLeave(e) {
+        if (this.parentElement.inSelection) return;
+        clearTimeout(this.tooltipTimeout);
+        e.currentTarget.classList.remove('has-tooltip');
     }
 
     handleDoubleClick(e, fragment) {
         if (this.parentElement.inSelection) return;
+        clearTimeout(this.tooltipTimeout);
+        e.currentTarget.classList.remove('has-tooltip');
         this.parentElement.source.selectFragment(
             e.clientX,
             e.clientY,

diff --git a/studio/style.css b/studio/style.css
@@ -111,6 +111,14 @@ content-navigation render-view merch-card .overlay {
     display: none;
 }
 
+merch-card:not(.has-tooltip) ~ sp-tooltip {
+    display: none;
+}
+
+merch-card:hover {
+    background-color: var(--spectrum-background-base-color);
+}
+
 merch-card-editor {
     display: contents;
 }