[libhandy/wip/exalm/leaflet-transltions: 1/10] shadow-helper: Add an outline
- From: Alexander Mikhaylenko <alexm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [libhandy/wip/exalm/leaflet-transltions: 1/10] shadow-helper: Add an outline
- Date: Sun, 31 May 2020 17:02:38 +0000 (UTC)
commit 2cd6b29033dedeb2b43d43b806c6d01c7f0f4c10
Author: Alexander Mikhaylenko <alexm gnome org>
Date: Fri May 29 20:16:28 2020 +0500
shadow-helper: Add an outline
Now that HdyStackableBox doesn't clip the shadow anymore, we can can easily
add an outline just like WebKit does.
This adds an 'outline' css node that is similar to the 'border', but is
drawn on top of the sliding content.
Since it would be visible at 0 progress, don't draw it, and also don't draw
shadow when progress is 0 or 1.
Add a style for it. Use a more pronounced outline for light variant than
for the dark one. Don't draw it with HighContrast at all.
Fixes https://gitlab.gnome.org/GNOME/libhandy/-/issues/158
Signed-off-by: Alexander Mikhaylenko <alexm gnome org>
src/hdy-shadow-helper.c | 38 +++++++++++++++++++++++++++++++++++---
src/themes/Adwaita-dark.css | 2 ++
src/themes/Adwaita.css | 2 ++
src/themes/HighContrast.css | 6 ++++++
src/themes/HighContrastInverse.css | 6 ++++++
src/themes/_definitions.scss | 2 ++
src/themes/_fallback-base.scss | 6 ++++++
src/themes/fallback.css | 2 ++
8 files changed, 61 insertions(+), 3 deletions(-)
---
diff --git a/src/hdy-shadow-helper.c b/src/hdy-shadow-helper.c
index 7b2962c5..242a6073 100644
--- a/src/hdy-shadow-helper.c
+++ b/src/hdy-shadow-helper.c
@@ -35,8 +35,10 @@ struct _HdyShadowHelper
cairo_pattern_t *dimming_pattern;
cairo_pattern_t *shadow_pattern;
cairo_pattern_t *border_pattern;
+ cairo_pattern_t *outline_pattern;
gint shadow_size;
gint border_size;
+ gint outline_size;
GtkPanDirection last_direction;
gint last_width;
@@ -137,7 +139,8 @@ cache_shadow (HdyShadowHelper *self,
g_autoptr(GtkStyleContext) dim_context = NULL;
g_autoptr(GtkStyleContext) shadow_context = NULL;
g_autoptr(GtkStyleContext) border_context = NULL;
- gint shadow_size, border_size, scale;
+ g_autoptr(GtkStyleContext) outline_context = NULL;
+ gint shadow_size, border_size, outline_size, scale;
scale = gtk_widget_get_scale_factor (self->widget);
@@ -153,21 +156,26 @@ cache_shadow (HdyShadowHelper *self,
dim_context = create_context (self, "dimming", direction);
shadow_context = create_context (self, "shadow", direction);
border_context = create_context (self, "border", direction);
+ outline_context = create_context (self, "outline", direction);
shadow_size = get_element_size (shadow_context, direction);
border_size = get_element_size (border_context, direction);
+ outline_size = get_element_size (outline_context, direction);
self->dimming_pattern = create_element_pattern (dim_context, width, height);
if (direction == GTK_PAN_DIRECTION_LEFT || direction == GTK_PAN_DIRECTION_RIGHT) {
self->shadow_pattern = create_element_pattern (shadow_context, shadow_size, height);
self->border_pattern = create_element_pattern (border_context, border_size, height);
+ self->outline_pattern = create_element_pattern (outline_context, outline_size, height);
} else {
self->shadow_pattern = create_element_pattern (shadow_context, width, shadow_size);
self->border_pattern = create_element_pattern (border_context, width, border_size);
+ self->outline_pattern = create_element_pattern (outline_context, width, outline_size);
}
self->border_size = border_size;
self->shadow_size = shadow_size;
+ self->outline_size = outline_size;
self->is_cache_valid = TRUE;
self->last_direction = direction;
@@ -290,8 +298,10 @@ hdy_shadow_helper_clear_cache (HdyShadowHelper *self)
cairo_pattern_destroy (self->dimming_pattern);
cairo_pattern_destroy (self->shadow_pattern);
cairo_pattern_destroy (self->border_pattern);
+ cairo_pattern_destroy (self->outline_pattern);
self->border_size = 0;
self->shadow_size = 0;
+ self->outline_size = 0;
self->last_direction = 0;
self->last_width = 0;
@@ -326,6 +336,9 @@ hdy_shadow_helper_draw_shadow (HdyShadowHelper *self,
gdouble remaining_distance, shadow_opacity;
gint shadow_size, border_size, distance;
+ if (progress <= 0 || progress >= 1)
+ return;
+
cache_shadow (self, width, height, direction);
shadow_size = self->shadow_size;
@@ -349,8 +362,6 @@ hdy_shadow_helper_draw_shadow (HdyShadowHelper *self,
if (remaining_distance < shadow_size)
shadow_opacity = (remaining_distance / shadow_size);
- cairo_save (cr);
-
cairo_save (cr);
cairo_set_operator (cr, CAIRO_OPERATOR_ATOP);
cairo_set_source (cr, self->dimming_pattern);
@@ -397,5 +408,26 @@ hdy_shadow_helper_draw_shadow (HdyShadowHelper *self,
cairo_paint (cr);
cairo_restore (cr);
+ switch (direction) {
+ case GTK_PAN_DIRECTION_RIGHT:
+ cairo_translate (cr, border_size, 0);
+ break;
+ case GTK_PAN_DIRECTION_DOWN:
+ cairo_translate (cr, 0, border_size);
+ break;
+ case GTK_PAN_DIRECTION_LEFT:
+ cairo_translate (cr, -border_size, 0);
+ break;
+ case GTK_PAN_DIRECTION_UP:
+ cairo_translate (cr, 0, -border_size);
+ break;
+ default:
+ g_assert_not_reached ();
+ }
+
+ cairo_save (cr);
+ cairo_set_operator (cr, CAIRO_OPERATOR_ATOP);
+ cairo_set_source (cr, self->outline_pattern);
+ cairo_paint (cr);
cairo_restore (cr);
}
diff --git a/src/themes/Adwaita-dark.css b/src/themes/Adwaita-dark.css
index 1cf5efeb..49649e9f 100644
--- a/src/themes/Adwaita-dark.css
+++ b/src/themes/Adwaita-dark.css
@@ -39,6 +39,8 @@ deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bot
deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0,
0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: rgba(255, 255, 255, 0.05); }
+
avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
avatar.color1 { background-image: linear-gradient(#ffbe6f, #ed6f00); color: #ffe5c5; }
diff --git a/src/themes/Adwaita.css b/src/themes/Adwaita.css
index cab57756..fdc22d4b 100644
--- a/src/themes/Adwaita.css
+++ b/src/themes/Adwaita.css
@@ -39,6 +39,8 @@ deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bot
deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.03), rgba(0, 0, 0,
0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: rgba(255, 255, 255, 0.2); }
+
avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
avatar.color1 { background-image: linear-gradient(#ffbe6f, #ed6f00); color: #ffe5c5; }
diff --git a/src/themes/HighContrast.css b/src/themes/HighContrast.css
index 21c48b00..afbfcc6c 100644
--- a/src/themes/HighContrast.css
+++ b/src/themes/HighContrast.css
@@ -39,6 +39,8 @@ deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bot
deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.03), rgba(0, 0, 0,
0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: transparent; }
+
avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
avatar.color1 { background-image: linear-gradient(#ffbe6f, #ed6f00); color: #ffe5c5; }
@@ -90,6 +92,10 @@ popover.combo scrollbar.vertical:dir(rtl) { border-top-left-radius: 8px; -gtk-ou
row.expander { padding: 0px; }
+row.expander image.expander-row-arrow:dir(ltr) { margin-left: 6px; }
+
+row.expander image.expander-row-arrow:dir(rtl) { margin-right: 6px; }
+
keypad .digit { font-size: 200%; font-weight: bold; }
keypad .letters { font-size: 70%; }
diff --git a/src/themes/HighContrastInverse.css b/src/themes/HighContrastInverse.css
index 7824250e..a2432667 100644
--- a/src/themes/HighContrastInverse.css
+++ b/src/themes/HighContrastInverse.css
@@ -39,6 +39,8 @@ deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bot
deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0,
0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: transparent; }
+
avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
avatar.color1 { background-image: linear-gradient(#ffbe6f, #ed6f00); color: #ffe5c5; }
@@ -90,6 +92,10 @@ popover.combo scrollbar.vertical:dir(rtl) { border-top-left-radius: 8px; -gtk-ou
row.expander { padding: 0px; }
+row.expander image.expander-row-arrow:dir(ltr) { margin-left: 6px; }
+
+row.expander image.expander-row-arrow:dir(rtl) { margin-right: 6px; }
+
keypad .digit { font-size: 200%; font-weight: bold; }
keypad .letters { font-size: 70%; }
diff --git a/src/themes/_definitions.scss b/src/themes/_definitions.scss
index de9cc9c4..ed427a4c 100644
--- a/src/themes/_definitions.scss
+++ b/src/themes/_definitions.scss
@@ -10,9 +10,11 @@
$leaflet_dimming: rgba(0, 0, 0, if($variant == 'light', 0.12, 0.24));
$leaflet_border: rgba(0, 0, 0, if($variant == 'light', 0.05, 0.2));
+$leaflet_outline: rgba(255, 255, 255, if($variant == 'light', 0.2, 0.05));
@if $high_contrast {
$leaflet_border: $borders_color;
+ $leaflet_outline: transparent;
}
@mixin background-shadow($direction) {
diff --git a/src/themes/_fallback-base.scss b/src/themes/_fallback-base.scss
index 9916bbfe..aa20076d 100644
--- a/src/themes/_fallback-base.scss
+++ b/src/themes/_fallback-base.scss
@@ -96,6 +96,12 @@ leaflet {
&.up { @include background-shadow(to bottom); }
&.down { @include background-shadow(to top); }
}
+
+ > outline {
+ min-width: 1px;
+ min-height: 1px;
+ background: $leaflet_outline;
+ }
}
// Avatar
diff --git a/src/themes/fallback.css b/src/themes/fallback.css
index 7e8e7f3e..967d0306 100644
--- a/src/themes/fallback.css
+++ b/src/themes/fallback.css
@@ -39,6 +39,8 @@ deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bot
deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.03), rgba(0, 0, 0,
0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: rgba(255, 255, 255, 0.2); }
+
avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
avatar.color1 { background-image: linear-gradient(#ffbe6f, #ed6f00); color: #ffe5c5; }
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]