adjusted settings tooltips

DJ2LS · Nov 6, 2024 · 8b01924 · 8b01924
1 parent 6a3cdaa
commit 8b01924
Show file tree

Hide file tree

Showing 9 changed files with 293 additions and 382 deletions.
diff --git a/freedata_gui/src/components/settings_chat.vue b/freedata_gui/src/components/settings_chat.vue
@@ -29,17 +29,21 @@ export default {
   <div class="input-group input-group-sm mb-1">
     <label class="input-group-text w-50 text-wrap">
       Enable message auto repeat
-      <span id="enableAutoRepeatHelp" class="ms-2 badge bg-secondary text-wrap">
-        Re-send message on beacon
-      </span>
+      <button
+        type="button"
+        class="btn btn-link p-0 ms-2"
+        data-bs-toggle="tooltip"
+        title="Re-send message on beacon"
+      >
+        <i class="bi bi-question-circle"></i>
+      </button>
     </label>
     <label class="input-group-text w-50">
       <div class="form-check form-switch form-check-inline ms-2">
         <input
           class="form-check-input"
           type="checkbox"
           id="enableMessagesAutoRepeatSwitch"
-          aria-describedby="enableAutoRepeatHelp"
           @change="onChange"
           v-model="settings.remote.MESSAGES.enable_auto_repeat"
         />
@@ -52,16 +56,20 @@ export default {
   <div class="input-group input-group-sm mb-1">
     <label class="input-group-text w-50 text-wrap">
       ADIF Log Host
-      <span id="adifLogHostHelp" class="ms-2 badge bg-secondary text-wrap">
-        ADIF server host, e.g., 127.0.0.1
-      </span>
+      <button
+        type="button"
+        class="btn btn-link p-0 ms-2"
+        data-bs-toggle="tooltip"
+        title="ADIF server host, e.g., 127.0.0.1"
+      >
+        <i class="bi bi-question-circle"></i>
+      </button>
     </label>
     <input
       type="text"
       class="form-control"
       placeholder="Enter ADIF server host"
       id="adifLogHost"
-      aria-describedby="adifLogHostHelp"
       @change="onChange"
       v-model="settings.remote.MESSAGES.adif_log_host"
     />
@@ -71,9 +79,14 @@ export default {
   <div class="input-group input-group-sm mb-1">
     <label class="input-group-text w-50 text-wrap">
       ADIF Log Port
-      <span id="adifLogPortHelp" class="ms-2 badge bg-secondary text-wrap">
-        ADIF server port, e.g., 2237
-      </span>
+      <button
+        type="button"
+        class="btn btn-link p-0 ms-2"
+        data-bs-toggle="tooltip"
+        title="ADIF server port, e.g., 2237"
+      >
+        <i class="bi bi-question-circle"></i>
+      </button>
     </label>
     <input
       type="number"
@@ -82,7 +95,6 @@ export default {
       id="adifLogPort"
       max="65534"
       min="1025"
-      aria-describedby="adifLogPortHelp"
       @change="onChange"
       v-model.number="settings.remote.MESSAGES.adif_log_port"
     />

diff --git a/freedata_gui/src/components/settings_exp.vue b/freedata_gui/src/components/settings_exp.vue
@@ -18,17 +18,21 @@ import { settingsStore as settings } from "../store/settingsStore.js";
   <div class="input-group input-group-sm mb-1">
     <label class="input-group-text w-50 text-wrap">
       Enable MESH protocol
-      <span id="enableMeshHelp" class="ms-2 badge bg-secondary text-wrap">
-        Experimental feature
-      </span>
+      <button
+        type="button"
+        class="btn btn-link p-0 ms-2"
+        data-bs-toggle="tooltip"
+        title="Experimental feature"
+      >
+        <i class="bi bi-question-circle"></i>
+      </button>
     </label>
     <label class="input-group-text w-50">
       <div class="form-check form-switch form-check-inline ms-2">
         <input
           class="form-check-input"
           type="checkbox"
           id="enableMeshSwitch"
-          aria-describedby="enableMeshHelp"
           @change="setConfig"
           v-model="settings.remote.MESH.enable_protocol"
           disabled

diff --git a/freedata_gui/src/components/settings_gui.vue b/freedata_gui/src/components/settings_gui.vue
@@ -8,14 +8,18 @@
   <div class="input-group input-group-sm mb-1">
     <span class="input-group-text w-50 text-wrap">
       Waterfall theme
-      <span id="wfThemeHelp" class="ms-2 badge bg-secondary text-wrap">
-        Select color theme for waterfall display
-      </span>
+      <button
+        type="button"
+        class="btn btn-link p-0 ms-2"
+        data-bs-toggle="tooltip"
+        title="Select color theme for waterfall display"
+      >
+        <i class="bi bi-question-circle"></i>
+      </button>
     </span>
     <select
       class="form-select form-select-sm w-50"
       id="wftheme_selector"
-      aria-describedby="wfThemeHelp"
       @change="saveSettings"
       v-model="settings.local.wf_theme"
     >
@@ -33,17 +37,21 @@
   <div class="input-group input-group-sm mb-1">
     <label class="input-group-text w-50 text-wrap">
       Auto launch browser
-      <span id="autoLaunchBrowserHelp" class="ms-2 badge bg-secondary text-wrap">
-        Launch browser to GUI URL on server startup
-      </span>
+      <button
+        type="button"
+        class="btn btn-link p-0 ms-2"
+        data-bs-toggle="tooltip"
+        title="Launch browser to GUI URL on server startup"
+      >
+        <i class="bi bi-question-circle"></i>
+      </button>
     </label>
     <label class="input-group-text w-50">
       <div class="form-check form-switch form-check-inline">
         <input
           class="form-check-input"
           type="checkbox"
           id="autoLaunchBrowserSwitch"
-          aria-describedby="autoLaunchBrowserHelp"
           @change="onChange"
           v-model="settings.remote.GUI.auto_run_browser"
         />
@@ -56,17 +64,21 @@
   <div class="input-group input-group-sm mb-1">
     <label class="input-group-text w-50 text-wrap">
       Enable notifications
-      <span id="enableNotificationsHelp" class="ms-2 badge bg-secondary text-wrap">
-        Show system pop-ups
-      </span>
+      <button
+        type="button"
+        class="btn btn-link p-0 ms-2"
+        data-bs-toggle="tooltip"
+        title="Show system pop-ups"
+      >
+        <i class="bi bi-question-circle"></i>
+      </button>
     </label>
     <label class="input-group-text w-50">
       <div class="form-check form-switch form-check-inline">
         <input
           class="form-check-input"
           type="checkbox"
           id="enableNotificationsSwitch"
-          aria-describedby="enableNotificationsHelp"
           @change="saveSettings"
           v-model="settings.local.enable_sys_notification"
         />
@@ -76,7 +88,6 @@
   </div>
 </template>
 
-
 <script>
 import { setColormap } from "../js/waterfallHandler";
 import { settingsStore as settings, onChange } from "../store/settingsStore.js";