mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-13 15:39:31 +08:00
update example
This commit is contained in:
popaprozac
parent
f694ad223e
commit
cc524d78e4
31
v3/examples/notifications/frontend/index.html
Normal file
31
v3/examples/notifications/frontend/index.html
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/wails.png"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
|
<link rel="stylesheet" href="/style.css"/>
|
||||||
|
<title>Wails App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div>
|
||||||
|
<a data-wml-openURL="https://wails.io">
|
||||||
|
<img src="/wails.png" class="logo" alt="Wails logo"/>
|
||||||
|
</a>
|
||||||
|
<a data-wml-openURL="https://developer.mozilla.org/en-US/docs/Web/JavaScript">
|
||||||
|
<img src="/javascript.svg" class="logo vanilla" alt="JavaScript logo"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<h1>Wails + Javascript</h1>
|
||||||
|
<div class="footer">
|
||||||
|
<div><p>Click on the Wails logo to learn more</p></div>
|
||||||
|
<div><p id="time">Listening for Time event...</p></div>
|
||||||
|
<div><button class="btn" onclick="sendNotification()">Send Basic Notification</button></div>
|
||||||
|
<div><button class="btn" onclick="sendComplexNotification()">Send Complex Notificaiton</button></div>
|
||||||
|
<div id="notifications"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="module" src="/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
67
v3/examples/notifications/frontend/main.js
Normal file
67
v3/examples/notifications/frontend/main.js
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import { GreetService } from "./bindings/notifications";
|
||||||
|
import { NotificationService } from "./bindings/github.com/wailsapp/wails/v3/pkg/services/notification";
|
||||||
|
import { Events } from "@wailsio/runtime";
|
||||||
|
|
||||||
|
const resultElement = document.getElementById('result');
|
||||||
|
const timeElement = document.getElementById('time');
|
||||||
|
const notificationsElement = document.getElementById('notifications');
|
||||||
|
|
||||||
|
const nofitications = new Map();
|
||||||
|
|
||||||
|
window.doGreet = () => {
|
||||||
|
let name = document.getElementById('name').value;
|
||||||
|
if (!name) {
|
||||||
|
name = 'anonymous';
|
||||||
|
}
|
||||||
|
GreetService.Greet(name).then((result) => {
|
||||||
|
resultElement.innerText = result;
|
||||||
|
}).catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.sendNotification = async () => {
|
||||||
|
const granted = await NotificationService.CheckNotificationAuthorization();
|
||||||
|
if (granted) {
|
||||||
|
await NotificationService.SendNotification("some-uuid-fronted", "Frontend Notificaiton", "", "Notificaiton sent through JS!");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.sendComplexNotification = async () => {
|
||||||
|
const granted = await NotificationService.CheckNotificationAuthorization();
|
||||||
|
if (granted) {
|
||||||
|
await NotificationService.RegisterNotificationCategory({
|
||||||
|
id: "FRONTEND_NOTIF",
|
||||||
|
actions: [
|
||||||
|
{ id: "VIEW_ACTION", title: "View" },
|
||||||
|
{ id: "MARK_READ_ACTION", title: "Mark as Read" },
|
||||||
|
{ id: "DELETE_ACTION", title: "Delete", destructive: true },
|
||||||
|
],
|
||||||
|
hasReplyField: true,
|
||||||
|
replyButtonTitle: "Reply",
|
||||||
|
replyPlaceholder: "Reply to frontend...",
|
||||||
|
});
|
||||||
|
|
||||||
|
await NotificationService.SendNotificationWithActions({
|
||||||
|
id: "some-uuid-complex",
|
||||||
|
title: "Complex Frontend Notification",
|
||||||
|
subtitle: "From: Jane Doe",
|
||||||
|
body: "Is it rainging today where you are?",
|
||||||
|
categoryId: "FRONTEND_NOTIF",
|
||||||
|
data: {
|
||||||
|
messageId: "msg-456",
|
||||||
|
senderId: "user-456",
|
||||||
|
timestamp: Date.now(),
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Events.On('time', (time) => {
|
||||||
|
timeElement.innerText = time.data;
|
||||||
|
});
|
||||||
|
|
||||||
|
Events.On("notification", (data) => {
|
||||||
|
nofitications.set(data.identifier, data);
|
||||||
|
notificationsElement.innerText = Array.from(nofitications.values()).map(notification => JSON.stringify(notification)).join(", ");
|
||||||
|
});
|
||||||
16
v3/examples/notifications/frontend/package.json
Normal file
16
v3/examples/notifications/frontend/package.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "frontend",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build:dev": "vite build --minify false --mode development",
|
||||||
|
"build": "vite build --mode production",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"vite": "^5.0.0",
|
||||||
|
"@wailsio/runtime": "latest"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
v3/examples/notifications/frontend/public/Inter-Medium.ttf
Normal file
BIN
v3/examples/notifications/frontend/public/Inter-Medium.ttf
Normal file
Binary file not shown.
1
v3/examples/notifications/frontend/public/javascript.svg
Normal file
1
v3/examples/notifications/frontend/public/javascript.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>
|
||||||
|
After Width: | Height: | Size: 995 B |
160
v3/examples/notifications/frontend/public/style.css
Normal file
160
v3/examples/notifications/frontend/public/style.css
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
:root {
|
||||||
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
||||||
|
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||||
|
sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: 400;
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: rgba(27, 38, 54, 1);
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Inter";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: local(""),
|
||||||
|
url("./Inter-Medium.ttf") format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 3em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
/* width: 60px; */
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: none;
|
||||||
|
margin: 0 0 0 20px;
|
||||||
|
padding: 0 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
place-content: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 6em;
|
||||||
|
padding: 1.5em;
|
||||||
|
will-change: filter;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #e80000aa);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo.vanilla:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #f7df1eaa);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
margin: 1.5rem auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 1rem;
|
||||||
|
align-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.input-box .btn:hover {
|
||||||
|
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-box .input {
|
||||||
|
border: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
outline: none;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
padding: 0 10px;
|
||||||
|
color: black;
|
||||||
|
background-color: rgba(240, 240, 240, 1);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-box .input:hover {
|
||||||
|
border: none;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-box .input:focus {
|
||||||
|
border: none;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
BIN
v3/examples/notifications/frontend/public/wails.png
Normal file
BIN
v3/examples/notifications/frontend/public/wails.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
@ -8,6 +8,7 @@ import (
|
|||||||
|
|
||||||
"github.com/wailsapp/wails/v3/pkg/application"
|
"github.com/wailsapp/wails/v3/pkg/application"
|
||||||
"github.com/wailsapp/wails/v3/pkg/events"
|
"github.com/wailsapp/wails/v3/pkg/events"
|
||||||
|
"github.com/wailsapp/wails/v3/pkg/services/notification"
|
||||||
)
|
)
|
||||||
|
|
||||||
func main() {
|
func main() {
|
||||||
@ -15,6 +16,9 @@ func main() {
|
|||||||
Name: "Notifications Demo",
|
Name: "Notifications Demo",
|
||||||
Description: "A test of macOS notifications",
|
Description: "A test of macOS notifications",
|
||||||
Assets: application.AlphaAssets,
|
Assets: application.AlphaAssets,
|
||||||
|
Services: []application.Service{
|
||||||
|
application.NewService(¬ification.NotificationService{}),
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
|
app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user