Better page layout
This commit is contained in:
Nicola Spadari
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2">
|
<div class="grid grid-cols-1 lg:grid-cols-2">
|
||||||
<div class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16">
|
<div class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16">
|
||||||
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
|
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
|
||||||
<h2 class="text-3xl text-white font-bold tracking-tight">
|
<h2 class="text-3xl text-white font-bold tracking-tight">
|
||||||
{{ props.title }}
|
{{ props.title }}
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16">
|
<div class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<header class="top-0 z-10">
|
<header class="top-0 z-10">
|
||||||
<nav crate flex items-center justify-between py-6>
|
<nav flex items-center justify-between py-6 crate>
|
||||||
<div class="flex lg:flex-1">
|
<div class="flex lg:flex-1">
|
||||||
<NuxtLink to="/" class="p-1.5 -m-1.5">
|
<NuxtLink to="/" class="home p-1.5 -m-1.5">
|
||||||
<span class="sr-only">{{ name }}</span>
|
<span class="sr-only">{{ name }}</span>
|
||||||
<SvgoLogo :font-controlled="false" size-8 />
|
<SvgoLogo :font-controlled="false" size-8 />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
@@ -16,10 +16,18 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div hidden lg="flex gap-x-12">
|
<div hidden lg="flex gap-x-12">
|
||||||
<NuxtLink to="/command" class="text-sm text-white font-semibold leading-6">Command</NuxtLink>
|
<NuxtLink to="/commands" class="text-sm text-white font-semibold leading-6">
|
||||||
<NuxtLink to="/notification" class="text-sm text-white font-semibold leading-6">Notification</NuxtLink>
|
Commands
|
||||||
<NuxtLink to="/os" class="text-sm text-white font-semibold leading-6">OS Information</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink to="/this-page-does-not-exist" class="text-sm text-white font-semibold leading-6">404</NuxtLink>
|
<NuxtLink to="/notifications" class="text-sm text-white font-semibold leading-6">
|
||||||
|
Notifications
|
||||||
|
</NuxtLink>
|
||||||
|
<NuxtLink to="/os" class="text-sm text-white font-semibold leading-6">
|
||||||
|
OS Informations
|
||||||
|
</NuxtLink>
|
||||||
|
<NuxtLink to="/foo" class="text-sm text-white font-semibold leading-6">
|
||||||
|
404
|
||||||
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
<div hidden lg="flex flex-1 justify-end">
|
<div hidden lg="flex flex-1 justify-end">
|
||||||
<p class="text-sm text-white font-semibold leading-6">
|
<p class="text-sm text-white font-semibold leading-6">
|
||||||
@@ -65,3 +73,9 @@
|
|||||||
const { name } = useConstants();
|
const { name } = useConstants();
|
||||||
const tauriVersion = await getTauriVersion();
|
const tauriVersion = await getTauriVersion();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.router-link-exact-active:not(.home){
|
||||||
|
@apply text-emerald-500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,38 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div text-center space-y-5>
|
|
||||||
<p>Hello from Nuxtor - Tauri v{{ version }}</p>
|
|
||||||
<p>Running on {{ currentOS }}</p>
|
|
||||||
|
|
||||||
<p>Shell command result: {{ result }}</p>
|
|
||||||
|
|
||||||
<button @click="runNotification()">
|
|
||||||
send notification
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
const currentOS = await platform();
|
|
||||||
const version = await getTauriVersion();
|
|
||||||
|
|
||||||
const result = await Command.create("exec-sh", [
|
|
||||||
"-c",
|
|
||||||
"echo 'Hello World!'"
|
|
||||||
]).execute();
|
|
||||||
|
|
||||||
const runNotification = async () => {
|
|
||||||
let permissionGranted = await isPermissionGranted();
|
|
||||||
|
|
||||||
if (!permissionGranted) {
|
|
||||||
const permission = await requestPermission();
|
|
||||||
permissionGranted = permission === "granted";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (permissionGranted) {
|
|
||||||
sendNotification({
|
|
||||||
title: "Hello Tauri",
|
|
||||||
body: "Notification from tauri"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="isolate">
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2">
|
|
||||||
<div class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16">
|
|
||||||
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
|
|
||||||
<h2 class="text-3xl text-white font-bold tracking-tight">
|
|
||||||
Command
|
|
||||||
</h2>
|
|
||||||
<p class="mt-6 text-lg text-gray-300 leading-8">
|
|
||||||
Access the system shell. Allows you to spawn child processes and manage files and URLs using their default application.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<form class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16" @submit.prevent="sendCommand()">
|
|
||||||
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
|
|
||||||
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="command-input" class="block text-sm text-white font-semibold leading-6">Command input</label>
|
|
||||||
<div class="mt-2.5">
|
|
||||||
<input id="command-input" v-model="input" type="text" name="command-input" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-end">
|
|
||||||
<Btn type="submit">
|
|
||||||
Send command
|
|
||||||
</Btn>
|
|
||||||
</div>
|
|
||||||
<div mt-8>
|
|
||||||
<label for="command-output" class="block text-sm text-white font-semibold leading-6">Command Output</label>
|
|
||||||
<div class="mt-2.5">
|
|
||||||
<textarea id="command-output" v-model="result" name="command-output" rows="10" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-indigo-500 focus:ring-inset" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
const input = ref("");
|
|
||||||
const result = ref("");
|
|
||||||
|
|
||||||
const sendCommand = async () => {
|
|
||||||
const response = await Command.create("exec-sh", [
|
|
||||||
"-c",
|
|
||||||
input.value
|
|
||||||
]).execute();
|
|
||||||
|
|
||||||
result.value = JSON.stringify(response, null, 4);
|
|
||||||
|
|
||||||
input.value = "";
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
46
src/pages/commands.vue
Normal file
46
src/pages/commands.vue
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
<template>
|
||||||
|
<LayoutTile
|
||||||
|
title="Commands"
|
||||||
|
description="Access the system shell. Allows you to spawn child processes and manage files and URLs using their default application."
|
||||||
|
>
|
||||||
|
<form @submit.prevent="sendCommand()">
|
||||||
|
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
|
||||||
|
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
|
||||||
|
<div>
|
||||||
|
<label for="command-input" class="block text-sm text-white font-semibold leading-6">Command input</label>
|
||||||
|
<div class="mt-2.5">
|
||||||
|
<input id="command-input" v-model="input" type="text" name="command-input" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<Btn type="submit">
|
||||||
|
Send command
|
||||||
|
</Btn>
|
||||||
|
</div>
|
||||||
|
<div mt-8>
|
||||||
|
<label for="command-output" class="block text-sm text-white font-semibold leading-6">Command Output</label>
|
||||||
|
<div class="mt-2.5">
|
||||||
|
<textarea id="command-output" v-model="result" name="command-output" rows="10" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-indigo-500 focus:ring-inset" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</LayoutTile>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
const input = ref("");
|
||||||
|
const result = ref("");
|
||||||
|
|
||||||
|
const sendCommand = async () => {
|
||||||
|
const response = await Command.create("exec-sh", [
|
||||||
|
"-c",
|
||||||
|
input.value
|
||||||
|
]).execute();
|
||||||
|
|
||||||
|
result.value = JSON.stringify(response, null, 4);
|
||||||
|
|
||||||
|
input.value = "";
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -1,75 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2">
|
|
||||||
<div class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16">
|
|
||||||
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
|
|
||||||
<h2 class="text-3xl text-white font-bold tracking-tight">
|
|
||||||
Notification
|
|
||||||
</h2>
|
|
||||||
<p class="mt-6 text-lg text-gray-300 leading-8">
|
|
||||||
Send native notifications to the client using the notification plugin.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<form class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16" @submit.prevent="createNotification()">
|
|
||||||
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
|
|
||||||
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="notification-title" class="block text-sm text-white font-semibold leading-6">Notification title</label>
|
|
||||||
<div class="mt-2.5">
|
|
||||||
<input id="notification-title" v-model="notificationTitle" type="text" name="notification-title" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="notification-body" class="block text-sm text-white font-semibold leading-6">Notification body</label>
|
|
||||||
<div class="mt-2.5">
|
|
||||||
<input id="notification-body" v-model="notificationBody" type="text" name="notification-body" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex justify-end">
|
|
||||||
<Btn type="submit">
|
|
||||||
Send notification
|
|
||||||
</Btn>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p v-if="permissionError" class="mt-3 text-right text-sm text-red-500 font-semibold leading-6">
|
|
||||||
Missing permissions
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
const notificationTitle = ref("");
|
|
||||||
const notificationBody = ref("");
|
|
||||||
const permissionError = ref(false);
|
|
||||||
|
|
||||||
const createNotification = async () => {
|
|
||||||
let permissionGranted = await isPermissionGranted();
|
|
||||||
|
|
||||||
if (!permissionGranted) {
|
|
||||||
const permission = await requestPermission();
|
|
||||||
permissionGranted = permission === "granted";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (permissionGranted) {
|
|
||||||
sendNotification({
|
|
||||||
title: notificationTitle.value,
|
|
||||||
body: notificationBody.value
|
|
||||||
});
|
|
||||||
|
|
||||||
notificationTitle.value = "";
|
|
||||||
notificationBody.value = "";
|
|
||||||
} else {
|
|
||||||
permissionError.value = true;
|
|
||||||
|
|
||||||
useTimeoutFn(() => {
|
|
||||||
permissionError.value = false;
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
66
src/pages/notifications.vue
Normal file
66
src/pages/notifications.vue
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<LayoutTile
|
||||||
|
title="Notifications"
|
||||||
|
description="Send native notifications to the client using the notification plugin."
|
||||||
|
>
|
||||||
|
<form @submit.prevent="createNotification()">
|
||||||
|
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
|
||||||
|
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
|
||||||
|
<div>
|
||||||
|
<label for="notification-title" class="block text-sm text-white font-semibold leading-6">Notification title</label>
|
||||||
|
<div class="mt-2.5">
|
||||||
|
<input id="notification-title" v-model="notificationTitle" type="text" name="notification-title" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="notification-body" class="block text-sm text-white font-semibold leading-6">Notification body</label>
|
||||||
|
<div class="mt-2.5">
|
||||||
|
<input id="notification-body" v-model="notificationBody" type="text" name="notification-body" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<Btn type="submit">
|
||||||
|
Send notification
|
||||||
|
</Btn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p v-if="permissionError" class="mt-3 text-right text-sm text-red-500 font-semibold leading-6">
|
||||||
|
Missing permissions
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</LayoutTile>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
const notificationTitle = ref("");
|
||||||
|
const notificationBody = ref("");
|
||||||
|
const permissionError = ref(false);
|
||||||
|
|
||||||
|
const createNotification = async () => {
|
||||||
|
let permissionGranted = await isPermissionGranted();
|
||||||
|
|
||||||
|
if (!permissionGranted) {
|
||||||
|
const permission = await requestPermission();
|
||||||
|
permissionGranted = permission === "granted";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (permissionGranted) {
|
||||||
|
sendNotification({
|
||||||
|
title: notificationTitle.value,
|
||||||
|
body: notificationBody.value
|
||||||
|
});
|
||||||
|
|
||||||
|
notificationTitle.value = "";
|
||||||
|
notificationBody.value = "";
|
||||||
|
} else {
|
||||||
|
permissionError.value = true;
|
||||||
|
|
||||||
|
useTimeoutFn(() => {
|
||||||
|
permissionError.value = false;
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user