Merge pull request #3685 from ilandikov/fix-copy-button-position

fix: copy button position

Author: claremacrae

src/Renderer/HtmlQueryResultsRenderer.ts

@@ -1,4 +1,4 @@
-import { type App, type Component, Notice, type TFile } from 'obsidian';
+import { type App, type Component, Notice, type TFile, setIcon, setTooltip } from 'obsidian';
 import { postponeButtonTitle, shouldShowPostponeButton } from '../DateTime/Postponer';
 import { QueryLayout } from '../Layout/QueryLayout';
 import { TaskLayout } from '../Layout/TaskLayout';
@@ -103,9 +103,11 @@ export class HtmlQueryResultsRenderer extends QueryResultsRendererBase {
     }
 
     private addCopyButton(_queryResult: QueryResult) {
-        const copyButton = createAndAppendElement('button', this.content);
-        copyButton.textContent = 'Copy results';
-        copyButton.classList.add('plugin-tasks-copy-button');
+        const toolbar = createAndAppendElement('div', this.content);
+        toolbar.classList.add('plugin-tasks-toolbar');
+        const copyButton = createAndAppendElement('button', toolbar);
+        setIcon(copyButton, 'lucide-copy');
+        setTooltip(copyButton, 'Copy results');
         copyButton.addEventListener('click', async () => {
             // TODO reimplement this using QueryResult.asMarkdown() when it supports trees and list items.
             await this.markdownRenderer.renderQuery(State.Warm, this.queryRendererParameters.allTasks());

src/Renderer/Renderer.scss

@@ -13,13 +13,11 @@
     --code-white-space: pre;
 }
 
-.plugin-tasks-copy-button {
-    position: absolute;
-    right: 0;
-    transform: translate(-50%, -50%);
-    z-index: 1;
-
-    margin-top: 16px;
+.plugin-tasks-toolbar {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: var(--size-4-1);
 }
 
 .tasks-count {

tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_explain.approved.html

@@ -10,7 +10,7 @@
     scheduled date is on 1970-01-01 (Thursday 1st January 1970)
 </pre
   >
-  <button class="plugin-tasks-copy-button">Copy results</button>
+  <div class="plugin-tasks-toolbar"><button test-icon="lucide-copy" test-tooltip="Copy results"></button></div>
   <ul class="contains-task-list plugin-tasks-query-result tasks-layout-hide-urgency"></ul>
   <div class="task-count">0 tasks</div>
 </div>

tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task.approved.html

@@ -3,7 +3,7 @@
 -->
 
 <div>
-  <button class="plugin-tasks-copy-button">Copy results</button>
+  <div class="plugin-tasks-toolbar"><button test-icon="lucide-copy" test-tooltip="Copy results"></button></div>
   <ul class="contains-task-list plugin-tasks-query-result">
     <li
       class="task-list-item plugin-tasks-list-item"

tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task_-_hidden_fields.approved.html

@@ -3,7 +3,7 @@
 -->
 
 <div>
-  <button class="plugin-tasks-copy-button">Copy results</button>
+  <div class="plugin-tasks-toolbar"><button test-icon="lucide-copy" test-tooltip="Copy results"></button></div>
   <ul
     class="contains-task-list plugin-tasks-query-result tasks-layout-hide-priority tasks-layout-hide-scheduledDate tasks-layout-hide-urgency">
     <li

tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task_-_short_mode.approved.html

@@ -3,7 +3,7 @@
 -->
 
 <div>
-  <button class="plugin-tasks-copy-button">Copy results</button>
+  <div class="plugin-tasks-toolbar"><button test-icon="lucide-copy" test-tooltip="Copy results"></button></div>
   <ul class="contains-task-list plugin-tasks-query-result tasks-layout-short-mode">
     <li
       class="task-list-item plugin-tasks-list-item"

tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_parent-child_items.approved.html

@@ -8,7 +8,7 @@
 -->
 
 <div>
-  <button class="plugin-tasks-copy-button">Copy results</button>
+  <div class="plugin-tasks-toolbar"><button test-icon="lucide-copy" test-tooltip="Copy results"></button></div>
   <ul class="contains-task-list plugin-tasks-query-result tasks-layout-hide-urgency">
     <li
       class="task-list-item plugin-tasks-list-item"

tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_parent-child_items_hidden.approved.html

@@ -8,7 +8,7 @@
 -->
 
 <div>
-  <button class="plugin-tasks-copy-button">Copy results</button>
+  <div class="plugin-tasks-toolbar"><button test-icon="lucide-copy" test-tooltip="Copy results"></button></div>
   <ul class="contains-task-list plugin-tasks-query-result tasks-layout-hide-urgency">
     <li
       class="task-list-item plugin-tasks-list-item"

tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_parent-child_items_reverse_sorted.approved.html

@@ -8,7 +8,7 @@
 -->
 
 <div>
-  <button class="plugin-tasks-copy-button">Copy results</button>
+  <div class="plugin-tasks-toolbar"><button test-icon="lucide-copy" test-tooltip="Copy results"></button></div>
   <ul class="contains-task-list plugin-tasks-query-result tasks-layout-hide-urgency">
     <li
       class="task-list-item plugin-tasks-list-item"

tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_should_allow_a_task_to_be_in_multiple_groups.approved.html

@@ -3,7 +3,7 @@
 -->
 
 <div>
-  <button class="plugin-tasks-copy-button">Copy results</button>
+  <div class="plugin-tasks-toolbar"><button test-icon="lucide-copy" test-tooltip="Copy results"></button></div>
   <h4 class="tasks-group-heading">For test purposes: heading a</h4>
   <ul class="contains-task-list plugin-tasks-query-result tasks-layout-hide-urgency" data-task-group-by="function">
     <li