Big update topdesk-highlight-summary.user.js

Moved summary outside the blue box, and changed the formatting.
M365-Drift · Oct 29, 2024 · 06ef2ee · 06ef2ee
1 parent 3b2e5c8
commit 06ef2ee
Showing 1 changed file with 33 additions and 6 deletions.
diff --git a/topdesk-highlight-summary.user.js b/topdesk-highlight-summary.user.js
@@ -1,8 +1,8 @@
 // ==UserScript==
 // @name         TOPdesk - Highlight Summary
 // @namespace    http://tampermonkey.net/
-// @version      1.4
-// @description  Highlight the summary section in a box with rounded corners and white background
+// @version      1.5
+// @description  Highlight the summary section in a box with a slightly yellow-orange background
 // @author       Magnus Børnes (magnborn@ntnu.no)
 // @match        https://hjelp.ntnu.no/*
 // @icon         https://www.google.com/s2/favicons?sz=64&domain=topdesk.com
@@ -14,6 +14,24 @@
 (function() {
     'use strict';
 
+    // Function to add custom styles
+    function addCustomStyles() {
+        const style = document.createElement('style');
+        style.innerHTML = `
+            .highlighted-summary {
+                background-color: #ffebcc;
+                padding: 12px;
+                margin: 0 0 0 24px;
+                max-width: 600px;
+                font-size: 13px;
+            }
+            .highlighted-summary p {
+                margin: 0px 0 0 0;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
     // Function to highlight the summary
     function highlightSummary() {
         // Find the first div element with an ID ending in "_Y7"
@@ -35,22 +53,31 @@
 
                 // Create a highlighted box with a heading
                 const highlightedBox = `
-                    <div class="highlighted-summary" style="border: 1px solid #000; border-radius: 10px; background-color: #fff; padding: 10px; margin: 10px 0; max-width: 600px;">
-                        <h3>Summary</h3>
+                    <div class="highlighted-summary">
                         <p>${summaryText}.</p>
                     </div>`;
 
-                // Replace the summary text with the highlighted box
-                html = html.replace(summaryMatch[0], highlightedBox);
+                // Remove the summary text from the original location
+                html = html.replace(summaryMatch[0], '');
 
                 // Update the div's inner HTML
                 div.innerHTML = html;
+
+                // Append the highlighted box to the container above the text input box
+                const container = document.querySelector('div[guielement="pt-trail-container"]');
+                if (container) {
+                    container.insertAdjacentHTML('beforebegin', highlightedBox);
+
+                    // Adjust the margin of the container to push it further down
+                    container.style.marginTop = '150px';
+                }
             }
         }
     }
 
     // Run the function to highlight the summary after the page has fully loaded
     window.addEventListener('load', () => {
+        addCustomStyles();
         highlightSummary();
 
         // Debounce function to limit the frequency of highlightSummary calls