Merge pull request #102 from samply/feat/make-info-text-copyable

feat(info button): make text copyable
samply · Jun 19, 2024 · 70adbd4 · 70adbd4
2 parents b60553d + 08c6d13
commit 70adbd4
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 19 deletions.
diff --git a/packages/demo/src/ccp.css b/packages/demo/src/ccp.css
@@ -453,20 +453,6 @@ lens-catalogue::part(info-button-icon):hover {
   text-align: left;
 }
 
-lens-info-button::part(info-button-dialogue):hover {background-color: #b8bfb8}
-
-lens-info-button::part(info-button):hover {background-color: #b8bfb8}
-
-lens-info-button::part(info-button):active {
-  background-color: #585958;
-  transform: translateX(1px);
-}
-
-lens-info-button::part(info-button-dialogue):active {
-  background-color: #585958;
-  transform: translateX(1px);
-}
-
 .result-table-hint-text {
   padding-top: 20px;
   display: flex;

diff --git a/packages/lib/src/components/buttons/InfoButtonComponent.wc.svelte b/packages/lib/src/components/buttons/InfoButtonComponent.wc.svelte
@@ -37,7 +37,8 @@
         tooltipOpen = false;
     };
 
-    const displayQueryInfo = (queryItem?: QueryItem): void => {
+    const displayQueryInfo = (e: MouseEvent, queryItem?: QueryItem): void => {
+        const target: HTMLElement = e.target as HTMLElement;
         if (showQuery) {
             if (onlyChildInfo && queryItem !== undefined) {
                 let childMessage = buildHumanReadableRecursively(
@@ -53,13 +54,19 @@
                         : [noQueryMessage];
             }
         }
-        tooltipOpen = !tooltipOpen;
+        if (
+            target.getAttribute("part") !== "info-button-dialogue" &&
+            target.getAttribute("part") !== "info-button-dialogue-message"
+        ) {
+            tooltipOpen = !tooltipOpen;
+        }
     };
 </script>
 
 <button
     part="info-button"
-    on:click={onlyChildInfo ? displayQueryInfo(queryItem) : displayQueryInfo}
+    on:click={(e) =>
+        onlyChildInfo ? displayQueryInfo(e, queryItem) : displayQueryInfo(e)}
     on:focusout={onFocusOut}
 >
     {#if iconUrl}
@@ -68,9 +75,14 @@
         <span part="info-button-icon"> &#9432; </span>
     {/if}
     {#if tooltipOpen}
-        <div part="info-button-dialogue">
+        <div part="info-button-dialogue" style="user-select: text;">
             {#each message as msg}
-                <div part="info-button-dialogue-message">{msg}</div>
+                <div
+                    part="info-button-dialogue-message"
+                    style="user-select: text;"
+                >
+                    {msg}
+                </div>
             {/each}
         </div>
     {/if}

diff --git a/packages/lib/src/styles/catalogue.css b/packages/lib/src/styles/catalogue.css
@@ -82,6 +82,7 @@ lens-catalogue::part(info-button-icon) {
 }
 
 lens-catalogue::part(info-button-dialogue) {
+    cursor: auto;
     position: absolute;
     border: none;
     background-color: var(--white);

diff --git a/packages/lib/src/styles/info-button.css b/packages/lib/src/styles/info-button.css
@@ -13,6 +13,7 @@ lens-info-button::part(info-button-title) {
 }
 
 lens-info-button::part(info-button-dialogue) {
+    cursor: auto;
     position: absolute;
     border: none;
     background-color: var(--white);

diff --git a/packages/lib/src/styles/result-chart.css b/packages/lib/src/styles/result-chart.css
@@ -35,6 +35,7 @@ lens-chart::part(info-button-icon) {
   height: 16px;
 }
 lens-chart::part(info-button-dialogue) {
+    cursor: auto;
     position: absolute;
     border: none;
     background-color: var(--white);

diff --git a/packages/lib/src/styles/result-table.css b/packages/lib/src/styles/result-table.css
@@ -86,6 +86,7 @@ lens-result-table::part(info-button-icon) {
 
 
 lens-result-table::part(info-button-dialogue) {
+    cursor: auto;
     position: absolute;
     border: none;
     background-color: var(--white);

diff --git a/packages/lib/src/styles/results-overview.css b/packages/lib/src/styles/results-overview.css
@@ -35,6 +35,7 @@ lens-result-summary::part(info-button-title) {
 }
 
 lens-result-summary::part(info-button-dialogue) {
+    cursor: auto;
     position: absolute;
     border: none;
     background-color: var(--white);