UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-22 08:07:55 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refac: settings styling

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2024-11-12 21:57:41 -08:00
parent c260274538
commit fae6731137
2 changed files with 64 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/lib/components/admin/Settings.svelte
View File

@ -42,13 +42,13 @@
<div class="flex flex-col lg:flex-row w-full h-full pt-1 pb-2 lg:space-x-4"> <div class="flex flex-col lg:flex-row w-full h-full pt-1 pb-2 lg:space-x-4">
<div <div
id="admin-settings-tabs-container" id="admin-settings-tabs-container"
class="tabs flex flex-row overflow-x-auto space-x-1 max-w-full lg:space-x-0 lg:space-y-1 lg:flex-col lg:flex-none lg:w-44 dark:text-gray-200 text-xs text-left scrollbar-none" class="tabs flex flex-row overflow-x-auto space-x-1 max-w-full lg:space-x-0 lg:space-y-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
> >
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 lg:flex-none flex text-right transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 lg:flex-none flex text-right transition {selectedTab ===
'general' 'general'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-50 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'general'; selectedTab = 'general';
}} }}
@ -71,10 +71,10 @@
</button> </button>
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'users' 'users'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-50 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'users'; selectedTab = 'users';
}} }}
@ -95,10 +95,10 @@
</button> </button>
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'connections' 'connections'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-50 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'connections'; selectedTab = 'connections';
}} }}
@ -119,10 +119,10 @@
</button> </button>
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'models' 'models'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-50 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'models'; selectedTab = 'models';
}} }}
@ -145,10 +145,10 @@
</button> </button>
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'evaluations' 'evaluations'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-50 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'evaluations'; selectedTab = 'evaluations';
}} }}
@ -160,10 +160,10 @@
</button> </button>
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'documents' 'documents'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-50 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'documents'; selectedTab = 'documents';
}} }}
@ -190,10 +190,10 @@
</button> </button>
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'web' 'web'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-50 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'web'; selectedTab = 'web';
}} }}
@ -214,10 +214,10 @@
</button> </button>
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'interface' 'interface'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-50 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'interface'; selectedTab = 'interface';
}} }}
@ -240,10 +240,10 @@
</button> </button>
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'audio' 'audio'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-50 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'audio'; selectedTab = 'audio';
}} }}
@ -267,10 +267,10 @@
</button> </button>
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'images' 'images'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-50 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'images'; selectedTab = 'images';
}} }}
@ -293,10 +293,10 @@
</button> </button>
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'pipelines' 'pipelines'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-50 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'pipelines'; selectedTab = 'pipelines';
}} }}
@ -323,10 +323,10 @@
</button> </button>
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'db' 'db'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-50 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'db'; selectedTab = 'db';
}} }}

54
src/lib/components/chat/SettingsModal.svelte
View File

@ -378,14 +378,14 @@
<div class="flex flex-col md:flex-row w-full px-4 pt-1 pb-4 md:space-x-4"> <div class="flex flex-col md:flex-row w-full px-4 pt-1 pb-4 md:space-x-4">
<div <div
id="settings-tabs-container" id="settings-tabs-container"
class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 dark:text-gray-200 text-xs text-left mb-1 md:mb-0 -translate-y-1" class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 dark:text-gray-200 text-sm font-medium text-left mb-1 md:mb-0 -translate-y-1"
> >
<div class="hidden md:flex w-full rounded-xl px-1 -py-0.5 gap-2" id="settings-search"> <div class="hidden md:flex w-full rounded-xl -my-0.5 gap-2" id="settings-search">
<div class="self-center rounded-l-xl bg-transparent"> <div class="self-center rounded-l-xl bg-transparent">
<Search className="size-3.5" /> <Search className="size-3.5" />
</div> </div>
<input <input
class="w-full py-1.5 text-xs bg-transparent dark:text-gray-300 outline-none" class="w-full py-1.5 text-sm bg-transparent dark:text-gray-300 outline-none"
bind:value={search} bind:value={search}
on:input={searchDebounceHandler} on:input={searchDebounceHandler}
placeholder={$i18n.t('Search')} placeholder={$i18n.t('Search')}
@ -396,10 +396,10 @@
{#each visibleTabs as tabId (tabId)} {#each visibleTabs as tabId (tabId)}
{#if tabId === 'general'} {#if tabId === 'general'}
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
'general' 'general'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-100 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'general'; selectedTab = 'general';
}} }}
@ -422,10 +422,10 @@
</button> </button>
{:else if tabId === 'interface'} {:else if tabId === 'interface'}
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
'interface' 'interface'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-100 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'interface'; selectedTab = 'interface';
}} }}
@ -448,10 +448,10 @@
</button> </button>
{:else if tabId === 'personalization'} {:else if tabId === 'personalization'}
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
'personalization' 'personalization'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-100 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'personalization'; selectedTab = 'personalization';
}} }}
@ -463,10 +463,10 @@
</button> </button>
{:else if tabId === 'audio'} {:else if tabId === 'audio'}
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
'audio' 'audio'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-100 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'audio'; selectedTab = 'audio';
}} }}
@ -490,10 +490,10 @@
</button> </button>
{:else if tabId === 'chats'} {:else if tabId === 'chats'}
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
'chats' 'chats'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-100 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'chats'; selectedTab = 'chats';
}} }}
@ -516,10 +516,10 @@
</button> </button>
{:else if tabId === 'account'} {:else if tabId === 'account'}
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
'account' 'account'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-100 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'account'; selectedTab = 'account';
}} }}
@ -542,10 +542,10 @@
</button> </button>
{:else if tabId === 'about'} {:else if tabId === 'about'}
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
'about' 'about'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-100 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={() => { on:click={() => {
selectedTab = 'about'; selectedTab = 'about';
}} }}
@ -569,10 +569,10 @@
{:else if tabId === 'admin'} {:else if tabId === 'admin'}
{#if $user.role === 'admin'} {#if $user.role === 'admin'}
<button <button
class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
'admin' 'admin'
? 'bg-gray-100 dark:bg-gray-800' ? ''
: ' hover:bg-gray-100 dark:hover:bg-gray-850'}" : ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={async () => { on:click={async () => {
await goto('/admin/settings'); await goto('/admin/settings');
show = false; show = false;