Add text to action buttons

bas080 · Jun 26, 2024 · ae42e03 · ae42e03
1 parent f4626f1
commit ae42e03
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/lit-component.mjs b/lit-component.mjs
@@ -16,6 +16,12 @@ import {
 } from "./util.mjs";
 
 const svg = {
+  flame: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+    <path
+      d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4C112 375.4 162.6 416 225.7 416z"
+    />
+  </svg>`,
   refresh: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
     <path
@@ -91,6 +97,14 @@ const trs = {
   addItem: "Add Item",
   listActions: "List",
   Settings: "Settings",
+  updateApp: "Update",
+  clearLists: "Clear",
+  remove: "Remove",
+  newList: "New List",
+  shareList: "Share",
+  qrShareList: "QR Share",
+  add: "Add",
+  raise: "Swap",
 };
 
 const emojiByTag = emojiMap.names.reduce((acc, name) => {
@@ -158,16 +172,15 @@ const toplist = {
         <summary>${tr("Settings")}</summary>
 
         ${toplist.action(vm, "updateApp", svg.refresh)}
+        ${toplist.action(vm, "clearLists", svg.flame)}
       </details>
-      <h1 id="toplist">${tr("appTitle")}</h1>
-
       ${toplist.lists(vm)}
     </div>
   `,
 
   action: (vm, name, svg = null) =>
     html`<button class="action" @click=${emitAction(`${name}Action`, vm)}>
-      ${svg}
+      ${svg} ${tr(name)}
     </button>`,
 
   actionsCommon: (vm) => null,
@@ -214,11 +227,12 @@ const toplist = {
       ${when(
         vm.isTopList,
         () =>
-          html` <form @submit="${emitAction("addItem", vm)}">
-            <label>${tr("newItem")}</label>
-            <input required id="addItemInput" />
-            <input type="submit" value="${tr("addItem")}" />
-          </form>`,
+          html` <h1 id="toplist">${tr("appTitle")}</h1>
+            <form @submit="${emitAction("addItem", vm)}">
+              <label>${tr("newItem")}</label>
+              <input required id="addItemInput" />
+              <input type="submit" value="${tr("addItem")}" />
+            </form>`,
       )}
 
       <ul>

diff --git a/toplist.css b/toplist.css
@@ -54,14 +54,15 @@ ul {
 }
 
 .action {
-  width: 2em;
   text-align: center;
   background-color: var(--bg);
+  color: var(--text);
 }
 
 .action svg {
   fill: var(--text);
-  height: 1em;
+  height: 1lh;
+  vertical-align: middle;
 }
 
 dialog {

diff --git a/toplist.mjs b/toplist.mjs
@@ -211,6 +211,12 @@ const actions = {
     raiseArchived(event.detail.listIndex);
   },
   qrShareListAction: (event) => openQRCode(event.detail.items),
+  clearListsAction() {
+    if (confirm("Are you sure you want to delete all lists?")) {
+      localStorage.clear();
+      location.reload();
+    }
+  },
 };
 
 function rerender() {