[feat] add import on sidebar

This commit is contained in:
kwaroran
2023-08-21 19:17:44 +09:00
parent 3d2d07fece
commit 6c2b6a3293
3 changed files with 33 additions and 52 deletions

View File

@@ -2,45 +2,22 @@
import { language } from "src/lang";
interface SupporterImaged{
name: string,
image: string,
}
interface supporters{
I: string[],
II: string[],
III: string[],
IV: SupporterImaged[],
V: SupporterImaged[],
IV: string[],
V: string[],
}
async function loadSupporters() {
const dummy:supporters = {
//random names
I: ["John", "Doe"],
II: ["Lorem", "Ipsum"],
III: ["Dolor", "Sit"],
IV: [
{
name: "John",
image: "https://placehold.co/600x400",
},
{
name: "Doe",
image: "https://placehold.co/600x400",
},
],
V: [
{
name: "John",
image: "https://placehold.co/600x400",
},
{
name: "Doe",
image: "https://placehold.co/600x400",
},
],
I: ["Preview", "Preview"],
II: ["Preview", "Preview"],
III: ["Preview", "Preview"],
IV: ["Preview"],
V: ["Preview"],
}
return dummy
}
@@ -52,12 +29,9 @@
<h3 class="text-xl font-bold mt-4">Supporter V</h3>
<div class="flex w-full flex-wrap gap-2">
{#each supporter.V as support}
<!-- make a card -->
<div class="flex flex-col items-center justify-center p-4 border-selected border rounded">
<img class="w-44 h-44 rounded-t" src={support.image} alt={support.name} />
<!-- prietty nameplate diamond style -->
<div class="w-44 bg-selected rounded-b-lg flex justify-center items-center p-2">
<span class="font-black prism-font prism-font-gold text-xl">{support.name}</span>
<div class="flex flex-col items-center justify-center border-selected border rounded">
<div class="flex justify-center items-center py-4 px-8">
<span class="font-black prism-font prism-font-gold text-3xl">{support}</span>
</div>
</div>
{/each}
@@ -65,12 +39,9 @@
<h3 class="text-xl font-bold mt-4">Supporter IV</h3>
<div class="flex w-full flex-wrap gap-2">
{#each supporter.IV as support}
<!-- make a card -->
<div class="flex flex-col items-center justify-center p-4 border-selected border rounded">
<img class="w-32 h-32 rounded-t" src={support.image} alt={support.name} />
<!-- prietty nameplate diamond style -->
<div class="w-32 bg-selected rounded-b-lg flex justify-center items-center p-1">
<span class="font-black prism-font prism-font-silver text-lg">{support.name}</span>
<div class="flex flex-col items-center justify-center border-selected border rounded">
<div class="flex justify-center items-center py-4 px-8">
<span class="font-black prism-font prism-font-silver text-2xl">{support}</span>
</div>
</div>
{/each}
@@ -80,8 +51,8 @@
{#each supporter.III as support}
<!-- make a card -->
<div class="flex flex-col items-center justify-center border-selected border rounded">
<div class="w-32 flex justify-center items-center p-1">
<span class="font-black prism-font prism-font-silver text-lg">{support}</span>
<div class="w-32 flex justify-center items-center py-3 px-6">
<span class="font-black prism-font prism-font-silver text-xl">{support}</span>
</div>
</div>
{/each}
@@ -119,9 +90,6 @@
.prism-font-gold{
background: linear-gradient(to right, #D4AF32, #fff ,#D4AF32, #fff, #D4AF32);
}
.prism-font-ruby{
background: linear-gradient(to right, #E0115F, #fff ,#E0115F, #fff, #E0115F);
}
.prism-font-copper{
background: linear-gradient(to right, #B87333, #fff ,#B87333, #fff, #B87333);
}
@@ -129,7 +97,7 @@
.prism-font{
text-align: center;
color: transparent;
background-size: 125px 100%;
background-size: 150px 100%;
background-clip: text;
animation-name: shimmer;
animation-duration: 2s;

View File

@@ -134,8 +134,8 @@
<span>{language.advancedSettings}</span>
</button>
<button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 7}
class:text-textcolor2={selected !== 7}
class:text-textcolor={selected === 77}
class:text-textcolor2={selected !== 77}
on:click={() => {
selected = 77
}}>

View File

@@ -2,8 +2,8 @@
import type { character, groupChat } from "src/ts/storage/database";
import { DataBase } from "src/ts/storage/database";
import TextInput from "../UI/GUI/TextInput.svelte";
import { DownloadIcon, EditIcon, TrashIcon } from "lucide-svelte";
import { exportChat } from "src/ts/characters";
import { DownloadIcon, EditIcon, FolderUpIcon, TrashIcon } from "lucide-svelte";
import { exportChat, importChat } from "src/ts/characters";
import { alertConfirm, alertError } from "src/ts/alert";
import { language } from "src/lang";
import Button from "../UI/GUI/Button.svelte";
@@ -78,7 +78,20 @@
</button>
{/each}
</div>
<div class="border-t border-selected mt-2">
<div class="flex mt-2 ml-2 items-center">
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
importChat()
}}>
<FolderUpIcon size={18}/>
</button>
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={() => {
editMode = !editMode
}}>
<EditIcon size={18}/>
</button>
</div>
<div class="flex mt-2 items-center">
<CheckInput bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
</div>