Frontend: icon-button Cleanup (#1628)

Closes #1591 ### Changes - Converts one instance of a button with an icon in it to an `icon-button` - Makes all the trashcan icon buttons have a red hover state - Adds localization function & placeholder to upload dialog "Name" field - Adds localization functions to some missing icon-button label instances - Adds a few missing icon button labels Co-authored-by: sua yoo <sua@suayoo.com> Co-authored-by: sua yoo <sua@webrecorder.org>
webrecorder · Mar 27, 2024 · 275f694 · 275f694
1 parent 412eb2e
commit 275f694
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 16 deletions.
diff --git a/frontend/src/components/orgs-list.ts b/frontend/src/components/orgs-list.ts
@@ -152,6 +152,7 @@ export class OrgsList extends LiteElement {
           <sl-icon-button
             name="gear"
             slot="prefix"
+            label=${msg("Edit org quotas")}
             @click="${this.showQuotas(org)}"
           ></sl-icon-button>
         </div>

diff --git a/frontend/src/components/ui/file-list.ts b/frontend/src/components/ui/file-list.ts
@@ -1,10 +1,12 @@
-import { css, html, LitElement } from "lit";
+import { localized, msg } from "@lit/localize";
+import { css, html } from "lit";
 import {
   customElement,
   property,
   queryAssignedElements,
 } from "lit/decorators.js";
 
+import { TailwindElement } from "@/classes/TailwindElement";
 import { truncate } from "@/utils/css";
 
 type FileRemoveDetail = {
@@ -15,8 +17,9 @@ export type FileRemoveEvent = CustomEvent<FileRemoveDetail>;
 /**
  * @event on-remove FileRemoveEvent
  */
+@localized()
 @customElement("btrix-file-list-item")
-export class FileListItem extends LitElement {
+export class FileListItem extends TailwindElement {
   static styles = [
     truncate,
     css`
@@ -91,6 +94,8 @@ export class FileListItem extends LitElement {
             ? ""
             : html`<sl-icon-button
                 name="trash3"
+                class="text-base hover:text-danger"
+                label=${msg("Remove file")}
                 @click=${this.onRemove}
               ></sl-icon-button>`}
         </div>
@@ -121,7 +126,7 @@ export class FileListItem extends LitElement {
 }
 
 @customElement("btrix-file-list")
-export class FileList extends LitElement {
+export class FileList extends TailwindElement {
   static styles = [
     css`
       ::slotted(btrix-file-list-item) {

diff --git a/frontend/src/features/archived-items/file-uploader.ts b/frontend/src/features/archived-items/file-uploader.ts
@@ -240,7 +240,12 @@ export class FileUploader extends TailwindElement {
     const { helpText, validate } = this.validateDescriptionMax;
     return html`
       <div class="mb-3">
-        <sl-input label="Name" name="name" required></sl-input>
+        <sl-input
+          label=${msg("Name")}
+          name="name"
+          placeholder=${msg("Our Website (example.com)")}
+          required
+        ></sl-input>
       </div>
       <sl-textarea
         class="with-max-help-text mb-3"

diff --git a/frontend/src/features/collections/collections-add.ts b/frontend/src/features/collections/collections-add.ts
@@ -224,6 +224,7 @@ export class CollectionsAdd extends LiteElement {
         </div>
         <sl-icon-button
           name="x-lg"
+          label=${msg("Remove from auto-add")}
           data-key=${id}
           ?disabled=${!collection}
           @click=${this.removeCollection}

diff --git a/frontend/src/features/crawl-workflows/queue-exclusion-table.ts b/frontend/src/features/crawl-workflows/queue-exclusion-table.ts
@@ -205,12 +205,12 @@ export class QueueExclusionTable extends LiteElement {
           ${this.renderValue({ exclusion, index })}
         </td>
         <td class="${actionColClass} text-center text-[1rem]">
-          <btrix-button
-            icon
+          <sl-icon-button
+            label=${msg("Remove exclusion")}
+            class="text-base hover:text-danger"
+            name="trash3"
             @click=${() => this.removeExclusion(exclusion, index)}
-          >
-            <sl-icon name="trash3"></sl-icon>
-          </btrix-button>
+          ></sl-icon-button>
         </td>
       </tr>
     `;

diff --git a/frontend/src/pages/org/dashboard.ts b/frontend/src/pages/org/dashboard.ts
@@ -85,7 +85,7 @@ export class Dashboard extends LiteElement {
               href=${`${this.orgBasePath}/settings`}
               class="text-lg"
               name="gear"
-              label="Edit org settings"
+              label=${msg("Edit org settings")}
               @click=${this.navLink}
             ></sl-icon-button>`,
         )}

diff --git a/frontend/src/pages/org/settings.ts b/frontend/src/pages/org/settings.ts
@@ -362,8 +362,10 @@ export class OrgSettings extends LiteElement {
         disableButton = true;
       }
     }
-    return html`<btrix-button
-      icon
+    return html`<sl-icon-button
+      class="text-base hover:text-danger"
+      name="trash3"
+      label=${msg("Remove org member")}
       ?disabled=${disableButton}
       aria-details=${ifDefined(
         disableButton ? msg("Cannot remove only admin member") : undefined,
@@ -374,9 +376,7 @@ export class OrgSettings extends LiteElement {
             detail: { member },
           }) as OrgRemoveMemberEvent,
         )}
-    >
-      <sl-icon name="trash3"></sl-icon>
-    </btrix-button>`;
+    ></sl-icon-button>`;
   }
 
   private renderRemoveInviteButton(invite: Invite) {

diff --git a/frontend/src/pages/org/workflow-detail.ts b/frontend/src/pages/org/workflow-detail.ts
@@ -488,7 +488,7 @@ export class WorkflowDetail extends LiteElement {
       return html` <h3>${this.tabLabels[this.activePanel]}</h3>
         <sl-icon-button
           name="gear"
-          label="Edit workflow settings"
+          label=${msg("Edit workflow settings")}
           @click=${() =>
             this.navTo(
               `/orgs/${this.appState.orgSlug}/workflows/crawl/${this.workflow?.id}?edit`,