From a1612949bf59b69e14ac852a64d722548ffbfbee Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Wed, 28 Aug 2024 20:54:50 +0100
Subject: [PATCH] accounts: css adjustments

there is now a border between rows, on light mode a dashed line, on dark
a dotted (looks almost solid). Row height has been changed slightly,
too. Label and edit icon are back to being first after the username, and
the edit button is on the left now. Contact dropdowns now overflow out
of the table properly.
---
 html/admin.html        |  2 +-
 ts/modules/accounts.ts | 22 +++++++++++++---------
 ts/modules/ui.ts       |  2 +-
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/html/admin.html b/html/admin.html
index 80cdd70..0783bce 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -802,7 +802,7 @@
                         <span class="button ~critical @low center " id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
                     </div>
                     <div class="card @low accounts-header table-responsive mt-2">
-                        <table class="table text-base leading-4">
+                        <table class="table text-base leading-5">
                             <thead>
                                 <tr>
                                     <th><input type="checkbox" value="" id="accounts-select-all"></th>
diff --git a/ts/modules/accounts.ts b/ts/modules/accounts.ts
index 8820284..034d85e 100644
--- a/ts/modules/accounts.ts
+++ b/ts/modules/accounts.ts
@@ -112,10 +112,10 @@ class user implements User, SearchableItem {
     get admin(): boolean { return this._admin.classList.contains("chip"); }
     set admin(state: boolean) {
         if (state) {
-            this._admin.classList.add("chip", "~info");
+            this._admin.classList.remove("hidden")
             this._admin.textContent = window.lang.strings("admin");
         } else {
-            this._admin.classList.remove("chip", "~info");
+            this._admin.classList.add("hidden")
             this._admin.textContent = "";
         }
     }
@@ -135,10 +135,10 @@ class user implements User, SearchableItem {
     get disabled(): boolean { return this._disabled.classList.contains("chip"); }
     set disabled(state: boolean) {
         if (state) {
-            this._disabled.classList.add("chip", "~warning");
+            this._disabled.classList.remove("hidden")
             this._disabled.textContent = window.lang.strings("disabled");
         } else {
-            this._disabled.classList.remove("chip", "~warning");
+            this._disabled.classList.add("hidden")
             this._disabled.textContent = "";
         }
     }
@@ -185,7 +185,7 @@ class user implements User, SearchableItem {
         if (!telegram && !discord && !matrix && !email) return;
         let innerHTML = `
         <i class="icon ri-settings-2-line ml-2 dropdown-button"></i>
-        <div class="dropdown manual">
+        <div class="dropdown manual over-top">
             <div class="dropdown-display lg">
                 <div class="card ~neutral @low">
                     <div class="supra sm mb-2">${window.lang.strings("contactThrough")}</div>
@@ -486,13 +486,16 @@ class user implements User, SearchableItem {
 
     constructor(user: User) {
         this._row = document.createElement("tr") as HTMLTableRowElement;
+        this._row.classList.add("border-b", "border-dashed", "dark:border-dotted", "dark:border-stone-700");
         let innerHTML = `
             <td><input type="checkbox" class="accounts-select-user" value=""></td>
             <td><div class="flex flex-row gap-2 items-center">
                 <span class="accounts-username"></span>
-                <span class="accounts-label-container" title="${window.lang.strings("label")}"></span>
-                <span class="accounts-admin"></span>
-                <span class="accounts-disabled"></span></span>
+                <div class="flex flex-row gap-2 items-baseline">
+                    <span class="accounts-label-container" title="${window.lang.strings("label")}"></span>
+                    <span class="accounts-admin chip ~info hidden"></span>
+                    <span class="accounts-disabled chip ~warning hidden"></span></span>
+                </div>
             </div></td>
         `;
         if (window.jellyfinLogin) {
@@ -501,7 +504,7 @@ class user implements User, SearchableItem {
             `;
         }
         innerHTML += `
-            <td><div class="flex flex-row gap-2 items-center">
+            <td><div class="flex flex-row gap-2 items-baseline">
                 <span class="accounts-email-container" title="${window.lang.strings("emailAddress")}"></span>
             </div></td>
         `;
@@ -554,6 +557,7 @@ class user implements User, SearchableItem {
             container: this._label,
             onSet: this._updateLabel,
             customContainerHTML: `<span class="chip ~gray hidden-input-content"></span>`,
+            buttonOnLeft: true,
             clickAwayShouldSave: false,
         });
 
diff --git a/ts/modules/ui.ts b/ts/modules/ui.ts
index 575aac4..c92031e 100644
--- a/ts/modules/ui.ts
+++ b/ts/modules/ui.ts
@@ -27,7 +27,7 @@ export class HiddenInputField {
             this._c.input = `<input type="text" class="field ~neutral @low max-w-24 hidden-input-input">`;
         }
         this._c.container.innerHTML = `
-        <div class="flex flex-row gap-2 items-center">
+        <div class="flex flex-row gap-2 items-baseline">
             ${this._c.buttonOnLeft ? "" : this._c.input}
             ${this._c.buttonOnLeft ? "" : this._c.customContainerHTML}
             <i class="hidden-input-toggle"></i>