GNOME.org
 

[gtk+/wip/gbsneto/edge-constraints: 5/5] window: Add individual CSS classes based on edge constraints

commit a32d5a6d3ffb217f1fc42ededaf98504cfed968b
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Fri Aug 18 20:12:23 2017 -0300

    window: Add individual CSS classes based on edge constraints
    
    The last touch on this patch series is making GtkWindow able to
    selectively adjust various UI details based on the different
    tiled edges. The main driver here is that we don't want to show
    shadows on edges that are constrained.
    
    This patch adds the necessary code to do that, while still
    maintaining compatibility with the old ways.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=783669

 gtk/gtkwindow.c                          |   62 +++++++++++++++++++++++++-----
 gtk/theme/Adwaita/_common.scss           |   36 +++++++++++++++++
 gtk/theme/Adwaita/gtk-contained-dark.css |   20 ++++++++-
 gtk/theme/Adwaita/gtk-contained.css      |   20 ++++++++-
 4 files changed, 122 insertions(+), 16 deletions(-)
---
diff --git a/gtk/gtkwindow.c b/gtk/gtkwindow.c
index ee882d1..785770b 100644
--- a/gtk/gtkwindow.c
+++ b/gtk/gtkwindow.c
@@ -6859,13 +6859,12 @@ update_border_windows (GtkWindow *window)
        */
       if (priv->edge_constraints)
         {
-          resize_n = priv->edge_constraints & GDK_WINDOW_STATE_TOP_RESIZABLE;
-          resize_e = priv->edge_constraints & GDK_WINDOW_STATE_RIGHT_RESIZABLE;
-          resize_s = priv->edge_constraints & GDK_WINDOW_STATE_BOTTOM_RESIZABLE;
-          resize_w = priv->edge_constraints & GDK_WINDOW_STATE_LEFT_RESIZABLE;
+          guint edge_constraints = priv->edge_constraints;
 
-          g_message ("has edge information! (n: %d, e: %d, s: %d, w: %s)",
-                     resize_n, resize_e, resize_s, resize_w);
+          resize_n = edge_constraints & GDK_WINDOW_STATE_TOP_RESIZABLE;
+          resize_e = edge_constraints & GDK_WINDOW_STATE_RIGHT_RESIZABLE;
+          resize_s = edge_constraints & GDK_WINDOW_STATE_BOTTOM_RESIZABLE;
+          resize_w = edge_constraints & GDK_WINDOW_STATE_LEFT_RESIZABLE;
         }
       else
         {
@@ -7544,10 +7543,47 @@ update_window_style_classes (GtkWindow *window)
 
   context = gtk_widget_get_style_context (GTK_WIDGET (window));
 
-  if (priv->tiled)
-    gtk_style_context_add_class (context, "tiled");
+  if (priv->edge_constraints == 0)
+    {
+      if (priv->tiled)
+        gtk_style_context_add_class (context, "tiled");
+      else
+        gtk_style_context_remove_class (context, "tiled");
+    }
   else
-    gtk_style_context_remove_class (context, "tiled");
+    {
+      guint constraints = priv->edge_constraints;
+
+      g_message ("state → top: %d%d, right: %d%d, bottom: %d%d, left: %d%d",
+                 constraints & GDK_WINDOW_STATE_TOP_RESIZABLE ? 1 : 0,
+                 constraints & GDK_WINDOW_STATE_TOP_TILED ? 1 : 0,
+                 constraints & GDK_WINDOW_STATE_RIGHT_RESIZABLE ? 1 : 0,
+                 constraints & GDK_WINDOW_STATE_RIGHT_TILED ? 1 : 0,
+                 constraints & GDK_WINDOW_STATE_BOTTOM_RESIZABLE ? 1 : 0,
+                 constraints & GDK_WINDOW_STATE_BOTTOM_TILED ? 1 : 0,
+                 constraints & GDK_WINDOW_STATE_LEFT_RESIZABLE ? 1 : 0,
+                 constraints & GDK_WINDOW_STATE_LEFT_TILED ? 1 : 0);
+
+      if (constraints & GDK_WINDOW_STATE_TOP_TILED)
+        gtk_style_context_add_class (context, "tiled-top");
+      else
+        gtk_style_context_remove_class (context, "tiled-top");
+
+      if (constraints & GDK_WINDOW_STATE_RIGHT_TILED)
+        gtk_style_context_add_class (context, "tiled-right");
+      else
+        gtk_style_context_remove_class (context, "tiled-right");
+
+      if (constraints & GDK_WINDOW_STATE_BOTTOM_TILED)
+        gtk_style_context_add_class (context, "tiled-bottom");
+      else
+        gtk_style_context_remove_class (context, "tiled-bottom");
+
+      if (constraints & GDK_WINDOW_STATE_LEFT_TILED)
+        gtk_style_context_add_class (context, "tiled-left");
+      else
+        gtk_style_context_remove_class (context, "tiled-left");
+    }
 
   if (priv->maximized)
     gtk_style_context_add_class (context, "maximized");
@@ -7841,7 +7877,13 @@ gtk_window_state_event (GtkWidget           *widget,
 
   update_edge_constraints (window, event);
 
-  if (event->changed_mask & (GDK_WINDOW_STATE_FULLSCREEN | GDK_WINDOW_STATE_MAXIMIZED | 
GDK_WINDOW_STATE_TILED))
+  if (event->changed_mask & (GDK_WINDOW_STATE_FULLSCREEN |
+                             GDK_WINDOW_STATE_MAXIMIZED |
+                             GDK_WINDOW_STATE_TILED |
+                             GDK_WINDOW_STATE_TOP_TILED |
+                             GDK_WINDOW_STATE_RIGHT_TILED |
+                             GDK_WINDOW_STATE_BOTTOM_TILED |
+                             GDK_WINDOW_STATE_LEFT_TILED))
     {
       update_window_style_classes (window);
       update_window_buttons (window);
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index f1e0cea..30e62a0 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -1589,6 +1589,7 @@ headerbar {
 
   // squared corners when the window is maximized, tiled, or fullscreen
   .tiled &,
+  .tiled-top &,
   .maximized &,
   .fullscreen & {
     &:backdrop, & {
@@ -1596,6 +1597,14 @@ headerbar {
     }
   }
 
+  .tiled-left & {
+    border-top-left-radius: 0;
+  }
+
+  .tiled-right & {
+    border-top-right-radius: 0;
+  }
+
   &.default-decoration {
     min-height: 28px;
     padding: 4px;
@@ -4257,6 +4266,33 @@ decoration {
   .fullscreen &,
   .tiled & { border-radius: 0; }
 
+  // Don't round corners on tiled windows
+  .tiled-top &,
+  .tiled-left & { border-top-left-radius: 0; }
+
+  .tiled-top &,
+  .tiled-right & { border-top-right-radius: 0; }
+
+  // Since we cannot have individual box-shadow selectors, special-case
+  // each possible case here.
+
+  // No shadow
+  .tiled-top.tiled-right.tiled-bottom.tiled-left & {
+    box-shadow: 0 0 0 1px $_wm_border;
+  }
+
+  // Right-only
+  .tiled-top.tiled-left.tiled-right & {
+    box-shadow: 3px 0 9px -9px transparentize(black, 0.5),
+                0 0 0 1px $_wm_border;
+  }
+
+  // Left-only
+  .tiled-top.tiled-left.tiled-right & {
+    box-shadow: -3px 0 9px -9px transparentize(black, 0.5),
+                0 0 0 1px $_wm_border;
+  }
+
   .popup & { box-shadow: none; }
 
   // server-side decorations as used by mutter
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 9241893..faeb145 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -648,7 +648,11 @@ searchbar, .location-bar { border-width: 0 0 1px; padding: 3px; }
 
 .selection-mode.titlebar:not(headerbar) .selection-menu:backdrop .arrow, 
.selection-mode.titlebar:not(headerbar) .selection-menu .arrow, headerbar.selection-mode 
.selection-menu:backdrop .arrow, headerbar.selection-mode .selection-menu .arrow { -gtk-icon-source: 
-gtk-icontheme("pan-down-symbolic"); color: rgba(255, 255, 255, 0.5); -gtk-icon-shadow: none; }
 
-.tiled .titlebar:backdrop:not(headerbar), .tiled .titlebar:not(headerbar), .maximized 
.titlebar:backdrop:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen 
.titlebar:backdrop:not(headerbar), .fullscreen .titlebar:not(headerbar), .tiled headerbar:backdrop, .tiled 
headerbar, .maximized headerbar:backdrop, .maximized headerbar, .fullscreen headerbar:backdrop, .fullscreen 
headerbar { border-radius: 0; }
+.tiled .titlebar:backdrop:not(headerbar), .tiled .titlebar:not(headerbar), .tiled-top 
.titlebar:backdrop:not(headerbar), .tiled-top .titlebar:not(headerbar), .maximized 
.titlebar:backdrop:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen 
.titlebar:backdrop:not(headerbar), .fullscreen .titlebar:not(headerbar), .tiled headerbar:backdrop, .tiled 
headerbar, .tiled-top headerbar:backdrop, .tiled-top headerbar, .maximized headerbar:backdrop, .maximized 
headerbar, .fullscreen headerbar:backdrop, .fullscreen headerbar { border-radius: 0; }
+
+.tiled-left .titlebar:not(headerbar), .tiled-left headerbar { border-top-left-radius: 0; }
+
+.tiled-right .titlebar:not(headerbar), .tiled-right headerbar { border-top-right-radius: 0; }
 
 .default-decoration.titlebar:not(headerbar), headerbar.default-decoration { min-height: 28px; padding: 4px; }
 
@@ -1830,6 +1834,16 @@ decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(
 
 .maximized decoration, .fullscreen decoration, .tiled decoration { border-radius: 0; }
 
+.tiled-top decoration, .tiled-left decoration { border-top-left-radius: 0; }
+
+.tiled-top decoration, .tiled-right decoration { border-top-right-radius: 0; }
+
+.tiled-top.tiled-right.tiled-bottom.tiled-left decoration { box-shadow: 0 0 0 1px rgba(27, 31, 32, 0.9); }
+
+.tiled-top.tiled-left.tiled-right decoration { box-shadow: 3px 0 9px -9px rgba(0, 0, 0, 0.5), 0 0 0 1px 
rgba(27, 31, 32, 0.9); }
+
+.tiled-top.tiled-left.tiled-right decoration { box-shadow: -3px 0 9px -9px rgba(0, 0, 0, 0.5), 0 0 0 1px 
rgba(27, 31, 32, 0.9); }
+
 .popup decoration { box-shadow: none; }
 
 .ssd decoration { box-shadow: 0 0 0 1px rgba(27, 31, 32, 0.9); }
@@ -1852,9 +1866,9 @@ headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.tit
 
 headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { 
-gtk-icon-shadow: none; }
 
-.view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, 
iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, 
textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, 
iconview text selection, textview text selection:focus, textview text selection, flowbox 
flowboxchild:selected, spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected { background-color: #215d9c; }
+.view:selected:focus, .view:selected, iconview:selected, .view text:selected, iconview text:selected, 
textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, 
iconview text selection, textview text selection:focus, textview text selection, flowbox 
flowboxchild:selected, spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected { background-color: #215d9c; }
 
-row:selected label, label:selected, .selection-mode button.titlebutton, .view:selected:focus, 
iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview 
text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview 
text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text 
selection, textview text selection:focus, textview text selection, flowbox flowboxchild:selected, 
spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected { color: #ffffff; }
+row:selected label, label:selected, .selection-mode button.titlebutton, .view:selected:focus, 
.view:selected, iconview:selected, .view text:selected, iconview text:selected, textview text:selected, .view 
text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview 
text selection:focus, textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) 
selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, 
treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { color: #ffffff; }
 
 row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, 
iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, iconview 
text:disabled:selected:focus, textview text:disabled:selected:focus, .view text:disabled:selected, iconview 
text:disabled:selected, textview text:disabled:selected, iconview text selection:disabled:focus, .view text 
selection:disabled, iconview text selection:disabled, textview text selection:disabled, flowbox 
flowboxchild:disabled:selected, label:disabled selection, spinbutton:not(.vertical) selection:disabled, entry 
selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, 
row:disabled:selected, calendar:disabled:selected { color: #90aece; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 9fa66b7..15bc5c8 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -656,7 +656,11 @@ searchbar, .location-bar { border-width: 0 0 1px; padding: 3px; }
 
 .selection-mode.titlebar:not(headerbar) .selection-menu:backdrop .arrow, 
.selection-mode.titlebar:not(headerbar) .selection-menu .arrow, headerbar.selection-mode 
.selection-menu:backdrop .arrow, headerbar.selection-mode .selection-menu .arrow { -gtk-icon-source: 
-gtk-icontheme("pan-down-symbolic"); color: rgba(255, 255, 255, 0.5); -gtk-icon-shadow: none; }
 
-.tiled .titlebar:backdrop:not(headerbar), .tiled .titlebar:not(headerbar), .maximized 
.titlebar:backdrop:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen 
.titlebar:backdrop:not(headerbar), .fullscreen .titlebar:not(headerbar), .tiled headerbar:backdrop, .tiled 
headerbar, .maximized headerbar:backdrop, .maximized headerbar, .fullscreen headerbar:backdrop, .fullscreen 
headerbar { border-radius: 0; }
+.tiled .titlebar:backdrop:not(headerbar), .tiled .titlebar:not(headerbar), .tiled-top 
.titlebar:backdrop:not(headerbar), .tiled-top .titlebar:not(headerbar), .maximized 
.titlebar:backdrop:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen 
.titlebar:backdrop:not(headerbar), .fullscreen .titlebar:not(headerbar), .tiled headerbar:backdrop, .tiled 
headerbar, .tiled-top headerbar:backdrop, .tiled-top headerbar, .maximized headerbar:backdrop, .maximized 
headerbar, .fullscreen headerbar:backdrop, .fullscreen headerbar { border-radius: 0; }
+
+.tiled-left .titlebar:not(headerbar), .tiled-left headerbar { border-top-left-radius: 0; }
+
+.tiled-right .titlebar:not(headerbar), .tiled-right headerbar { border-top-right-radius: 0; }
 
 .default-decoration.titlebar:not(headerbar), headerbar.default-decoration { min-height: 28px; padding: 4px; }
 
@@ -1850,6 +1854,16 @@ decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(
 
 .maximized decoration, .fullscreen decoration, .tiled decoration { border-radius: 0; }
 
+.tiled-top decoration, .tiled-left decoration { border-top-left-radius: 0; }
+
+.tiled-top decoration, .tiled-right decoration { border-top-right-radius: 0; }
+
+.tiled-top.tiled-right.tiled-bottom.tiled-left decoration { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23); }
+
+.tiled-top.tiled-left.tiled-right decoration { box-shadow: 3px 0 9px -9px rgba(0, 0, 0, 0.5), 0 0 0 1px 
rgba(0, 0, 0, 0.23); }
+
+.tiled-top.tiled-left.tiled-right decoration { box-shadow: -3px 0 9px -9px rgba(0, 0, 0, 0.5), 0 0 0 1px 
rgba(0, 0, 0, 0.23); }
+
 .popup decoration { box-shadow: none; }
 
 .ssd decoration { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23); }
@@ -1872,9 +1886,9 @@ headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.tit
 
 headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { 
-gtk-icon-shadow: none; }
 
-.view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, 
iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, 
textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, 
iconview text selection, textview text selection:focus, textview text selection, flowbox 
flowboxchild:selected, spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected { background-color: #4a90d9; }
+.view:selected:focus, .view:selected, iconview:selected, .view text:selected, iconview text:selected, 
textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, 
iconview text selection, textview text selection:focus, textview text selection, flowbox 
flowboxchild:selected, spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected { background-color: #4a90d9; }
 
-row:selected label, label:selected, .selection-mode button.titlebutton, .view:selected:focus, 
iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview 
text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview 
text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text 
selection, textview text selection:focus, textview text selection, flowbox flowboxchild:selected, 
spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected { color: #ffffff; }
+row:selected label, label:selected, .selection-mode button.titlebutton, .view:selected:focus, 
.view:selected, iconview:selected, .view text:selected, iconview text:selected, textview text:selected, .view 
text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview 
text selection:focus, textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) 
selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, 
treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { color: #ffffff; }
 
 row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, 
iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, iconview 
text:disabled:selected:focus, textview text:disabled:selected:focus, .view text:disabled:selected, iconview 
text:disabled:selected, textview text:disabled:selected, iconview text selection:disabled:focus, .view text 
selection:disabled, iconview text selection:disabled, textview text selection:disabled, flowbox 
flowboxchild:disabled:selected, label:disabled selection, spinbutton:not(.vertical) selection:disabled, entry 
selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, 
row:disabled:selected, calendar:disabled:selected { color: #a5c8ec; }
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]