mirror of
https://github.com/open-webui/open-webui
synced 2025-01-18 08:40:58 +00:00
refac: styling
This commit is contained in:
parent
90ef9f751a
commit
75fae69def
@ -144,6 +144,7 @@
|
||||
files = files.filter((item) => item.status !== null);
|
||||
}
|
||||
};
|
||||
|
||||
const inputFilesHandler = async (inputFiles) => {
|
||||
inputFiles.forEach((file) => {
|
||||
console.log(file, file.name.split('.').at(-1));
|
||||
|
@ -48,7 +48,7 @@
|
||||
dispatch('click');
|
||||
}}
|
||||
>
|
||||
<div class="p-3 bg-white/10 text-white rounded-xl">
|
||||
<div class="p-3 bg-black/20 dark:bg-white/10 text-white rounded-xl">
|
||||
{#if status === 'processed'}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -105,7 +105,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center -space-y-0.5 px-2.5 w-full">
|
||||
<div class="flex flex-col justify-center -space-y-0.5 ml-1 px-2.5 w-full">
|
||||
<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1 mb-1">
|
||||
{name}
|
||||
</div>
|
||||
|
20
src/lib/components/icons/FloppyDisk.svelte
Normal file
20
src/lib/components/icons/FloppyDisk.svelte
Normal file
@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-width={strokeWidth}
|
||||
d="M11 16h2m6.707-9.293-2.414-2.414A1 1 0 0 0 16.586 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7.414a1 1 0 0 0-.293-.707ZM16 20v-6a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v6h8ZM9 4h6v3a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Z"
|
||||
/>
|
||||
</svg>
|
@ -27,6 +27,8 @@
|
||||
import { processFile } from '$lib/apis/retrieval';
|
||||
import AddContentMenu from './Collection/AddContentMenu.svelte';
|
||||
import AddTextContentModal from './Collection/AddTextContentModal.svelte';
|
||||
import Check from '$lib/components/icons/Check.svelte';
|
||||
import FloppyDisk from '$lib/components/icons/FloppyDisk.svelte';
|
||||
|
||||
let largeScreen = true;
|
||||
|
||||
@ -410,10 +412,20 @@
|
||||
<div class="flex-1 flex justify-start max-h-full overflow-hidden pl-3">
|
||||
{#if selectedFile}
|
||||
<div class=" flex flex-col w-full h-full">
|
||||
<div class=" flex-shrink-0 mb-2">
|
||||
<div class=" text-xl line-clamp-1">
|
||||
<div class=" flex-shrink-0 mb-2 flex items-center">
|
||||
<div class=" flex-1 text-xl line-clamp-1">
|
||||
{selectedFile?.meta?.name}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Tooltip content="Save">
|
||||
<button
|
||||
class="self-center w-fit text-sm py-1 px-2.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-lg"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" flex-grow">
|
||||
|
@ -35,7 +35,7 @@
|
||||
>
|
||||
<Tooltip content={$i18n.t('Add Content')}>
|
||||
<button
|
||||
class=" px-2 py-2 rounded-xl border border-gray-100 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
|
||||
class=" px-2 py-2 rounded-xl border border-gray-50 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
|
||||
on:click={(e) => {
|
||||
e.stopPropagation();
|
||||
show = true;
|
||||
|
@ -14,7 +14,7 @@
|
||||
<FileItem
|
||||
className="w-full"
|
||||
colorClassName="{selectedFileId === file.id
|
||||
? 'bg-gray-850'
|
||||
? ' bg-gray-50 dark:bg-gray-850'
|
||||
: 'bg-transparent'} hover:bg-gray-50 dark:hover:bg-gray-850 transition"
|
||||
{file}
|
||||
name={file.meta.name}
|
||||
|
Loading…
Reference in New Issue
Block a user