txtdot/vigi
2
0
Fork 0
mirror of https://github.com/TxtDot/vigi.git synced 2024-11-23 20:06:21 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: draggable block

Browse source
This commit is contained in:
Artemy Egorov 2024-07-28 18:46:01 +03:00
parent 7545a586b5
commit 42762f591c
4 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app.css
View file

@ -46,7 +46,7 @@ body {
} }
.block { .block {
@apply p-3 rounded-xl bg-block; @apply p-2 rounded-xl bg-block;
} }
.sidebar { .sidebar {

12
src/lib/components/Block.svelte
View file

@ -3,6 +3,12 @@
export let draggable = false; export let draggable = false;
</script> </script>
<div class="block{className ? ` ${className}` : ''}"> {#if draggable}
<slot /> <div class="block{className ? ` ${className}` : ''}" data-tauri-drag-region>
</div> <slot />
</div>
{:else}
<div class="block{className ? ` ${className}` : ''}">
<slot />
</div>
{/if}

5
src/lib/components/TopBar.svelte
View file

@ -4,6 +4,7 @@
import Reload from "$lib/icons/Reload.svelte"; import Reload from "$lib/icons/Reload.svelte";
import SidebarLeft from "$lib/icons/SidebarLeft.svelte"; import SidebarLeft from "$lib/icons/SidebarLeft.svelte";
import SidebarRight from "$lib/icons/SidebarRight.svelte"; import SidebarRight from "$lib/icons/SidebarRight.svelte";
import Block from "./Block.svelte";
import Button from "./Button.svelte"; import Button from "./Button.svelte";
export let onSidebarToggle = () => {}; export let onSidebarToggle = () => {};
@ -18,7 +19,7 @@
</script> </script>
<div class="top-bar"> <div class="top-bar">
<div class="flex bg-block p-2 rounded-xl"> <Block className="flex">
<Button onClick={onSidebarToggle}> <Button onClick={onSidebarToggle}>
{#if sidebarOpen} {#if sidebarOpen}
<SidebarLeft /> <SidebarLeft />
@ -29,7 +30,7 @@
<Button onClick={onBack}><ArrowLeft /></Button> <Button onClick={onBack}><ArrowLeft /></Button>
<Button onClick={onForward}><ArrowRight /></Button> <Button onClick={onForward}><ArrowRight /></Button>
<Button onClick={onInput}><Reload /></Button> <Button onClick={onInput}><Reload /></Button>
</div> </Block>
<input <input
type="text" type="text"

2
src/routes/+page.svelte
View file

@ -18,7 +18,7 @@
</script> </script>
<div class="common-window" data-tauri-drag-region> <div class="common-window" data-tauri-drag-region>
<Block className={`sidebar${sidebarOpen ? "" : " collapsed"}`}> <Block className={`sidebar${sidebarOpen ? "" : " collapsed"}`} draggable>
{#if sidebarOpen} {#if sidebarOpen}
<div transition:slide={{ axis: "x", duration: 100 }}> <div transition:slide={{ axis: "x", duration: 100 }}>
<WindowControls /> <WindowControls />