Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2024-12-20 19:06:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add new settings content component

Browse Source 
This commit adds a new settings conent component. This is a container
component for the settings pages, so that they all get the same
formatting by default. It handles the header text, description text, and
any "add new" plus button as needed.
This commit is contained in:
jmt-gh 2022-11-25 21:06:18 -08:00
parent fb078d05bc
commit 4db34e0c56
1 changed files with 48 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
client/components/app/SettingsContent.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
<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">
<span class="material-icons" style="font-size: 1.4rem">add</span>
</div>
</div>
<p v-if="description" id="description" class="mb-6 text-gray-200" v-html="description" />
<slot></slot>
</div>
</template>
<script>
export default {
props: {
headerText: String,
description: String,
note: String,
showAddButton: Boolean
},
methods: {
clicked() {
this.$emit('clicked');
}
}
}
</script>
<style>
#description a {
color: rgb(96 165 250);
}
#description a:hover {
color: rgb(147 197 253);
text-decoration-line: underline;
}
#description code {
font-size: 0.875rem;
border-radius: 6px;
background-color: rgb(82, 82, 82);
color: white;
padding: 2px 4px;
}
</style>