Merge branch 'wip/exalm/color-scales' into 'main'

Redesign GtkColorScale

See merge request GNOME/gtk!4720

gtk/gtkcoloreditor.c

@@ -401,11 +401,6 @@ gtk_color_editor_init (GtkColorEditor *editor)
   g_type_ensure (GTK_TYPE_COLOR_SWATCH);
   gtk_widget_init_template (GTK_WIDGET (editor));
 
-  if (gtk_widget_get_direction (editor->h_slider) == GTK_TEXT_DIR_RTL)
-    gtk_widget_add_css_class (editor->h_slider, "marks-before");
-  else
-    gtk_widget_add_css_class (editor->h_slider, "marks-after");
-
   /* Create the scaled popup adjustments manually here because connecting user data is not
    * supported by template GtkBuilder xml (it would be possible to set this up in the xml
    * but require 4 separate callbacks and would be rather ugly).

gtk/gtkrange.c

@@ -30,6 +30,7 @@
 #include "gtkaccessible.h"
 #include "gtkadjustmentprivate.h"
 #include "gtkcolorscaleprivate.h"
+#include "gtkcssboxesprivate.h"
 #include "gtkenums.h"
 #include "gtkeventcontrollerkey.h"
 #include "gtkeventcontrollerscroll.h"
@@ -42,6 +43,7 @@
 #include "gtkorientable.h"
 #include "gtkprivate.h"
 #include "gtkscale.h"
+#include "gtksnapshot.h"
 #include "gtktypebuiltins.h"
 #include "gtkwidgetprivate.h"
 
@@ -1670,9 +1672,15 @@ gtk_range_render_trough (GtkGizmo    *gizmo,
    * so we let it...
    */
   if (GTK_IS_COLOR_SCALE (widget))
-    gtk_color_scale_snapshot_trough (GTK_COLOR_SCALE (widget), snapshot,
-                                     gtk_widget_get_width (GTK_WIDGET (gizmo)),
-                                     gtk_widget_get_height (GTK_WIDGET (gizmo)));
+    {
+      GtkCssBoxes boxes;
+      gtk_css_boxes_init (&boxes, GTK_WIDGET (gizmo));
+      gtk_snapshot_push_rounded_clip (snapshot, gtk_css_boxes_get_padding_box (&boxes));
+      gtk_color_scale_snapshot_trough (GTK_COLOR_SCALE (widget), snapshot,
+                                       gtk_widget_get_width (GTK_WIDGET (gizmo)),
+                                       gtk_widget_get_height (GTK_WIDGET (gizmo)));
+      gtk_snapshot_pop (snapshot);
+    }
 
   if (priv->show_fill_level &&
       gtk_adjustment_get_upper (priv->adjustment) - gtk_adjustment_get_page_size (priv->adjustment) -

gtk/theme/Default/_common.scss

@@ -2923,116 +2923,38 @@ scale {
   }
 
   &.color {
-    min-height: 0;
-    min-width: 0;
+    padding: 0;
 
     > trough {
-      background-image: image($borders_color);
-      background-repeat: no-repeat;
-    }
+      border: none;
+      background: none;
+      border-radius: 10px;
+      outline-offset: 1px;
 
-    &.horizontal {
-      padding: 0 0 15px 0;
-
-      > trough {
-        padding-bottom: 4px;
-        background-position: 0 -3px;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-
-      > trough > slider {
-        &:dir(ltr), &:dir(rtl) { // specificity bump
-          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            margin-bottom: -15px;
-            margin-top: 6px;
-          }
-        }
-      }
-    }
-
-    &.vertical {
-      &:dir(ltr) {
-        padding: 0 0 0 15px;
-
-        > trough {
-          padding-left: 4px;
-          background-position: 3px 0;
-          border-bottom-right-radius: 0;
-          border-top-right-radius: 0;
-        }
-
-        > trough > slider {
-          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            margin-left: -15px;
-            margin-right: 6px;
-          }
-        }
-      }
-
-      &:dir(rtl) {
-        padding: 0 15px 0 0;
-
-        > trough {
-          padding-right: 4px;
-          background-position: -3px 0;
-          border-bottom-left-radius: 0;
-          border-top-left-radius: 0;
-        }
-
-        > trough > slider {
-          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            margin-right: -15px;
-            margin-left: 6px;
-          }
-        }
+      > slider {
+        margin: 0;
+        opacity: .8;
       }
     }
 
     &.fine-tune {
-      &.horizontal {
-        &:dir(ltr), &:dir(rtl) { // specificity bump
-          padding: 0 0 12px 0;
+      &.vertical {
+        padding-left: 2px;
+        padding-right: 2px;
 
-          > trough {
-            padding-bottom: 7px;
-            background-position: 0 -6px;
-          }
-
-          > trough > slider {
-            margin-bottom: -15px;
-            margin-top: 6px;
-          }
+        > trough > slider {
+          margin-left: -2px;
+          margin-right: -2px;
         }
       }
 
-      &.vertical {
-        &:dir(ltr) {
-          padding: 0 0 0 12px;
+      &.horizontal {
+        padding-top: 2px;
+        padding-bottom: 2px;
 
-          > trough {
-            padding-left: 7px;
-            background-position: 6px 0;
-          }
-
-          > trough > slider {
-            margin-left: -15px;
-            margin-right: 6px;
-          }
-        }
-
-        &:dir(rtl) {
-          padding: 0 12px 0 0;
-
-          > trough {
-            padding-right: 7px;
-            background-position: -6px 0;
-          }
-
-          > trough > slider {
-            margin-right: -15px;
-            margin-left: 6px;
-          }
+        > trough > slider {
+          margin-top: -2px;
+          margin-bottom: -2px;
         }
       }
     }

gtk/ui/gtkcoloreditor.ui

@@ -102,9 +102,6 @@
                 <property name="adjustment">a_adj</property>
                 <property name="scale-type">1</property>
                 <property name="has-origin">False</property>
-                <style>
-                  <class name="marks-before"/>
-                </style>
                 <layout>
                   <property name="column">1</property>
                   <property name="row">2</property>