From 4b344259f9863458697c32cfc4d275a72254c0a8 Mon Sep 17 00:00:00 2001
From: Stephan de Wit <stephan.de.wit@deciso.com>
Date: Fri, 13 Sep 2024 11:32:37 +0200
Subject: [PATCH] dashboard: link styling

---
 src/opnsense/www/css/dashboard.css             |  3 +++
 src/opnsense/www/js/opnsense_widget_manager.js | 10 ++++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/opnsense/www/css/dashboard.css b/src/opnsense/www/css/dashboard.css
index c4fff3fa6..dda3da8a6 100644
--- a/src/opnsense/www/css/dashboard.css
+++ b/src/opnsense/www/css/dashboard.css
@@ -79,6 +79,7 @@
     font-size: 2em;
 }
 
+.link-handle,
 .close-handle,
 .edit-handle {
     margin-left: 0.5em;
@@ -87,9 +88,11 @@
     cursor: pointer;
 }
 
+.link-handle > a,
 .close-handle > i,
 .edit-handle > i {
     font-size: 0.8em;
+    color: black;
 }
 
 .widget-header-left {
diff --git a/src/opnsense/www/js/opnsense_widget_manager.js b/src/opnsense/www/js/opnsense_widget_manager.js
index 7dc85098b..b42068075 100644
--- a/src/opnsense/www/js/opnsense_widget_manager.js
+++ b/src/opnsense/www/js/opnsense_widget_manager.js
@@ -364,6 +364,7 @@ class WidgetManager  {
 
                                 if (this.runtimeOptions.editMode) {
                                     $('.widget-content').css('cursor', 'grab');
+                                    $('.link-handle').hide();
                                     $('.close-handle').show();
                                     $('.edit-handle').show();
                                 }
@@ -405,6 +406,7 @@ class WidgetManager  {
                 this.grid.enableMove(true);
                 this.grid.enableResize(true);
                 $('.widget-content').css('cursor', 'grab');
+                $('.link-handle').hide();
                 $('.close-handle').show();
                 $('.edit-handle').show();
                 $('#add_widget').show();
@@ -414,6 +416,7 @@ class WidgetManager  {
                 this.grid.enableMove(false);
                 this.grid.enableResize(false);
                 $('.widget-content').css('cursor', 'default');
+                $('.link-handle').show();
                 $('.close-handle').hide();
                 $('.edit-handle').hide();
                 $('#add_widget').hide();
@@ -571,7 +574,7 @@ class WidgetManager  {
     _makeWidget(identifier, content) {
         const title = this.widgetTranslations[identifier].title;
         const link = this.breakoutLinks[identifier] !== "" ? `
-                <div id="link-handle-${identifier}">
+                <div id="link-handle-${identifier}" class="link-handle">
                     <a href="${this.breakoutLinks[identifier]}" target="_blank">
                         <i class="fa fa-external-link fa-xs"></i>
                     </a>
@@ -581,11 +584,10 @@ class WidgetManager  {
         let $content = $(`<div class="widget-content"></div>`);
         let $header = $(`
             <div class="widget-header">
-                <div class="widget-header-left">
-                    ${link}
-                </div>
+                <div class="widget-header-left"></div>
                 <div id="${identifier}-title" class="widget-title"><b>${title}</b></div>
                 <div class="widget-command-container">
+                    ${link}
                     <div id="close-handle-${identifier}" class="close-handle" style="display: none;">
                         <i class="fa fa-times fa-xs"></i>
                     </div>