GNOME.org
 

[libhandy/wip/exalm/leaflet-transltions: 2/10] shadow-helper: Add an outline

commit 4630e61ce070687b15bb33dd4f7a37a1b8f3f21d
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        |  2 ++
 src/themes/HighContrastInverse.css |  2 ++
 src/themes/_definitions.scss       |  2 ++
 src/themes/_fallback-base.scss     |  6 ++++++
 src/themes/fallback.css            |  2 ++
 8 files changed, 53 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 37d5e12a..d1e57e0b 100644
--- a/src/themes/Adwaita-dark.css
+++ b/src/themes/Adwaita-dark.css
@@ -37,6 +37,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 1061d9ab..0a7e11a2 100644
--- a/src/themes/Adwaita.css
+++ b/src/themes/Adwaita.css
@@ -37,6 +37,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 0f3559a9..a8eb25ac 100644
--- a/src/themes/HighContrast.css
+++ b/src/themes/HighContrast.css
@@ -37,6 +37,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; }
diff --git a/src/themes/HighContrastInverse.css b/src/themes/HighContrastInverse.css
index df682d0c..48464e58 100644
--- a/src/themes/HighContrastInverse.css
+++ b/src/themes/HighContrastInverse.css
@@ -37,6 +37,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; }
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 4e26bbd5..80face6e 100644
--- a/src/themes/_fallback-base.scss
+++ b/src/themes/_fallback-base.scss
@@ -90,6 +90,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 38965d8b..2231a6f4 100644
--- a/src/themes/fallback.css
+++ b/src/themes/fallback.css
@@ -37,6 +37,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]