GNOME.org
 

[libhandy/wip/exalm/leaflet-transltions: 1/9] shadow-helper: Add an outline

commit 0409e3b59cad3dea114ee7234b0473432cb5dab7
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://source.puri.sm/Librem5/libhandy/-/issues/158
    
    Signed-off-by: Alexander Mikhaylenko <alexm gnome org>

 src/hdy-shadow-helper.c            | 32 +++++++++++++++++++++++++++++---
 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, 55 insertions(+), 3 deletions(-)
---
diff --git a/src/hdy-shadow-helper.c b/src/hdy-shadow-helper.c
index 7b2962c5..b1ff10c5 100644
--- a/src/hdy-shadow-helper.c
+++ b/src/hdy-shadow-helper.c
@@ -35,6 +35,7 @@ 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;
 
@@ -137,7 +138,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,17 +155,21 @@ 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;
@@ -290,6 +296,7 @@ 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;
 
@@ -349,14 +356,15 @@ 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);
   cairo_paint_with_alpha (cr, 1 - progress);
   cairo_restore (cr);
 
+  if (progress <= 0 || progress >= 1)
+    return;
+
   switch (direction) {
   case GTK_PAN_DIRECTION_RIGHT:
     cairo_translate (cr, width - shadow_size, 0);
@@ -397,5 +405,23 @@ 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:
+  case GTK_PAN_DIRECTION_UP:
+    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]