From 7fa3dd1747dcacc3ca04ec807fef2067468ef92f Mon Sep 17 00:00:00 2001
From: ridiculousfish <rf@fishshell.com>
Date: Sun, 15 Oct 2023 12:51:30 -0700
Subject: [PATCH] Refresh and fix some web config bugs

Refresh some stale CSS, improve some rendering, and fix some bugs.

Some of the CSS no longer applied. Remove the bright red X in history
and use a tamer color. Fix the prev/next paginator buttons from moving
for large paginations. Fix the calculation about disabling prev/next.
---
 share/tools/web_config/fishconfig.css | 55 +++++++++++++--------------
 share/tools/web_config/index.html     | 20 +++++-----
 2 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/share/tools/web_config/fishconfig.css b/share/tools/web_config/fishconfig.css
index 8eb9a67b7..6881e0986 100644
--- a/share/tools/web_config/fishconfig.css
+++ b/share/tools/web_config/fishconfig.css
@@ -270,7 +270,6 @@ body {
     padding-bottom: 5px;
     vertical-align: top;
     overflow: hidden;
-    border-bottom: #444 dotted 1px;
     word-wrap: break-word;
 }
 
@@ -284,13 +283,17 @@ body {
     padding-bottom: 5px;
     vertical-align: top;
     overflow: hidden;
-    border-bottom: #444 dotted 1px;
     word-wrap: break-word;
 }
 
 .history_delete {
     width: 20px;
-    border-bottom: #444 dotted 1px;
+}
+
+.data_table_cell,
+.history_text,
+.history_delete {
+    border-bottom: #AAA dotted 1px;
 }
 
 /* The CSS we apply when a table row is filtered */
@@ -460,17 +463,24 @@ body {
     margin-bottom: 5pt;
 }
 
-img.delete_icon {
+button.delete_button {
     width: 20px;
     height: 20px;
     cursor: pointer;
     text-decoration: none;
     border: none;
+    background-color: transparent;
+    font-size: 16pt;
+    color: #777;
+}
+
+button.delete_button:hover {
+    color: #333;
 }
 
 #table_filter_container {
     /* top right bottom left*/
-    padding: 0 10 10 30;
+    padding: 0 10px 10px 30px;
     text-align: right;
     position: relative;
     bottom: 10px;
@@ -478,10 +488,9 @@ img.delete_icon {
 
 .filter_text_box {
     width: 250px;
-    padding: 5 10 5 10;
-    border-radius: 15px;
+    padding: 5px 10px 5px 10px;
+    border-radius: 10px;
     font-size: 12pt;
-    font-weight: bold;
 }
 
 .prompt_demo,
@@ -577,36 +586,26 @@ img.delete_icon {
 }
 
 .paginator {
-    border-spacing: 0;
-    border-collapse: collapse;
-    display: inline;
+    display: inline-block;
     vertical-align: bottom;
     margin-right: 15px;
+    position: relative;
+    bottom: 2px;
 }
 
 .paginator td {
-    border: solid 1px #777;
-    padding: 8px;
+    padding: 0 8px;
 }
 
-.paginator .prev,
-.paginator .next {
+.paginator .desc {
+    min-width: 55px;
+}
+
+.paginator .prev button,
+.paginator .next button {
     font-size: 11pt;
 }
 
-.paginator a {
-    text-decoration: none;
-    text-align: center;
-    color: #0080aa;
-    font-size: larger;
-}
-
-.paginator .disabled a {
-    color: #bbb;
-    background-color: transparent;
-    cursor: default;
-}
-
 @media screen and (max-width: 1000px) {
     /* On small screens remove the margins to leave more for the actual content */
     body {
diff --git a/share/tools/web_config/index.html b/share/tools/web_config/index.html
index ca5d0f39c..500f8f00f 100644
--- a/share/tools/web_config/index.html
+++ b/share/tools/web_config/index.html
@@ -200,9 +200,8 @@
                         <div style='display: flex'>
                             <div x-html='selectedPrompt.demo' style='flex-grow: 1' class="prompt_demo unbordered"></div>
                             <template x-if="selectedPrompt.right">
-                                <div title="right prompt for {{selectedPrompt.name }}"
-                                     x-html='selectedPrompt.right' class="prompt_demo unbordered"
-                                     @click="selectPrompt(selectedPrompt)">
+                                <div title="right prompt for {{selectedPrompt.name }}" x-html='selectedPrompt.right'
+                                    class="prompt_demo unbordered" @click="selectPrompt(selectedPrompt)">
                                 </div>
                             </template>
                         </div>
@@ -284,15 +283,16 @@
                     <div id="table_filter_container">
                         <table class="paginator">
                             <tr>
-                                <td :class="{disabled: currentPage == 0}" class="prev">
-                                    <button type="button" @click="prevPage">« Prev</a>
+                                <td class="prev">
+                                    <button type="button" @click="prevPage" :disabled="currentPage == 0">« Prev</button>
                                 </td>
                                 <td class="desc" x-text="currentPageDescription"></td>
-                                <td :class="{disabled: currentPage * itemsPerPage >= filteredItems.length}"
-                                    class="next">
-                                    <button type="button" @click="nextPage">Next »</a>
+                                <td class="next">
+                                    <button type="button" @click="nextPage"
+                                        :disabled="(currentPage+1)*itemsPerPage >= filteredItems.length">Next »</button>
                                 </td>
                             </tr>
+
                         </table>
 
                         <input id="table_filter_text_box" class="filter_text_box text_box_transient"
@@ -307,8 +307,8 @@
                                 <td :class="{'history_text': true, 'no_overflow': selectedItems.indexOf(item) < 0}"
                                     @click="selectItem(item)" x-text="item"></td>
                                 <td class="history_delete">
-                                    <button type="button" class="delete_icon"
-                                        @click="deleteHistoryItem(item)">❌</button>
+                                    <button type="button" class="delete_button" title="Delete"
+                                        @click="deleteHistoryItem(item)">&times;</button>
                                 </td>
                             </tr>
                         </template>