Skip to content

Commit

Permalink
Styles: Gtk4 prep
Browse files Browse the repository at this point in the history
  • Loading branch information
danirabbit committed Feb 22, 2024
1 parent 992f1a7 commit 74d4671
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 51 deletions.
158 changes: 138 additions & 20 deletions data/Display.css
Original file line number Diff line number Diff line change
@@ -1,42 +1,160 @@
/* For better dark style support */
@define-color BG_COLOR_ALPHA alpha(@BG_COLOR, 0.75);

.colored {
background-color: @BG_COLOR_ALPHA;
color: @TEXT_COLOR;
display-widget {
border-radius: 3px;
text-shadow: 0 1px 1px alpha(white, 0.1);
-gtk-icon-shadow: 0 1px 1px alpha(white, 0.1);
-gtk-icon-palette: warning white;
}

widget.colored {
border: 1px solid mix(@BG_COLOR_ALPHA, @TEXT_COLOR, 0.3);
display-widget > grid > label {
font-weight: 600;
}

.colored button {
background: transparent; /* Fix stacking alpha on top of each other */
display-widget button {
border-radius: 50%;
color: inherit;
padding: 6px;
}

.colored button:focus {
background: alpha(@TEXT_COLOR, 0.25);
}

.colored button:checked {
background: alpha(@TEXT_COLOR, 0.5);
border-color: transparent;
/*Clear icon palette*/
display-widget image {
-gtk-icon-palette: sucess @text_color;
}

.colored.disabled {
display-widget.disabled {
background-color: @SLATE_100;
color: @SLATE_700;
}

.colored.disabled button:focus {
display-widget.disabled button:focus {
background: alpha(@SLATE_700, 0.25);
}

.colored.disabled button:checked {
display-widget.disabled button:checked {
background: alpha(@SLATE_700, 0.5);
}

display-widget.color-0 {
background-color: alpha(@BLUEBERRY_100, 0.75);
border: 1px solid alpha(@BLUEBERRY_500, 0.75);
color: @BLUEBERRY_900;
}

display-widget.color-0 button {
-gtk-icon-pallete: warning @BLUEBERRY_900;
}

display-widget.color-0 button:focus {
background: @BLUEBERRY_300;
}

display-widget.color-0 button:checked {
background: alpha(@BLUEBERRY_500, 0.75);
}

display-widget.color-1 {
background-color: alpha(@STRAWBERRY_100, 0.75);
border: 1px solid alpha(@STRAWBERRY_500, 0.75);
color: @STRAWBERRY_900;
}

display-widget.color-1 button {
-gtk-icon-pallete: warning @STRAWBERRY_900;
}

display-widget.color-1 button:focus {
background: @STRAWBERRY_300;
}

display-widget.color-1 button:checked {
background: alpha(@STRAWBERRY_500, 0.75);
}

display-widget.color-2 {
background-color: alpha(@ORANGE_100, 0.75);
border: 1px solid alpha(@ORANGE_500, 0.75);
color: @ORANGE_900;
}

display-widget.color-2 button {
-gtk-icon-pallete: warning @ORANGE_900;
}

display-widget.color-2 button:focus {
background: @ORANGE_300;
}

display-widget.color-2 button:checked {
background: alpha(@ORANGE_500, 0.75);
}

display-widget.color-3 {
background-color: alpha(@BANANA_100, 0.75);
border: 1px solid alpha(@BANANA_500, 0.75);
color: @BANANA_900;
}

display-widget.color-3 button {
-gtk-icon-pallete: warning @BANANA_900;
}

display-widget.color-3 button:focus {
background: @BANANA_300;
}

display-widget.color-3 button:checked {
background: alpha(@BANANA_500, 0.75);
}

display-widget.color-4 {
background-color: alpha(@LIME_100, 0.75);
border: 1px solid alpha(@LIME_500, 0.75);
color: @LIME_900;
}

display-widget.color-4 button {
-gtk-icon-pallete: warning @LIME_900;
}

display-widget.color-4 button:focus {
background: @LIME_300;
}

display-widget.color-4 button:checked {
background: alpha(@LIME_500, 0.75);
}

display-widget.color-5 {
background-color: alpha(@GRAPE_100, 0.75);
border: 1px solid alpha(@GRAPE_500, 0.75);
color: @GRAPE_900;
}

display-widget.color-5 button {
-gtk-icon-pallete: warning @GRAPE_900;
}

display-widget.color-5 button:focus {
background: @GRAPE_300;
}

display-widget.color-5 button:checked {
background: alpha(@GRAPE_500, 0.75);
}

display-widget.color-6 {
background-color: alpha(@COCOA_100, 0.75);
border: 1px solid alpha(@COCOA_500, 0.75);
color: @COCOA_900;
}

display-widget.color-6 button {
-gtk-icon-pallete: warning @COCOA_900;
}

display-widget.color-6 button:focus {
background: @COCOA_300;
}

display-widget.color-6 button:checked {
background: alpha(@COCOA_500, 0.75);
}
4 changes: 4 additions & 0 deletions src/Widgets/DisplayWidget.vala
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,10 @@ public class Display.DisplayWidget : Gtk.EventBox {
);
}

class construct {
set_css_name ("display-widget");
}

construct {
virtual_monitor.get_current_mode_size (out real_width, out real_height);

Expand Down
40 changes: 9 additions & 31 deletions src/Widgets/DisplaysOverlay.vala
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,6 @@ public class Display.DisplaysOverlay : Gtk.Overlay {
}
}

private static Gtk.CssProvider display_provider;

private static string[] colors = {
"@BLUEBERRY_100",
"@STRAWBERRY_100",
Expand All @@ -71,11 +69,6 @@ public class Display.DisplaysOverlay : Gtk.Overlay {
"@COCOA_900"
};

const string COLORED_STYLE_CSS = """
@define-color BG_COLOR %s;
@define-color TEXT_COLOR %s;
""";

private Gtk.GestureDrag drag_gesture;

construct {
Expand All @@ -99,9 +92,15 @@ public class Display.DisplaysOverlay : Gtk.Overlay {
}

static construct {
display_provider = new Gtk.CssProvider ();
var display_provider = new Gtk.CssProvider ();
display_provider.load_from_resource ("io/elementary/switchboard/display/Display.css");

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

GLib.Bus.get_proxy.begin<GalaDBus> (
GLib.BusType.SESSION,
"org.pantheon.gala.daemon",
Expand Down Expand Up @@ -322,32 +321,11 @@ public class Display.DisplaysOverlay : Gtk.Overlay {

var color_number = (get_children ().length () - 2) % 7;
var display_widget = new DisplayWidget (virtual_monitor, colors[color_number], text_colors[color_number]);
display_widget.get_style_context ().add_class ("color-%u".printf (color_number));

add_overlay (display_widget);
display_widgets.append (display_widget);

var provider = new Gtk.CssProvider ();
try {
var colored_css = COLORED_STYLE_CSS.printf (colors[color_number], text_colors[color_number]);
provider.load_from_data (colored_css, colored_css.length);

var context = display_widget.get_style_context ();
context.add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
context.add_provider (display_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
context.add_class ("colored");

context = display_widget.primary_image.get_style_context ();
context.add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
context.add_provider (display_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
context.add_class ("colored");

context = display_widget.toggle_settings.get_style_context ();
context.add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
context.add_provider (display_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
context.add_class ("colored");
} catch (GLib.Error e) {
critical (e.message);
}

display_widget.show_all ();
display_widget.set_as_primary.connect (() => set_as_primary (display_widget.virtual_monitor));

Expand Down

0 comments on commit 74d4671

Please sign in to comment.