From b64c29e87ea9813f89070d147c594d9cc051dd51 Mon Sep 17 00:00:00 2001 From: Urtsi Santsi Date: Sun, 24 Sep 2023 03:51:56 +0300 Subject: [PATCH 1/2] Add CSS gradients demo --- src/Library/demos/CSS Gradients/main.blp | 220 ++++++++++++++++++++++ src/Library/demos/CSS Gradients/main.css | 32 ++++ src/Library/demos/CSS Gradients/main.js | 135 +++++++++++++ src/Library/demos/CSS Gradients/main.json | 6 + src/about.js | 1 + 5 files changed, 394 insertions(+) create mode 100644 src/Library/demos/CSS Gradients/main.blp create mode 100644 src/Library/demos/CSS Gradients/main.css create mode 100644 src/Library/demos/CSS Gradients/main.js create mode 100644 src/Library/demos/CSS Gradients/main.json diff --git a/src/Library/demos/CSS Gradients/main.blp b/src/Library/demos/CSS Gradients/main.blp new file mode 100644 index 000000000..abe399e0d --- /dev/null +++ b/src/Library/demos/CSS Gradients/main.blp @@ -0,0 +1,220 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: "CSS Gradients"; + description: _("Generate an image that smoothly fades from one color to another."); + + Box { + orientation: vertical; + halign: center; + + Adw.Bin { + halign: center; + margin-bottom: 18; + + Grid { + row-spacing: 18; + column-spacing: 18; + margin-top: 18; + margin-bottom: 18; + margin-start: 18; + margin-end: 18; + + Frame { + layout { + row: "0"; + column: "0"; + } + + styles [ + "linear", + "circular", + "gradient-card", + ] + } + + Frame { + layout { + row: "0"; + column: "1"; + } + + styles [ + "radial", + "gradient-card", + ] + } + + Frame { + layout { + row: "0"; + column: "2"; + } + + styles [ + "conic", + "gradient-card", + ] + } + + Frame { + layout { + row: "1"; + column: "0"; + } + + styles [ + "repeating-linear", + "circular", + "gradient-card", + ] + } + + Frame { + layout { + row: "1"; + column: "1"; + } + + styles [ + "repeating-radial", + "gradient-card", + ] + } + } + + styles [ + "card", + ] + } + + ListBox { + selection-mode: none; + margin-bottom: 12; + + styles [ + "boxed-list", + ] + + Adw.ActionRow { + [suffix] + Frame { + valign: center; + width-request: 312; + height-request: 140; + margin-top: 18; + margin-bottom: 18; + margin-end: 6; + + styles [ + "background-gradient", + ] + } + } + + Adw.ComboRow combo_row_gradient_type { + title: _("Gradient type"); + model: + StringList list { + strings [_("Linear"), _("Radial"), _("Conic")] + }; + } + + Adw.SpinRow spin_row_angle { + title: _("Angle"); + climb-rate: 0.2; + adjustment: + Adjustment adjustment_angle { + lower: 0; + upper: 360; + step-increment: 10; + value: 90; + }; + } + + Adw.ActionRow { + title: _("First color stop"); + activatable-widget: color_dialog_button_first_color; + + [suffix] + ColorDialogButton color_dialog_button_first_color { + valign: center; + dialog: color_dialog; + rgba: "#e01b24"; + } + } + + Adw.ActionRow { + title: _("Second color stop"); + activatable-widget: color_dialog_button_second_color; + + [suffix] + ColorDialogButton color_dialog_button_second_color { + valign: center; + dialog: color_dialog; + rgba: "#3584e4"; + } + } + + Adw.ActionRow { + title: _("Third color stop"); + activatable-widget: color_dialog_button_third_color; + + [suffix] + ColorDialogButton color_dialog_button_third_color { + valign: center; + dialog: color_dialog; + rgba: "#f6d32d"; + } + } + + Adw.ExpanderRow { + title: _("Generated CSS"); + + Overlay { + $GtkSourceView source_view { + height-request: "50"; + sensitive: "false"; + monospace: "true"; + auto-indent: "true"; + indent-width: "2"; + insert-spaces-instead-of-tabs: "true"; + tab-width: "2"; + buffer: + $GtkSourceBuffer gtksource_buffer { + highlight-syntax: "true"; + }; + } + + [overlay] + Button button_copy_css { + margin-top: 6; + margin-end: 6; + valign: start; + halign: end; + tooltip-text: _("Copy CSS"); + icon-name: "edit-copy-symbolic"; + + styles [ + "flat", + ] + } + } + } + } + + LinkButton { + label: _("Using CSS gradients"); + uri: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients"; + } + + LinkButton { + label: _("Specifications"); + uri: "https://www.w3.org/TR/css-images-3/#gradients"; + } + } +} + +ColorDialog color_dialog { +} diff --git a/src/Library/demos/CSS Gradients/main.css b/src/Library/demos/CSS Gradients/main.css new file mode 100644 index 000000000..5fb6e5cf6 --- /dev/null +++ b/src/Library/demos/CSS Gradients/main.css @@ -0,0 +1,32 @@ +.linear { + background-image: linear-gradient(@red_3, @yellow_3, @blue_3); +} + +.radial { + background-image: radial-gradient(@red_3, @yellow_3, @blue_3); +} + +.conic { + background-image: conic-gradient(@red_3, @yellow_3, @blue_3, @red_3); +} + +.repeating-linear { + background-image: repeating-linear-gradient( + @red_3, + @yellow_3 15%, + @blue_3 30% + ); +} + +.repeating-radial { + background-image: repeating-radial-gradient( + @red_3, + @yellow_3 15%, + @blue_3 30% + ); +} + +.gradient-card { + min-width: 90px; + min-height: 90px; +} diff --git a/src/Library/demos/CSS Gradients/main.js b/src/Library/demos/CSS Gradients/main.js new file mode 100644 index 000000000..77f7d48b7 --- /dev/null +++ b/src/Library/demos/CSS Gradients/main.js @@ -0,0 +1,135 @@ +import Gtk from "gi://Gtk"; +import Gdk from "gi://Gdk"; +import GtkSource from "gi://GtkSource"; +import Adw from "gi://Adw"; + +let css_provider; + +const combo_row_gradient_type = workbench.builder.get_object( + "combo_row_gradient_type", +); +const adjustment_angle = workbench.builder.get_object("adjustment_angle"); +const spin_row_angle = workbench.builder.get_object("spin_row_angle"); +const color_dialog_button_first_color = workbench.builder.get_object( + "color_dialog_button_first_color", +); +const color_dialog_button_second_color = workbench.builder.get_object( + "color_dialog_button_second_color", +); +const color_dialog_button_third_color = workbench.builder.get_object( + "color_dialog_button_third_color", +); +const gtksource_buffer = workbench.builder.get_object("gtksource_buffer"); +const button_copy_css = workbench.builder.get_object("button_copy_css"); + +const clipboard = Gdk.Display.get_default().get_clipboard(); + +button_copy_css.connect("clicked", () => { + clipboard.set(gtksource_buffer.text); +}); + +combo_row_gradient_type.connect("notify::selected", () => { + spin_row_angle.sensitive = combo_row_gradient_type.selected !== 1; + updateGradient(); +}); + +adjustment_angle.connect("value-changed", () => { + updateGradient(); +}); + +color_dialog_button_first_color.connect("notify::rgba", () => { + updateGradient(); +}); + +color_dialog_button_second_color.connect("notify::rgba", () => { + updateGradient(); +}); + +color_dialog_button_third_color.connect("notify::rgba", () => { + updateGradient(); +}); + +function updateGradient() { + const css = getCss(); + gtksource_buffer.set_text(css, -1); + updateCssProvider(css); +} + +function getCss() { + const angle_string = adjustment_angle.value; + const first_color_string = color_dialog_button_first_color.rgba.to_string(); + const second_color_string = color_dialog_button_second_color.rgba.to_string(); + const third_color_string = color_dialog_button_third_color.rgba.to_string(); + + switch (combo_row_gradient_type.selected) { + case 1: + return ` +.background-gradient { + background-image: radial-gradient( + ${first_color_string}, + ${second_color_string}, + ${third_color_string} + ); +} +`; + case 2: + return ` +.background-gradient { + background-image: conic-gradient( + from ${angle_string}deg, + ${first_color_string}, + ${second_color_string}, + ${third_color_string} + ); +} +`; + default: + return ` +.background-gradient { + background-image: linear-gradient( + ${angle_string}deg, + ${first_color_string}, + ${second_color_string}, + ${third_color_string} + ); +} +`; + } +} + +function updateCssProvider(css) { + const display = Gdk.Display.get_default(); + + if (css_provider) { + Gtk.StyleContext.remove_provider_for_display(display, css_provider); + } + + css_provider = new Gtk.CssProvider(); + css_provider.load_from_string(css); + Gtk.StyleContext.add_provider_for_display( + display, + css_provider, + Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION, + ); +} + +const scheme_manager = GtkSource.StyleSchemeManager.get_default(); +const style_manager = Adw.StyleManager.get_default(); +style_manager.connect("notify::dark", () => { + updateColorScheme(); +}); + +function updateColorScheme() { + const scheme = scheme_manager.get_scheme( + style_manager.dark ? "Adwaita-dark" : "Adwaita", + ); + gtksource_buffer.set_style_scheme(scheme); +} + +const language_manager = GtkSource.LanguageManager.get_default(); +const css_language = language_manager.get_language("css"); +gtksource_buffer.set_language(css_language); + +updateColorScheme(); + +updateGradient(); diff --git a/src/Library/demos/CSS Gradients/main.json b/src/Library/demos/CSS Gradients/main.json new file mode 100644 index 000000000..463ec74b8 --- /dev/null +++ b/src/Library/demos/CSS Gradients/main.json @@ -0,0 +1,6 @@ +{ + "category": "user_interface", + "description": "Generate an image that smoothly fades from one color to another.", + "panels": ["style", "preview"], + "autorun": true +} diff --git a/src/about.js b/src/about.js index 3a9394332..e9b3ca783 100644 --- a/src/about.js +++ b/src/about.js @@ -79,6 +79,7 @@ ${getBlueprintVersion()} "Muhammad Bilal https://github.com/mbilal234", "Onkar https://github.com/onkarrai06", "Sabrina Meindlhumer https://github.com/m-sabrina", + "Urtsi Santsi ", // Add yourself as // "John Doe", // or From 8e78a200d01e70ea1fc0ec85e4102ab79d2a2783 Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Mon, 25 Sep 2023 11:55:00 +0200 Subject: [PATCH 2/2] Tweaks --- src/Library/demos/CSS Gradients/main.blp | 57 ++++++------ src/Library/demos/CSS Gradients/main.js | 105 ++++++++++------------- 2 files changed, 70 insertions(+), 92 deletions(-) diff --git a/src/Library/demos/CSS Gradients/main.blp b/src/Library/demos/CSS Gradients/main.blp index abe399e0d..b6b5a94d6 100644 --- a/src/Library/demos/CSS Gradients/main.blp +++ b/src/Library/demos/CSS Gradients/main.blp @@ -1,5 +1,6 @@ using Gtk 4.0; using Adw 1; +using GtkSource 5; Adw.StatusPage { title: "CSS Gradients"; @@ -115,8 +116,7 @@ Adw.StatusPage { Adw.ComboRow combo_row_gradient_type { title: _("Gradient type"); - model: - StringList list { + model: StringList list { strings [_("Linear"), _("Radial"), _("Conic")] }; } @@ -124,8 +124,7 @@ Adw.StatusPage { Adw.SpinRow spin_row_angle { title: _("Angle"); climb-rate: 0.2; - adjustment: - Adjustment adjustment_angle { + adjustment: Adjustment adjustment_angle { lower: 0; upper: 360; step-increment: 10; @@ -135,10 +134,10 @@ Adw.StatusPage { Adw.ActionRow { title: _("First color stop"); - activatable-widget: color_dialog_button_first_color; + activatable-widget: button_color_1; [suffix] - ColorDialogButton color_dialog_button_first_color { + ColorDialogButton button_color_1 { valign: center; dialog: color_dialog; rgba: "#e01b24"; @@ -147,10 +146,10 @@ Adw.StatusPage { Adw.ActionRow { title: _("Second color stop"); - activatable-widget: color_dialog_button_second_color; + activatable-widget: button_color_2; [suffix] - ColorDialogButton color_dialog_button_second_color { + ColorDialogButton button_color_2 { valign: center; dialog: color_dialog; rgba: "#3584e4"; @@ -159,10 +158,10 @@ Adw.StatusPage { Adw.ActionRow { title: _("Third color stop"); - activatable-widget: color_dialog_button_third_color; + activatable-widget: button_color_3; [suffix] - ColorDialogButton color_dialog_button_third_color { + ColorDialogButton button_color_3 { valign: center; dialog: color_dialog; rgba: "#f6d32d"; @@ -173,32 +172,27 @@ Adw.StatusPage { title: _("Generated CSS"); Overlay { - $GtkSourceView source_view { - height-request: "50"; - sensitive: "false"; - monospace: "true"; - auto-indent: "true"; - indent-width: "2"; - insert-spaces-instead-of-tabs: "true"; - tab-width: "2"; - buffer: - $GtkSourceBuffer gtksource_buffer { - highlight-syntax: "true"; - }; - } - [overlay] Button button_copy_css { - margin-top: 6; + margin-bottom: 6; margin-end: 6; - valign: start; + valign: end; halign: end; - tooltip-text: _("Copy CSS"); + tooltip-text: _("Copy"); icon-name: "edit-copy-symbolic"; + styles ["flat"] + } - styles [ - "flat", - ] + GtkSource.View source_view { + top-margin: 6; + bottom-margin: 6; + left-margin: 6; + right-margin: 6; + editable: false; + monospace: true; + buffer: GtkSource.Buffer gtksource_buffer { + highlight-syntax: true; + }; } } } @@ -216,5 +210,4 @@ Adw.StatusPage { } } -ColorDialog color_dialog { -} +ColorDialog color_dialog {} diff --git a/src/Library/demos/CSS Gradients/main.js b/src/Library/demos/CSS Gradients/main.js index 77f7d48b7..faded0145 100644 --- a/src/Library/demos/CSS Gradients/main.js +++ b/src/Library/demos/CSS Gradients/main.js @@ -10,91 +10,69 @@ const combo_row_gradient_type = workbench.builder.get_object( ); const adjustment_angle = workbench.builder.get_object("adjustment_angle"); const spin_row_angle = workbench.builder.get_object("spin_row_angle"); -const color_dialog_button_first_color = workbench.builder.get_object( - "color_dialog_button_first_color", -); -const color_dialog_button_second_color = workbench.builder.get_object( - "color_dialog_button_second_color", -); -const color_dialog_button_third_color = workbench.builder.get_object( - "color_dialog_button_third_color", -); +const button_color_1 = workbench.builder.get_object("button_color_1"); +const button_color_2 = workbench.builder.get_object("button_color_2"); +const button_color_3 = workbench.builder.get_object("button_color_3"); const gtksource_buffer = workbench.builder.get_object("gtksource_buffer"); const button_copy_css = workbench.builder.get_object("button_copy_css"); -const clipboard = Gdk.Display.get_default().get_clipboard(); - -button_copy_css.connect("clicked", () => { - clipboard.set(gtksource_buffer.text); -}); +combo_row_gradient_type.connect("notify::selected", update); +adjustment_angle.connect("value-changed", update); +button_color_1.connect("notify::rgba", update); +button_color_2.connect("notify::rgba", update); +button_color_3.connect("notify::rgba", update); -combo_row_gradient_type.connect("notify::selected", () => { +function update() { spin_row_angle.sensitive = combo_row_gradient_type.selected !== 1; - updateGradient(); -}); - -adjustment_angle.connect("value-changed", () => { - updateGradient(); -}); - -color_dialog_button_first_color.connect("notify::rgba", () => { - updateGradient(); -}); - -color_dialog_button_second_color.connect("notify::rgba", () => { - updateGradient(); -}); - -color_dialog_button_third_color.connect("notify::rgba", () => { - updateGradient(); -}); - -function updateGradient() { - const css = getCss(); + const css = generateCss(); gtksource_buffer.set_text(css, -1); updateCssProvider(css); } +update(); -function getCss() { +function generateCss() { const angle_string = adjustment_angle.value; - const first_color_string = color_dialog_button_first_color.rgba.to_string(); - const second_color_string = color_dialog_button_second_color.rgba.to_string(); - const third_color_string = color_dialog_button_third_color.rgba.to_string(); + const first_color_string = button_color_1.rgba.to_string(); + const second_color_string = button_color_2.rgba.to_string(); + const third_color_string = button_color_3.rgba.to_string(); - switch (combo_row_gradient_type.selected) { - case 1: - return ` + let css = ""; + + console.log(combo_row_gradient_type.selected); + + if (combo_row_gradient_type.selected === 0) { + css = ` .background-gradient { - background-image: radial-gradient( + background-image: linear-gradient( + ${angle_string}deg, ${first_color_string}, ${second_color_string}, ${third_color_string} ); -} -`; - case 2: - return ` +}`; + } else if (combo_row_gradient_type.selected === 1) { + css = ` .background-gradient { - background-image: conic-gradient( - from ${angle_string}deg, + background-image: radial-gradient( ${first_color_string}, ${second_color_string}, ${third_color_string} ); } `; - default: - return ` + } else if (combo_row_gradient_type.selected === 2) { + css = ` .background-gradient { - background-image: linear-gradient( - ${angle_string}deg, + background-image: conic-gradient( + from ${angle_string}deg, ${first_color_string}, ${second_color_string}, ${third_color_string} ); -} -`; +}`; } + + return css.trimStart(); } function updateCssProvider(css) { @@ -113,6 +91,16 @@ function updateCssProvider(css) { ); } +/* + * code view + */ + +const clipboard = Gdk.Display.get_default().get_clipboard(); + +button_copy_css.connect("clicked", () => { + clipboard.set(gtksource_buffer.text); +}); + const scheme_manager = GtkSource.StyleSchemeManager.get_default(); const style_manager = Adw.StyleManager.get_default(); style_manager.connect("notify::dark", () => { @@ -125,11 +113,8 @@ function updateColorScheme() { ); gtksource_buffer.set_style_scheme(scheme); } +updateColorScheme(); const language_manager = GtkSource.LanguageManager.get_default(); const css_language = language_manager.get_language("css"); gtksource_buffer.set_language(css_language); - -updateColorScheme(); - -updateGradient();