summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--data/css/endless-widgets.css146
-rw-r--r--endless/eosactionbutton.c70
-rw-r--r--test/smoke-tests/action-buttons.js17
-rw-r--r--test/smoke-tests/eosactionbutton.css72
4 files changed, 189 insertions, 116 deletions
diff --git a/data/css/endless-widgets.css b/data/css/endless-widgets.css
index faf1e38..4ef2e2a 100644
--- a/data/css/endless-widgets.css
+++ b/data/css/endless-widgets.css
@@ -49,3 +49,149 @@
.top-bar .button *:active {
color: #8a8a8a;
}
+
+
+/* Endless action button */
+
+EosActionButton {
+ background-color: transparent;
+ border-style: solid;
+ border-image: none;
+ margin: 10px;
+
+ border-radius: 40px;
+ border-width: 8px;
+}
+
+EosActionButton GtkLabel {
+ font-family: BentonSans, sans-serif;
+ font-weight: normal;
+ font-size: 11px;
+}
+
+/* Endless action button: sizes */
+
+EosActionButton.primary {
+ border-radius: 40px;
+ border-width: 8px;
+}
+
+EosActionButton.secondary {
+ border-radius: 30px;
+ border-width: 6px;
+}
+
+EosActionButton.tertiary {
+ border-radius: 23px;
+ border-width: 5px;
+}
+
+EosActionButton.quaternary {
+ border-radius: 17px;
+ border-width: 4px;
+}
+
+/* Endless action button: light background */
+
+/* normal */
+EosActionButton,
+EosActionButton:selected,
+EosActionButton:focused {
+ border-color: alpha(#323232, 0.5);
+ box-shadow: 1px 1px 1px alpha(black, 0.8) inset,
+ 0px -1px 1px alpha(white, 0.65);
+}
+
+EosActionButton GtkImage,
+EosActionButton GtkImage:selected,
+EosActionButton GtkImage:focused {
+ color: alpha(#323232, 0.5);
+}
+
+EosActionButton GtkLabel,
+EosActionButton GtkLabel:selected,
+EosActionButton GtkLabel:focused {
+ color: alpha(#323232, 0.65);
+}
+
+/* hover */
+EosActionButton:hover {
+ border-color: alpha(#323232, 0.8);
+ box-shadow: 1px 1px 1px alpha(black, 0.8) inset;
+}
+
+EosActionButton GtkImage:hover {
+ color: alpha(#282828, 0.8);
+}
+
+EosActionButton GtkLabel:hover {
+ color: alpha(#1E1E1E, 0.8);
+}
+
+/* pressed */
+EosActionButton:active {
+ border-color: alpha(#323232, 0.65);
+ box-shadow: 1px 1px 1px alpha(black, 0.8) inset;
+}
+
+EosActionButton GtkImage:active {
+ color: alpha(#282828, 0.65);
+}
+
+EosActionButton GtkLabel:active {
+ color: alpha(#1E1E1E, 0.8);
+}
+
+/* insensitive, just in case */
+EosActionButton:insensitive,
+EosActionButton:inconsistent {
+ border-color: alpha(#888888, 0.50);
+ box-shadow: none;
+}
+
+/* Endless action button: dark background */
+
+/* normal */
+.dark EosActionButton,
+.dark EosActionButton:selected,
+.dark EosActionButton:focused {
+ border-color: alpha(#E6E6E6, 0.5);
+ box-shadow: 1px 1px 1px alpha(black, 0.95) inset,
+ 0px -1px 1px alpha(white, 0.5) inset;
+}
+
+.dark EosActionButton GtkImage,
+.dark EosActionButton GtkImage:selected,
+.dark EosActionButton GtkImage:selected,
+.dark EosActionButton GtkLabel,
+.dark EosActionButton GtkLabel:selected,
+.dark EosActionButton GtkLabel:focused {
+ color: alpha(#E6E6E6, 0.5);
+}
+
+/* hover */
+.dark EosActionButton:hover {
+ border-color: alpha(white, 0.8);
+ box-shadow: 1px 1px 1px alpha(black, 0.95) inset,
+ 0px -1px 1px alpha(white, 0.85) inset;
+}
+
+.dark EosActionButton GtkImage:hover,
+.dark EosActionButton GtkLabel:hover {
+ color: alpha(white, 0.8);
+}
+
+/* pressed */
+.dark EosActionButton:active {
+ border-color: alpha(white, 0.65);
+ box-shadow: 1px 1px 1px alpha(black, 0.95) inset,
+ 0px -1px 1px alpha(white, 0.7) inset;
+}
+
+.dark EosActionButton GtkImage:active {
+ color: alpha(white, 0.65);
+}
+
+.dark EosActionButton GtkLabel:active {
+ color: alpha(white, 0.8);
+}
diff --git a/endless/eosactionbutton.c b/endless/eosactionbutton.c
index 148cd2b..23c931c 100644
--- a/endless/eosactionbutton.c
+++ b/endless/eosactionbutton.c
@@ -49,7 +49,6 @@ struct _EosActionButtonPrivate
/* internal */
GtkWidget *grid;
GtkWidget *icon_image;
- GdkPixbuf *icon_pixbuf;
GtkWidget *label_widget;
};
@@ -279,56 +278,24 @@ static void
eos_action_button_load_icon (EosActionButton *button)
{
EosActionButtonPrivate *priv;
- GtkIconInfo *icon_info;
- GdkPixbuf *new_icon = NULL;
- gboolean was_symbolic = TRUE;
- GError *error = NULL;
g_return_if_fail (EOS_IS_ACTION_BUTTON (button));
priv = button->priv;
- // TODO maybe use gtk_image_set_from_icon_set
-
if (priv->icon_id != NULL)
{
- icon_info = gtk_icon_theme_lookup_icon (gtk_icon_theme_get_default (),
- priv->icon_id,
- icon_sizes[priv->size].icon_size,
- GTK_ICON_LOOKUP_FORCE_SIZE
- | GTK_ICON_LOOKUP_GENERIC_FALLBACK
- | GTK_ICON_LOOKUP_USE_BUILTIN );
-
- new_icon = gtk_icon_info_load_symbolic_for_context (icon_info,
- gtk_widget_get_style_context (GTK_WIDGET(button)),
- &was_symbolic,
- &error);
-
- if (!was_symbolic)
- {
- g_warning ("Icon for %s is not symbolic\n", priv->icon_id);
- }
- if (error != NULL)
- {
- g_warning ("Unable to load icon for %s : %s\n", priv->icon_id, error->message);
- g_error_free (error);
- }
- g_object_ref (new_icon);
- g_object_unref (icon_info);
+ gtk_image_set_from_icon_name (GTK_IMAGE (priv->icon_image),
+ priv->icon_id,
+ GTK_ICON_SIZE_BUTTON);
+
+ gtk_image_set_pixel_size (GTK_IMAGE (priv->icon_image),
+ icon_sizes[priv->size].icon_size);
}
else
{
- new_icon = NULL;
+ gtk_image_clear (GTK_IMAGE (priv->icon_image));
}
-
- if (priv->icon_pixbuf != NULL)
- {
- g_object_unref (priv->icon_pixbuf);
- }
-
- priv->icon_pixbuf = new_icon;
-
- gtk_image_set_from_pixbuf (GTK_IMAGE (priv->icon_image), priv->icon_pixbuf);
}
/**
@@ -595,7 +562,7 @@ eos_action_button_draw (GtkWidget *widget,
GtkAllocation allocation;
GtkStyleContext *context;
GtkStateFlags state;
- gint width, height, border_width, border_height;
+ gint width, border_width, border_height, border_thickness;
GtkBorder margin;
context = gtk_widget_get_style_context (widget);
@@ -615,28 +582,33 @@ eos_action_button_draw (GtkWidget *widget,
x = 0;
y = 0;
width = allocation.width;
- height = allocation.height;
border_width = icon_sizes[priv->size].width;
border_height = icon_sizes[priv->size].height;
+ border_thickness = icon_sizes[priv->size].border_width;
cairo_save (cr);
gtk_render_frame (context, cr,
x + (width - border_width)/2,
- margin.top,
+ y + margin.top,
border_width, border_height);
- if (gtk_widget_has_visible_focus (widget))
- {
- gtk_render_focus (context, cr,
- x, y, width, height);
- }
-
// TODO is it really needed to restore and save the cairo_t here?
cairo_restore (cr);
cairo_save (cr);
+ // GTK+ tries to paint the background inside the border, we work around this
+ //because we want to draw the inset shadow over the border itself
+ gtk_render_background (context, cr,
+ x + (width - border_width)/2 - border_thickness,
+ y + margin.top - border_thickness,
+ border_width + 2*border_thickness,
+ border_height + 2*border_thickness);
+
+ cairo_restore (cr);
+ cairo_save (cr);
+
// *** image
gtk_widget_get_allocation (priv->icon_image, &allocation);
diff --git a/test/smoke-tests/action-buttons.js b/test/smoke-tests/action-buttons.js
index 7fe046b..cc8534b 100644
--- a/test/smoke-tests/action-buttons.js
+++ b/test/smoke-tests/action-buttons.js
@@ -15,7 +15,22 @@ const TestApplication = new Lang.Class ({
this._page = new Gtk.Grid ();
- this._content = new Gtk.Label ({name: 'content', label: 'Content'});
+ this._content = new Gtk.Grid ({
+ hexpand: true,
+ halign: Gtk.Align.CENTER,
+ vexpand: true,
+ valign: Gtk.Align.CENTER});
+
+ this._darkSwitch = new Gtk.Switch ({active: false});
+ this._darkSwitch.connect ('notify::active', Lang.bind (this, function (active) {
+ if (this._darkSwitch.get_active()) {
+ this._menu_panel.get_style_context().add_class('dark');
+ } else {
+ this._menu_panel.get_style_context().remove_class('dark');
+ }
+ }));
+ this._content.add(new Gtk.Label ({label: 'Dark action menu'}), 0, 0, 1, 1);
+ this._content.add(this._darkSwitch, 0, 1, 1, 1);
this._menu = new Endless.ActionMenu ();
diff --git a/test/smoke-tests/eosactionbutton.css b/test/smoke-tests/eosactionbutton.css
index e4a8267..13ddfe4 100644
--- a/test/smoke-tests/eosactionbutton.css
+++ b/test/smoke-tests/eosactionbutton.css
@@ -1,72 +1,12 @@
-/* ****** ACTION BUTTONS ****** */
-
-EosActionButton {
- background-color: transparent;
- border-color: #012345;
- border-radius: 32px;
- border-width: 8px;
- border-style: solid;
- margin: 10px;
-}
-
-/* ****** SIZES ****** */
-
-EosActionButton.primary {
- border-radius: 32px;
- border-width: 8px;
-}
-
-EosActionButton.secondary {
- border-radius: 24px;
- border-width: 6px;
-}
-
-EosActionButton.tertiary {
- border-radius: 18px;
- border-width: 5px;
-}
-
-EosActionButton.quaternary {
- border-radius: 13px;
- border-width: 4px;
-}
-
-/* ****** STATES ****** */
-
-EosActionButton:active {
- border-color: #123456;
-}
-
-EosActionButton:hover {
- border-color: #234567;
-}
-
-EosActionButton:insensitive {
- border-color: #345678;
-}
-
-EosActionButton:selected {
- border-color: #456789;
-}
-
-EosActionButton:focused {
- border-color: #56789A;
-}
-
-EosActionButton:inconsistent {
- border-color: #6789AB;
-}
-
/* ****** ACTION MENU ****** */
-GtkFrame#menu {
- background-color: #D3D7CF;
- border-color: #E1E2DE;
+#menu {
+ background-color: mix(white, black, 0.2);
+ border-color: mix(white, black, 0.5);
border-width: 0 0 0 6px;
}
-GtkLabel#content {
- color: #BABDB6;
- font-size: 48pt;
- background: #EEEEEC;
+.dark#menu {
+ background-color: mix(white, black, 0.8);
+ border-width: 0 0 0 6px;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-04-19 08:38:48 +0000