mirror of
https://github.com/TxtDot/vigi.git
synced 2024-11-21 11:06:21 +03:00
feat: browser layout, custom window controls
This commit is contained in:
parent
a93f434d91
commit
1169d77e4e
15 changed files with 884 additions and 163 deletions
|
|
@ -1,2 +1,9 @@
|
|||
# vigi
|
||||
<div align="center">
|
||||
|
||||
|
||||
|
||||
# vigi
|
||||
|
||||
</div>
|
||||
|
||||
Browser for dalet, text, gemtext (gemini protocol included) with native support of txtdot proxy and local txtdot engines
|
||||
|
|
|
|||
|
|
@ -16,14 +16,18 @@
|
|||
"@tauri-apps/api": "^1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/svelte": "^4.0.2",
|
||||
"@sveltejs/adapter-static": "^3.0.1",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@tauri-apps/cli": "^1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"postcss": "^8.4.40",
|
||||
"svelte": "^4.2.7",
|
||||
"svelte-check": "^3.6.0",
|
||||
"tailwindcss": "^3.4.7",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^5.0.3",
|
||||
"@tauri-apps/cli": "^1"
|
||||
"vite": "^5.0.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
747
pnpm-lock.yaml
generated
747
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ edition = "2021"
|
|||
tauri-build = { version = "1", features = [] }
|
||||
|
||||
[dependencies]
|
||||
tauri = { version = "1", features = ["shell-open"] }
|
||||
tauri = { version = "1", features = [ "window-hide", "window-start-dragging", "window-close", "window-minimize", "window-show", "window-unminimize", "window-unmaximize", "window-maximize", "shell-open"] }
|
||||
serde = { version = "1", features = ["derive"] }
|
||||
serde_json = "1"
|
||||
|
||||
|
|
|
|||
|
|
@ -15,13 +15,25 @@
|
|||
"shell": {
|
||||
"all": false,
|
||||
"open": true
|
||||
},
|
||||
"window": {
|
||||
"all": false,
|
||||
"close": true,
|
||||
"hide": true,
|
||||
"show": true,
|
||||
"maximize": true,
|
||||
"minimize": true,
|
||||
"unmaximize": true,
|
||||
"unminimize": true,
|
||||
"startDragging": true
|
||||
}
|
||||
},
|
||||
"windows": [
|
||||
{
|
||||
"title": "vigi",
|
||||
"width": 800,
|
||||
"height": 600
|
||||
"height": 600,
|
||||
"decorations": false
|
||||
}
|
||||
],
|
||||
"security": {
|
||||
|
|
|
|||
9
src/app.css
Normal file
9
src/app.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.window {
|
||||
@apply bg-gray-900 text-slate-200;
|
||||
@apply p-3 gap-3 w-screen h-screen;
|
||||
@apply grid grid-cols-8;
|
||||
}
|
||||
7
src/lib/components/Block.svelte
Normal file
7
src/lib/components/Block.svelte
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script lang="ts">
|
||||
export let className = "";
|
||||
</script>
|
||||
|
||||
<div class="p-3 rounded-xl bg-gray-700{className ? ` ${className}` : ''}">
|
||||
<slot />
|
||||
</div>
|
||||
10
src/lib/components/Button.svelte
Normal file
10
src/lib/components/Button.svelte
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script>
|
||||
export let onClick = () => {};
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="hover:cursor-pointer hover:bg-gray-800 active:bg-gray-900 p-1 rounded-lg"
|
||||
on:click={onClick}
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
20
src/lib/components/WindowControls.svelte
Normal file
20
src/lib/components/WindowControls.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
import Close from "$lib/icons/Close.svelte";
|
||||
import Maximize from "$lib/icons/Maximize.svelte";
|
||||
import Minimize from "$lib/icons/Minimize.svelte";
|
||||
import Button from "./Button.svelte";
|
||||
|
||||
import { appWindow } from "@tauri-apps/api/window";
|
||||
</script>
|
||||
|
||||
<div class="flex justify-start" data-tauri-drag-region>
|
||||
<Button onClick={() => appWindow.close()}>
|
||||
<Close />
|
||||
</Button>
|
||||
<Button onClick={() => appWindow.toggleMaximize()}>
|
||||
<Maximize />
|
||||
</Button>
|
||||
<Button onClick={() => appWindow.minimize()}>
|
||||
<Minimize />
|
||||
</Button>
|
||||
</div>
|
||||
14
src/lib/icons/Close.svelte
Normal file
14
src/lib/icons/Close.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 36 36"
|
||||
{...$$props}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m19.41 18l7.29-7.29a1 1 0 0 0-1.41-1.41L18 16.59l-7.29-7.3A1 1 0 0 0 9.3 10.7l7.29 7.3l-7.3 7.29a1 1 0 1 0 1.41 1.41l7.3-7.29l7.29 7.29a1 1 0 0 0 1.41-1.41Z"
|
||||
class="clr-i-outline clr-i-outline-path-1"
|
||||
/>
|
||||
<path fill="none" d="M0 0h36v36H0z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 407 B |
14
src/lib/icons/Maximize.svelte
Normal file
14
src/lib/icons/Maximize.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 36 36"
|
||||
{...$$props}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M27.89 9h-20a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2m-20 16V11h20v14Z"
|
||||
class="clr-i-outline clr-i-outline-path-1"
|
||||
/>
|
||||
<path fill="none" d="M0 0h36v36H0z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 345 B |
14
src/lib/icons/Minimize.svelte
Normal file
14
src/lib/icons/Minimize.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 36 36"
|
||||
{...$$props}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M27 27H9a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2"
|
||||
class="clr-i-outline clr-i-outline-path-1"
|
||||
/>
|
||||
<path fill="none" d="M0 0h36v36H0z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 290 B |
|
|
@ -1,156 +1,12 @@
|
|||
<script lang="ts">
|
||||
import { invoke } from "@tauri-apps/api/tauri";
|
||||
|
||||
let name = "";
|
||||
let greetMsg = "";
|
||||
|
||||
async function greet() {
|
||||
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
|
||||
greetMsg = await invoke("greet", { name });
|
||||
}
|
||||
<script>
|
||||
import Block from "$lib/components/Block.svelte";
|
||||
import WindowControls from "$lib/components/WindowControls.svelte";
|
||||
import "../app.css";
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<h1>Welcome to Tauri!</h1>
|
||||
|
||||
<div class="row">
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo vite" alt="Vite Logo" />
|
||||
</a>
|
||||
<a href="https://tauri.app" target="_blank">
|
||||
<img src="/tauri.svg" class="logo tauri" alt="Tauri Logo" />
|
||||
</a>
|
||||
<a href="https://kit.svelte.dev" target="_blank">
|
||||
<img src="/svelte.svg" class="logo svelte-kit" alt="SvelteKit Logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p>Click on the Tauri, Vite, and SvelteKit logos to learn more.</p>
|
||||
|
||||
<form class="row" on:submit|preventDefault={greet}>
|
||||
<input id="greet-input" placeholder="Enter a name..." bind:value={name} />
|
||||
<button type="submit">Greet</button>
|
||||
</form>
|
||||
|
||||
<p>{greetMsg}</p>
|
||||
<div class="window" data-tauri-drag-region>
|
||||
<Block className="col-span-2">
|
||||
<WindowControls />
|
||||
</Block>
|
||||
<Block className="col-span-6">Browser window</Block>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.logo.vite:hover {
|
||||
filter: drop-shadow(0 0 2em #747bff);
|
||||
}
|
||||
|
||||
.logo.svelte-kit:hover {
|
||||
filter: drop-shadow(0 0 2em #ff3e00);
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color: #0f0f0f;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
padding-top: 10vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: 0.75s;
|
||||
}
|
||||
|
||||
.logo.tauri:hover {
|
||||
filter: drop-shadow(0 0 2em #24c8db);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: #0f0f0f;
|
||||
background-color: #ffffff;
|
||||
transition: border-color 0.25s;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #396cd8;
|
||||
}
|
||||
button:active {
|
||||
border-color: #396cd8;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#greet-input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color: #f6f6f6;
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #24c8db;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
color: #ffffff;
|
||||
background-color: #0f0f0f98;
|
||||
}
|
||||
button:active {
|
||||
background-color: #0f0f0f69;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
9
tailwind.config.js
Normal file
9
tailwind.config.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
Loading…
Add table
Reference in a new issue