GNOME.org
 

[gtk+] listbox: Mark activatable rows with a .activatable style class

commit 207e593075b01815973c4bfcb5a0d90f1de8d11e
Author: Benjamin Otte <otte redhat com>
Date:   Tue Aug 25 02:08:29 2015 +0200

    listbox: Mark activatable rows with a .activatable style class
    
    Do not use .button anymore.
    
    This is for 2 reasons:
    1. The styling is seperate in our themes, so it doesn't make sense to
       share the style class.
    2. Due to the shared styling of .buton, listbox rows inherit all the
       special case styles that exist for buttons - such as linked buttons,
       header buttons, entry buttons, spinbutton buttons, etc. This means
       that the code has to check all these special cases all the time and
       for listbox rows, this is very slow.

 gtk/gtklistbox.c                         |    6 ++--
 gtk/theme/Adwaita/_common.scss           |   20 +++++-----
 gtk/theme/Adwaita/gtk-contained-dark.css |   50 +++++++++++++--------------
 gtk/theme/Adwaita/gtk-contained.css      |   50 +++++++++++++--------------
 gtk/theme/HighContrast/_common.scss      |   22 ++++++------
 gtk/theme/HighContrast/gtk.css           |   54 +++++++++++++++---------------
 6 files changed, 99 insertions(+), 103 deletions(-)
---
diff --git a/gtk/gtklistbox.c b/gtk/gtklistbox.c
index 74b3da1..fd91acf 100644
--- a/gtk/gtklistbox.c
+++ b/gtk/gtklistbox.c
@@ -3017,7 +3017,7 @@ gtk_list_box_row_init (GtkListBoxRow *row)
 
   context = gtk_widget_get_style_context (GTK_WIDGET (row));
   gtk_style_context_add_class (context, GTK_STYLE_CLASS_LIST_ROW);
-  gtk_style_context_add_class (context, GTK_STYLE_CLASS_BUTTON);
+  gtk_style_context_add_class (context, "activatable");
 }
 
 static void
@@ -3426,9 +3426,9 @@ gtk_list_box_update_row_style (GtkListBox    *box,
   context = gtk_widget_get_style_context (GTK_WIDGET (row));
   if (ROW_PRIV (row)->activatable ||
       (ROW_PRIV (row)->selectable && can_select))
-    gtk_style_context_add_class (context, GTK_STYLE_CLASS_BUTTON);
+    gtk_style_context_add_class (context, "activatable");
   else
-    gtk_style_context_remove_class (context, GTK_STYLE_CLASS_BUTTON);
+    gtk_style_context_remove_class (context, "activatable");
 }
 
 static void
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 9005d92..b821895 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2568,15 +2568,15 @@ GtkScrolledWindow {
   padding: 2px;
 }
 
-.list-row.button,
-.list-row.button:backdrop,
-.list-row.button:backdrop:active,
-.list-row.button:backdrop:checked,
-.list-row.button:backdrop:insensitive,
-.list-row.button:backdrop:insensitive:active,
-.list-row.button:backdrop:insensitive:checked,
-.list-row.button:insensitive:active,
-.list-row.button:insensitive:checked {
+.list-row.activatable,
+.list-row.activatable:backdrop,
+.list-row.activatable:backdrop:active,
+.list-row.activatable:backdrop:checked,
+.list-row.activatable:backdrop:insensitive,
+.list-row.activatable:backdrop:insensitive:active,
+.list-row.activatable:backdrop:insensitive:checked,
+.list-row.activatable:insensitive:active,
+.list-row.activatable:insensitive:checked {
   // reset button inherited stuff
   @extend %undecorated_button;
   background-color: transparentize($base_color,1); // for the transition
@@ -2586,7 +2586,7 @@ GtkScrolledWindow {
 
 }
 
-.list-row.button {
+.list-row.activatable {
   // let's take care of background colors
   &:hover {
     background-color: mix($fg_color, $base_color, 5%);
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index c198b68..ac7beec 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1134,16 +1134,15 @@ GtkTextView {
 .titlebar .button.titlebutton:visited, .button:link:hover, .button:link:active, .button:link:checked, 
.button:visited:hover, .button:visited:active, .button:visited:checked, .button:link:backdrop, 
.button:visited:backdrop, .menu.button, .header-bar .menu.button.titlebutton,
 .titlebar .menu.button.titlebutton, .notebook tab .button, .notebook tab .header-bar .button.titlebutton, 
.header-bar .notebook tab .button.titlebutton,
 .notebook tab .titlebar .button.titlebutton,
-.titlebar .notebook tab .button.titlebutton, .list-row.button, .header-bar .list-row.button.titlebutton,
-.titlebar .list-row.button.titlebutton,
-.list-row.button:backdrop,
-.list-row.button:backdrop:active,
-.list-row.button:backdrop:checked,
-.list-row.button:backdrop:insensitive,
-.list-row.button:backdrop:insensitive:active,
-.list-row.button:backdrop:insensitive:checked,
-.list-row.button:insensitive:active,
-.list-row.button:insensitive:checked, .app-notification .button.flat, .app-notification 
.sidebar-button.button, .app-notification .header-bar .titlebutton.button, .header-bar .app-notification 
.titlebutton.button,
+.titlebar .notebook tab .button.titlebutton, .list-row.activatable,
+.list-row.activatable:backdrop,
+.list-row.activatable:backdrop:active,
+.list-row.activatable:backdrop:checked,
+.list-row.activatable:backdrop:insensitive,
+.list-row.activatable:backdrop:insensitive:active,
+.list-row.activatable:backdrop:insensitive:checked,
+.list-row.activatable:insensitive:active,
+.list-row.activatable:insensitive:checked, .app-notification .button.flat, .app-notification 
.sidebar-button.button, .app-notification .header-bar .titlebutton.button, .header-bar .app-notification 
.titlebutton.button,
 .app-notification .titlebar .titlebutton.button,
 .titlebar .app-notification .titlebutton.button,
 .app-notification.frame .button.flat,
@@ -3432,32 +3431,31 @@ GtkScrolledWindow GtkViewport.frame {
 .grid-child {
   padding: 2px; }
 
-.list-row.button, .header-bar .list-row.button.titlebutton,
-.titlebar .list-row.button.titlebutton,
-.list-row.button:backdrop,
-.list-row.button:backdrop:active,
-.list-row.button:backdrop:checked,
-.list-row.button:backdrop:insensitive,
-.list-row.button:backdrop:insensitive:active,
-.list-row.button:backdrop:insensitive:checked,
-.list-row.button:insensitive:active,
-.list-row.button:insensitive:checked {
+.list-row.activatable,
+.list-row.activatable:backdrop,
+.list-row.activatable:backdrop:active,
+.list-row.activatable:backdrop:checked,
+.list-row.activatable:backdrop:insensitive,
+.list-row.activatable:backdrop:insensitive:active,
+.list-row.activatable:backdrop:insensitive:checked,
+.list-row.activatable:insensitive:active,
+.list-row.activatable:insensitive:checked {
   background-color: rgba(41, 41, 41, 0);
   border-style: none;
   border-radius: 0;
   box-shadow: none; }
 
-.list-row.button:hover {
+.list-row.activatable:hover {
   background-color: #323232; }
-.list-row.button:active {
+.list-row.activatable:active {
   box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
-.list-row.button:backdrop:hover {
+.list-row.activatable:backdrop:hover {
   background-color: transparent; }
-.list-row.button:selected:active {
+.list-row.activatable:selected:active {
   box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
-.list-row.button:selected:hover {
+.list-row.activatable:selected:hover {
   background-color: #356ba4; }
-.list-row.button:selected:backdrop {
+.list-row.activatable:selected:backdrop {
   background-color: #215d9c; }
 
 .list-row:selected .button {
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index d472ac1..8ac8a59 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1134,16 +1134,15 @@ GtkTextView {
 .titlebar .button.titlebutton:visited, .button:link:hover, .button:link:active, .button:link:checked, 
.button:visited:hover, .button:visited:active, .button:visited:checked, .button:link:backdrop, 
.button:visited:backdrop, .menu.button, .header-bar .menu.button.titlebutton,
 .titlebar .menu.button.titlebutton, .notebook tab .button, .notebook tab .header-bar .button.titlebutton, 
.header-bar .notebook tab .button.titlebutton,
 .notebook tab .titlebar .button.titlebutton,
-.titlebar .notebook tab .button.titlebutton, .list-row.button, .header-bar .list-row.button.titlebutton,
-.titlebar .list-row.button.titlebutton,
-.list-row.button:backdrop,
-.list-row.button:backdrop:active,
-.list-row.button:backdrop:checked,
-.list-row.button:backdrop:insensitive,
-.list-row.button:backdrop:insensitive:active,
-.list-row.button:backdrop:insensitive:checked,
-.list-row.button:insensitive:active,
-.list-row.button:insensitive:checked, .app-notification .button.flat, .app-notification 
.sidebar-button.button, .app-notification .header-bar .titlebutton.button, .header-bar .app-notification 
.titlebutton.button,
+.titlebar .notebook tab .button.titlebutton, .list-row.activatable,
+.list-row.activatable:backdrop,
+.list-row.activatable:backdrop:active,
+.list-row.activatable:backdrop:checked,
+.list-row.activatable:backdrop:insensitive,
+.list-row.activatable:backdrop:insensitive:active,
+.list-row.activatable:backdrop:insensitive:checked,
+.list-row.activatable:insensitive:active,
+.list-row.activatable:insensitive:checked, .app-notification .button.flat, .app-notification 
.sidebar-button.button, .app-notification .header-bar .titlebutton.button, .header-bar .app-notification 
.titlebutton.button,
 .app-notification .titlebar .titlebutton.button,
 .titlebar .app-notification .titlebutton.button,
 .app-notification.frame .button.flat,
@@ -3594,32 +3593,31 @@ GtkScrolledWindow GtkViewport.frame {
 .grid-child {
   padding: 2px; }
 
-.list-row.button, .header-bar .list-row.button.titlebutton,
-.titlebar .list-row.button.titlebutton,
-.list-row.button:backdrop,
-.list-row.button:backdrop:active,
-.list-row.button:backdrop:checked,
-.list-row.button:backdrop:insensitive,
-.list-row.button:backdrop:insensitive:active,
-.list-row.button:backdrop:insensitive:checked,
-.list-row.button:insensitive:active,
-.list-row.button:insensitive:checked {
+.list-row.activatable,
+.list-row.activatable:backdrop,
+.list-row.activatable:backdrop:active,
+.list-row.activatable:backdrop:checked,
+.list-row.activatable:backdrop:insensitive,
+.list-row.activatable:backdrop:insensitive:active,
+.list-row.activatable:backdrop:insensitive:checked,
+.list-row.activatable:insensitive:active,
+.list-row.activatable:insensitive:checked {
   background-color: rgba(255, 255, 255, 0);
   border-style: none;
   border-radius: 0;
   box-shadow: none; }
 
-.list-row.button:hover {
+.list-row.activatable:hover {
   background-color: #f4f4f4; }
-.list-row.button:active {
+.list-row.activatable:active {
   box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
-.list-row.button:backdrop:hover {
+.list-row.activatable:backdrop:hover {
   background-color: transparent; }
-.list-row.button:selected:active {
+.list-row.activatable:selected:active {
   box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
-.list-row.button:selected:hover {
+.list-row.activatable:selected:hover {
   background-color: #4786c8; }
-.list-row.button:selected:backdrop {
+.list-row.activatable:selected:backdrop {
   background-color: #4a90d9; }
 
 .list-row:selected .button {
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 48e95cd..f59b405 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -1927,15 +1927,15 @@ GtkScrolledWindow {
   padding: 2px;
 }
 
-.list-row.button,
-.list-row.button:backdrop,
-.list-row.button:backdrop:active,
-.list-row.button:backdrop:checked,
-.list-row.button:backdrop:insensitive,
-.list-row.button:backdrop:insensitive:active,
-.list-row.button:backdrop:insensitive:checked,
-.list-row.button:insensitive:active,
-.list-row.button:insensitive:checked {
+.list-row.activatable,
+.list-row.activatable:backdrop,
+.list-row.activatable:backdrop:active,
+.list-row.activatable:backdrop:checked,
+.list-row.activatable:backdrop:insensitive,
+.list-row.activatable:backdrop:insensitive:active,
+.list-row.activatable:backdrop:insensitive:checked,
+.list-row.activatable:insensitive:active,
+.list-row.activatable:insensitive:checked {
   // reset button inherited stuff
   @extend %undecorated_button;
   background-color: transparentize($base_color,1); // for the transition
@@ -1945,7 +1945,7 @@ GtkScrolledWindow {
 
 }
 
-.list-row.button {
+.list-row.activatable {
   @extend %undecorated_button;
   background-color: transparentize($base_color,1); // for the transition
   border-style: none; // I need no borders here
@@ -2013,7 +2013,7 @@ GtkScrolledWindow {
 }
 
 // transition
-.list-row, list-row.button {
+.list-row, .list-row.activatable {
   transition: all 300ms $ease-out-quad;
   &:hover { transition: none; }
 }
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index 3c203b9..6b8dc10 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -765,15 +765,15 @@
   border-radius: 3px;
   border-style: solid; }
 
-.button.flat, .button.flat:backdrop, .button.flat:insensitive:backdrop, .menuitem.button.flat, 
.menuitem.button.flat:backdrop, .button:link, .button:visited, .button:link:hover, .button:link:active, 
.button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab 
.button, .list-row.button,
-.list-row.button:backdrop,
-.list-row.button:backdrop:active,
-.list-row.button:backdrop:checked,
-.list-row.button:backdrop:insensitive,
-.list-row.button:backdrop:insensitive:active,
-.list-row.button:backdrop:insensitive:checked,
-.list-row.button:insensitive:active,
-.list-row.button:insensitive:checked, GtkCalendar.button, GtkCalendar.button:hover, 
GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
+.button.flat, .button.flat:backdrop, .button.flat:insensitive:backdrop, .menuitem.button.flat, 
.menuitem.button.flat:backdrop, .button:link, .button:visited, .button:link:hover, .button:link:active, 
.button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab 
.button, .list-row.activatable,
+.list-row.activatable:backdrop,
+.list-row.activatable:backdrop:active,
+.list-row.activatable:backdrop:checked,
+.list-row.activatable:backdrop:insensitive,
+.list-row.activatable:backdrop:insensitive:active,
+.list-row.activatable:backdrop:insensitive:checked,
+.list-row.activatable:insensitive:active,
+.list-row.activatable:insensitive:checked, GtkCalendar.button, GtkCalendar.button:hover, 
GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
   border-color: transparent;
   background-color: transparent;
   background-image: none;
@@ -2113,36 +2113,36 @@ GtkPlacesSidebar.sidebar .view .separator:backdrop {
 .grid-child {
   padding: 2px; }
 
-.list-row.button,
-.list-row.button:backdrop,
-.list-row.button:backdrop:active,
-.list-row.button:backdrop:checked,
-.list-row.button:backdrop:insensitive,
-.list-row.button:backdrop:insensitive:active,
-.list-row.button:backdrop:insensitive:checked,
-.list-row.button:insensitive:active,
-.list-row.button:insensitive:checked {
+.list-row.activatable,
+.list-row.activatable:backdrop,
+.list-row.activatable:backdrop:active,
+.list-row.activatable:backdrop:checked,
+.list-row.activatable:backdrop:insensitive,
+.list-row.activatable:backdrop:insensitive:active,
+.list-row.activatable:backdrop:insensitive:checked,
+.list-row.activatable:insensitive:active,
+.list-row.activatable:insensitive:checked {
   background-color: rgba(255, 255, 255, 0);
   border-style: none;
   border-radius: 0;
   box-shadow: none; }
 
-.list-row.button {
+.list-row.activatable {
   background-color: rgba(255, 255, 255, 0);
   border-style: none;
   border-radius: 0;
   box-shadow: none; }
-  .list-row.button:hover {
+  .list-row.activatable:hover {
     background-color: #f2f2f2; }
-  .list-row.button:active {
+  .list-row.activatable:active {
     box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
-  .list-row.button:selected {
+  .list-row.activatable:selected {
     background-color: #000; }
-    .list-row.button:selected:active {
+    .list-row.activatable:selected:active {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
-    .list-row.button:selected:hover {
+    .list-row.activatable:selected:hover {
       background-color: black; }
-    .list-row.button:selected:backdrop {
+    .list-row.activatable:selected:backdrop {
       background-color: #7f7f7f; }
 
 .list-row:selected .button {
@@ -2229,9 +2229,9 @@ GtkPlacesSidebar.sidebar .view .separator:backdrop {
       background-image: none;
       background-color: white; }
 
-.list-row, list-row.button {
+.list-row, .list-row.activatable {
   transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
-  .list-row:hover, list-row.button:hover {
+  .list-row:hover, .list-row.activatable:hover {
     transition: none; }
 
 /*********************
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]