slider: Remove border drawing code add hover style
- remove all the border drawing on sliders since they are unused - listen for hover and add hover style Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/6274 Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3320>
This commit is contained in:
Sam Hewitt
Marge Bot
parent
43596ffca6
commit
6fd0aac864
@ -3,25 +3,25 @@
|
||||
$slider_size: $scalable_icon_size;
|
||||
|
||||
.slider {
|
||||
color: if($variant == 'light', $fg_color, darken($fg_color, 9%));
|
||||
|
||||
// slider trough
|
||||
-barlevel-height: 4px;
|
||||
-barlevel-background-color: transparentize($fg_color, 0.8); //background of the trough
|
||||
-barlevel-border-width: 2px;
|
||||
-barlevel-border-color: transparent; // trough border color
|
||||
-barlevel-background-color: transparentize($fg_color, 0.9);
|
||||
// fill style
|
||||
-barlevel-active-background-color: $selected_bg_color;
|
||||
-barlevel-active-border-color: transparent;
|
||||
// overfill style (red in this case)
|
||||
-barlevel-overdrive-color: $destructive_color;
|
||||
-barlevel-overdrive-border-color: transparent; //trough border when red;
|
||||
-barlevel-overdrive-separator-width:1px;
|
||||
// slider handler
|
||||
-slider-handle-radius: $slider_size * 0.5; // half the size of the size
|
||||
-slider-handle-border-width: 0;
|
||||
-slider-handle-border-color: transparent; // because 0 width
|
||||
|
||||
// hc style
|
||||
@if $contrast == 'high' {
|
||||
-barlevel-background-color: transparentize($fg_color, 0.6);
|
||||
}
|
||||
// hc style
|
||||
@if $contrast == 'high' {
|
||||
-barlevel-background-color: transparentize($fg_color, 0.6);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: if($variant == 'light', lighten($fg_color, 7%), $fg_color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,15 +28,11 @@ export const BarLevel = GObject.registerClass({
|
||||
this._barLevelWidth = 0;
|
||||
this._barLevelHeight = 0;
|
||||
|
||||
this._barLevelBorderWidth = 0;
|
||||
this._overdriveSeparatorWidth = 0;
|
||||
|
||||
this._barLevelColor = null;
|
||||
this._barLevelActiveColor = null;
|
||||
this._barLevelOverdriveColor = null;
|
||||
this._barLevelBorderColor = null;
|
||||
this._barLevelActiveBorderColor = null;
|
||||
this._barLevelOverdriveBorderColor = null;
|
||||
|
||||
super._init({
|
||||
style_class: 'barlevel',
|
||||
@ -112,29 +108,12 @@ export const BarLevel = GObject.registerClass({
|
||||
|
||||
const themeNode = this.get_theme_node();
|
||||
this._barLevelHeight = themeNode.get_length('-barlevel-height');
|
||||
this._barLevelBorderWidth =
|
||||
Math.min(themeNode.get_length('-barlevel-border-width'), this._barLevelHeight);
|
||||
this._overdriveSeparatorWidth =
|
||||
themeNode.get_length('-barlevel-overdrive-separator-width');
|
||||
|
||||
this._barLevelColor = themeNode.get_color('-barlevel-background-color');
|
||||
this._barLevelActiveColor = themeNode.get_color('-barlevel-active-background-color');
|
||||
this._barLevelOverdriveColor = themeNode.get_color('-barlevel-overdrive-color');
|
||||
|
||||
const [hasBorderColor, barLevelBorderColor] =
|
||||
themeNode.lookup_color('-barlevel-border-color', false);
|
||||
this._barLevelBorderColor = hasBorderColor
|
||||
? barLevelBorderColor : this._barLevelColor;
|
||||
|
||||
const [hasActiveBorderColor, barLevelActiveBorderColor] =
|
||||
themeNode.lookup_color('-barlevel-active-border-color', false);
|
||||
this._barLevelActiveBorderColor = hasActiveBorderColor
|
||||
? barLevelActiveBorderColor : this._barLevelActiveColor;
|
||||
|
||||
const [hasOverdriveBorderColor, barLevelOverdriveBorderColor] =
|
||||
themeNode.lookup_color('-barlevel-overdrive-border-color', false);
|
||||
this._barLevelOverdriveBorderColor = hasOverdriveBorderColor
|
||||
? barLevelOverdriveBorderColor : this._barLevelOverdriveColor;
|
||||
}
|
||||
|
||||
vfunc_repaint() {
|
||||
@ -165,7 +144,7 @@ export const BarLevel = GObject.registerClass({
|
||||
const overdriveSeparatorWidth = overdriveActive
|
||||
? this._overdriveSeparatorWidth : 0;
|
||||
|
||||
let xcArcStart = barLevelBorderRadius + this._barLevelBorderWidth;
|
||||
let xcArcStart = barLevelBorderRadius;
|
||||
let xcArcEnd = width - xcArcStart;
|
||||
if (rtl)
|
||||
[xcArcStart, xcArcEnd] = [xcArcEnd, xcArcStart];
|
||||
@ -180,9 +159,7 @@ export const BarLevel = GObject.registerClass({
|
||||
cr.lineTo(xcArcEnd, (height - this._barLevelHeight) / 2);
|
||||
cr.setSourceColor(this._barLevelColor);
|
||||
cr.fillPreserve();
|
||||
cr.setSourceColor(this._barLevelBorderColor);
|
||||
cr.setLineWidth(this._barLevelBorderWidth);
|
||||
cr.stroke();
|
||||
cr.fill();
|
||||
|
||||
/* normal progress bar */
|
||||
let x = 0;
|
||||
@ -199,9 +176,7 @@ export const BarLevel = GObject.registerClass({
|
||||
if (this._value > 0)
|
||||
cr.setSourceColor(this._barLevelActiveColor);
|
||||
cr.fillPreserve();
|
||||
cr.setSourceColor(this._barLevelActiveBorderColor);
|
||||
cr.setLineWidth(this._barLevelBorderWidth);
|
||||
cr.stroke();
|
||||
cr.fill();
|
||||
|
||||
/* overdrive progress barLevel */
|
||||
if (!rtl)
|
||||
@ -216,9 +191,7 @@ export const BarLevel = GObject.registerClass({
|
||||
cr.lineTo(x, (height - this._barLevelHeight) / 2);
|
||||
cr.setSourceColor(this._barLevelOverdriveColor);
|
||||
cr.fillPreserve();
|
||||
cr.setSourceColor(this._barLevelOverdriveBorderColor);
|
||||
cr.setLineWidth(this._barLevelBorderWidth);
|
||||
cr.stroke();
|
||||
cr.fill();
|
||||
}
|
||||
|
||||
/* end progress bar arc */
|
||||
@ -238,8 +211,6 @@ export const BarLevel = GObject.registerClass({
|
||||
}
|
||||
cr.lineTo(endX, (height - this._barLevelHeight) / 2);
|
||||
cr.fillPreserve();
|
||||
cr.setLineWidth(this._barLevelBorderWidth);
|
||||
cr.stroke();
|
||||
}
|
||||
|
||||
/* draw overdrive separator */
|
||||
@ -272,11 +243,11 @@ export const BarLevel = GObject.registerClass({
|
||||
}
|
||||
|
||||
_getPreferredHeight() {
|
||||
return this._barLevelHeight + this._barLevelBorderWidth;
|
||||
return this._barLevelHeight;
|
||||
}
|
||||
|
||||
_getPreferredWidth() {
|
||||
return this._overdriveSeparatorWidth + this._barLevelBorderWidth;
|
||||
return this._overdriveSeparatorWidth;
|
||||
}
|
||||
|
||||
_getCurrentValue() {
|
||||
|
||||
@ -20,6 +20,8 @@ export const Slider = GObject.registerClass({
|
||||
style_class: 'slider',
|
||||
can_focus: true,
|
||||
reactive: true,
|
||||
track_hover: true,
|
||||
hover: false,
|
||||
accessible_role: Atk.Role.SLIDER,
|
||||
x_expand: true,
|
||||
});
|
||||
@ -28,8 +30,6 @@ export const Slider = GObject.registerClass({
|
||||
this._dragging = false;
|
||||
|
||||
this._handleRadius = 0;
|
||||
this._handleBorderWidth = 0;
|
||||
this._handleBorderColor = null;
|
||||
|
||||
this._customAccessible.connect('get-minimum-increment', this._getMinimumIncrement.bind(this));
|
||||
}
|
||||
@ -39,11 +39,6 @@ export const Slider = GObject.registerClass({
|
||||
|
||||
const themeNode = this.get_theme_node();
|
||||
this._handleRadius = themeNode.get_length('-slider-handle-radius');
|
||||
this._handleBorderWidth =
|
||||
themeNode.get_length('-slider-handle-border-width');
|
||||
const [hasHandleColor, handleBorderColor] =
|
||||
themeNode.lookup_color('-slider-handle-border-color', false);
|
||||
this._handleBorderColor = hasHandleColor ? handleBorderColor : null;
|
||||
}
|
||||
|
||||
vfunc_repaint() {
|
||||
@ -55,7 +50,7 @@ export const Slider = GObject.registerClass({
|
||||
let [width, height] = this.get_surface_size();
|
||||
const rtl = this.get_text_direction() === Clutter.TextDirection.RTL;
|
||||
|
||||
const ceiledHandleRadius = Math.ceil(this._handleRadius + this._handleBorderWidth);
|
||||
const ceiledHandleRadius = Math.ceil(this._handleRadius);
|
||||
const handleY = height / 2;
|
||||
|
||||
let handleX = ceiledHandleRadius +
|
||||
@ -67,23 +62,18 @@ export const Slider = GObject.registerClass({
|
||||
cr.setSourceColor(color);
|
||||
cr.arc(handleX, handleY, this._handleRadius, 0, 2 * Math.PI);
|
||||
cr.fillPreserve();
|
||||
if (this._handleBorderColor && this._handleBorderWidth) {
|
||||
cr.setSourceColor(this._handleBorderColor);
|
||||
cr.setLineWidth(this._handleBorderWidth);
|
||||
cr.stroke();
|
||||
}
|
||||
cr.$dispose();
|
||||
}
|
||||
|
||||
_getPreferredHeight() {
|
||||
const barHeight = super._getPreferredHeight();
|
||||
const handleHeight = 2 * this._handleRadius + this._handleBorderWidth;
|
||||
const handleHeight = 2 * this._handleRadius;
|
||||
return Math.max(barHeight, handleHeight);
|
||||
}
|
||||
|
||||
_getPreferredWidth() {
|
||||
const barWidth = super._getPreferredWidth();
|
||||
const handleWidth = 2 * this._handleRadius + this._handleBorderWidth;
|
||||
const handleWidth = 2 * this._handleRadius;
|
||||
return Math.max(barWidth, handleWidth);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user