From 7f4d6b15970cf2990b3a3b661cae19bb18d2acf1 Mon Sep 17 00:00:00 2001 From: kwaroran Date: Mon, 9 Sep 2024 21:25:38 +0900 Subject: [PATCH] Add mobile gui beta --- src/App.svelte | 13 +- src/lang/en.ts | 3 + src/lib/Mobile/MobileBody.svelte | 54 ++++++++ src/lib/Mobile/MobileCharacters.svelte | 29 +++++ src/lib/Mobile/MobileFooter.svelte | 31 +++++ src/lib/Mobile/MobileHeader.svelte | 44 +++++++ src/lib/Setting/Pages/DisplaySettings.svelte | 5 + src/lib/Setting/Settings.svelte | 30 ++--- src/lib/UI/GUI/SideBarArrow.svelte | 26 ++-- src/lib/UI/Realm/RealmMain.svelte | 125 ++++++++++++------- src/ts/storage/database.ts | 1 + src/ts/storage/globalApi.ts | 5 +- src/ts/stores.ts | 5 +- 13 files changed, 297 insertions(+), 74 deletions(-) create mode 100644 src/lib/Mobile/MobileBody.svelte create mode 100644 src/lib/Mobile/MobileCharacters.svelte create mode 100644 src/lib/Mobile/MobileFooter.svelte create mode 100644 src/lib/Mobile/MobileHeader.svelte diff --git a/src/App.svelte b/src/App.svelte index 3f718658..d0e641bf 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,6 +1,6 @@ + +{#if $MobileSideBar} +
+ + + +
+{/if} +
+ {#if $MobileSideBar} +
+ {#if sbt === 0} + + {:else if sbt === 1} + + {:else if sbt === 2} + + {/if} +
+ {:else if $selectedCharID !== -1} + + {:else if $MobileGUIStack === 0} + + {:else if $MobileGUIStack === 1} + + {:else if $MobileGUIStack === 3} + + {/if} +
\ No newline at end of file diff --git a/src/lib/Mobile/MobileCharacters.svelte b/src/lib/Mobile/MobileCharacters.svelte new file mode 100644 index 00000000..7b0c2234 --- /dev/null +++ b/src/lib/Mobile/MobileCharacters.svelte @@ -0,0 +1,29 @@ + +
+ {#each $DataBase.characters as char, i} + {#if char.name.toLocaleLowerCase().includes($MobileSearch.toLocaleLowerCase())} + + {/if} + {/each} +
\ No newline at end of file diff --git a/src/lib/Mobile/MobileFooter.svelte b/src/lib/Mobile/MobileFooter.svelte new file mode 100644 index 00000000..744af049 --- /dev/null +++ b/src/lib/Mobile/MobileFooter.svelte @@ -0,0 +1,31 @@ + +{#if $selectedCharID === -1} + +
+ + + +
+ +{/if} \ No newline at end of file diff --git a/src/lib/Mobile/MobileHeader.svelte b/src/lib/Mobile/MobileHeader.svelte new file mode 100644 index 00000000..7baedd96 --- /dev/null +++ b/src/lib/Mobile/MobileHeader.svelte @@ -0,0 +1,44 @@ + +
+ {#if $selectedCharID !== -1 && $MobileSideBar} + + {language.menu} + {:else if $selectedCharID !== -1} + + {$CurrentCharacter.name} +
+ +
+ {:else if $MobileGUIStack === 3 && $SettingsMenuIndex > -1} + + RisuAI + {:else if $MobileGUIStack === 1} +
+ +
+ {:else} + RisuAI + + {/if} +
\ No newline at end of file diff --git a/src/lib/Setting/Pages/DisplaySettings.svelte b/src/lib/Setting/Pages/DisplaySettings.svelte index a425b60e..c9d13ad3 100644 --- a/src/lib/Setting/Pages/DisplaySettings.svelte +++ b/src/lib/Setting/Pages/DisplaySettings.svelte @@ -319,6 +319,11 @@ +
+ + +
+ {#if $DataBase.useExperimental}
diff --git a/src/lib/Setting/Settings.svelte b/src/lib/Setting/Settings.svelte index a847a0cd..7090aea9 100644 --- a/src/lib/Setting/Settings.svelte +++ b/src/lib/Setting/Settings.svelte @@ -8,7 +8,7 @@ import PluginSettings from "./Pages/PluginSettings.svelte"; import FilesSettings from "./Pages/FilesSettings.svelte"; import AdvancedSettings from "./Pages/AdvancedSettings.svelte"; - import { SettingsMenuIndex, settingsOpen } from "src/ts/stores"; + import { MobileGUI, SettingsMenuIndex, settingsOpen } from "src/ts/stores"; import Botpreset from "./botpreset.svelte"; import Communities from "./Pages/Communities.svelte"; import GlobalLoreBookSettings from "./Pages/GlobalLoreBookSettings.svelte"; @@ -29,7 +29,7 @@
- {#if window.innerWidth >= 700 || $SettingsMenuIndex === -1} + {#if (window.innerWidth >= 700 && !$MobileGUI) || $SettingsMenuIndex === -1}
- {#if window.innerWidth < 700} + {#if window.innerWidth < 700 && !$MobileGUI} {/if}
{/if} - {#if window.innerWidth >= 700 || $SettingsMenuIndex !== -1} + {#if (window.innerWidth >= 700 && !$MobileGUI) || $SettingsMenuIndex !== -1} {#key $SettingsMenuIndex}
{#if $SettingsMenuIndex === 0} @@ -181,16 +181,18 @@ {/if}
{/key} - + {#if !$MobileGUI} + + {/if} {/if}
diff --git a/src/lib/UI/GUI/SideBarArrow.svelte b/src/lib/UI/GUI/SideBarArrow.svelte index ccf2d300..4320932c 100644 --- a/src/lib/UI/GUI/SideBarArrow.svelte +++ b/src/lib/UI/GUI/SideBarArrow.svelte @@ -1,18 +1,20 @@ -{#if $sideBarStore && !$DynamicGUI} - -{:else} - +{#if !MobileGUI} + {#if $sideBarStore && !$DynamicGUI} + + {:else} + + {/if} {/if} \ No newline at end of file diff --git a/src/lib/UI/Realm/RealmMain.svelte b/src/lib/UI/Realm/RealmMain.svelte index 2e8d0f30..53fa4d91 100644 --- a/src/lib/UI/Realm/RealmMain.svelte +++ b/src/lib/UI/Realm/RealmMain.svelte @@ -5,7 +5,7 @@ import { language } from "src/lang"; import RisuHubIcon from "./RealmHubIcon.svelte"; import TextInput from "../GUI/TextInput.svelte"; - import { SizeStore } from "src/ts/stores"; + import { MobileGUI, SizeStore } from "src/ts/stores"; import { Capacitor } from "@capacitor/core"; import RealmPopUp from "./RealmPopUp.svelte"; import { googleBuild } from "src/ts/storage/globalApi"; @@ -35,29 +35,66 @@ -
-
- {#if $SizeStore.w < 768} - - {:else} - - - {/if} - -
-
- {#if !googleBuild} +{#if $MobileGUI} +
+
+ +
+ +
+
+{:else} +
- {/if} - - - - -
+ + + + +
+{/if} {@html hubAdditionalHTML}
{#key charas} diff --git a/src/ts/storage/database.ts b/src/ts/storage/database.ts index 86963af3..846b79e1 100644 --- a/src/ts/storage/database.ts +++ b/src/ts/storage/database.ts @@ -728,6 +728,7 @@ export interface Database{ falLoraScale: number moduleIntergration: string customCSS: string + betaMobileGUI:boolean } export interface customscript{ diff --git a/src/ts/storage/globalApi.ts b/src/ts/storage/globalApi.ts index 3458ac37..8f335943 100644 --- a/src/ts/storage/globalApi.ts +++ b/src/ts/storage/globalApi.ts @@ -9,7 +9,7 @@ import {open} from '@tauri-apps/api/shell' import { DataBase, loadedStore, setDatabase, type Database, defaultSdDataFunc } from "./database"; import { appWindow } from "@tauri-apps/api/window"; import { checkRisuUpdate } from "../update"; -import { botMakerMode, selectedCharID } from "../stores"; +import { MobileGUI, botMakerMode, selectedCharID } from "../stores"; import { Body, ResponseType, fetch as TauriFetch } from "@tauri-apps/api/http"; import { loadPlugins } from "../plugins/plugins"; import { alertConfirm, alertError, alertNormal, alertNormalWait, alertSelect, alertTOS } from "../alert"; @@ -533,6 +533,9 @@ export async function loadData() { if(db.botSettingAtStart){ botMakerMode.set(true) } + if(db.betaMobileGUI && window.innerWidth <= 800){ + MobileGUI.set(true) + } loadedStore.set(true) selectedCharID.set(-1) startObserveDom() diff --git a/src/ts/stores.ts b/src/ts/stores.ts index 3fe6d4ca..2dcec66a 100644 --- a/src/ts/stores.ts +++ b/src/ts/stores.ts @@ -28,8 +28,10 @@ export const botMakerMode = writable(false) export const moduleBackgroundEmbedding = writable('') export const openPresetList = writable(false) export const openPersonaList = writable(false) +export const MobileGUI = writable(false) +export const MobileGUIStack = writable(0) +export const MobileSideBar = writable(false) //optimization - export const CurrentCharacter = writable(null) as Writable export const CurrentSimpleCharacter = writable(null) as Writable export const CurrentChat = writable(null) as Writable @@ -47,6 +49,7 @@ export const HideIconStore = writable(false) export const UserIconProtrait = writable(false) export const CustomCSSStore = writable('') export const SafeModeStore = writable(false) +export const MobileSearch = writable('') let lastGlobalEnabledModules: string[] = [] let lastChatEnabledModules: string[] = []