github/wails
5
0
Fork 0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-11 22:49:29 +08:00
Code Projects Activity

update example

Browse Source
This commit is contained in:
popaprozac 2025-02-21 18:36:54 -08:00
parent f694ad223e
commit cc524d78e4
8 changed files with 279 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
v3/examples/notifications/frontend/index.html Normal file
View 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
View 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
View 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
View File

Binary file not shown.

1
v3/examples/notifications/frontend/public/javascript.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 995 B

160
v3/examples/notifications/frontend/public/style.css Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

4
v3/examples/notifications/main.go
View File

@ -8,6 +8,7 @@ import (
"github.com/wailsapp/wails/v3/pkg/application"
"github.com/wailsapp/wails/v3/pkg/events"
"github.com/wailsapp/wails/v3/pkg/services/notification"
)
func main() {
@ -15,6 +16,9 @@ func main() {
Name: "Notifications Demo",
Description: "A test of macOS notifications",
Assets: application.AlphaAssets,
Services: []application.Service{
application.NewService(&notification.NotificationService{}),
},
})
app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{