diff --git a/src/Library/demos/Text Colors/main.blp b/src/Library/demos/Text Colors/main.blp new file mode 100644 index 000000000..d08f6714d --- /dev/null +++ b/src/Library/demos/Text Colors/main.blp @@ -0,0 +1,27 @@ +using Gtk 4.0; + +Box main { + orientation: vertical; + halign: center; + valign: center; + spacing: 12; + + Label label { + label: bind entry.text; + + styles [ + "title-1", + ] + } + + 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 new file mode 100644 index 000000000..d8d0b9b72 --- /dev/null +++ b/src/Library/demos/Text Colors/main.js @@ -0,0 +1,53 @@ +// 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"); +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 +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 +} 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