mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix] sidebar gui problem

Browse Source
This commit is contained in:
kwaroran
2023-05-24 10:00:36 +09:00
parent 9858b36cfd
commit 24d7353cbe
1 changed files with 172 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

342
src/lib/SideBars/Sidebar.svelte
View File

@@ -289,132 +289,87 @@
</script> </script>
<div <div
class="flex h-full w-20 min-w-20 flex-col items-center overflow-x-hidden overflow-y-scroll bg-bgcolor text-white shadow-lg" class="flex h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-white shadow-lg"
class:editMode class:editMode
> >
<button <button
class="absolute top-0 flex h-8 w-14 min-w-14 cursor-pointer items-center justify-center rounded-b-md bg-gray-500 transition-colors hover:bg-green-500" class="flex h-8 w-14 min-w-14 cursor-pointer items-center justify-center rounded-b-md bg-gray-500 transition-colors hover:bg-green-500"
on:click={() => { on:click={() => {
menuMode = 1 - menuMode; menuMode = 1 - menuMode;
}}><ListIcon /></button }}><ListIcon />
> </button>
<div class="h-8 min-h-8 w-14 min-w-14 bg-transparent" /> <div class="flex flex-grow w-full flex-col items-center overflow-x-hidden overflow-y-auto pr-0">
<div class="h-4 min-h-4 w-14" on:dragover={(e) => { <div class="h-4 min-h-4 w-14" on:dragover={(e) => {
e.preventDefault() e.preventDefault()
e.dataTransfer.dropEffect = 'move' e.dataTransfer.dropEffect = 'move'
e.currentTarget.classList.add('bg-green-500') e.currentTarget.classList.add('bg-green-500')
}} on:dragleave={(e) => { }} on:dragleave={(e) => {
e.currentTarget.classList.remove('bg-green-500') e.currentTarget.classList.remove('bg-green-500')
}} on:drop={(e) => { }} on:drop={(e) => {
e.preventDefault() e.preventDefault()
e.currentTarget.classList.remove('bg-green-500') e.currentTarget.classList.remove('bg-green-500')
const da = currentDrag const da = currentDrag
if(da){ if(da){
inserter(da,{index:0}) inserter(da,{index:0})
} }
}} on:dragenter={preventAll} /> }} on:dragenter={preventAll} />
{#if menuMode === 0} {#if menuMode === 0}
{#each charImages as char, ind} {#each charImages as char, ind}
<div class="group relative flex items-center px-2" <div class="group relative flex items-center px-2"
draggable="true" draggable="true"
on:dragstart={(e) => {avatarDragStart({index:ind}, e)}} on:dragstart={(e) => {avatarDragStart({index:ind}, e)}}
on:dragover={avatarDragOver} on:dragover={avatarDragOver}
on:drop={(e) => {avatarDrop({index:ind}, e)}} on:drop={(e) => {avatarDrop({index:ind}, e)}}
on:dragenter={preventAll} on:dragenter={preventAll}
on:contextmenu={preventAll} on:contextmenu={preventAll}
> >
<SidebarIndicator <SidebarIndicator
isActive={char.type === 'normal' && $selectedCharID === char.index && sideBarMode !== 1} isActive={char.type === 'normal' && $selectedCharID === char.index && sideBarMode !== 1}
/> />
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div <div
on:click={() => { on:click={() => {
if(char.type === "normal"){
changeChar(char.index);
}
}}
on:keydown={(e) => {
if (e.key === "Enter") {
if(char.type === "normal"){ if(char.type === "normal"){
changeChar(char.index); changeChar(char.index);
} }
} }}
}} on:keydown={(e) => {
tabindex="0" if (e.key === "Enter") {
> if(char.type === "normal"){
{#if char.type === 'normal'} changeChar(char.index);
<SidebarAvatar src={char.img ? getCharImage(char.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} /> }
{:else if char.type === "folder"} }
<SidebarAvatar src="slot" size="56" rounded={IconRounded} onClick={() => { }}
if(char.type !== 'folder'){ tabindex="0"
return
}
if(openFolders.includes(char.id)){
openFolders.splice(openFolders.indexOf(char.id), 1)
}
else{
openFolders.push(char.id)
}
openFolders = openFolders
}}>
{#if openFolders.includes(char.id)}
<FolderOpenIcon />
{:else}
<FolderIcon />
{/if}
</SidebarAvatar>
{/if}
</div>
</div>
{#if char.type === 'folder' && openFolders.includes(char.id)}
<div class="w-full flex flex-col items-center py-1 mt-1 rounded-lg relative">
<div class="absolute top-0 left-1 bg-darkbg w-full h-full rounded-lg z-0"></div>
<div class="h-4 min-h-4 w-14 relative z-10" on:dragover={(e) => {
e.preventDefault()
e.dataTransfer.dropEffect = 'move'
e.currentTarget.classList.add('bg-green-500')
}} on:dragleave={(e) => {
e.currentTarget.classList.remove('bg-green-500')
}} on:drop={(e) => {
e.preventDefault()
e.currentTarget.classList.remove('bg-green-500')
const da = currentDrag
if(da && char.type === 'folder'){
inserter(da,{index:0,folder:char.id})
}
}} on:dragenter={preventAll}/>
{#each char.folder as char2, ind}
<div class="group relative flex items-center px-2 z-10"
draggable="true"
on:dragstart={(e) => {if(char.type === 'folder'){avatarDragStart({index: ind, folder:char.id}, e)}}}
on:dragover={avatarDragOver}
on:drop={(e) => {if(char.type === 'folder'){avatarDrop({index: ind, folder:char.id}, e)}}}
on:dragenter={preventAll}
on:contextmenu={preventAll}
> >
<SidebarIndicator {#if char.type === 'normal'}
isActive={$selectedCharID === char2.index && sideBarMode !== 1} <SidebarAvatar src={char.img ? getCharImage(char.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} />
/> {:else if char.type === "folder"}
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> <SidebarAvatar src="slot" size="56" rounded={IconRounded} onClick={() => {
<div if(char.type !== 'folder'){
on:click={() => { return
if(char2.type === "normal"){ }
changeChar(char2.index); if(openFolders.includes(char.id)){
} openFolders.splice(openFolders.indexOf(char.id), 1)
}} }
on:keydown={(e) => { else{
if (e.key === "Enter") { openFolders.push(char.id)
if(char2.type === "normal"){ }
changeChar(char2.index); openFolders = openFolders
} }}>
} {#if openFolders.includes(char.id)}
}} <FolderOpenIcon />
tabindex="0" {:else}
> <FolderIcon />
<SidebarAvatar src={char2.img ? getCharImage(char2.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} /> {/if}
</div> </SidebarAvatar>
</div> {/if}
<div class="h-4 min-h-4 w-14 relative z-20" on:dragover={(e) => { </div>
</div>
{#if char.type === 'folder' && openFolders.includes(char.id)}
<div class="w-full flex flex-col items-center py-1 mt-1 rounded-lg relative">
<div class="absolute top-0 left-1 bg-darkbg w-full h-full rounded-lg z-0"></div>
<div class="h-4 min-h-4 w-14 relative z-10" on:dragover={(e) => {
e.preventDefault() e.preventDefault()
e.dataTransfer.dropEffect = 'move' e.dataTransfer.dropEffect = 'move'
e.currentTarget.classList.add('bg-green-500') e.currentTarget.classList.add('bg-green-500')
@@ -425,68 +380,115 @@
e.currentTarget.classList.remove('bg-green-500') e.currentTarget.classList.remove('bg-green-500')
const da = currentDrag const da = currentDrag
if(da && char.type === 'folder'){ if(da && char.type === 'folder'){
inserter(da,{index:ind+1,folder:char.id}) inserter(da,{index:0,folder:char.id})
} }
}} on:dragenter={preventAll}/> }} on:dragenter={preventAll}/>
{/each} {#each char.folder as char2, ind}
</div> <div class="group relative flex items-center px-2 z-10"
{/if} draggable="true"
<div class="h-4 min-h-4 w-14" on:dragover|preventDefault={(e) => { on:dragstart={(e) => {if(char.type === 'folder'){avatarDragStart({index: ind, folder:char.id}, e)}}}
e.dataTransfer.dropEffect = 'move' on:dragover={avatarDragOver}
e.currentTarget.classList.add('bg-green-500') on:drop={(e) => {if(char.type === 'folder'){avatarDrop({index: ind, folder:char.id}, e)}}}
}} on:dragleave={(e) => { on:dragenter={preventAll}
e.currentTarget.classList.remove('bg-green-500') on:contextmenu={preventAll}
}} on:drop={(e) => { >
e.preventDefault() <SidebarIndicator
e.currentTarget.classList.remove('bg-green-500') isActive={$selectedCharID === char2.index && sideBarMode !== 1}
const da = currentDrag />
if(da){ <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
inserter(da,{index:ind+1}) <div
} on:click={() => {
}} on:dragenter={preventAll} /> if(char2.type === "normal"){
{/each} changeChar(char2.index);
<div class="flex flex-col items-center space-y-2 px-2"> }
<BaseRoundedButton }}
on:keydown={(e) => {
if (e.key === "Enter") {
if(char2.type === "normal"){
changeChar(char2.index);
}
}
}}
tabindex="0"
>
<SidebarAvatar src={char2.img ? getCharImage(char2.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} />
</div>
</div>
<div class="h-4 min-h-4 w-14 relative z-20" on:dragover={(e) => {
e.preventDefault()
e.dataTransfer.dropEffect = 'move'
e.currentTarget.classList.add('bg-green-500')
}} on:dragleave={(e) => {
e.currentTarget.classList.remove('bg-green-500')
}} on:drop={(e) => {
e.preventDefault()
e.currentTarget.classList.remove('bg-green-500')
const da = currentDrag
if(da && char.type === 'folder'){
inserter(da,{index:ind+1,folder:char.id})
}
}} on:dragenter={preventAll}/>
{/each}
</div>
{/if}
<div class="h-4 min-h-4 w-14" on:dragover|preventDefault={(e) => {
e.dataTransfer.dropEffect = 'move'
e.currentTarget.classList.add('bg-green-500')
}} on:dragleave={(e) => {
e.currentTarget.classList.remove('bg-green-500')
}} on:drop={(e) => {
e.preventDefault()
e.currentTarget.classList.remove('bg-green-500')
const da = currentDrag
if(da){
inserter(da,{index:ind+1})
}
}} on:dragenter={preventAll} />
{/each}
<div class="flex flex-col items-center space-y-2 px-2">
<BaseRoundedButton
onClick={() => {
if (sideBarMode === 1) {
reseter();
sideBarMode = 0;
} else {
reseter();
sideBarMode = 1;
}
}}
><svg viewBox="0 0 24 24" width="1.2em" height="1.2em"
><path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg
></BaseRoundedButton
>
</div>
{:else}
<BarIcon
onClick={() => { onClick={() => {
if (sideBarMode === 1) { if ($settingsOpen) {
reseter(); reseter();
sideBarMode = 0; settingsOpen.set(false);
} else { } else {
reseter(); reseter();
sideBarMode = 1; settingsOpen.set(true);
} }
}} }}><Settings /></BarIcon
><svg viewBox="0 0 24 24" width="1.2em" height="1.2em"
><path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg
></BaseRoundedButton
> >
</div> <div class="mt-2"></div>
{:else} <BarIcon
<BarIcon onClick={() => {
onClick={() => {
if ($settingsOpen) {
reseter(); reseter();
settingsOpen.set(false); openGrid();
} else { }}><LayoutGridIcon /></BarIcon
reseter(); >
settingsOpen.set(true); {/if}
} </div>
}}><Settings /></BarIcon
>
<BarIcon
onClick={() => {
reseter();
openGrid();
}}><LayoutGridIcon /></BarIcon
>
{/if}
</div> </div>
<div <div
class="setting-area flex w-96 flex-col overflow-y-auto overflow-x-hidden bg-darkbg p-6 text-gray-200" class="setting-area flex w-96 flex-col overflow-y-auto overflow-x-hidden bg-darkbg p-6 text-gray-200"