theme: Fix scale sizing during .fine-tune

Using fine-tune on a GtkScale is maybe a little known feature, but it's
also quite wonky. It causes marks, values, and sliders to jump around
when activated. This is because it's implemented with less padding
around the scale and an increased minimum size.

For example a value drawn left or right of a horizontal scale, as then
the height of the scale is the value height plus padding. So fine-tuning
compresses the scale vertically.

We can fix this by adding negative margin on the trough instead, without
any changes to the padding or minimum size of the scale.

Also, because the trough now grows 3px in all directions, the slider has
to do that to, so that margin increases by 3px in all directions
compared to what it was, also for the cases with marks.

One last minor detail is that for vertical scales, fine-tuning causes
the height of the mark indicators to grow, whereas their width should
decrease. That's also fixed.
This commit is contained in:
Matthijs Velsink
2024-08-27 09:40:19 +02:00
parent a6eea6ba3c
commit 2e2dab9c3d

View File

@@ -2728,19 +2728,8 @@ scale {
// click-and-hold the slider to activate
&.fine-tune {
&.horizontal {
padding-top: 9px;
padding-bottom: 9px;
min-height: 16px;
}
&.vertical {
padding-left: 9px;
padding-right: 9px;
min-width: 16px;
}
// to make the trough grow in fine-tune mode
> trough { margin: -3px; }
> trough > slider { margin: -6px; }
> trough > fill,
@@ -2885,7 +2874,7 @@ scale {
&.top { margin-left: 3px; }
&.bottom { margin-right: 3px; }
indicator { min-height: ($_marks_length - 3px); }
indicator { min-width: ($_marks_length - 3px); }
}
}
@@ -2957,7 +2946,7 @@ scale {
&.fine-tune > trough > slider {
@if $dir_class == 'horizontal' {
// bigger negative margins to make the trough grow here as well
margin: -7px -10px;
margin: -7px;
@if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
@@ -2965,7 +2954,7 @@ scale {
}
@else {
margin: -10px -7px;
margin: -7px;
@if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }