feat: top bar, hide sidebar (with animation)

This commit is contained in:
Artemy Egorov 2024-07-28 18:27:59 +03:00
parent eb2c014016
commit 7545a586b5
11 changed files with 208 additions and 11 deletions

View file

@ -42,7 +42,7 @@
"bundle": {
"active": true,
"targets": "all",
"identifier": "com.tauri.dev",
"identifier": "org.txtdot.vigi",
"icon": [
"icons/32x32.png",
"icons/128x128.png",

View file

@ -8,23 +8,27 @@
--c2: #73bf67;
--c3: #193815;
--c4: #56aa49;
--c5: #96e28a;
}
body {
@apply bg-main text-main;
user-select: none;
}
.common-window {
@apply p-3 gap-3 w-screen h-screen;
@apply grid grid-cols-8;
@apply flex;
}
.main-window {
@apply col-span-6 flex flex-col gap-3;
@apply grow flex flex-col gap-3;
}
.browser-window {
@apply grow shadow-inner;
user-select: text;
}
.window-controls {
@ -46,5 +50,35 @@ body {
}
.sidebar {
@apply col-span-2;
@apply basis-1/5;
@apply ease-out duration-100;
}
.sidebar.collapsed {
@apply basis-0;
@apply p-0 m-0;
}
.top-bar {
@apply flex;
}
.search-input {
@apply ms-2 px-2 py-1 rounded-lg grow;
}
input {
@apply bg-block outline-none;
@apply focus:bg-blockLight focus:text-light;
@apply ease-out duration-100;
}
input::placeholder {
@apply text-main focus:text-light;
}
::selection {
@apply bg-block;
}

View file

@ -1,5 +1,6 @@
<script lang="ts">
export let className = "";
export let draggable = false;
</script>
<div class="block{className ? ` ${className}` : ''}">

View file

@ -0,0 +1,43 @@
<script lang="ts">
import ArrowLeft from "$lib/icons/ArrowLeft.svelte";
import ArrowRight from "$lib/icons/ArrowRight.svelte";
import Reload from "$lib/icons/Reload.svelte";
import SidebarLeft from "$lib/icons/SidebarLeft.svelte";
import SidebarRight from "$lib/icons/SidebarRight.svelte";
import Button from "./Button.svelte";
export let onSidebarToggle = () => {};
export let onBack = () => {};
export let onForward = () => {};
export let onInput = () => {};
export let sidebarOpen = true;
export let inputValue = "";
let input: HTMLInputElement;
</script>
<div class="top-bar">
<div class="flex bg-block p-2 rounded-xl">
<Button onClick={onSidebarToggle}>
{#if sidebarOpen}
<SidebarLeft />
{:else}
<SidebarRight />
{/if}
</Button>
<Button onClick={onBack}><ArrowLeft /></Button>
<Button onClick={onForward}><ArrowRight /></Button>
<Button onClick={onInput}><Reload /></Button>
</div>
<input
type="text"
placeholder="Search or enter URL"
class="search-input"
bind:value={inputValue}
bind:this={input}
on:keypress={(e) => e.key === "Enter" && onInput()}
on:focus={() => setTimeout(() => input.select(), 1)}
/>
</div>

View file

@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
{...$$props}
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M4 12h16M9 17s-5-3.682-5-5s5-5 5-5"
color="currentColor"
/>
</svg>

After

Width:  |  Height:  |  Size: 318 B

View file

@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
{...$$props}
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M20 12H4m11 5s5-3.682 5-5s-5-5-5-5"
color="currentColor"
/>
</svg>

After

Width:  |  Height:  |  Size: 318 B

View file

@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
{...$$props}
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="m15.167 1l.598 1.118c.404.755.606 1.133.472 1.295c-.133.162-.573.031-1.454-.23A9.8 9.8 0 0 0 12 2.78c-5.247 0-9.5 4.128-9.5 9.22a8.97 8.97 0 0 0 1.27 4.61M8.834 23l-.598-1.118c-.404-.756-.606-1.134-.472-1.295c.133-.162.573-.032 1.454.23c.88.261 1.815.402 2.783.402c5.247 0 9.5-4.128 9.5-9.22a8.97 8.97 0 0 0-1.27-4.609"
color="currentColor"
/>
</svg>

After

Width:  |  Height:  |  Size: 602 B

View file

@ -0,0 +1,23 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
{...$$props}
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
color="currentColor"
>
<path
d="M2 12c0-3.75 0-5.625.955-6.939A5 5 0 0 1 4.06 3.955C5.375 3 7.251 3 11 3h2c3.75 0 5.625 0 6.939.955a5 5 0 0 1 1.106 1.106C22 6.375 22 8.251 22 12s0 5.625-.955 6.939a5 5 0 0 1-1.106 1.106C18.625 21 16.749 21 13 21h-2c-3.75 0-5.625 0-6.939-.955a5 5 0 0 1-1.106-1.106C2 17.625 2 15.749 2 12m7.5-8.5v17M5 7h1.5M5 11h1.5"
/>
<path
d="m17 10l-1.226 1.057c-.516.445-.774.667-.774.943s.258.498.774.943L17 14"
/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 719 B

View file

@ -0,0 +1,23 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
{...$$props}
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
color="currentColor"
>
<path
d="M22 12c0-3.75 0-5.625-.955-6.939a5 5 0 0 0-1.106-1.106C18.625 3 16.749 3 13 3h-2c-3.75 0-5.625 0-6.939.955A5 5 0 0 0 2.955 5.06C2 6.375 2 8.251 2 12s0 5.625.955 6.939a5 5 0 0 0 1.106 1.106C5.375 21 7.251 21 11 21h2c3.75 0 5.625 0 6.939-.955a5 5 0 0 0 1.106-1.106C22 17.625 22 15.749 22 12m-7.5-8.5v17M19 7h-1.5m1.5 4h-1.5"
/>
<path
d="m8 10l1.227 1.057c.515.445.773.667.773.943s-.258.498-.773.943L8 14"
/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 721 B

View file

@ -1,16 +1,36 @@
<script>
import Block from "$lib/components/Block.svelte";
import WindowControls from "$lib/components/WindowControls.svelte";
<script lang="ts">
import "../app.css";
import Block from "$lib/components/Block.svelte";
import TopBar from "$lib/components/TopBar.svelte";
import WindowControls from "$lib/components/WindowControls.svelte";
import { slide } from "svelte/transition";
let sidebarOpen = true;
document.addEventListener("keypress", (e: KeyboardEvent) => {
const formElements = ["INPUT", "TEXTAREA", "SELECT", "OPTION"];
if (formElements.includes((e.target as Element).tagName)) {
return;
}
if (e.key === "q") sidebarOpen = !sidebarOpen;
});
</script>
<div class="common-window" data-tauri-drag-region>
<Block className="sidebar">
<WindowControls />
<Block className={`sidebar${sidebarOpen ? "" : " collapsed"}`}>
{#if sidebarOpen}
<div transition:slide={{ axis: "x", duration: 100 }}>
<WindowControls />
</div>
{/if}
</Block>
<div class="main-window">
<Block className="top-bar">Top bar</Block>
<div class="main-window">
<TopBar
bind:sidebarOpen
onSidebarToggle={() => (sidebarOpen = !sidebarOpen)}
/>
<Block className="browser-window">Browser window</Block>
</div>
</div>

View file

@ -8,9 +8,11 @@ export default {
block: "var(--c1)",
light: "var(--c2)",
dark: "var(--c3)",
blockLight: "var(--c4)",
},
textColor: {
main: "var(--c2)",
light: "var(--c5)",
},
},
},