From 51e1f54ef7452d70069d780044cd2eedc02954f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 9 Aug 2023 11:11:14 -0700 Subject: [PATCH 1/5] Clean up CSS and fix issues with shadows and struts --- data/styles/application.css | 50 ++++++++++++++++++++++++++++----- data/styles/panel.css | 33 ---------------------- data/wingpanel.gresource.xml | 1 - src/PanelWindow.vala | 9 ++---- src/Widgets/IndicatorEntry.vala | 2 +- src/Widgets/Panel.vala | 14 ++------- src/Widgets/StyleClass.vala | 23 --------------- src/meson.build | 3 +- 8 files changed, 50 insertions(+), 85 deletions(-) delete mode 100644 data/styles/panel.css delete mode 100644 src/Widgets/StyleClass.vala diff --git a/data/styles/application.css b/data/styles/application.css index 0799f239..60074a91 100644 --- a/data/styles/application.css +++ b/data/styles/application.css @@ -1,16 +1,54 @@ +panel { + background-color: transparent; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); + min-height: 16px; +} + +panel > box { + /*Don't transition shadow etc to avoid visual issues with struts*/ + transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1); +} + +panel.maximized { + background-color: #000; +} + +panel.translucent > box { + margin-bottom: 4px; +} + +panel.translucent.color-dark > box { + background-color: alpha(#000, 0.5); + box-shadow: + 0 1px 3px alpha(#000, 0.24), + 0 1px 1px alpha(#000, 0.52); +} + +panel.translucent.color-light > box { + background-color: alpha(#fff, 0.85); + box-shadow: + inset 0 -1px 1px alpha(#fff, 0.2), + 0 1px 3px alpha(#000, 0.24), + 0 1px 1px alpha(#000, 0.12); +} + +panel menubar { + background: transparent; + box-shadow: none; + border: none; +} + .composited-indicator { padding: 0 6px; } -.composited-indicator > revealer label, -.composited-indicator > revealer image, -.composited-indicator > revealer spinner { +.composited-indicator > revealer { color: #fff; font-weight: bold; text-shadow: 0 0 2px alpha(#000, 0.3), 0 1px 2px alpha(#000, 0.6); - transition: all 200ms ease-in-out; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); -gtk-icon-shadow: 0 0 2px alpha(#000, 0.3), 0 1px 2px alpha(#000, 0.6); @@ -20,9 +58,7 @@ warning mix(@BANANA_300, @BANANA_500, 0.5); } -.panel.color-light .composited-indicator > revealer label, -.panel.color-light .composited-indicator > revealer image, -.panel.color-light .composited-indicator > revealer spinner { +.color-light .composited-indicator > revealer { color: alpha(#000, 0.65); text-shadow: 0 0 2px alpha(#fff, 0.3), diff --git a/data/styles/panel.css b/data/styles/panel.css deleted file mode 100644 index 803e5a41..00000000 --- a/data/styles/panel.css +++ /dev/null @@ -1,33 +0,0 @@ -.panel { - background-color: transparent; - transition: all 100ms ease-in-out; - margin-bottom: 0; - min-height: 16px; -} - -.panel.maximized { - background-color: #000; -} - -.panel.translucent { - background-color: alpha(#000, 0.5); - box-shadow: - 0 1px 3px alpha(#000, 0.24), - 0 1px 1px alpha(#000, 0.52); - margin-bottom: 4px; -} - -.panel.color-light.translucent { - background-color: alpha(#fff, 0.85); - box-shadow: - inset 0 -1px 1px alpha(#fff, 0.2), - 0 1px 3px alpha(#000, 0.24), - 0 1px 1px alpha(#000, 0.12); - margin-bottom: 4px; -} - -.panel menubar { - background: transparent; - box-shadow: none; - border: none; -} diff --git a/data/wingpanel.gresource.xml b/data/wingpanel.gresource.xml index 3b85f8b6..6fd0565e 100644 --- a/data/wingpanel.gresource.xml +++ b/data/wingpanel.gresource.xml @@ -2,6 +2,5 @@ styles/application.css - styles/panel.css diff --git a/src/PanelWindow.vala b/src/PanelWindow.vala index b3a5ee3e..a5922c21 100644 --- a/src/PanelWindow.vala +++ b/src/PanelWindow.vala @@ -45,13 +45,6 @@ public class Wingpanel.PanelWindow : Gtk.Window { monitor_number = screen.get_primary_monitor (); - var panel_provider = new Gtk.CssProvider (); - panel_provider.load_from_resource ("io/elementary/wingpanel/panel.css"); - - var style_context = get_style_context (); - style_context.add_class (Widgets.StyleClass.PANEL); - style_context.add_provider (panel_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); - var app_provider = new Gtk.CssProvider (); app_provider.load_from_resource ("io/elementary/wingpanel/application.css"); Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), app_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); @@ -88,6 +81,8 @@ public class Wingpanel.PanelWindow : Gtk.Window { key_controller = new Gtk.EventControllerKey (this); key_controller.key_pressed.connect (on_key_pressed); + + panel.size_allocate.connect (update_panel_dimensions); } private void on_realize () { diff --git a/src/Widgets/IndicatorEntry.vala b/src/Widgets/IndicatorEntry.vala index 9e21b709..9c020a4f 100644 --- a/src/Widgets/IndicatorEntry.vala +++ b/src/Widgets/IndicatorEntry.vala @@ -49,7 +49,7 @@ public class Wingpanel.Widgets.IndicatorEntry : Gtk.MenuItem { display_widget = base_indicator.get_display_widget (); halign = Gtk.Align.START; name = base_indicator.code_name + "/entry"; - get_style_context ().add_class (StyleClass.COMPOSITED_INDICATOR); + get_style_context ().add_class ("composited-indicator"); if (display_widget == null) { return; diff --git a/src/Widgets/Panel.vala b/src/Widgets/Panel.vala index 96dd1197..9c03adab 100644 --- a/src/Widgets/Panel.vala +++ b/src/Widgets/Panel.vala @@ -27,15 +27,12 @@ public class Wingpanel.Widgets.Panel : Gtk.EventBox { private unowned Gtk.StyleContext style_context; private Gtk.CssProvider? style_provider = null; - private static Gtk.CssProvider resource_provider; - public Panel (Services.PopoverManager popover_manager) { Object (popover_manager : popover_manager); } - static construct { - resource_provider = new Gtk.CssProvider (); - resource_provider.load_from_resource ("io/elementary/wingpanel/panel.css"); + class construct { + set_css_name ("panel"); } construct { @@ -48,18 +45,15 @@ public class Wingpanel.Widgets.Panel : Gtk.EventBox { can_focus = true, halign = Gtk.Align.START }; - left_menubar.get_style_context ().add_provider (resource_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); center_menubar = new Gtk.MenuBar () { can_focus = true }; - center_menubar.get_style_context ().add_provider (resource_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); right_menubar = new IndicatorMenuBar () { can_focus = true, halign = Gtk.Align.END }; - right_menubar.get_style_context ().add_provider (resource_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); var box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0); box.pack_start (left_menubar); @@ -79,8 +73,6 @@ public class Wingpanel.Widgets.Panel : Gtk.EventBox { }); style_context = get_style_context (); - style_context.add_class (StyleClass.PANEL); - style_context.add_provider (resource_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); Services.BackgroundManager.get_default ().background_state_changed.connect (update_background); } @@ -290,7 +282,7 @@ public class Wingpanel.Widgets.Panel : Gtk.EventBox { string css = """ .panel { - transition: all %ums ease-in-out; + transition: all %ums cubic-bezier(0.4, 0, 0.2, 1); } """.printf (animation_duration); diff --git a/src/Widgets/StyleClass.vala b/src/Widgets/StyleClass.vala deleted file mode 100644 index 00ecbf0e..00000000 --- a/src/Widgets/StyleClass.vala +++ /dev/null @@ -1,23 +0,0 @@ -/* - * Copyright (c) 2011-2015 Wingpanel Developers (http://launchpad.net/wingpanel) - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU General Public - * License as published by the Free Software Foundation; either - * version 2 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public - * License along with this program; if not, write to the - * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, - * Boston, MA 02110-1301 USA. - */ - -namespace Wingpanel.Widgets.StyleClass { - public const string PANEL = "panel"; - public const string COMPOSITED_INDICATOR = "composited-indicator"; -} diff --git a/src/meson.build b/src/meson.build index ab7f5dcd..1ad0597d 100644 --- a/src/meson.build +++ b/src/meson.build @@ -9,8 +9,7 @@ wingpanel_files = files( 'Widgets/IndicatorEntry.vala', 'Widgets/IndicatorMenuBar.vala', 'Widgets/IndicatorPopover.vala', - 'Widgets/Panel.vala', - 'Widgets/StyleClass.vala', + 'Widgets/Panel.vala' ) wingpanel_deps = [ From f7b22cfc4c4ef15518aac4094e1b3d1d8cafa44c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Fri, 11 Aug 2023 11:17:22 -0700 Subject: [PATCH 2/5] Capitalize application --- data/styles/{application.css => Application.css} | 0 data/wingpanel.gresource.xml | 2 +- src/PanelWindow.vala | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename data/styles/{application.css => Application.css} (100%) diff --git a/data/styles/application.css b/data/styles/Application.css similarity index 100% rename from data/styles/application.css rename to data/styles/Application.css diff --git a/data/wingpanel.gresource.xml b/data/wingpanel.gresource.xml index 6fd0565e..2cd7b55d 100644 --- a/data/wingpanel.gresource.xml +++ b/data/wingpanel.gresource.xml @@ -1,6 +1,6 @@ - styles/application.css + styles/Application.css diff --git a/src/PanelWindow.vala b/src/PanelWindow.vala index a5922c21..a7b88ca8 100644 --- a/src/PanelWindow.vala +++ b/src/PanelWindow.vala @@ -46,7 +46,7 @@ public class Wingpanel.PanelWindow : Gtk.Window { monitor_number = screen.get_primary_monitor (); var app_provider = new Gtk.CssProvider (); - app_provider.load_from_resource ("io/elementary/wingpanel/application.css"); + app_provider.load_from_resource ("io/elementary/wingpanel/Application.css"); Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), app_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); this.screen.size_changed.connect (update_panel_dimensions); From 5ab904e2c143b7c39acae500b5289d9a9241c289 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Fri, 11 Aug 2023 11:23:40 -0700 Subject: [PATCH 3/5] Fix up some shadows etc --- data/styles/Application.css | 52 +++++++++++++++++++++++++------------ 1 file changed, 35 insertions(+), 17 deletions(-) diff --git a/data/styles/Application.css b/data/styles/Application.css index 60074a91..b686e704 100644 --- a/data/styles/Application.css +++ b/data/styles/Application.css @@ -14,22 +14,26 @@ panel.maximized { } panel.translucent > box { + border-radius: 5px 5px 0 0; margin-bottom: 4px; } panel.translucent.color-dark > box { - background-color: alpha(#000, 0.5); + background-color: alpha(black, 0.4); box-shadow: - 0 1px 3px alpha(#000, 0.24), - 0 1px 1px alpha(#000, 0.52); + 0 1px 3px alpha(#000, 0.3), + 0 1px 1px alpha(#000, 0.3); } panel.translucent.color-light > box { - background-color: alpha(#fff, 0.85); + background-color: alpha(white, 0.75); box-shadow: - inset 0 -1px 1px alpha(#fff, 0.2), - 0 1px 3px alpha(#000, 0.24), - 0 1px 1px alpha(#000, 0.12); + inset 0 -1px 0 0 alpha(white, 0.2), + inset 0 1px 0 0 alpha(white, 0.3), + inset 1px 0 0 0 alpha(white, 0.07), + inset -1px 0 0 0 alpha(white, 0.07), + 0 1px 3px alpha(black, 0.16), + 0 1px 1px alpha(black, 0.1); } panel menubar { @@ -43,15 +47,15 @@ panel menubar { } .composited-indicator > revealer { - color: #fff; + color: white; font-weight: bold; text-shadow: - 0 0 2px alpha(#000, 0.3), - 0 1px 2px alpha(#000, 0.6); + 0 0 2px alpha(black, 0.3), + 0 1px 2px alpha(black, 0.6); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); -gtk-icon-shadow: - 0 0 2px alpha(#000, 0.3), - 0 1px 2px alpha(#000, 0.6); + 0 0 2px alpha(black, 0.3), + 0 1px 2px alpha(black, 0.6); -gtk-icon-palette: error @STRAWBERRY_300, success @LIME_300, @@ -59,15 +63,29 @@ panel menubar { } .color-light .composited-indicator > revealer { - color: alpha(#000, 0.65); + color: alpha(black, 0.65); text-shadow: - 0 0 2px alpha(#fff, 0.3), - 0 1px 0 alpha(#fff, 0.25); + 0 0 2px alpha(white, 0.3), + 0 1px 0 alpha(white, 0.25); -gtk-icon-shadow: - 0 0 2px alpha(#fff, 0.3), - 0 1px 0 alpha(#fff, 0.25); + 0 0 2px alpha(white, 0.3), + 0 1px 0 alpha(white, 0.25); -gtk-icon-palette: error @STRAWBERRY_700, success mix(@LIME_700, @LIME_900, 0.5), warning mix(@BANANA_700, @BANANA_900, 0.5); } + +.translucent.color-dark .composited-indicator > revealer { + text-shadow: + 0 0 2px alpha(black, 0.15), + 0 1px 2px alpha(black, 0.3); + -gtk-icon-shadow: + 0 0 2px alpha(black, 0.15), + 0 1px 2px alpha(black, 0.3); +} + +.translucent.color-light .composited-indicator > revealer { + text-shadow: none; + -gtk-icon-shadow: none; +} From 50f863d2f5f61708ba293d759b7b2eb41de2f44b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 6 Dec 2023 10:35:58 -0800 Subject: [PATCH 4/5] More specific CSS --- data/styles/Application.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/data/styles/Application.css b/data/styles/Application.css index b686e704..bd92d282 100644 --- a/data/styles/Application.css +++ b/data/styles/Application.css @@ -53,6 +53,9 @@ panel menubar { 0 0 2px alpha(black, 0.3), 0 1px 2px alpha(black, 0.6); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.composited-indicator > revealer image { -gtk-icon-shadow: 0 0 2px alpha(black, 0.3), 0 1px 2px alpha(black, 0.6); @@ -67,6 +70,9 @@ panel menubar { text-shadow: 0 0 2px alpha(white, 0.3), 0 1px 0 alpha(white, 0.25); +} + +.color-light .composited-indicator > revealer image { -gtk-icon-shadow: 0 0 2px alpha(white, 0.3), 0 1px 0 alpha(white, 0.25); @@ -80,6 +86,9 @@ panel menubar { text-shadow: 0 0 2px alpha(black, 0.15), 0 1px 2px alpha(black, 0.3); +} + +.translucent.color-dark .composited-indicator > revealer image { -gtk-icon-shadow: 0 0 2px alpha(black, 0.15), 0 1px 2px alpha(black, 0.3); @@ -87,5 +96,8 @@ panel menubar { .translucent.color-light .composited-indicator > revealer { text-shadow: none; +} + +.translucent.color-light .composited-indicator > revealer image { -gtk-icon-shadow: none; } From 5a3a72d0c022e8552dc08594c778f370cd3dde2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 6 Dec 2023 10:42:49 -0800 Subject: [PATCH 5/5] Also select spinner --- data/styles/Application.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/data/styles/Application.css b/data/styles/Application.css index bd92d282..6048d381 100644 --- a/data/styles/Application.css +++ b/data/styles/Application.css @@ -55,7 +55,8 @@ panel menubar { transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } -.composited-indicator > revealer image { +.composited-indicator > revealer image, +.composited-indicator > revealer spinner { -gtk-icon-shadow: 0 0 2px alpha(black, 0.3), 0 1px 2px alpha(black, 0.6); @@ -72,7 +73,8 @@ panel menubar { 0 1px 0 alpha(white, 0.25); } -.color-light .composited-indicator > revealer image { +.color-light .composited-indicator > revealer image, +.color-light .composited-indicator > revealer spinner { -gtk-icon-shadow: 0 0 2px alpha(white, 0.3), 0 1px 0 alpha(white, 0.25); @@ -88,7 +90,8 @@ panel menubar { 0 1px 2px alpha(black, 0.3); } -.translucent.color-dark .composited-indicator > revealer image { +.translucent.color-dark .composited-indicator > revealer image, +.translucent.color-dark .composited-indicator > revealer spinner { -gtk-icon-shadow: 0 0 2px alpha(black, 0.15), 0 1px 2px alpha(black, 0.3); @@ -98,6 +101,7 @@ panel menubar { text-shadow: none; } -.translucent.color-light .composited-indicator > revealer image { +.translucent.color-light .composited-indicator > revealer image, +.translucent.color-light .composited-indicator > revealer spinner { -gtk-icon-shadow: none; }