Skip to content

Commit

Permalink
Styles: Gtk4 prep (#379)
Browse files Browse the repository at this point in the history 
* Styles: Gtk4 prep

* make widgets private

* Fix typos, clear warnings
  • Loading branch information
@danirabbit
danirabbit committed Feb 28, 2024
1 parent 126f397 commit f761b3c
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 57 deletions.
131 changes: 110 additions & 21 deletions data/Display.css
View file
@@ -1,42 +1,131 @@
/* 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: success @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: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: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: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: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: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: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:focus {
background: @COCOA_300;
}

display-widget.color-6 button:checked {
background: alpha(@COCOA_500, 0.75);
}
12 changes: 7 additions & 5 deletions src/Widgets/DisplayWidget.vala
View file
Expand Up @@ -40,9 +40,7 @@ public class Display.DisplayWidget : Gtk.EventBox {
public double window_ratio { get; private set; default = 1.0; }
public bool connected { get; set; }

public Gtk.Button primary_image { get; private set; }
public Gtk.MenuButton toggle_settings { get; private set; }

private Gtk.Button primary_image;
private Granite.SwitchModelButton use_switch;

private Gtk.ComboBox resolution_combobox;
Expand Down Expand Up @@ -84,6 +82,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 Expand Up @@ -252,12 +254,12 @@ public class Display.DisplayWidget : Gtk.EventBox {
popover_box.add (refresh_combobox);
popover_box.show_all ();

var popover = new Gtk.Popover (toggle_settings) {
var popover = new Gtk.Popover (null) {
child = popover_box,
position = BOTTOM
};

toggle_settings = new Gtk.MenuButton () {
var toggle_settings = new Gtk.MenuButton () {
halign = END,
valign = START,
image = new Gtk.Image.from_icon_name ("open-menu-symbolic", Gtk.IconSize.MENU),
Expand Down
40 changes: 9 additions & 31 deletions src/Widgets/DisplaysOverlay.vala
View file
Expand Up @@ -51,8 +51,6 @@ public class Display.DisplaysOverlay : Gtk.Box {
}
}

private static Gtk.CssProvider display_provider;

private static string[] colors = {
"@BLUEBERRY_100",
"@STRAWBERRY_100",
Expand All @@ -72,11 +70,6 @@ public class Display.DisplaysOverlay : Gtk.Box {
"@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 @@ -100,9 +93,15 @@ public class Display.DisplaysOverlay : Gtk.Box {
}

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 @@ -321,32 +320,11 @@ public class Display.DisplaysOverlay : Gtk.Box {

var color_number = (display_widgets.length () - 1) % 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));

overlay.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 f761b3c

Please sign in to comment.