Skip to content

Commit b64c29e

Browse files
UrtsiSantsiUrtsiSantsi
committed
Add CSS gradients demo
1 parent 6c2f927 commit b64c29e

File tree

5 files changed

+394
-0
lines changed

5 files changed

+394
-0
lines changed

‎src/Library/demos/CSS Gradients/main.blp

+220
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
using Gtk 4.0;
2+
using Adw 1;
3+
4+
Adw.StatusPage {
5+
title: "CSS Gradients";
6+
description: _("Generate an image that smoothly fades from one color to another.");
7+
8+
Box {
9+
orientation: vertical;
10+
halign: center;
11+
12+
Adw.Bin {
13+
halign: center;
14+
margin-bottom: 18;
15+
16+
Grid {
17+
row-spacing: 18;
18+
column-spacing: 18;
19+
margin-top: 18;
20+
margin-bottom: 18;
21+
margin-start: 18;
22+
margin-end: 18;
23+
24+
Frame {
25+
layout {
26+
row: "0";
27+
column: "0";
28+
}
29+
30+
styles [
31+
"linear",
32+
"circular",
33+
"gradient-card",
34+
]
35+
}
36+
37+
Frame {
38+
layout {
39+
row: "0";
40+
column: "1";
41+
}
42+
43+
styles [
44+
"radial",
45+
"gradient-card",
46+
]
47+
}
48+
49+
Frame {
50+
layout {
51+
row: "0";
52+
column: "2";
53+
}
54+
55+
styles [
56+
"conic",
57+
"gradient-card",
58+
]
59+
}
60+
61+
Frame {
62+
layout {
63+
row: "1";
64+
column: "0";
65+
}
66+
67+
styles [
68+
"repeating-linear",
69+
"circular",
70+
"gradient-card",
71+
]
72+
}
73+
74+
Frame {
75+
layout {
76+
row: "1";
77+
column: "1";
78+
}
79+
80+
styles [
81+
"repeating-radial",
82+
"gradient-card",
83+
]
84+
}
85+
}
86+
87+
styles [
88+
"card",
89+
]
90+
}
91+
92+
ListBox {
93+
selection-mode: none;
94+
margin-bottom: 12;
95+
96+
styles [
97+
"boxed-list",
98+
]
99+
100+
Adw.ActionRow {
101+
[suffix]
102+
Frame {
103+
valign: center;
104+
width-request: 312;
105+
height-request: 140;
106+
margin-top: 18;
107+
margin-bottom: 18;
108+
margin-end: 6;
109+
110+
styles [
111+
"background-gradient",
112+
]
113+
}
114+
}
115+
116+
Adw.ComboRow combo_row_gradient_type {
117+
title: _("Gradient type");
118+
model:
119+
StringList list {
120+
strings [_("Linear"), _("Radial"), _("Conic")]
121+
};
122+
}
123+
124+
Adw.SpinRow spin_row_angle {
125+
title: _("Angle");
126+
climb-rate: 0.2;
127+
adjustment:
128+
Adjustment adjustment_angle {
129+
lower: 0;
130+
upper: 360;
131+
step-increment: 10;
132+
value: 90;
133+
};
134+
}
135+
136+
Adw.ActionRow {
137+
title: _("First color stop");
138+
activatable-widget: color_dialog_button_first_color;
139+
140+
[suffix]
141+
ColorDialogButton color_dialog_button_first_color {
142+
valign: center;
143+
dialog: color_dialog;
144+
rgba: "#e01b24";
145+
}
146+
}
147+
148+
Adw.ActionRow {
149+
title: _("Second color stop");
150+
activatable-widget: color_dialog_button_second_color;
151+
152+
[suffix]
153+
ColorDialogButton color_dialog_button_second_color {
154+
valign: center;
155+
dialog: color_dialog;
156+
rgba: "#3584e4";
157+
}
158+
}
159+
160+
Adw.ActionRow {
161+
title: _("Third color stop");
162+
activatable-widget: color_dialog_button_third_color;
163+
164+
[suffix]
165+
ColorDialogButton color_dialog_button_third_color {
166+
valign: center;
167+
dialog: color_dialog;
168+
rgba: "#f6d32d";
169+
}
170+
}
171+
172+
Adw.ExpanderRow {
173+
title: _("Generated CSS");
174+
175+
Overlay {
176+
$GtkSourceView source_view {
177+
height-request: "50";
178+
sensitive: "false";
179+
monospace: "true";
180+
auto-indent: "true";
181+
indent-width: "2";
182+
insert-spaces-instead-of-tabs: "true";
183+
tab-width: "2";
184+
buffer:
185+
$GtkSourceBuffer gtksource_buffer {
186+
highlight-syntax: "true";
187+
};
188+
}
189+
190+
[overlay]
191+
Button button_copy_css {
192+
margin-top: 6;
193+
margin-end: 6;
194+
valign: start;
195+
halign: end;
196+
tooltip-text: _("Copy CSS");
197+
icon-name: "edit-copy-symbolic";
198+
199+
styles [
200+
"flat",
201+
]
202+
}
203+
}
204+
}
205+
}
206+
207+
LinkButton {
208+
label: _("Using CSS gradients");
209+
uri: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients";
210+
}
211+
212+
LinkButton {
213+
label: _("Specifications");
214+
uri: "https://www.w3.org/TR/css-images-3/#gradients";
215+
}
216+
}
217+
}
218+
219+
ColorDialog color_dialog {
220+
}

‎src/Library/demos/CSS Gradients/main.css

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.linear {
2+
background-image: linear-gradient(@red_3, @yellow_3, @blue_3);
3+
}
4+
5+
.radial {
6+
background-image: radial-gradient(@red_3, @yellow_3, @blue_3);
7+
}
8+
9+
.conic {
10+
background-image: conic-gradient(@red_3, @yellow_3, @blue_3, @red_3);
11+
}
12+
13+
.repeating-linear {
14+
background-image: repeating-linear-gradient(
15+
@red_3,
16+
@yellow_3 15%,
17+
@blue_3 30%
18+
);
19+
}
20+
21+
.repeating-radial {
22+
background-image: repeating-radial-gradient(
23+
@red_3,
24+
@yellow_3 15%,
25+
@blue_3 30%
26+
);
27+
}
28+
29+
.gradient-card {
30+
min-width: 90px;
31+
min-height: 90px;
32+
}

‎src/Library/demos/CSS Gradients/main.js

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import Gtk from "gi://Gtk";
2+
import Gdk from "gi://Gdk";
3+
import GtkSource from "gi://GtkSource";
4+
import Adw from "gi://Adw";
5+
6+
let css_provider;
7+
8+
const combo_row_gradient_type = workbench.builder.get_object(
9+
"combo_row_gradient_type",
10+
);
11+
const adjustment_angle = workbench.builder.get_object("adjustment_angle");
12+
const spin_row_angle = workbench.builder.get_object("spin_row_angle");
13+
const color_dialog_button_first_color = workbench.builder.get_object(
14+
"color_dialog_button_first_color",
15+
);
16+
const color_dialog_button_second_color = workbench.builder.get_object(
17+
"color_dialog_button_second_color",
18+
);
19+
const color_dialog_button_third_color = workbench.builder.get_object(
20+
"color_dialog_button_third_color",
21+
);
22+
const gtksource_buffer = workbench.builder.get_object("gtksource_buffer");
23+
const button_copy_css = workbench.builder.get_object("button_copy_css");
24+
25+
const clipboard = Gdk.Display.get_default().get_clipboard();
26+
27+
button_copy_css.connect("clicked", () => {
28+
clipboard.set(gtksource_buffer.text);
29+
});
30+
31+
combo_row_gradient_type.connect("notify::selected", () => {
32+
spin_row_angle.sensitive = combo_row_gradient_type.selected !== 1;
33+
updateGradient();
34+
});
35+
36+
adjustment_angle.connect("value-changed", () => {
37+
updateGradient();
38+
});
39+
40+
color_dialog_button_first_color.connect("notify::rgba", () => {
41+
updateGradient();
42+
});
43+
44+
color_dialog_button_second_color.connect("notify::rgba", () => {
45+
updateGradient();
46+
});
47+
48+
color_dialog_button_third_color.connect("notify::rgba", () => {
49+
updateGradient();
50+
});
51+
52+
function updateGradient() {
53+
const css = getCss();
54+
gtksource_buffer.set_text(css, -1);
55+
updateCssProvider(css);
56+
}
57+
58+
function getCss() {
59+
const angle_string = adjustment_angle.value;
60+
const first_color_string = color_dialog_button_first_color.rgba.to_string();
61+
const second_color_string = color_dialog_button_second_color.rgba.to_string();
62+
const third_color_string = color_dialog_button_third_color.rgba.to_string();
63+
64+
switch (combo_row_gradient_type.selected) {
65+
case 1:
66+
return `
67+
.background-gradient {
68+
background-image: radial-gradient(
69+
${first_color_string},
70+
${second_color_string},
71+
${third_color_string}
72+
);
73+
}
74+
`;
75+
case 2:
76+
return `
77+
.background-gradient {
78+
background-image: conic-gradient(
79+
from ${angle_string}deg,
80+
${first_color_string},
81+
${second_color_string},
82+
${third_color_string}
83+
);
84+
}
85+
`;
86+
default:
87+
return `
88+
.background-gradient {
89+
background-image: linear-gradient(
90+
${angle_string}deg,
91+
${first_color_string},
92+
${second_color_string},
93+
${third_color_string}
94+
);
95+
}
96+
`;
97+
}
98+
}
99+
100+
function updateCssProvider(css) {
101+
const display = Gdk.Display.get_default();
102+
103+
if (css_provider) {
104+
Gtk.StyleContext.remove_provider_for_display(display, css_provider);
105+
}
106+
107+
css_provider = new Gtk.CssProvider();
108+
css_provider.load_from_string(css);
109+
Gtk.StyleContext.add_provider_for_display(
110+
display,
111+
css_provider,
112+
Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION,
113+
);
114+
}
115+
116+
const scheme_manager = GtkSource.StyleSchemeManager.get_default();
117+
const style_manager = Adw.StyleManager.get_default();
118+
style_manager.connect("notify::dark", () => {
119+
updateColorScheme();
120+
});
121+
122+
function updateColorScheme() {
123+
const scheme = scheme_manager.get_scheme(
124+
style_manager.dark ? "Adwaita-dark" : "Adwaita",
125+
);
126+
gtksource_buffer.set_style_scheme(scheme);
127+
}
128+
129+
const language_manager = GtkSource.LanguageManager.get_default();
130+
const css_language = language_manager.get_language("css");
131+
gtksource_buffer.set_language(css_language);
132+
133+
updateColorScheme();
134+
135+
updateGradient();

‎src/Library/demos/CSS Gradients/main.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"category": "user_interface",
3+
"description": "Generate an image that smoothly fades from one color to another.",
4+
"panels": ["style", "preview"],
5+
"autorun": true
6+
}

0 commit comments

Comments
 (0)