Close summarize window (#71)

* Add close element and handlers * Format code * Change SVG to button Style the button Remove Prettier ignore file * Reduce button size * Reset element initial state
kagisearch · Feb 19, 2024 · 13d604e · 13d604e
1 parent 29d3c2a
commit 13d604e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 0 deletions.
diff --git a/shared/src/summarize_result.css b/shared/src/summarize_result.css
@@ -92,3 +92,21 @@ p {
   font-size: 1rem;
   line-height: 1.25rem;
 }
+
+#close_summary {
+  background-color: #e5e5e5;
+  border: 1px solid #e5e5e5;
+  color: #191919;
+  border-radius: 3px;
+  height: 32px;
+  max-width: 80px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  margin: 10px auto;
+  display: block;
+}
+
+#close_summary:hover {
+  background-color: #cecece;
+  border: 1px solid #b7b7b7;
+}
diff --git a/shared/src/summarize_result.html b/shared/src/summarize_result.html
@@ -57,6 +57,7 @@
       <div id="summary_stats" class="stats" style="display: none">
         <p><strong>Time saved:</strong> <span id="summary_stats_time_saved">0 minutes</span>.</p>
       </div>
+      <button id="close_summary" style="display: none">Close</button>
     </div>
     <script type="module" src="summarize_result.js"></script>
   </body>

diff --git a/shared/src/summarize_result.js b/shared/src/summarize_result.js
@@ -67,6 +67,14 @@ async function setup() {
 
   summaryStatsTimeSavedElement.innerText = '0 minutes';
 
+  const summaryCloseElement = document.getElementById('close_summary');
+  if (!summaryCloseElement) {
+    console.error('Could not find summarize close element');
+    return;
+  }
+
+  summaryCloseElement.style.display = 'none';
+
   browser.runtime.onMessage.addListener(async (data) => {
     const searchParams = new URLSearchParams(window.location.search);
     const url = searchParams.get('url');
@@ -96,9 +104,18 @@ async function setup() {
           data.timeSavedInMinutes
         } minute${data.timeSavedInMinutes !== 1 ? 's' : ''}`;
       }
+
+      summaryCloseElement.style.display = '';
+      summaryCloseElement.addEventListener('click', () => {
+        window.close();
+      });
     }
   });
 
+  window.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') window.close();
+  });
+
   async function requestPageSummary() {
     const hasTabAccess = await browser.permissions.contains({
       permissions: ['activeTab'],