From 2be1bc04aa41cde70cf520cd4340eed60a69897d Mon Sep 17 00:00:00 2001 From: Brage Fuglseth Date: Sun, 5 Mar 2023 13:28:16 +0100 Subject: [PATCH 1/3] Add Text Colors demo --- src/Library/demos/Text Colors/main.blp | 20 ++++++++++ src/Library/demos/Text Colors/main.js | 49 +++++++++++++++++++++++++ src/Library/demos/Text Colors/main.json | 7 ++++ 3 files changed, 76 insertions(+) create mode 100644 src/Library/demos/Text Colors/main.blp create mode 100644 src/Library/demos/Text Colors/main.js create mode 100644 src/Library/demos/Text Colors/main.json diff --git a/src/Library/demos/Text Colors/main.blp b/src/Library/demos/Text Colors/main.blp new file mode 100644 index 000000000..55f1c1809 --- /dev/null +++ b/src/Library/demos/Text Colors/main.blp @@ -0,0 +1,20 @@ +using Gtk 4.0; + +Box main { + orientation: vertical; + halign: center; + valign: center; + spacing: 12; + + Label label { + label: "Hello, Rainbow!"; + + styles [ + "title-1", + ] + } + + Label { + label: "Colored with Pango attributes"; + } +} diff --git a/src/Library/demos/Text Colors/main.js b/src/Library/demos/Text Colors/main.js new file mode 100644 index 000000000..3a6636de7 --- /dev/null +++ b/src/Library/demos/Text Colors/main.js @@ -0,0 +1,49 @@ +// Pango is a text layout library. It can be used for e.g. formatting text +// https://gjs-docs.gnome.org/pango10~1.0/ +import Pango from "gi://Pango?version=1.0"; + +const label = workbench.builder.get_object("label"); +const label_content = label.label; +// A Pango Attribute List is used to style the label +label.attributes = rainbow_attributes(label_content); + +// Generates an Attribute List that styles the label in rainbow colors. +// The `str` parameter is needed to detect string length + position of spaces +function rainbow_attributes(str) { + const RAINBOW_COLORS = [ + "#D00", + "#C50", + "#E90", + "#090", + "#24E", + "#55E", + "#C3C", + ]; + + // Create a color array with the length needed to color all the letters + let colorArray = []; + for (let i = 0; i < str.length; i = colorArray.length) { + colorArray.push(...RAINBOW_COLORS); + } + // Independent variable from `i` in the following loop to avoid spaces "consuming" a color + let colorIdx = 0; + + let attrListString = ""; + for (let i = 0; i < str.length; i++) { + // Skip space characters + if (str[i] !== " ") { + let startIdx = i; + let endIdx = [i + 1]; + + let color = colorArray[colorIdx]; + colorIdx++; + // See comment below + attrListString += `${startIdx} ${endIdx} foreground ${color},`; + } + } + + // For more info about the syntax for this function, see: + // https://docs.gtk.org/Pango/method.AttrList.to_string.html + return Pango.attr_list_from_string(attrListString); +} + diff --git a/src/Library/demos/Text Colors/main.json b/src/Library/demos/Text Colors/main.json new file mode 100644 index 000000000..e039b97ad --- /dev/null +++ b/src/Library/demos/Text Colors/main.json @@ -0,0 +1,7 @@ +{ + "name": "Text Colors", + "category": "user_interface", + "description": "Color text programatically with Pango", + "panels": ["code", "preview"], + "autorun": true +} From aac1675a0f2ff9c027740c11392830a6d15873c6 Mon Sep 17 00:00:00 2001 From: Brage Fuglseth Date: Sun, 5 Mar 2023 13:39:18 +0100 Subject: [PATCH 2/3] Add myself (Brage) to the contributors section --- src/about.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/about.js b/src/about.js index c4e469290..ba69184e2 100644 --- a/src/about.js +++ b/src/about.js @@ -51,6 +51,7 @@ ${getBlueprintVersion()} dialog.add_credit_section(_("Contributors"), [ "Ben Foote http://www.bengineeri.ng", + "Brage Fuglseth https://bragefuglseth.dev", "Hari Rana (TheEvilSkeleton) https://theevilskeleton.gitlab.io", "Sriyansh Shivam https://linktr.ee/sonic_here", // Add yourself as From 05f2230a974a8d78b9ddd07eae568f3b3a532e74 Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Tue, 7 Mar 2023 20:33:22 +0100 Subject: [PATCH 3/3] make interactive --- src/Library/demos/Text Colors/main.blp | 9 ++++++++- src/Library/demos/Text Colors/main.js | 10 +++++++--- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/Library/demos/Text Colors/main.blp b/src/Library/demos/Text Colors/main.blp index 55f1c1809..d08f6714d 100644 --- a/src/Library/demos/Text Colors/main.blp +++ b/src/Library/demos/Text Colors/main.blp @@ -7,7 +7,7 @@ Box main { spacing: 12; Label label { - label: "Hello, Rainbow!"; + label: bind entry.text; styles [ "title-1", @@ -17,4 +17,11 @@ Box main { Label { label: "Colored with Pango attributes"; } + + Entry entry { + margin-top: 12; + text: "Hello, Rainbow!"; + halign: center; + } } + diff --git a/src/Library/demos/Text Colors/main.js b/src/Library/demos/Text Colors/main.js index 3a6636de7..d8d0b9b72 100644 --- a/src/Library/demos/Text Colors/main.js +++ b/src/Library/demos/Text Colors/main.js @@ -3,9 +3,13 @@ import Pango from "gi://Pango?version=1.0"; const label = workbench.builder.get_object("label"); -const label_content = label.label; -// A Pango Attribute List is used to style the label -label.attributes = rainbow_attributes(label_content); +label.connect("notify::label", updateAttributes); +updateAttributes(); + +function updateAttributes() { + // A Pango Attribute List is used to style the label + label.attributes = rainbow_attributes(label.label); +} // Generates an Attribute List that styles the label in rainbow colors. // The `str` parameter is needed to detect string length + position of spaces