diff --git a/docs/src/content/docs/learn/badges.mdx b/docs/src/content/docs/learn/badges.mdx index 3a579adc2..a1406cbf8 100644 --- a/docs/src/content/docs/learn/badges.mdx +++ b/docs/src/content/docs/learn/badges.mdx @@ -29,6 +29,34 @@ app := application.New(application.Options{ }) ``` +### Creating the Service with Custom Options (Windows Only) + +On Windows, you can customize the badge appearance with various options: + +```go +import "github.com/wailsapp/wails/v3/pkg/application" +import "github.com/wailsapp/wails/v3/pkg/services/badge" +import "image/color" + +// Create a badge service with custom options +options := badge.Options{ + TextColour: color.RGBA{255, 255, 255, 255}, // White text + BackgroundColour: color.RGBA{0, 0, 255, 255}, // Green background + FontName: "consolab.ttf", // Bold Consolas font + FontSize: 20, // Font size for single character + SmallFontSize: 14, // Font size for multiple characters +} + +badgeService := badge.NewWithOptions(options) + +// Register the service with the application +app := application.New(application.Options{ + Services: []application.Service{ + application.NewService(badgeService), + }, +}) +``` + ## Badge Operations ### Setting a Badge @@ -66,6 +94,8 @@ badgeService.RemoveBadge() - Automatically handle dark/light mode appearance - Use the standard macOS dock badge styling - Automatically handle label overflow + - Do not support customization options (any options passed to NewWithOptions will be ignored) + - Will display "●" as the default badge if an empty label is provided @@ -75,9 +105,17 @@ badgeService.RemoveBadge() - Are displayed as an overlay icon in the taskbar - Support text values + - Allow customization of colors, font, and font sizes - Adapt to Windows theme settings - Require the application to have a window - - Does not handle label overflow + - Use smaller font size automatically for badges with multiple characters + - Do not handle label overflow + - Support the following customization options: + - TextColour: Text color (default: white) + - BackgroundColour: Badge background color (default: red) + - FontName: Font file name (default: "segoeuib.ttf") + - FontSize: Font size for single character (default: 18) + - SmallFontSize: Font size for multiple characters (default: 14) @@ -100,12 +138,18 @@ badgeService.RemoveBadge() - Numeric badges are most effective - On macOS, text badges should be brief +3. For Windows customization: + - Ensure high contrast between text and background colors + - Test with different text lengths as font size decreases with length + - Use common system fonts to ensure availability + ## API Reference ### Service Management | Method | Description | |--------------------------------------------|-------------------------------------------------------| -| `New()` | Creates a new badge service | +| `New()` | Creates a new badge service with default options | +| `NewWithOptions(options Options)` | Creates a new badge service with custom option (Windows only, options are ignored on macOS) | ### Badge Operations | Method | Description | @@ -115,4 +159,13 @@ badgeService.RemoveBadge() ### Structs and Types -This service doesn't define any specific structs or types beyond the standard error return types. +```go +// Options for customizing badge appearance (Windows only) +type Options struct { + TextColour color.RGBA // Color of the badge text + BackgroundColour color.RGBA // Color of the badge background + FontName string // Font file name (e.g., "segoeuib.ttf") + FontSize int // Font size for single character + SmallFontSize int // Font size for multiple characters +} +``` diff --git a/v3/examples/badge-custom/README.md b/v3/examples/badge-custom/README.md index ad12c3f40..1724ce84a 100644 --- a/v3/examples/badge-custom/README.md +++ b/v3/examples/badge-custom/README.md @@ -1,59 +1,80 @@ # Welcome to Your New Wails3 Project! +Now that you have your project set up, it's time to explore the custom badge features that Wails3 offers on **Windows**. -Congratulations on generating your Wails3 application! This README will guide you through the next steps to get your project up and running. +## Exploring Custom Badge Features -## Getting Started +### Creating the Service with Custom Options (Windows Only) -1. Navigate to your project directory in the terminal. +On Windows, you can customize the badge appearance with various options: -2. To run your application in development mode, use the following command: +```go +import "github.com/wailsapp/wails/v3/pkg/application" +import "github.com/wailsapp/wails/v3/pkg/services/badge" +import "image/color" - ``` - wails3 dev - ``` +// Create a badge service with custom options +options := badge.Options{ + TextColour: color.RGBA{255, 255, 255, 255}, // White text + BackgroundColour: color.RGBA{0, 0, 255, 255}, // Green background + FontName: "consolab.ttf", // Bold Consolas font + FontSize: 20, // Font size for single character + SmallFontSize: 14, // Font size for multiple characters +} - This will start your application and enable hot-reloading for both frontend and backend changes. +badgeService := badge.NewWithOptions(options) -3. To build your application for production, use: +// Register the service with the application +app := application.New(application.Options{ + Services: []application.Service{ + application.NewService(badgeService), + }, +}) +``` - ``` - wails3 build - ``` +## Badge Operations - This will create a production-ready executable in the `build` directory. +### Setting a Badge -## Exploring Wails3 Features +Set a badge on the application tile/dock icon: -Now that you have your project set up, it's time to explore the features that Wails3 offers: +**Go** +```go +// Set a default badge +badgeService.SetBadge("") -1. **Check out the examples**: The best way to learn is by example. Visit the `examples` directory in the `v3/examples` directory to see various sample applications. +// Set a numeric badge +badgeService.SetBadge("3") -2. **Run an example**: To run any of the examples, navigate to the example's directory and use: +// Set a text badge +badgeService.SetBadge("New") +``` - ``` - go run . - ``` +**JS** +```js +import {SetBadge} from "../bindings/github.com/wailsapp/wails/v3/pkg/services/badge/service"; - Note: Some examples may be under development during the alpha phase. +// Set a default badge +SetBadge("") -3. **Explore the documentation**: Visit the [Wails3 documentation](https://v3.wails.io/) for in-depth guides and API references. +// Set a numeric badge +SetBadge("3") -4. **Join the community**: Have questions or want to share your progress? Join the [Wails Discord](https://discord.gg/JDdSxwjhGf) or visit the [Wails discussions on GitHub](https://github.com/wailsapp/wails/discussions). +// Set a text badge +SetBadge("New") +``` -## Project Structure +### Removing a Badge -Take a moment to familiarize yourself with your project structure: +Remove the badge from the application icon: -- `frontend/`: Contains your frontend code (HTML, CSS, JavaScript/TypeScript) -- `main.go`: The entry point of your Go backend -- `app.go`: Define your application structure and methods here -- `wails.json`: Configuration file for your Wails project +**Go** +```go +badgeService.RemoveBadge() +``` -## Next Steps +**JS** +```js +import {RemoveBadge} from "../bindings/github.com/wailsapp/wails/v3/pkg/services/badge/service"; -1. Modify the frontend in the `frontend/` directory to create your desired UI. -2. Add backend functionality in `main.go`. -3. Use `wails3 dev` to see your changes in real-time. -4. When ready, build your application with `wails3 build`. - -Happy coding with Wails3! If you encounter any issues or have questions, don't hesitate to consult the documentation or reach out to the Wails community. +RemoveBadge() +``` \ No newline at end of file diff --git a/v3/examples/badge-custom/frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/badge/service.ts b/v3/examples/badge-custom/frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/badge/service.ts index abd6cd0a3..2f3ee30a6 100644 --- a/v3/examples/badge-custom/frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/badge/service.ts +++ b/v3/examples/badge-custom/frontend/bindings/github.com/wailsapp/wails/v3/pkg/services/badge/service.ts @@ -8,14 +8,18 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore: Unused imports -import {Call as $Call, Create as $Create} from "@wailsio/runtime"; +import { Call as $Call, CancellablePromise as $CancellablePromise, Create as $Create } from "@wailsio/runtime"; -export function RemoveBadge(): Promise & { cancel(): void } { - let $resultPromise = $Call.ByID(2633565570) as any; - return $resultPromise; +/** + * RemoveBadge removes the badge label from the application icon. + */ +export function RemoveBadge(): $CancellablePromise { + return $Call.ByID(2633565570); } -export function SetBadge(label: string): Promise & { cancel(): void } { - let $resultPromise = $Call.ByID(3052354152, label) as any; - return $resultPromise; +/** + * SetBadge sets the badge label on the application icon. + */ +export function SetBadge(label: string): $CancellablePromise { + return $Call.ByID(3052354152, label); } diff --git a/v3/examples/badge-custom/frontend/dist/assets/index-sXwpgKSV.js b/v3/examples/badge-custom/frontend/dist/assets/index-edhLCYCH.js similarity index 99% rename from v3/examples/badge-custom/frontend/dist/assets/index-sXwpgKSV.js rename to v3/examples/badge-custom/frontend/dist/assets/index-edhLCYCH.js index 72bf73d69..f23f80e54 100644 --- a/v3/examples/badge-custom/frontend/dist/assets/index-sXwpgKSV.js +++ b/v3/examples/badge-custom/frontend/dist/assets/index-edhLCYCH.js @@ -1324,12 +1324,10 @@ window._wails = window._wails || {}; window._wails.invoke = invoke; invoke("wails:runtime:ready"); function RemoveBadge() { - let $resultPromise = ByID(2633565570); - return $resultPromise; + return ByID(2633565570); } function SetBadge(label) { - let $resultPromise = ByID(3052354152, label); - return $resultPromise; + return ByID(3052354152, label); } const setButton = document.getElementById("set"); const removeButton = document.getElementById("remove"); diff --git a/v3/examples/badge-custom/frontend/dist/index.html b/v3/examples/badge-custom/frontend/dist/index.html index a543f93cd..3ea98fdf3 100644 --- a/v3/examples/badge-custom/frontend/dist/index.html +++ b/v3/examples/badge-custom/frontend/dist/index.html @@ -1,38 +1,38 @@ - - - - - - - - Wails App - - - -
- -

Wails + Typescript

-
Set a badge label below 👇
-
-
- - - - - -
-
-
-

Click on the Wails logo to learn more

-

Listening for Time event...

-
-
- - + + + + + + + + Wails App + + + +
+ +

Wails + Typescript

+
Set a badge label below 👇
+
+
+ + + + + +
+
+
+

Click on the Wails logo to learn more

+

Listening for Time event...

+
+
+ + diff --git a/v3/examples/badge/README.md b/v3/examples/badge/README.md index ad12c3f40..aa65bc7aa 100644 --- a/v3/examples/badge/README.md +++ b/v3/examples/badge/README.md @@ -1,59 +1,71 @@ # Welcome to Your New Wails3 Project! +Now that you have your project set up, it's time to explore the basic badge features that Wails3 offers on **macOS** and **Windows**. -Congratulations on generating your Wails3 application! This README will guide you through the next steps to get your project up and running. +## Exploring Badge Features -## Getting Started +### Creating the Service -1. Navigate to your project directory in the terminal. +First, initialize the badge service: -2. To run your application in development mode, use the following command: +```go +import "github.com/wailsapp/wails/v3/pkg/application" +import "github.com/wailsapp/wails/v3/pkg/services/badge" - ``` - wails3 dev - ``` +// Create a new badge service +badgeService := badge.New() - This will start your application and enable hot-reloading for both frontend and backend changes. +// Register the service with the application +app := application.New(application.Options{ + Services: []application.Service{ + application.NewService(badgeService), + }, +}) +``` -3. To build your application for production, use: +## Badge Operations - ``` - wails3 build - ``` +### Setting a Badge - This will create a production-ready executable in the `build` directory. +Set a badge on the application tile/dock icon: -## Exploring Wails3 Features +**Go** +```go +// Set a default badge +badgeService.SetBadge("") -Now that you have your project set up, it's time to explore the features that Wails3 offers: +// Set a numeric badge +badgeService.SetBadge("3") -1. **Check out the examples**: The best way to learn is by example. Visit the `examples` directory in the `v3/examples` directory to see various sample applications. +// Set a text badge +badgeService.SetBadge("New") +``` -2. **Run an example**: To run any of the examples, navigate to the example's directory and use: +**JS** +```js +import {SetBadge} from "../bindings/github.com/wailsapp/wails/v3/pkg/services/badge/service"; - ``` - go run . - ``` +// Set a default badge +SetBadge("") - Note: Some examples may be under development during the alpha phase. +// Set a numeric badge +SetBadge("3") -3. **Explore the documentation**: Visit the [Wails3 documentation](https://v3.wails.io/) for in-depth guides and API references. +// Set a text badge +SetBadge("New") +``` -4. **Join the community**: Have questions or want to share your progress? Join the [Wails Discord](https://discord.gg/JDdSxwjhGf) or visit the [Wails discussions on GitHub](https://github.com/wailsapp/wails/discussions). +### Removing a Badge -## Project Structure +Remove the badge from the application icon: -Take a moment to familiarize yourself with your project structure: +**Go** +```go +badgeService.RemoveBadge() +``` -- `frontend/`: Contains your frontend code (HTML, CSS, JavaScript/TypeScript) -- `main.go`: The entry point of your Go backend -- `app.go`: Define your application structure and methods here -- `wails.json`: Configuration file for your Wails project +**JS** +```js +import {RemoveBadge} from "../bindings/github.com/wailsapp/wails/v3/pkg/services/badge/service"; -## Next Steps - -1. Modify the frontend in the `frontend/` directory to create your desired UI. -2. Add backend functionality in `main.go`. -3. Use `wails3 dev` to see your changes in real-time. -4. When ready, build your application with `wails3 build`. - -Happy coding with Wails3! If you encounter any issues or have questions, don't hesitate to consult the documentation or reach out to the Wails community. +RemoveBadge() +``` \ No newline at end of file