diff --git a/src/Library/demos/Overlay/image.png b/src/Library/demos/Overlay/image.png new file mode 100644 index 000000000..c9af00623 Binary files /dev/null and b/src/Library/demos/Overlay/image.png differ diff --git a/src/Library/demos/Overlay/main.blp b/src/Library/demos/Overlay/main.blp new file mode 100644 index 000000000..fa4b079ed --- /dev/null +++ b/src/Library/demos/Overlay/main.blp @@ -0,0 +1,56 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: "Overlay"; + description: "Overlay widgets on top of a each other"; + + Adw.Clamp{ + Overlay { + Picture picture { + } + + [overlay] + Box toolbar{ + margin-start: 24; + margin-end: 24; + margin-bottom:18; + valign: end; + + Button { + icon-name: "skip-backwards-10-symbolic"; + } + + Button { + icon-name: "play-large-symbolic"; + } + + Button { + icon-name: "skip-forward-10-symbolic"; + } + + Scale { + hexpand: true; + orientation: horizontal; + show-fill-level: true; + adjustment: + Adjustment { + lower: 0; + upper: 100; + value:50; + }; + } + + Button { + icon-name: "audio-volume-muted-symbolic"; + } + + styles [ + "toolbar", + "osd", + "darken", + ] + } + } + } +} diff --git a/src/Library/demos/Overlay/main.css b/src/Library/demos/Overlay/main.css new file mode 100644 index 000000000..0f8b9861c --- /dev/null +++ b/src/Library/demos/Overlay/main.css @@ -0,0 +1,7 @@ +.darken { + transition: background-color 0.3s ease-in-out; +} + +.darken:hover { + background-color: black; +} diff --git a/src/Library/demos/Overlay/main.js b/src/Library/demos/Overlay/main.js new file mode 100644 index 000000000..63c5d5bc6 --- /dev/null +++ b/src/Library/demos/Overlay/main.js @@ -0,0 +1,11 @@ +import Gtk from "gi://Gtk"; +import Gio from "gi://Gio"; +import GLib from "gi://GLib"; + +const file = Gio.File.new_for_path(pkg.pkgdatadir).resolve_relative_path( + "Library/demos/Overlay/image.png", +); + +const picture = workbench.builder.get_object("picture"); +picture.file = file; + diff --git a/src/Library/demos/Overlay/main.json b/src/Library/demos/Overlay/main.json new file mode 100644 index 000000000..7a87695c9 --- /dev/null +++ b/src/Library/demos/Overlay/main.json @@ -0,0 +1,10 @@ +{ + "name": "Overlay", + "category": "user_interface", + "description": "Overlay widgets on top of each other", + "panels": [ + "ui", + "preview" + ], + "autorun": true +}