mirror of
https://github.com/open-webui/open-webui.git
synced 2026-10-18 04:43:55 +00:00
refac
This commit is contained in:
Timothy Jaeryang Baek
parent
d0750f6617
commit
613eac51c5
3 changed files with 33 additions and 29 deletions
|
|
@ -13,6 +13,8 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import Plus from '$lib/components/icons/Plus.svelte';
|
||||
import Folder from '$lib/components/icons/Folder.svelte';
|
||||
import { getContext, onMount, onDestroy, tick } from 'svelte';
|
||||
import type { Readable } from 'svelte/store';
|
||||
import type { i18n as I18n } from 'i18next';
|
||||
|
|
@ -2126,13 +2128,14 @@
|
|||
|
||||
{#if !isSearching && !loading && !error && !uploading && !($selectedTerminalId && $terminalServers === null)}
|
||||
{#if creatingFolder}
|
||||
<div class="flex h-7 items-center gap-2 px-2">
|
||||
<div class="flex h-7 items-center gap-1.5 pl-[26px] pr-2">
|
||||
<FileTypeIcon name={newFolderName} type="directory" />
|
||||
<input
|
||||
bind:this={newFolderInput}
|
||||
bind:value={newFolderName}
|
||||
class="flex-1 text-xs bg-transparent border border-gray-100 dark:border-white/[0.06] rounded px-1.5 py-0.5 outline-none focus:border-blue-400 dark:focus:border-blue-500"
|
||||
class="min-w-0 flex-1 bg-transparent py-0.5 text-xs outline-hidden"
|
||||
placeholder={$i18n.t('Folder name')}
|
||||
aria-label={$i18n.t('Folder name')}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === 'Enter') submitNewFolder();
|
||||
if (e.key === 'Escape') {
|
||||
|
|
@ -2145,13 +2148,14 @@
|
|||
</div>
|
||||
{/if}
|
||||
{#if creatingFile}
|
||||
<div class="flex h-7 items-center gap-2 px-2">
|
||||
<div class="flex h-7 items-center gap-1.5 pl-[26px] pr-2">
|
||||
<FileTypeIcon name={newFileName} type="file" />
|
||||
<input
|
||||
bind:this={newFileInput}
|
||||
bind:value={newFileName}
|
||||
class="flex-1 text-xs bg-transparent border border-gray-100 dark:border-white/[0.06] rounded px-1.5 py-0.5 outline-none focus:border-blue-400 dark:focus:border-blue-500"
|
||||
class="min-w-0 flex-1 bg-transparent py-0.5 text-xs outline-hidden"
|
||||
placeholder={$i18n.t('File name')}
|
||||
aria-label={$i18n.t('File name')}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === 'Enter') submitNewFile();
|
||||
if (e.key === 'Escape') {
|
||||
|
|
@ -2289,26 +2293,26 @@
|
|||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
|
||||
class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-xs hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-40"
|
||||
disabled={!currentWritable}
|
||||
on:click={() => {
|
||||
closeDirectoryMenu();
|
||||
startNewFile();
|
||||
}}
|
||||
>
|
||||
<Icon name="empty-page" size={12} strokeWidth={1.4} />
|
||||
<Plus className="size-3.5" />
|
||||
<span>{$i18n.t('New File')}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
|
||||
class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-xs hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-40"
|
||||
disabled={!currentWritable}
|
||||
on:click={() => {
|
||||
closeDirectoryMenu();
|
||||
startNewFolder();
|
||||
}}
|
||||
>
|
||||
<Icon name="folder" size={12} strokeWidth={1.4} />
|
||||
<Folder className="size-3.5" />
|
||||
<span>{$i18n.t('New Folder')}</span>
|
||||
</button>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -225,20 +225,20 @@
|
|||
{:else if entry.type === 'directory'}
|
||||
<button
|
||||
type="button"
|
||||
class="mr-1.5 flex w-5 shrink-0 items-center self-stretch justify-center text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400"
|
||||
class="mr-1.5 flex w-3 shrink-0 items-center self-stretch justify-center text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400"
|
||||
style="margin-left: {rowIndent};"
|
||||
on:click|stopPropagation={() => onToggleExpand(directoryPath)}
|
||||
aria-label={expanded ? $i18n.t('Collapse') : $i18n.t('Expand')}
|
||||
>
|
||||
<Icon
|
||||
name={expanded ? 'chevron-down' : 'chevron-right'}
|
||||
size={9}
|
||||
size={12}
|
||||
strokeWidth={1.5}
|
||||
class={loadingChildren ? 'animate-pulse' : ''}
|
||||
/>
|
||||
</button>
|
||||
{:else}
|
||||
<span class="mr-1.5 w-5 shrink-0 self-stretch" style="margin-left: {rowIndent};"></span>
|
||||
<span class="mr-1.5 w-3 shrink-0 self-stretch" style="margin-left: {rowIndent};"></span>
|
||||
{/if}
|
||||
|
||||
{#if selectionMode || selected}
|
||||
|
|
@ -258,9 +258,7 @@
|
|||
|
||||
<button
|
||||
type="button"
|
||||
class="flex min-w-0 flex-1 items-center py-1.5 pr-2 text-left {variant === 'workspace'
|
||||
? 'gap-1.5'
|
||||
: 'gap-2'}"
|
||||
class="flex min-w-0 flex-1 items-center gap-1.5 py-1.5 pr-2 text-left"
|
||||
draggable={canMutate}
|
||||
on:dragstart={(e) => {
|
||||
if (!canMutate) {
|
||||
|
|
@ -314,7 +312,7 @@
|
|||
<Icon name={expanded ? 'chevron-down' : 'chevron-right'} size={12} strokeWidth={1.5} />
|
||||
{:else}<span class="w-3 shrink-0"></span>{/if}
|
||||
{/if}
|
||||
<FileTypeIcon name={entry.name} type={entry.type} size={variant === 'workspace' ? 14 : 12} />
|
||||
<FileTypeIcon name={entry.name} type={entry.type} size={14} />
|
||||
{#if renaming}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<input
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
import Dropdown from '$lib/components/common/Dropdown.svelte';
|
||||
import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
|
||||
import Icon from './Icon.svelte';
|
||||
import Plus from '$lib/components/icons/Plus.svelte';
|
||||
import Folder from '$lib/components/icons/Folder.svelte';
|
||||
|
||||
export let dragType = 'application/x-terminal-file-move';
|
||||
const i18n: any = getContext('i18n');
|
||||
|
|
@ -245,28 +247,28 @@
|
|||
<DropdownMenu className="min-w-[9.375rem] z-[9999999]">
|
||||
<button
|
||||
type="button"
|
||||
class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
|
||||
on:click={() => {
|
||||
onNewFolder();
|
||||
actionsMenuOpen = false;
|
||||
}}
|
||||
disabled={!writable}
|
||||
>
|
||||
<Icon name="folder" size={12} strokeWidth={1.4} />
|
||||
<span>{$i18n.t('New Folder')}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
|
||||
class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-xs hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-40"
|
||||
on:click={() => {
|
||||
onNewFile();
|
||||
actionsMenuOpen = false;
|
||||
}}
|
||||
disabled={!writable}
|
||||
>
|
||||
<Icon name="empty-page" size={12} strokeWidth={1.4} />
|
||||
<Plus className="size-3.5" />
|
||||
<span>{$i18n.t('New File')}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-xs hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-40"
|
||||
on:click={() => {
|
||||
onNewFolder();
|
||||
actionsMenuOpen = false;
|
||||
}}
|
||||
disabled={!writable}
|
||||
>
|
||||
<Folder className="size-3.5" />
|
||||
<span>{$i18n.t('New Folder')}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="select-none flex h-7 w-full items-center gap-2 rounded-lg px-2 text-xs hover:bg-gray-50/40 dark:hover:bg-white/4 transition disabled:opacity-40 disabled:hover:bg-transparent"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue