ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-04-23 14:07:14 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

resize on header dblclick and remove footer (#448)

Browse source
This commit is contained in:
ABevier 2023-04-12 19:42:27 -04:00 committed by GitHub
parent 3b380f17fd
commit 7fec624bf6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 80 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
modules/desktop/electron/libs/ipc.ts
View file

@ -1,4 +1,4 @@
import { ipcMain, app } from "electron";
import { ipcMain, app, BrowserWindow } from "electron";
import { createReadStream, statSync } from "fs";
import { getInstalledPackages } from "./tea-dir";
import { readSessionData, writeSessionData } from "./auth";
@ -8,7 +8,7 @@ import { post } from "./v1-client";
import { deepReadDir, deletePackageFolder } from "./tea-dir";
import path from "path";
import { installPackage, openTerminal, installTeaCli } from "./cli";
import { installPackage, openTerminal } from "./cli";
import initializeTeaCli from "./initialize";
@ -190,4 +190,11 @@ export default function initializeHandlers() {
return { version: "", message: error.message };
}
});
ipcMain.handle("topbar-double-click", async (event: Electron.IpcMainInvokeEvent) => {
const mainWindow = BrowserWindow.fromWebContents(event.sender);
if (mainWindow) {
mainWindow.isMaximized() ? mainWindow.unmaximize() : mainWindow.maximize();
}
});
}

24
modules/desktop/src/components/footer/footer.svelte
View file

@ -1,24 +0,0 @@
<script>
import * as pub from '$env/static/public';
</script>
<footer class="w-full border-gray flex items-center justify-between border pr-2 border-x-0 border-b-0 overflow-clip">
<figure class="text-center">
<i class="icon-tea-logo-iconasset-1 text-black"/>
</figure>
<div class="text-gray text-xs">v{ pub.PUBLIC_VERSION }</div>
</footer>
<style>
footer {
height: 27px;
background: rgba(26,26,26,0.9);
backdrop-filter: blur(2px);
box-sizing: border-box;
}
figure {
width: 60px;
height: 27px;
background-image: url('/images/gradient-bg.png');
background-size: cover;
padding-top: 4px;
}
</style>

47
modules/desktop/src/components/top-bar/top-bar.svelte
View file

@ -1,12 +1,13 @@
<script lang="ts">
import { page } from '$app/stores';
import { beforeUpdate } from 'svelte';
import { searchStore } from '$libs/stores';
import SearchInput from '@tea/ui/search-input/search-input.svelte';
import { navStore } from '$libs/stores';
import { t } from '$libs/translations';
import { page } from "$app/stores";
import { beforeUpdate } from "svelte";
import { searchStore } from "$libs/stores";
import SearchInput from "@tea/ui/search-input/search-input.svelte";
import { navStore } from "$libs/stores";
import { t } from "$libs/translations";
import ProfileNavButton from './profile-nav-button.svelte';
import ProfileNavButton from "./profile-nav-button.svelte";
import { topbarDoubleClick } from "$libs/native-electron";
let { nextPath, prevPath } = navStore;
@ -16,24 +17,36 @@
});
</script>
<header class="border-gray flex items-center justify-between border w-full h-12 pr-2 border-t-0 border-x-0" style="-webkit-app-region: drag">
<ul class="text-gray flex h-10 gap-2 align-middle leading-10 pl-20">
<header
class="border-gray flex h-12 w-full items-center justify-between border border-x-0 border-t-0 pr-2"
style="-webkit-app-region: drag"
on:dblclick={topbarDoubleClick}
>
<ul class="text-gray flex h-10 gap-2 pl-20 align-middle leading-10">
<a href="/?tab=all">
<div class="home-btn transition-all text-xl w-12 rounded-md text-center"><i class="icon-tea-logo-iconasset-1"/></div>
<div class="home-btn w-12 rounded-md text-center text-xl transition-all">
<i class="icon-tea-logo-iconasset-1" />
</div>
</a>
<button on:click={navStore.back} class:active={$prevPath} class="opacity-50 pt-1 text-xs"><i class="icon-arrow-left"/></button>
<button on:click={navStore.next} class:active={$nextPath} class="opacity-50 pt-1 text-xs"><i class="icon-arrow-right"/></button>
<button on:click={navStore.back} class:active={$prevPath} class="pt-1 text-xs opacity-50"
><i class="icon-arrow-left" /></button
>
<button on:click={navStore.next} class:active={$nextPath} class="pt-1 text-xs opacity-50"
><i class="icon-arrow-right" /></button
>
</ul>
<div class="px-2 w-1/3 relative">
<div class="relative w-1/3 px-2">
<SearchInput
class="w-full border border-gray rounded-sm h-9"
class="border-gray h-9 w-full rounded-sm border"
size="small"
placeholder="{$t("store-search-placeholder")}"
placeholder={$t("store-search-placeholder")}
onFocus={() => {
searchStore.searching.set(true);
}}
/>
<kbd class="absolute top-0 right-3 opacity-50 bg-gray text-white px-2 mt-1 rounded-sm flex items-center">
<kbd
class="bg-gray absolute top-0 right-3 mt-1 flex items-center rounded-sm px-2 text-white opacity-50"
>
<i class="text-lg">⌘</i>
<span class="text-xs">K</span>
</kbd>
@ -47,7 +60,7 @@
@tailwind utilities;
header {
background: rgba(26,26,26,0.9);
background: rgba(26, 26, 26, 0.9);
backdrop-filter: blur(2px);
box-sizing: border-box;
}

8
modules/desktop/src/libs/native-electron.ts
View file

@ -256,3 +256,11 @@ export const installTeaCli = async (): Promise<string> => {
const res = await ipcRenderer.invoke("install-tea-cli");
return res.version;
};
export const topbarDoubleClick = async () => {
try {
ipcRenderer.invoke("topbar-double-click");
} catch (error) {
log.error(error);
}
};

4
modules/desktop/src/libs/native-mock.ts
View file

@ -374,3 +374,7 @@ export const writePackageCache = async (pkgs: Packages) => {
export const installTeaCli = async (): Promise<{ version: string; message: string }> => {
return { version: "0.0.0", message: "" };
};
export const topbarDoubleClick = async () => {
console.log("topbar double click");
};

62
modules/desktop/src/routes/+layout.svelte
View file

@ -1,19 +1,18 @@
<script lang="ts">
import '$appcss';
import { goto } from '$app/navigation';
import { navigating } from '$app/stores';
import { afterNavigate } from '$app/navigation';
import TopBar from '$components/top-bar/top-bar.svelte';
import PopoutMenu from '$components/popout-menu/popout-menu.svelte';
import Footer from '$components/footer/footer.svelte';
import { navStore, packagesStore, searchStore } from '$libs/stores';
import "$appcss";
import { goto } from "$app/navigation";
import { navigating } from "$app/stores";
import { afterNavigate } from "$app/navigation";
import TopBar from "$components/top-bar/top-bar.svelte";
import PopoutMenu from "$components/popout-menu/popout-menu.svelte";
import { navStore, packagesStore, searchStore } from "$libs/stores";
import { listenToChannel } from "@native";
import Mousetrap from 'mousetrap';
import Mousetrap from "mousetrap";
import SearchPopupResults from '$components/search-popup-results/search-popup-results.svelte';
import { getProtocolPath } from '@native';
import SearchPopupResults from "$components/search-popup-results/search-popup-results.svelte";
import { getProtocolPath } from "@native";
import { onMount } from 'svelte';
import { onMount } from "svelte";
let view: HTMLElement;
@ -21,13 +20,12 @@
const { searching } = searchStore;
$: if ($navigating) view.scrollTop = 0;
afterNavigate(({ from, to }) => {
if (to && to?.route.id && from && from?.url) {
const nextPath = to.url.href.replace(to.url.origin, '');
const fromPath = from?.url.href.replace(from.url.origin, '');
setNewPath(nextPath, fromPath || '/');
const nextPath = to.url.href.replace(to.url.origin, "");
const fromPath = from?.url.href.replace(from.url.origin, "");
setNewPath(nextPath, fromPath || "/");
}
});
@ -35,43 +33,41 @@
// used by the tea:// protocol to suggest a path to open
const path = await getProtocolPath();
if (path) goto(path);
}
};
onMount(async () => {
// used by the tea:// protocol to suggest a path to open
syncPath();
listenToChannel("sync-path", syncPath);
Mousetrap.bind(['command+k', 'ctrl+k'], function() {
searchStore.searching.set(!$searching);
// return false to prevent default browser behavior
// and stop event from bubbling
return false;
});
Mousetrap.bind(['esc'], function() {
searchStore.searching.set(false);
return false;
});
Mousetrap.bind(["command+k", "ctrl+k"], function () {
searchStore.searching.set(!$searching);
// return false to prevent default browser behavior
// and stop event from bubbling
return false;
});
Mousetrap.bind(["esc"], function () {
searchStore.searching.set(false);
return false;
});
packagesStore.init();
});
</script>
<div id="main-layout" class="transition-all font-inter border border-gray rounded-xl">
<div id="main-layout" class="font-inter border-gray rounded-xl border transition-all">
<TopBar />
<section class="relative" bind:this={view}>
<div class="content">
<slot/>
<slot />
</div>
<SearchPopupResults />
</section>
<Footer/>
</div>
{#if $sideNavOpen}
<aside class="fixed z-50 border border-gray rounded-md bg-black transition-all">
<PopoutMenu/>
<aside class="border-gray fixed z-50 rounded-md border bg-black transition-all">
<PopoutMenu />
</aside>
{/if}
<style>
#main-layout {
height: 100vh;