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] 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 = [