mirror of
https://github.com/tauri-apps/tauri.git
synced 2024-11-13 00:12:21 +03:00
chore(example): refactor api example (#10228)
This commit is contained in:
Tony
GitHub
parent
c734b9e3cd
commit
a4a7233081
@ -210,7 +210,7 @@
|
||||
<!-- Sidebar toggle, only visible on small screens -->
|
||||
<div
|
||||
id="sidebarToggle"
|
||||
class="z-2000 display-none lt-sm:flex justify-center items-center absolute top-2 left-2 w-8 h-8 rd-8
|
||||
class="z-2000 hidden lt-sm:flex justify-center items-center absolute top-2 left-2 w-8 h-8 rd-8
|
||||
bg-accent dark:bg-darkAccent active:bg-accentDark dark:active:bg-darkAccentDark"
|
||||
>
|
||||
{#if isSideBarOpen}
|
||||
@ -221,7 +221,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex h-screen w-screen overflow-hidden children-pt8 children-pb-2 text-primaryText dark:text-darkPrimaryText"
|
||||
class="flex h-screen w-screen overflow-hidden children-pt4 children-pb-2 text-primaryText dark:text-darkPrimaryText"
|
||||
>
|
||||
<aside
|
||||
id="sidebar"
|
||||
@ -233,7 +233,7 @@
|
||||
src="tauri_logo.png"
|
||||
alt="Tauri logo"
|
||||
/>
|
||||
<a href="##" class="nv justify-between h-8" on:click={toggleDark}>
|
||||
<a href="##" class="nv justify-between" on:click={toggleDark}>
|
||||
{#if isDark}
|
||||
Switch to Light mode
|
||||
<div class="i-ph-sun" />
|
||||
@ -247,7 +247,7 @@
|
||||
<br />
|
||||
|
||||
<a
|
||||
class="nv justify-between h-8"
|
||||
class="nv justify-between"
|
||||
target="_blank"
|
||||
href="https://tauri.app/v1/guides/"
|
||||
>
|
||||
@ -255,7 +255,7 @@
|
||||
<span class="i-codicon-link-external" />
|
||||
</a>
|
||||
<a
|
||||
class="nv justify-between h-8"
|
||||
class="nv justify-between"
|
||||
target="_blank"
|
||||
href="https://github.com/tauri-apps/tauri"
|
||||
>
|
||||
@ -263,7 +263,7 @@
|
||||
<span class="i-codicon-link-external" />
|
||||
</a>
|
||||
<a
|
||||
class="nv justify-between h-8"
|
||||
class="nv justify-between"
|
||||
target="_blank"
|
||||
href="https://github.com/tauri-apps/tauri/tree/dev/examples/api"
|
||||
>
|
||||
@ -273,9 +273,7 @@
|
||||
<br />
|
||||
<div class="bg-white/5 h-2px" />
|
||||
<br />
|
||||
<div
|
||||
class="flex flex-col overflow-y-auto children-h-10 children-flex-none gap-1"
|
||||
>
|
||||
<div class="flex flex-col overflow-y-auto children-flex-none gap-1">
|
||||
{#each views as view}
|
||||
{#if view}
|
||||
<a
|
||||
@ -318,7 +316,7 @@
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:mousedown={startResizingConsole}
|
||||
class="bg-black/20 h-2px cursor-ns-resize"
|
||||
class="bg-black/20 h-4px cursor-ns-resize"
|
||||
/>
|
||||
<div class="flex justify-between items-center px-2">
|
||||
<p class="font-semibold">Console</p>
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
:root {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
*:not(h1, h2, h3, h4, h5, h6) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
|
||||
<div>
|
||||
{#each items as item}
|
||||
<div class="flex flex-row gap-1">
|
||||
<div class="flex flex-row gap-1 items-center">
|
||||
<div class={itemIcon(item)} />
|
||||
<p>{itemToString(item)}</p>
|
||||
</div>
|
||||
|
||||
@ -127,6 +127,7 @@
|
||||
<input
|
||||
id="checkItemCheckedInput"
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
bind:checked={checked}
|
||||
/>
|
||||
<label for="checkItemCheckedInput">Enabled</label>
|
||||
|
||||
@ -40,8 +40,10 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="grid gap-4">
|
||||
<MenuBuilder bind:items on:itemClick={onItemClick} />
|
||||
<button class="btn" on:click={create}>Create menu</button>
|
||||
<button class="btn" on:click={popup}>Popup</button>
|
||||
<div>
|
||||
<button class="btn" on:click={create}>Create menu</button>
|
||||
<button class="btn" on:click={popup}>Popup</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -48,8 +48,8 @@
|
||||
/>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={menuOnLeftClick} />
|
||||
Menu on left click
|
||||
<input type="checkbox" bind:checked={menuOnLeftClick} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -62,8 +62,8 @@
|
||||
/>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={iconAsTemplate} />
|
||||
Icon as template
|
||||
<input type="checkbox" bind:checked={iconAsTemplate} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="grid gap-8 justify-items-start">
|
||||
<p>
|
||||
This is a demo of Tauri's API capabilities using the <code
|
||||
>@tauri-apps/api</code
|
||||
@ -29,14 +29,10 @@
|
||||
development process. In the future, this app will be used on Tauri's integration
|
||||
tests.
|
||||
</p>
|
||||
<br />
|
||||
<br />
|
||||
<pre>
|
||||
App name: <code>{appName}</code>
|
||||
App version: <code>{version}</code>
|
||||
Tauri version: <code>{tauriVersion}</code>
|
||||
</pre>
|
||||
<br />
|
||||
Tauri version: <code>{tauriVersion}</code></pre>
|
||||
|
||||
<button class="btn" on:click={contextMenu}>Context menu</button>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script>
|
||||
import { onDestroy } from 'svelte'
|
||||
import {
|
||||
LogicalSize,
|
||||
UserAttentionType,
|
||||
@ -10,6 +11,8 @@
|
||||
} from '@tauri-apps/api/window'
|
||||
import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
|
||||
|
||||
export let onMessage
|
||||
|
||||
const webview = WebviewWindow.getCurrent()
|
||||
|
||||
let selectedWebview = webview.label
|
||||
@ -82,7 +85,6 @@
|
||||
(s) => ProgressBarStatus[s]
|
||||
)
|
||||
|
||||
export let onMessage
|
||||
const mainEl = document.querySelector('main')
|
||||
|
||||
let newWebviewLabel
|
||||
@ -95,7 +97,7 @@
|
||||
let decorations = true
|
||||
let alwaysOnTop = false
|
||||
let alwaysOnBottom = false
|
||||
let contentProtected = true
|
||||
let contentProtected = false
|
||||
let fullscreen = false
|
||||
let width = null
|
||||
let height = null
|
||||
@ -116,6 +118,7 @@
|
||||
let cursorVisible = true
|
||||
let cursorX = null
|
||||
let cursorY = null
|
||||
/** @type {import('@tauri-apps/api/window').CursorIcon} */
|
||||
let cursorIcon = 'default'
|
||||
let cursorIgnoreEvents = false
|
||||
let windowTitle = 'Awesome Tauri Example!'
|
||||
@ -126,7 +129,8 @@
|
||||
let effectRadius
|
||||
let effectR, effectG, effectB, effectA
|
||||
|
||||
let selectedProgressBarStatus = 'none'
|
||||
/** @type {ProgressBarStatus} */
|
||||
let selectedProgressBarStatus = ProgressBarStatus.None
|
||||
let progress = 0
|
||||
|
||||
let windowIconPath
|
||||
@ -146,7 +150,7 @@
|
||||
}
|
||||
|
||||
function changeIcon() {
|
||||
webviewMap[selectedWebview].setIcon(path)
|
||||
webviewMap[selectedWebview].setIcon(windowIconPath)
|
||||
}
|
||||
|
||||
function createWebviewWindow() {
|
||||
@ -187,12 +191,8 @@
|
||||
|
||||
async function addWindowEventListeners(window) {
|
||||
if (!window) return
|
||||
if (resizeEventUnlisten) {
|
||||
resizeEventUnlisten()
|
||||
}
|
||||
if (moveEventUnlisten) {
|
||||
moveEventUnlisten()
|
||||
}
|
||||
resizeEventUnlisten?.()
|
||||
moveEventUnlisten?.()
|
||||
moveEventUnlisten = await window.listen('tauri://move', loadWindowPosition)
|
||||
resizeEventUnlisten = await window.listen('tauri://resize', loadWindowSize)
|
||||
}
|
||||
@ -206,6 +206,13 @@
|
||||
await webviewMap[selectedWebview].requestUserAttention(null)
|
||||
}
|
||||
|
||||
async function updateProgressBar() {
|
||||
webviewMap[selectedWebview]?.setProgressBar({
|
||||
status: selectedProgressBarStatus,
|
||||
progress
|
||||
})
|
||||
}
|
||||
|
||||
async function addEffect() {
|
||||
if (!effects.includes(selectedEffect)) {
|
||||
effects = [...effects, selectedEffect]
|
||||
@ -288,46 +295,56 @@
|
||||
new PhysicalPosition(cursorX, cursorY)
|
||||
)
|
||||
$: webviewMap[selectedWebview]?.setIgnoreCursorEvents(cursorIgnoreEvents)
|
||||
$: webviewMap[selectedWebview]?.setProgressBar({
|
||||
status: selectedProgressBarStatus,
|
||||
progress
|
||||
|
||||
onDestroy(() => {
|
||||
resizeEventUnlisten?.()
|
||||
moveEventUnlisten?.()
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col children:grow gap-2">
|
||||
<div class="flex gap-1">
|
||||
<input
|
||||
class="input grow"
|
||||
type="text"
|
||||
placeholder="New Window label.."
|
||||
bind:value={newWebviewLabel}
|
||||
/>
|
||||
<button class="btn" on:click={createWebviewWindow}>New window</button>
|
||||
</div>
|
||||
<br />
|
||||
{#if Object.keys(webviewMap).length >= 1}
|
||||
<span class="font-700 text-sm">Selected window:</span>
|
||||
<select class="input" bind:value={selectedWebview}>
|
||||
<option value="" disabled selected>Choose a window...</option>
|
||||
{#each Object.keys(webviewMap) as label}
|
||||
<option value={label}>{label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/if}
|
||||
{#if webviewMap[selectedWebview]}
|
||||
<br />
|
||||
<div class="flex gap-1 items-center">
|
||||
<label for="windowIconPath"> Icon path </label>
|
||||
<form class="flex gap-1 grow" on:submit|preventDefault={setTitle_}>
|
||||
<input
|
||||
id="windowIconPath"
|
||||
class="input grow"
|
||||
bind:value={windowIconPath}
|
||||
/>
|
||||
<button class="btn" type="submit"> Change window icon </button>
|
||||
</form>
|
||||
<div class="flex flex-col children:grow gap-8 mb-4">
|
||||
<div class="flex flex-wrap items-center gap-4 pb-6 border-b-solid border-b-1 border-code">
|
||||
{#if Object.keys(webviewMap).length >= 1}
|
||||
<div class="grid gap-1">
|
||||
<h4 class="my-2">Selected Window</h4>
|
||||
<select class="input" bind:value={selectedWebview}>
|
||||
<option value="" disabled selected>Choose a window...</option>
|
||||
{#each Object.keys(webviewMap) as label}
|
||||
<option value={label}>{label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="grid gap-1">
|
||||
<h4 class="my-2">Create New Window</h4>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="New window label.."
|
||||
bind:value={newWebviewLabel}
|
||||
/>
|
||||
<button class="btn" on:click={createWebviewWindow}>Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if webviewMap[selectedWebview]}
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<div class="grid gap-1 grow">
|
||||
<h4 class="my-2">Change Window Icon</h4>
|
||||
<div class="flex gap-2">
|
||||
<input class="input flex-1 min-w-10" placeholder="Window icon path" bind:value={windowIconPath} />
|
||||
<button class="btn" on:click={changeIcon}>Change</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-1 grow">
|
||||
<h4 class="my-2">Set Window Title</h4>
|
||||
<div class="flex gap-2">
|
||||
<input class="input flex-1 min-w-10" bind:value={windowTitle}/>
|
||||
<button class="btn" on:click={setTitle_}>Set</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
class="btn"
|
||||
@ -357,53 +374,51 @@
|
||||
>Request attention</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<label>
|
||||
Maximized
|
||||
<input type="checkbox" bind:checked={maximized} />
|
||||
</label>
|
||||
<div class="grid cols-[repeat(auto-fill,minmax(180px,1fr))]">
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={resizable} />
|
||||
Resizable
|
||||
<input type="checkbox" bind:checked={resizable} />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={maximizable} />
|
||||
Maximizable
|
||||
<input type="checkbox" bind:checked={maximizable} />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={minimizable} />
|
||||
Minimizable
|
||||
<input type="checkbox" bind:checked={minimizable} />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={closable} />
|
||||
Closable
|
||||
<input type="checkbox" bind:checked={closable} />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={decorations} />
|
||||
Has decorations
|
||||
<input type="checkbox" bind:checked={decorations} />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={alwaysOnTop} />
|
||||
Always on top
|
||||
<input type="checkbox" bind:checked={alwaysOnTop} />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={alwaysOnBottom} />
|
||||
Always on bottom
|
||||
<input type="checkbox" bind:checked={alwaysOnBottom} />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={contentProtected} />
|
||||
Content protected
|
||||
<input type="checkbox" bind:checked={contentProtected} />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={maximized} />
|
||||
Maximized
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={fullscreen} />
|
||||
Fullscreen
|
||||
<input type="checkbox" bind:checked={fullscreen} />
|
||||
</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="flex flex-row gap-2 flex-wrap">
|
||||
<div class="flex children:grow flex-col">
|
||||
<div>
|
||||
<div class="flex flex-wrap children:flex-basis-30 gap-2">
|
||||
<div class="grid gap-1 children:grid">
|
||||
<label>
|
||||
X
|
||||
<input
|
||||
class="input"
|
||||
@ -412,8 +427,8 @@
|
||||
on:change={updatePosition}
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
</label>
|
||||
<label>
|
||||
Y
|
||||
<input
|
||||
class="input"
|
||||
@ -422,11 +437,10 @@
|
||||
on:change={updatePosition}
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex children:grow flex-col">
|
||||
<div>
|
||||
<div class="grid gap-1 children:grid">
|
||||
<label>
|
||||
Width
|
||||
<input
|
||||
class="input"
|
||||
@ -435,7 +449,7 @@
|
||||
on:change={updateSize}
|
||||
min="400"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<div>
|
||||
Height
|
||||
<input
|
||||
@ -447,133 +461,130 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex children:grow flex-col">
|
||||
<div>
|
||||
<div class="grid gap-1 children:grid">
|
||||
<label>
|
||||
Min width
|
||||
<input class="input" type="number" bind:value={minWidth} />
|
||||
</div>
|
||||
<div>
|
||||
</label>
|
||||
<label>
|
||||
Min height
|
||||
<input class="input" type="number" bind:value={minHeight} />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex children:grow flex-col">
|
||||
<div>
|
||||
<div class="grid gap-1 children:grid">
|
||||
<label>
|
||||
Max width
|
||||
<input class="input" type="number" bind:value={maxWidth} min="800" />
|
||||
</div>
|
||||
<div>
|
||||
</label>
|
||||
<label>
|
||||
Max height
|
||||
<input class="input" type="number" bind:value={maxHeight} min="400" />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="grid grid-cols-2 gap-2 max-inline-2xl">
|
||||
<div >
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-2">Inner Size</div>
|
||||
<div>
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-1">
|
||||
Inner Size
|
||||
</div>
|
||||
<span>Width: {innerSize.width}</span>
|
||||
<span>Height: {innerSize.height}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-2">Outer Size</div>
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-1">
|
||||
Outer Size
|
||||
</div>
|
||||
<span>Width: {outerSize.width}</span>
|
||||
<span>Height: {outerSize.height}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-2">
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-1">
|
||||
Inner Logical Size
|
||||
</div>
|
||||
<span>Width: {innerSize.toLogical(scaleFactor).width.toFixed(3)}</span>
|
||||
<span>Height: {innerSize.toLogical(scaleFactor).height.toFixed(3)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-2">
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-1">
|
||||
Outer Logical Size
|
||||
</div>
|
||||
<span>Width: {outerSize.toLogical(scaleFactor).width.toFixed(3)}</span>
|
||||
<span>Height: {outerSize.toLogical(scaleFactor).height.toFixed(3)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-2">
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-1">
|
||||
Inner Position
|
||||
</div>
|
||||
<span>x: {innerPosition.x}</span>
|
||||
<span>y: {innerPosition.y}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-2">
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-1">
|
||||
Outer Position
|
||||
</div>
|
||||
<span>x: {outerPosition.x}</span>
|
||||
<span>y: {outerPosition.y}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-2">
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-1">
|
||||
Inner Logical Position
|
||||
</div>
|
||||
<span>x: {innerPosition.toLogical(scaleFactor).x.toFixed(3)}</span>
|
||||
<span>y: {innerPosition.toLogical(scaleFactor).y.toFixed(3)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-2">
|
||||
<div class="text-accent dark:text-darkAccent font-700 m-block-1">
|
||||
Outer Logical Position
|
||||
</div>
|
||||
<span>x: {outerPosition.toLogical(scaleFactor).x.toFixed(3)}</span>
|
||||
<span>y: {outerPosition.toLogical(scaleFactor).y.toFixed(3)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<h4 class="mb-2">Cursor</h4>
|
||||
<div class="flex gap-2">
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={cursorGrab} />
|
||||
Grab
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={cursorVisible} />
|
||||
Visible
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={cursorIgnoreEvents} />
|
||||
Ignore events
|
||||
</label>
|
||||
<div class="grid gap-2">
|
||||
<h4 class="my-2">Cursor</h4>
|
||||
<div class="flex gap-2">
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={cursorGrab} />
|
||||
Grab
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={cursorVisible} />
|
||||
Visible
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" bind:checked={cursorIgnoreEvents} />
|
||||
Ignore events
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<label>
|
||||
Icon
|
||||
<select class="input" bind:value={cursorIcon}>
|
||||
{#each cursorIconOptions as kind}
|
||||
<option value={kind}>{kind}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
X position
|
||||
<input class="input" type="number" bind:value={cursorX} />
|
||||
</label>
|
||||
<label>
|
||||
Y position
|
||||
<input class="input" type="number" bind:value={cursorY} />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<label>
|
||||
Icon
|
||||
<select class="input" bind:value={cursorIcon}>
|
||||
{#each cursorIconOptions as kind}
|
||||
<option value={kind}>{kind}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
X position
|
||||
<input class="input" type="number" bind:value={cursorX} />
|
||||
</label>
|
||||
<label>
|
||||
Y position
|
||||
<input class="input" type="number" bind:value={cursorY} />
|
||||
</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="flex flex-col gap-1">
|
||||
<form class="flex gap-1" on:submit|preventDefault={setTitle_}>
|
||||
<input class="input grow" id="title" bind:value={windowTitle} />
|
||||
<button class="btn" type="submit">Set title</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex gap-2">
|
||||
<label>
|
||||
Progress Status
|
||||
<select class="input" bind:value={selectedProgressBarStatus}>
|
||||
<select
|
||||
class="input"
|
||||
bind:value={selectedProgressBarStatus}
|
||||
on:change={updateProgressBar}
|
||||
>
|
||||
{#each progressBarStatusOptions as status}
|
||||
<option value={status}>{status}</option>
|
||||
{/each}
|
||||
@ -588,14 +599,25 @@
|
||||
min="0"
|
||||
max="100"
|
||||
bind:value={progress}
|
||||
on:change={updateProgressBar}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if isWindows || isMacOS}
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div>
|
||||
Applied effects: {effects.length ? effects.join(', ') : 'None'}
|
||||
</div>
|
||||
|
||||
<button class="btn" on:click={clearEffects}
|
||||
>Clear</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<label>
|
||||
Effect
|
||||
<select class="input" bind:value={selectedEffect}>
|
||||
@ -623,30 +645,26 @@
|
||||
<div class="flex">
|
||||
<label>
|
||||
Color
|
||||
<div class="flex">
|
||||
<div class="flex gap-2 children:flex-basis-30">
|
||||
<input
|
||||
style="max-width: 120px;"
|
||||
class="input"
|
||||
type="number"
|
||||
placeholder="R"
|
||||
bind:value={effectR}
|
||||
/>
|
||||
<input
|
||||
style="max-width: 120px;"
|
||||
class="input"
|
||||
type="number"
|
||||
placeholder="G"
|
||||
bind:value={effectG}
|
||||
/>
|
||||
<input
|
||||
style="max-width: 120px;"
|
||||
class="input"
|
||||
type="number"
|
||||
placeholder="B"
|
||||
bind:value={effectB}
|
||||
/>
|
||||
<input
|
||||
style="max-width: 120px;"
|
||||
class="input"
|
||||
type="number"
|
||||
placeholder="A"
|
||||
@ -657,20 +675,10 @@
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<button class="btn" style="width: 80px;" on:click={addEffect}
|
||||
<button class="btn" on:click={addEffect}
|
||||
>Add</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div>
|
||||
Applied effects: {effects.length ? effects.join(',') : 'None'}
|
||||
</div>
|
||||
|
||||
<button class="btn" style="width: 80px;" on:click={clearEffects}
|
||||
>Clear</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@ -84,7 +84,8 @@ export default defineConfig({
|
||||
'note-red':
|
||||
'note bg-red-700/10 dark:bg-red-700/10 after:bg-red-700 dark:after:bg-red-700',
|
||||
input:
|
||||
'h-10 flex items-center outline-none border-none p-2 rd-1 shadow-md bg-primaryLighter dark:bg-darkPrimaryLighter text-primaryText dark:text-darkPrimaryText'
|
||||
'flex items-center outline-none border-none py-3 px-2 rd-1 shadow-md bg-primaryLighter dark:bg-darkPrimaryLighter text-primaryText dark:text-darkPrimaryText',
|
||||
checkbox: 'accent-accent'
|
||||
},
|
||||
presets: [
|
||||
presetUno(),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user