Skip to content

Rewrite CSS loading #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 29, 2025
Merged

Rewrite CSS loading #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 134 additions & 0 deletions data/Application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,135 @@
@define-color textColorPrimary #323232;

window {
transition: background-color 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

undershoot.top {
transition: background 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

undershoot.bottom {
transition: background 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.jorts-view text selection {
transition: color 800ms cubic-bezier(0.4, 0, 0.2, 1);
transition: background-color 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.jorts-title image,
.jorts-label {
box-shadow: none;
transition: color 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.jorts-bar {
box-shadow: none;
background: transparent;
padding: 3px;
}

.jorts-bar image {
padding: 3px;
box-shadow: none;
background-image: none;
}

.jorts-view,
.jorts-view text,
.jorts-title {
background-image: none;
font-weight: 500;
font-size: 1.2em;
box-shadow: none;
transition: background-color 800ms cubic-bezier(0.4, 0, 0.2, 1);
/*transition: color 800ms cubic-bezier(0.4, 0, 0.2, 1);*/
}

entry.flat {
background: transparent;
}

.color-button {
border-radius: 50%;
background-image: none;
border: 1px solid alpha(#333, 0.25);
box-shadow:
inset 0 1px 0 0 alpha (@inset_dark_color, 0.7),
inset 0 0 0 1px alpha (@inset_dark_color, 0.3),
0 1px 0 0 alpha (@bg_highlight_color, 0.3);
}

.color-button:hover,
.color-button:focus {
border: 1px solid @inset_dark_color;
}

.color-button.slate {
background-color: @SLATE_100;
}

.color-button.silver {
background-color: @SILVER_100;
}

.color-button.strawberry {
background-color: @STRAWBERRY_100;
}

.color-button.orange {
background-color: @ORANGE_100;
}

.color-button.banana {
background-color: @BANANA_100;
}

.color-button.lime {
background-color: @LIME_100;
}

.color-button.blueberry {
background-color: @BLUEBERRY_100;
}

.color-button.grape {
background-color: @GRAPE_100;
}

.color-button.cocoa {
background-color: @COCOA_100;
}

.jorts-bar box {
border: none;
}

.image-button,
.titlebutton {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
padding: 3px;
box-shadow: none;
}

.image-button:hover,
.image-button:focus,
.titlebutton:hover,
.titlebutton:focus {
background-color: alpha(@fg_color, 0.3);
background-image: none;
border: 1px solid transparent;
box-shadow: none;
}

.jorts-label {
font-weight: 700;
font-size: 0.88em;
}

.trashcan:hover {
transition: background-color 800ms cubic-bezier(0.4, 0, 0.2, 1);
color: @warning;
}
48 changes: 46 additions & 2 deletions src/Application.vala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,51 @@ namespace jorts {
Object (flags: ApplicationFlags.HANDLES_COMMAND_LINE,
application_id: "io.github.ellie_commons.jorts");
}


public override void startup () {
base.startup ();

// This is automatic in GTK4, so can be removed after porting
var app_provider = new Gtk.CssProvider ();
app_provider.load_from_resource ("/io/github/ellie_commons/jorts/Application.css");
Gtk.StyleContext.add_provider_for_screen (
Gdk.Screen.get_default (),
app_provider,
Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
);

string[] themes = {
"BANANA",
"BLUEBERRY",
"BUBBLEGUM",
"COCOA",
"GRAPE",
"LIME",
"ORANGE",
"SILVER",
"SLATE",
"STRAWBERRY"
};

foreach (unowned var theme in themes) {
// Palette color
var theme_provider = new Gtk.CssProvider ();
var style = jorts.Themer.generate_css (theme);

try {
theme_provider.load_from_data (style, -1);
} catch (GLib.Error e) {
warning ("Failed to parse css style : %s", e.message);
}

Gtk.StyleContext.add_provider_for_screen (
Gdk.Screen.get_default (),
theme_provider,
Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
);
}
}

static construct {
gsettings = new GLib.Settings ("io.github.ellie_commons.jorts");
}
Expand Down Expand Up @@ -143,4 +187,4 @@ namespace jorts {
return app.run(args);
}
}
}
}
57 changes: 28 additions & 29 deletions src/MainWindow.vala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ namespace jorts {
color_button_strawberry.width_request = 24;
color_button_strawberry.tooltip_text = _("Strawberry");
color_button_strawberry.get_style_context ().add_class ("color-button");
color_button_strawberry.get_style_context ().add_class ("color-strawberry");
color_button_strawberry.get_style_context ().add_class ("strawberry");

var color_button_orange = new Gtk.Button ();
color_button_orange.has_focus = false;
Expand All @@ -249,7 +249,7 @@ namespace jorts {

var color_button_orange_context = color_button_orange.get_style_context ();
color_button_orange_context.add_class ("color-button");
color_button_orange_context.add_class ("color-orange");
color_button_orange_context.add_class ("orange");

var color_button_banana = new Gtk.Button ();
color_button_banana.has_focus = false;
Expand All @@ -260,7 +260,7 @@ namespace jorts {

var color_button_banana_context = color_button_banana.get_style_context ();
color_button_banana_context.add_class ("color-button");
color_button_banana_context.add_class ("color-banana");
color_button_banana_context.add_class ("banana");

var color_button_lime = new Gtk.Button ();
color_button_lime.has_focus = false;
Expand All @@ -271,7 +271,7 @@ namespace jorts {

var color_button_lime_context = color_button_lime.get_style_context ();
color_button_lime_context.add_class ("color-button");
color_button_lime_context.add_class ("color-lime");
color_button_lime_context.add_class ("lime");

var color_button_blueberry = new Gtk.Button ();
color_button_blueberry.has_focus = false;
Expand All @@ -282,7 +282,7 @@ namespace jorts {

var color_button_blueberry_context = color_button_blueberry.get_style_context ();
color_button_blueberry_context.add_class ("color-button");
color_button_blueberry_context.add_class ("color-blueberry");
color_button_blueberry_context.add_class ("blueberry");


var color_button_bubblegum = new Gtk.Button ();
Expand All @@ -294,7 +294,7 @@ namespace jorts {

var color_button_bubblegum_context = color_button_blueberry.get_style_context ();
color_button_bubblegum_context.add_class ("color-button");
color_button_bubblegum_context.add_class ("color-bubblegum");
color_button_bubblegum_context.add_class ("bubblegum");


var color_button_grape = new Gtk.Button ();
Expand All @@ -306,7 +306,7 @@ namespace jorts {

var color_button_grape_context = color_button_grape.get_style_context ();
color_button_grape_context.add_class ("color-button");
color_button_grape_context.add_class ("color-grape");
color_button_grape_context.add_class ("grape");

var color_button_cocoa = new Gtk.Button ();
color_button_cocoa.has_focus = false;
Expand All @@ -317,7 +317,7 @@ namespace jorts {

var color_button_cocoa_context = color_button_cocoa.get_style_context ();
color_button_cocoa_context.add_class ("color-button");
color_button_cocoa_context.add_class ("color-cocoa");
color_button_cocoa_context.add_class ("cocoa");

var color_button_silver = new Gtk.Button ();
color_button_silver.has_focus = false;
Expand All @@ -328,7 +328,7 @@ namespace jorts {

var color_button_silver_context = color_button_silver.get_style_context ();
color_button_silver_context.add_class ("color-button");
color_button_silver_context.add_class ("color-silver");
color_button_silver_context.add_class ("silver");


var color_button_slate = new Gtk.Button ();
Expand All @@ -340,7 +340,7 @@ namespace jorts {

var color_button_slate_context = color_button_slate.get_style_context ();
color_button_slate_context.add_class ("color-button");
color_button_slate_context.add_class ("color-slate");
color_button_slate_context.add_class ("slate");

var color_button_box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6);
// GTK4: append
Expand Down Expand Up @@ -526,27 +526,26 @@ namespace jorts {
// And then this reconstructs a whole ass theme out of these two
// Either it can be a service, or just all defined in CSS and add/remove css
private void update_theme(string theme) {
print(uid.to_string ());

this.get_style_context().add_class("mainwindow-%d".printf(uid));
this.get_style_context().add_class("window-%d".printf(uid));

// Palette color
var css_provider = new Gtk.CssProvider();
var style = jorts.Themer.generate_css(uid,theme);

try {
css_provider.load_from_data(style, -1);

} catch (GLib.Error e) {
warning ("Failed to parse css style : %s", e.message);
}
// in GTK4 we can replace this with setting css_classes
string[] themes = {
"BANANA",
"BLUEBERRY",
"BUBBLEGUM",
"COCOA",
"GRAPE",
"LIME",
"ORANGE",
"SILVER",
"SLATE",
"STRAWBERRY"
};

foreach (unowned var old_theme in themes) {
get_style_context().remove_class (old_theme);
}

Gtk.StyleContext.add_provider_for_screen (
Gdk.Screen.get_default (),
css_provider,
Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
);
get_style_context().add_class (theme);
}
}

Expand Down
Loading