UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-01-19 09:16:44 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-01-13 19:18:32 -08:00
parent 147eb0d2d1
commit f299e19002
10 changed files with 113 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/lib/components/app/AppControls.svelte Normal file
View File

@ -0,0 +1,61 @@
<script lang="ts">
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Plus from '$lib/components/icons/Plus.svelte';
let selected = 'home';
</script>
<div class="min-w-[4.5rem] bg-black flex gap-2.5 flex-col pt-10">
<div class="flex justify-center relative">
{#if selected === 'home'}
<div class="absolute top-0 left-0 flex h-full">
<div class="my-auto rounded-r-lg w-1 h-8 bg-white"></div>
</div>
{/if}
<Tooltip content="Home" placement="right">
<button
class=" cursor-pointer bg-gray-850 {selected === 'home' ? 'rounded-2xl' : 'rounded-full'}"
on:click={() => {
selected = 'home';
}}
>
<img
src="/static/splash.png"
class="size-11 dark:invert p-1"
alt="logo"
draggable="false"
/>
</button>
</Tooltip>
</div>
<div class="border-t border-gray-900 mx-3"></div>
<div class="flex justify-center relative group">
{#if selected === ''}
<div class="absolute top-0 left-0 flex h-full">
<div class="my-auto rounded-r-lg w-1 h-8 bg-white"></div>
</div>
{/if}
<button
class=" cursor-pointer bg-transparent"
onclick={() => {
selected = '';
}}
>
<img
src="/assets/images/adam.jpg"
class="size-11 {selected === '' ? 'rounded-2xl' : 'rounded-full'}"
alt="logo"
draggable="false"
/>
</button>
</div>
<div class="flex justify-center relative group text-gray-400">
<button class=" cursor-pointer p-2" onclick={() => {}}>
<Plus className="size-5" strokeWidth="2" />
</button>
</div>
</div>

2
src/lib/components/channel/Channel.svelte
View File

@ -199,7 +199,7 @@
</svelte:head>
<div
class="h-screen max-h-[100dvh] {$showSidebar
class="h-screen max-h-[100dvh] transition-width duration-300 ease-in-out {$showSidebar
? 'md:max-w-[calc(100%-260px)]'
: ''} w-full max-w-full flex flex-col"
id="channel-container"

6
src/lib/components/chat/Chat.svelte
View File

@ -1831,9 +1831,9 @@
{#if !chatIdProp || (loaded && chatIdProp)}
<div
class="h-screen max-h-[100dvh] {$showSidebar
? 'md:max-w-[calc(100%-260px)]'
: ''} w-full max-w-full flex flex-col"
class="h-screen max-h-[100dvh] transition-width duration-300 ease-in-out {$showSidebar
? ' md:max-w-[calc(100%-260px)]'
: ' '} w-full max-w-full flex flex-col"
id="chat-container"
>
{#if $settings?.backgroundImageUrl ?? null}

11
src/lib/components/layout/Sidebar.svelte
View File

@ -19,7 +19,8 @@
temporaryChatEnabled,
channels,
socket,
config
config,
isApp
} from '$lib/stores';
import { onMount, getContext, tick, onDestroy } from 'svelte';
@ -426,7 +427,9 @@
{#if $showSidebar}
<div
class=" fixed md:hidden z-40 top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center overflow-hidden overscroll-contain"
class=" {$isApp
? ' ml-[4.5rem] md:ml-0'
: ''} fixed md:hidden z-40 top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center overflow-hidden overscroll-contain"
on:mousedown={() => {
showSidebar.set(!$showSidebar);
}}
@ -438,7 +441,9 @@
id="sidebar"
class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
? 'md:relative w-[260px] max-w-[260px]'
: '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0 overflow-x-hidden
: '-translate-x-[260px] w-[0px]'} {$isApp
? ' ml-[4.5rem] md:ml-0'
: 'transition-width duration-300 ease-in-out flex-shrink-0'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm fixed z-50 top-0 left-0 overflow-x-hidden
"
data-state={$showSidebar}
>

4
src/lib/stores/index.ts
View File

@ -11,6 +11,10 @@ export const WEBUI_NAME = writable(APP_NAME);
export const config: Writable<Config | undefined> = writable(undefined);
export const user: Writable<SessionUser | undefined> = writable(undefined);
// Electron App
export const isApp = writable(false);
export const appVersion = writable(null);
// Frontend
export const MODEL_DOWNLOAD_POOL = writable({});

2
src/routes/(app)/+layout.svelte
View File

@ -233,7 +233,7 @@
<div class="app relative">
<div
class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 h-screen max-h-[100dvh] overflow-auto flex flex-row"
class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 h-screen max-h-[100dvh] overflow-auto flex flex-row justify-end"
>
{#if loaded}
{#if !['user', 'admin'].includes($user.role)}

6
src/routes/(app)/admin/+layout.svelte
View File

@ -26,13 +26,13 @@
{#if loaded}
<div
class=" flex flex-col w-full min-h-screen max-h-screen {$showSidebar
class=" flex flex-col w-full min-h-screen max-h-screen transition-width duration-300 ease-in-out {$showSidebar
? 'md:max-w-[calc(100%-260px)]'
: ''}"
: ''} max-w-full"
>
<nav class=" px-2.5 pt-1 backdrop-blur-xl drag-region">
<div class=" flex items-center gap-1">
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">
<button
id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"

6
src/routes/(app)/playground/+layout.svelte
View File

@ -16,13 +16,13 @@
</svelte:head>
<div
class=" flex flex-col w-full h-screen max-h-[100dvh] {$showSidebar
class=" flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-300 ease-in-out {$showSidebar
? 'md:max-w-[calc(100%-260px)]'
: ''}"
: ''} max-w-full"
>
<nav class=" px-2.5 pt-1 backdrop-blur-xl w-full drag-region">
<div class=" flex items-center">
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">
<button
id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"

6
src/routes/(app)/workspace/+layout.svelte
View File

@ -51,13 +51,13 @@
{#if loaded}
<div
class=" relative flex flex-col w-full h-screen max-h-[100dvh] {$showSidebar
class=" relative flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-300 ease-in-out {$showSidebar
? 'md:max-w-[calc(100%-260px)]'
: ''}"
: ''} max-w-full"
>
<nav class=" px-2.5 pt-1 backdrop-blur-xl drag-region">
<div class=" flex items-center gap-1">
<div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
<div class="{$showSidebar ? 'md:hidden' : ''} self-end flex flex-none items-center">
<button
id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"

28
src/routes/+layout.svelte
View File

@ -22,7 +22,9 @@
currentChatPage,
tags,
temporaryChatEnabled,
isLastActiveTab
isLastActiveTab,
isApp,
appVersion
} from '$lib/stores';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
@ -41,6 +43,7 @@
import { bestMatchingLanguage } from '$lib/utils';
import { getAllTags, getChatList } from '$lib/apis/chats';
import NotificationToast from '$lib/components/NotificationToast.svelte';
import AppControls from '$lib/components/app/AppControls.svelte';
setContext('i18n', i18n);
@ -177,6 +180,17 @@
};
onMount(async () => {
if (window?.electronAPI) {
const res = await window.electronAPI.send({
type: 'version'
});
if (res) {
isApp.set(true);
appVersion.set(res.version);
}
}
// Listen for messages on the BroadcastChannel
bc.onmessage = (event) => {
if (event.data === 'active') {
@ -324,7 +338,17 @@
</svelte:head>
{#if loaded}
<slot />
{#if $isApp}
<div class="flex flex-row h-screen">
<AppControls />
<div class="w-full flex-1">
<slot />
</div>
</div>
{:else}
<slot />
{/if}
{/if}
<Toaster