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

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">
+      <slot name="header-items"></slot>
-        <button type="button" class="material-icons" :aria-label="$strings.ButtonAdd + ': ' + headerText" style="font-size: 1.4rem">add</button>
-      </div>
     </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,
+    note: String
-    showAddButton: Boolean
   },
-  methods: {
+  methods: {}
-    clicked() {
-      this.$emit('clicked')
-    }
-  }
 }
 </script>
 

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,

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.$emit('edit', user)
-      this.showAccountModal = true
     },
     loadUsers() {
       this.$axios

client/pages/config/email.vue

@@ -51,8 +51,14 @@
       </div>
     </app-settings-content>
 
-    <app-settings-content :header-text="$strings.HeaderEreaderDevices" showAddButton :description="''" @clicked="addNewDeviceClick">
+    <app-settings-content :header-text="$strings.HeaderEreaderDevices" :description="''">
-      <table v-if="existingEReaderDevices.length" class="tracksTable my-4">
+      <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>

client/pages/config/libraries.vue

@@ -1,7 +1,18 @@
 <template>
   <div>
-    <app-settings-content :header-text="$strings.HeaderLibraries" show-add-button @clicked="setShowLibraryModal">
+    <app-settings-content :header-text="$strings.HeaderLibraries">
-      <tables-library-libraries-table @showLibraryModal="setShowLibraryModal" />
+      <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>

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>

client/pages/config/users/index.vue

@@ -1,7 +1,19 @@
 <template>
   <div>
-    <app-settings-content :header-text="$strings.HeaderUsers" show-add-button @clicked="setShowUserModal">
+    <app-settings-content :header-text="$strings.HeaderUsers">
-      <tables-users-table />
+      <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>

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",

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",

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",

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",

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",

client/strings/gu.json

@@ -1,7 +1,10 @@
 {
   "ButtonAdd": "ઉમેરો",
   "ButtonAddChapters": "પ્રકરણો ઉમેરો",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
   "ButtonAddPodcasts": "પોડકાસ્ટ ઉમેરો",
+  "ButtonAddUser": "Add User",
   "ButtonAddYourFirstLibrary": "તમારી પ્રથમ પુસ્તકાલય ઉમેરો",
   "ButtonApply": "લાગુ કરો",
   "ButtonApplyChapters": "પ્રકરણો લાગુ કરો",

client/strings/hi.json

@@ -1,7 +1,10 @@
 {
   "ButtonAdd": "जोड़ें",
   "ButtonAddChapters": "अध्याय जोड़ें",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
   "ButtonAddPodcasts": "पॉडकास्ट जोड़ें",
+  "ButtonAddUser": "Add User",
   "ButtonAddYourFirstLibrary": "अपनी पहली पुस्तकालय जोड़ें",
   "ButtonApply": "लागू करें",
   "ButtonApplyChapters": "अध्यायों में परिवर्तन लागू करें",

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",

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",

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",

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",

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",

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",

client/strings/ru.json

@@ -1,7 +1,10 @@
 {
   "ButtonAdd": "Добавить",
   "ButtonAddChapters": "Добавить главы",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
   "ButtonAddPodcasts": "Добавить подкасты",
+  "ButtonAddUser": "Add User",
   "ButtonAddYourFirstLibrary": "Добавьте Вашу первую библиотеку",
   "ButtonApply": "Применить",
   "ButtonApplyChapters": "Применить главы",

client/strings/zh-cn.json

@@ -1,7 +1,10 @@
 {
   "ButtonAdd": "增加",
   "ButtonAddChapters": "添加章节",
+  "ButtonAddDevice": "Add Device",
+  "ButtonAddLibrary": "Add Library",
   "ButtonAddPodcasts": "添加播客",
+  "ButtonAddUser": "Add User",
   "ButtonAddYourFirstLibrary": "添加第一个媒体库",
   "ButtonApply": "应用",
   "ButtonApplyChapters": "应用到章节",