From 81a56139b70a0d45110e90748654095b7413c4cd Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sat, 10 Jun 2023 12:39:36 -0500 Subject: [PATCH 1/8] library:add css example --- src/Library/demos/CSS/main.blp | 20 ++++++++++++++++++++ src/Library/demos/CSS/main.json | 7 +++++++ 2 files changed, 27 insertions(+) create mode 100644 src/Library/demos/CSS/main.blp create mode 100644 src/Library/demos/CSS/main.json diff --git a/src/Library/demos/CSS/main.blp b/src/Library/demos/CSS/main.blp new file mode 100644 index 000000000..a05bb7a6a --- /dev/null +++ b/src/Library/demos/CSS/main.blp @@ -0,0 +1,20 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: "CSS"; + description: _("CSS usage in GTK"); + + Box { + orientation: vertical; + halign: center; + + + LinkButton { + label: "CSS Overview"; + uri: "https://docs.gtk.org/gtk4/css-overview.html"; + } + + } +} + diff --git a/src/Library/demos/CSS/main.json b/src/Library/demos/CSS/main.json new file mode 100644 index 000000000..b4fb3bc55 --- /dev/null +++ b/src/Library/demos/CSS/main.json @@ -0,0 +1,7 @@ +{ + "name": "CSS", + "category": "user_interface", + "description": "GTK uses CSS for Styling.", + "panels": ["code", "ui", "preview"], + "autorun": false +} From 5ac2bcee0e0bd3d83659b8e7ea2b5e98f24dc62f Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sat, 10 Jun 2023 14:31:10 -0500 Subject: [PATCH 2/8] main.blp: update --- src/Library/demos/CSS/main.blp | 49 +++++++++++++++++++++++++++++----- 1 file changed, 43 insertions(+), 6 deletions(-) diff --git a/src/Library/demos/CSS/main.blp b/src/Library/demos/CSS/main.blp index a05bb7a6a..9e8453ce3 100644 --- a/src/Library/demos/CSS/main.blp +++ b/src/Library/demos/CSS/main.blp @@ -2,19 +2,56 @@ using Gtk 4.0; using Adw 1; Adw.StatusPage { - title: "CSS"; - description: _("CSS usage in GTK"); - Box { orientation: vertical; halign: center; + Label { + label:_("Text"); + margin-bottom: 24; + // Here, the styles block defines CSS Classes to be added + // to this label widget + styles["title-1"] + } + + Label { + // We set the name property to style it with css + name: "css_text"; + label: _("CSS can be used to edit the appearance of an application"); + margin-bottom: 12; + } + + Label basic_label { + label: _("CSS classes can be applied via code"); + margin-bottom: 12; + } - LinkButton { - label: "CSS Overview"; - uri: "https://docs.gtk.org/gtk4/css-overview.html"; + Label { + label:_("Widgets"); + margin-top: 24; + styles["title-1"] } + Box { + orientation: horizontal; + halign: center; + margin-top: 24; + + LinkButton { + label: "CSS Overview"; + uri: "https://docs.gtk.org/gtk4/css-overview.html"; + } + + LinkButton { + label: "Adwaita Style Classes"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/style-classes.html"; + } + + LinkButton { + label: "Named Colors"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/named-colors.html"; + } + } } } From f60f7348c44e8e06d93013a964a865e90e4141ce Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sat, 10 Jun 2023 14:31:20 -0500 Subject: [PATCH 3/8] add main.css --- src/Library/demos/CSS/main.css | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/Library/demos/CSS/main.css diff --git a/src/Library/demos/CSS/main.css b/src/Library/demos/CSS/main.css new file mode 100644 index 000000000..7a29dae27 --- /dev/null +++ b/src/Library/demos/CSS/main.css @@ -0,0 +1,10 @@ +#css_text { + color: @blue_1; /* Adwaita Named Color */ +} + +.my_custom_class { + color: @red_1; + font-size: x-large; + font-weight: bold; + text-decoration: underline; +} From 6b6edd4a3edc0c0576fd252c4c0648eb083cc773 Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sat, 10 Jun 2023 14:31:33 -0500 Subject: [PATCH 4/8] add main.js --- src/Library/demos/CSS/main.js | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/Library/demos/CSS/main.js diff --git a/src/Library/demos/CSS/main.js b/src/Library/demos/CSS/main.js new file mode 100644 index 000000000..25eed2cf0 --- /dev/null +++ b/src/Library/demos/CSS/main.js @@ -0,0 +1,6 @@ +import Adw from "gi://Adw"; +import Gtk from "gi://Gtk"; + +const basic_label = workbench.builder.get_object("basic_label"); + +basic_label.add_css_class("my_custom_class"); From 8bfee00b5824475783fab3ab25ec712ccde7e85e Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sat, 10 Jun 2023 14:31:46 -0500 Subject: [PATCH 5/8] main.json: autostart --- src/Library/demos/CSS/main.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Library/demos/CSS/main.json b/src/Library/demos/CSS/main.json index b4fb3bc55..d0125db9a 100644 --- a/src/Library/demos/CSS/main.json +++ b/src/Library/demos/CSS/main.json @@ -1,7 +1,7 @@ { "name": "CSS", "category": "user_interface", - "description": "GTK uses CSS for Styling.", - "panels": ["code", "ui", "preview"], - "autorun": false + "description": "Styling GTK with CSS.", + "panels": ["code", "ui", "style", "preview"], + "autorun": true } From edd8a82612b145db7c996b11127083d16c6ad4da Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sat, 10 Jun 2023 18:29:47 -0500 Subject: [PATCH 6/8] main.blp: add accordion --- src/Library/demos/CSS/main.blp | 19 +++++++++++++++++++ src/Library/demos/CSS/main.css | 12 ++++++++++++ 2 files changed, 31 insertions(+) diff --git a/src/Library/demos/CSS/main.blp b/src/Library/demos/CSS/main.blp index 9e8453ce3..b4a23ef16 100644 --- a/src/Library/demos/CSS/main.blp +++ b/src/Library/demos/CSS/main.blp @@ -32,6 +32,25 @@ Adw.StatusPage { styles["title-1"] } + Box { + name:"linked_box"; + margin-top: 24; + styles ["linked"] + halign: center; + + Button { + icon-name: "stop-large-symbolic"; + } + + Button { + icon-name: "play-large-symbolic"; + } + + Button { + icon-name: "playlist-symbolic"; + } + } + Box { orientation: horizontal; halign: center; diff --git a/src/Library/demos/CSS/main.css b/src/Library/demos/CSS/main.css index 7a29dae27..27a546492 100644 --- a/src/Library/demos/CSS/main.css +++ b/src/Library/demos/CSS/main.css @@ -8,3 +8,15 @@ font-weight: bold; text-decoration: underline; } + +#linked_box > :hover:first-child { + background-color: @destructive_bg_color; +} + +#linked_box > :hover:nth-child(2) { + background-color: @success_bg_color; +} + +#linked_box > :hover:last-child { + background-color: @accent_bg_color; +} From 90bd52cfd2709b7711c145227b7a256e8397fe7e Mon Sep 17 00:00:00 2001 From: halfmexican Date: Sat, 10 Jun 2023 23:56:09 -0500 Subject: [PATCH 7/8] remove font-size --- src/Library/demos/CSS/main.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Library/demos/CSS/main.css b/src/Library/demos/CSS/main.css index 27a546492..545ef16bd 100644 --- a/src/Library/demos/CSS/main.css +++ b/src/Library/demos/CSS/main.css @@ -4,7 +4,6 @@ .my_custom_class { color: @red_1; - font-size: x-large; font-weight: bold; text-decoration: underline; } From 0ee82d21e344334a5ec9bb6c5e6abc8ecd0cb61c Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Wed, 14 Jun 2023 10:54:41 +0200 Subject: [PATCH 8/8] some improvements --- src/Library/demos/CSS/main.js | 6 --- src/Library/demos/CSS/main.json | 7 --- .../demos/{CSS => Styling with CSS}/main.blp | 51 +++++++++++-------- .../demos/{CSS => Styling with CSS}/main.css | 4 ++ src/Library/demos/Styling with CSS/main.js | 3 ++ src/Library/demos/Styling with CSS/main.json | 7 +++ 6 files changed, 43 insertions(+), 35 deletions(-) delete mode 100644 src/Library/demos/CSS/main.js delete mode 100644 src/Library/demos/CSS/main.json rename src/Library/demos/{CSS => Styling with CSS}/main.blp (52%) rename src/Library/demos/{CSS => Styling with CSS}/main.css (86%) create mode 100644 src/Library/demos/Styling with CSS/main.js create mode 100644 src/Library/demos/Styling with CSS/main.json diff --git a/src/Library/demos/CSS/main.js b/src/Library/demos/CSS/main.js deleted file mode 100644 index 25eed2cf0..000000000 --- a/src/Library/demos/CSS/main.js +++ /dev/null @@ -1,6 +0,0 @@ -import Adw from "gi://Adw"; -import Gtk from "gi://Gtk"; - -const basic_label = workbench.builder.get_object("basic_label"); - -basic_label.add_css_class("my_custom_class"); diff --git a/src/Library/demos/CSS/main.json b/src/Library/demos/CSS/main.json deleted file mode 100644 index d0125db9a..000000000 --- a/src/Library/demos/CSS/main.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "name": "CSS", - "category": "user_interface", - "description": "Styling GTK with CSS.", - "panels": ["code", "ui", "style", "preview"], - "autorun": true -} diff --git a/src/Library/demos/CSS/main.blp b/src/Library/demos/Styling with CSS/main.blp similarity index 52% rename from src/Library/demos/CSS/main.blp rename to src/Library/demos/Styling with CSS/main.blp index b4a23ef16..893cb5574 100644 --- a/src/Library/demos/CSS/main.blp +++ b/src/Library/demos/Styling with CSS/main.blp @@ -2,38 +2,35 @@ using Gtk 4.0; using Adw 1; Adw.StatusPage { + title: "Styling with CSS"; + description: "Change the appearence of widgets"; + Box { orientation: vertical; halign: center; Label { - label:_("Text"); - margin-bottom: 24; - // Here, the styles block defines CSS Classes to be added - // to this label widget - styles["title-1"] + // Set the name property to style using an id selector #css_text + name: "css_text"; + label: _("This widget is styled with an id selector"); + margin-bottom: 12; } Label { - // We set the name property to style it with css - name: "css_text"; - label: _("CSS can be used to edit the appearance of an application"); - margin-bottom: 12; + // Set styles to style using class selector .css_text + styles ["css_text"] + label: _("This widget is styled with a class selector"); + margin-bottom: 12; } Label basic_label { - label: _("CSS classes can be applied via code"); - margin-bottom: 12; - } - - Label { - label:_("Widgets"); - margin-top: 24; - styles["title-1"] + // Open the Code panel to see how + label: _("Classes can be applied programmatically"); + margin-bottom: 12; } Box { - name:"linked_box"; + name: "linked_box"; margin-top: 24; styles ["linked"] halign: center; @@ -51,26 +48,36 @@ Adw.StatusPage { } } + Label { + label: _("Documentation"); + margin-top: 24; + styles ["title-2"] + } + Box { orientation: horizontal; halign: center; margin-top: 24; LinkButton { - label: "CSS Overview"; + label: _("Overview"); uri: "https://docs.gtk.org/gtk4/css-overview.html"; } LinkButton { - label: "Adwaita Style Classes"; + label: _("Properties"); + uri: "https://docs.gtk.org/gtk4/css-properties.html"; + } + + LinkButton { + label: _("Style Classes"); uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/style-classes.html"; } LinkButton { - label: "Named Colors"; + label: _("Named Colors"); uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/named-colors.html"; } } } } - diff --git a/src/Library/demos/CSS/main.css b/src/Library/demos/Styling with CSS/main.css similarity index 86% rename from src/Library/demos/CSS/main.css rename to src/Library/demos/Styling with CSS/main.css index 545ef16bd..9cc5c5ea7 100644 --- a/src/Library/demos/CSS/main.css +++ b/src/Library/demos/Styling with CSS/main.css @@ -2,6 +2,10 @@ color: @blue_1; /* Adwaita Named Color */ } +.css_text { + color: @green_1; /* Adwaita Named Color */ +} + .my_custom_class { color: @red_1; font-weight: bold; diff --git a/src/Library/demos/Styling with CSS/main.js b/src/Library/demos/Styling with CSS/main.js new file mode 100644 index 000000000..c37bbcf48 --- /dev/null +++ b/src/Library/demos/Styling with CSS/main.js @@ -0,0 +1,3 @@ +const basic_label = workbench.builder.get_object("basic_label"); + +basic_label.add_css_class("css_text"); diff --git a/src/Library/demos/Styling with CSS/main.json b/src/Library/demos/Styling with CSS/main.json new file mode 100644 index 000000000..a6ec954a3 --- /dev/null +++ b/src/Library/demos/Styling with CSS/main.json @@ -0,0 +1,7 @@ +{ + "name": "Styling with CSS", + "category": "user_interface", + "description": "Change the appearence of widgets", + "panels": ["ui", "style", "preview"], + "autorun": true +}