diff --git a/data/theme/gnome-shell-sass/widgets/_slider.scss b/data/theme/gnome-shell-sass/widgets/_slider.scss index f7085825f..6ba104d6f 100644 --- a/data/theme/gnome-shell-sass/widgets/_slider.scss +++ b/data/theme/gnome-shell-sass/widgets/_slider.scss @@ -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); + } } diff --git a/js/ui/barLevel.js b/js/ui/barLevel.js index 3f4535725..3e0f531c6 100644 --- a/js/ui/barLevel.js +++ b/js/ui/barLevel.js @@ -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() { diff --git a/js/ui/slider.js b/js/ui/slider.js index 69288e7c6..c9458f1c4 100644 --- a/js/ui/slider.js +++ b/js/ui/slider.js @@ -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); }