Add:Help icon buttons for libraries, rss feeds and users config pages, table add new buttons updated

2025-10-27 11:18:14 +01:00 · 2023-10-28 13:27:53 -05:00 · 2023-10-28 13:27:53 -05:00 · 61f2fb28e0
commit 61f2fb28e0
parent 1df4dca4bb
22 changed files with 94 additions and 27 deletions
--- a/client/components/app/SettingsContent.vue
+++ b/client/components/app/SettingsContent.vue
@ -3,9 +3,7 @@
    <div class="flex items-center mb-2">
      <h1 class="text-xl">{{ headerText }}</h1>

-      <div v-if="showAddButton" class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clicked">
-        <button type="button" class="material-icons" :aria-label="$strings.ButtonAdd + ': ' + headerText" style="font-size: 1.4rem">add</button>
-      </div>
+      <slot name="header-items"></slot>
    </div>

    <p v-if="description" id="settings-description" class="mb-6 text-gray-200" v-html="description" />
@ -19,14 +17,9 @@ export default {
  props: {
    headerText: String,
    description: String,
-    note: String,
-    showAddButton: Boolean
+    note: String
  },
-  methods: {
-    clicked() {
-      this.$emit('clicked')
-    }
-  }
+  methods: {}
 }
 </script>

--- a/client/components/modals/AccountModal.vue
+++ b/client/components/modals/AccountModal.vue
@ -329,6 +329,7 @@ export default {
    init() {
      this.fetchAllTags()
      this.isNew = !this.account
+
      if (this.account) {
        this.newUser = {
          username: this.account.username,
--- a/client/components/tables/UsersTable.vue
+++ b/client/components/tables/UsersTable.vue
@ -52,8 +52,6 @@
        </tr>
      </table>
    </div>
-
-    <modals-account-modal ref="accountModal" v-model="showAccountModal" :account="selectedAccount" />
  </div>
 </template>

@ -62,8 +60,6 @@ export default {
  data() {
    return {
      users: [],
-      selectedAccount: null,
-      showAccountModal: false,
      isDeletingUser: false
    }
  },
@ -114,13 +110,8 @@ export default {
          })
      }
    },
-    clickAddUser() {
-      this.selectedAccount = null
-      this.showAccountModal = true
-    },
    editUser(user) {
-      this.selectedAccount = user
-      this.showAccountModal = true
+      this.$emit('edit', user)
    },
    loadUsers() {
      this.$axios
--- a/client/pages/config/email.vue
+++ b/client/pages/config/email.vue
@ -51,8 +51,14 @@
      </div>
    </app-settings-content>

-    <app-settings-content :header-text="$strings.HeaderEreaderDevices" showAddButton :description="''" @clicked="addNewDeviceClick">
-      <table v-if="existingEReaderDevices.length" class="tracksTable my-4">
+    <app-settings-content :header-text="$strings.HeaderEreaderDevices" :description="''">
+      <template #header-items>
+        <div class="flex-grow" />
+
+        <ui-btn color="primary" small @click="addNewDeviceClick">{{ $strings.ButtonAddDevice }}</ui-btn>
+      </template>
+
+      <table v-if="existingEReaderDevices.length" class="tracksTable mt-4">
        <tr>
          <th class="text-left">{{ $strings.LabelName }}</th>
          <th class="text-left">{{ $strings.LabelEmail }}</th>
--- a/client/pages/config/libraries.vue
+++ b/client/pages/config/libraries.vue
@ -1,7 +1,18 @@
 <template>
  <div>
-    <app-settings-content :header-text="$strings.HeaderLibraries" show-add-button @clicked="setShowLibraryModal">
-      <tables-library-libraries-table @showLibraryModal="setShowLibraryModal" />
+    <app-settings-content :header-text="$strings.HeaderLibraries">
+      <template #header-items>
+        <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
+          <a href="https://www.audiobookshelf.org/guides/library_creation" target="_blank" class="inline-flex">
+            <span class="material-icons text-xl w-5 text-gray-200">help_outline</span>
+          </a>
+        </ui-tooltip>
+
+        <div class="flex-grow" />
+
+        <ui-btn color="primary" small @click="setShowLibraryModal()">{{ $strings.ButtonAddLibrary }}</ui-btn>
+      </template>
+      <tables-library-libraries-table @showLibraryModal="setShowLibraryModal" class="pt-2" />
    </app-settings-content>
    <modals-libraries-edit-modal v-model="showLibraryModal" :library="selectedLibrary" />
  </div>
--- a/client/pages/config/rss-feeds.vue
+++ b/client/pages/config/rss-feeds.vue
@ -1,7 +1,15 @@
 <template>
  <div>
    <app-settings-content :header-text="$strings.HeaderRSSFeeds">
-      <div v-if="feeds.length" class="block max-w-full">
+      <template #header-items>
+        <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
+          <a href="https://www.audiobookshelf.org/guides/rss_feeds" target="_blank" class="inline-flex">
+            <span class="material-icons text-xl w-5 text-gray-200">help_outline</span>
+          </a>
+        </ui-tooltip>
+      </template>
+
+      <div v-if="feeds.length" class="block max-w-full pt-2">
        <table class="rssFeedsTable text-xs">
          <tr class="bg-primary bg-opacity-40 h-12">
            <th class="w-16 min-w-16"></th>
--- a/client/pages/config/users/index.vue
+++ b/client/pages/config/users/index.vue
@ -1,7 +1,19 @@
 <template>
  <div>
-    <app-settings-content :header-text="$strings.HeaderUsers" show-add-button @clicked="setShowUserModal">
-      <tables-users-table />
+    <app-settings-content :header-text="$strings.HeaderUsers">
+      <template #header-items>
+        <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
+          <a href="https://www.audiobookshelf.org/guides/users" target="_blank" class="inline-flex">
+            <span class="material-icons text-xl w-5 text-gray-200">help_outline</span>
+          </a>
+        </ui-tooltip>
+
+        <div class="flex-grow" />
+
+        <ui-btn color="primary" small @click="setShowUserModal()">{{ $strings.ButtonAddUser }}</ui-btn>
+      </template>
+
+      <tables-users-table class="pt-2" @edit="setShowUserModal" />
    </app-settings-content>
    <modals-account-modal ref="accountModal" v-model="showAccountModal" :account="selectedAccount" />
  </div>
--- a/client/strings/da.json
+++ b/client/strings/da.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "Tilføj",
  "ButtonAddChapters": "Tilføj kapitler",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "Tilføj podcasts",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "Tilføj din første bibliotek",
  "ButtonApply": "Anvend",
  "ButtonApplyChapters": "Anvend kapitler",
--- a/client/strings/de.json
+++ b/client/strings/de.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "Hinzufügen",
  "ButtonAddChapters": "Kapitel hinzufügen",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "Podcasts hinzufügen",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "Erstelle deine erste Bibliothek",
  "ButtonApply": "Übernehmen",
  "ButtonApplyChapters": "Kapitel anwenden",
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "Add",
  "ButtonAddChapters": "Add Chapters",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "Add Podcasts",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "Add your first library",
  "ButtonApply": "Apply",
  "ButtonApplyChapters": "Apply Chapters",
--- a/client/strings/es.json
+++ b/client/strings/es.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "Agregar",
  "ButtonAddChapters": "Agregar Capitulo",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "Agregar Podcasts",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "Agrega tu Primera Biblioteca",
  "ButtonApply": "Aplicar",
  "ButtonApplyChapters": "Aplicar Capítulos",
--- a/client/strings/fr.json
+++ b/client/strings/fr.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "Ajouter",
  "ButtonAddChapters": "Ajouter le chapitre",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "Ajouter des podcasts",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "Ajouter votre première bibliothèque",
  "ButtonApply": "Appliquer",
  "ButtonApplyChapters": "Appliquer les chapitres",
--- a/client/strings/gu.json
+++ b/client/strings/gu.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "ઉમેરો",
  "ButtonAddChapters": "પ્રકરણો ઉમેરો",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "પોડકાસ્ટ ઉમેરો",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "તમારી પ્રથમ પુસ્તકાલય ઉમેરો",
  "ButtonApply": "લાગુ કરો",
  "ButtonApplyChapters": "પ્રકરણો લાગુ કરો",
--- a/client/strings/hi.json
+++ b/client/strings/hi.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "जोड़ें",
  "ButtonAddChapters": "अध्याय जोड़ें",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "पॉडकास्ट जोड़ें",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "अपनी पहली पुस्तकालय जोड़ें",
  "ButtonApply": "लागू करें",
  "ButtonApplyChapters": "अध्यायों में परिवर्तन लागू करें",
--- a/client/strings/hr.json
+++ b/client/strings/hr.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "Dodaj",
  "ButtonAddChapters": "Dodaj poglavlja",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "Dodaj podcaste",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "Dodaj svoju prvu biblioteku",
  "ButtonApply": "Primijeni",
  "ButtonApplyChapters": "Primijeni poglavlja",
--- a/client/strings/it.json
+++ b/client/strings/it.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "Aggiungi",
  "ButtonAddChapters": "Aggiungi Capitoli",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "Aggiungi Podcast",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "Aggiungi la tua prima libreria",
  "ButtonApply": "Applica",
  "ButtonApplyChapters": "Applica",
--- a/client/strings/lt.json
+++ b/client/strings/lt.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "Pridėti",
  "ButtonAddChapters": "Pridėti skyrius",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "Pridėti tinklalaides",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "Pridėkite savo pirmąją biblioteką",
  "ButtonApply": "Taikyti",
  "ButtonApplyChapters": "Taikyti skyrius",
--- a/client/strings/nl.json
+++ b/client/strings/nl.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "Toevoegen",
  "ButtonAddChapters": "Hoofdstukken toevoegen",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "Podcasts toevoegen",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "Voeg je eerste bibliotheek toe",
  "ButtonApply": "Pas toe",
  "ButtonApplyChapters": "Hoofdstukken toepassen",
--- a/client/strings/no.json
+++ b/client/strings/no.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "Legg til",
  "ButtonAddChapters": "Legg til kapittel",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "Legg til podcast",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "Legg til ditt første bibliotek",
  "ButtonApply": "Bruk",
  "ButtonApplyChapters": "Bruk kapittel",
--- a/client/strings/pl.json
+++ b/client/strings/pl.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "Dodaj",
  "ButtonAddChapters": "Dodaj rozdziały",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "Dodaj podcasty",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "Dodaj swoją pierwszą bibliotekę",
  "ButtonApply": "Zatwierdź",
  "ButtonApplyChapters": "Zatwierdź rozdziały",
--- a/client/strings/ru.json
+++ b/client/strings/ru.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "Добавить",
  "ButtonAddChapters": "Добавить главы",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "Добавить подкасты",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "Добавьте Вашу первую библиотеку",
  "ButtonApply": "Применить",
  "ButtonApplyChapters": "Применить главы",
--- a/client/strings/zh-cn.json
+++ b/client/strings/zh-cn.json
@ -1,7 +1,10 @@
 {
  "ButtonAdd": "增加",
  "ButtonAddChapters": "添加章节",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
  "ButtonAddPodcasts": "添加播客",
+  "ButtonAddUser": "Add User",
  "ButtonAddYourFirstLibrary": "添加第一个媒体库",
  "ButtonApply": "应用",
  "ButtonApplyChapters": "应用到章节",