From 109b29aeb581c06049317ac64b1e86adea3a7997 Mon Sep 17 00:00:00 2001 From: "Jasper St. Pierre" Date: Fri, 21 Jun 2013 14:26:42 -0400 Subject: [PATCH] slider: Add rounded ends to sliders https://bugzilla.gnome.org/show_bug.cgi?id=702825 --- js/ui/slider.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/js/ui/slider.js b/js/ui/slider.js index f41637e78..9e5d33610 100644 --- a/js/ui/slider.js +++ b/js/ui/slider.js @@ -51,6 +51,7 @@ const Slider = new Lang.Class({ let sliderHeight = themeNode.get_length('-slider-height'); let sliderBorderWidth = themeNode.get_length('-slider-border-width'); + let sliderBorderRadius = Math.min(width, sliderHeight) / 2; let sliderBorderColor = themeNode.get_color('-slider-border-color'); let sliderColor = themeNode.get_color('-slider-background-color'); @@ -58,14 +59,24 @@ const Slider = new Lang.Class({ let sliderActiveBorderColor = themeNode.get_color('-slider-active-border-color'); let sliderActiveColor = themeNode.get_color('-slider-active-background-color'); - cr.rectangle(0, (height - sliderHeight) / 2, width * this._value, sliderHeight); + const TAU = Math.PI * 2; + + let handleX = handleRadius + (width - 2 * handleRadius) * this._value; + + cr.arc(sliderBorderRadius + sliderBorderWidth, height / 2, sliderBorderRadius, TAU * 1/4, TAU * 3/4); + cr.lineTo(handleX, (height - sliderHeight) / 2); + cr.lineTo(handleX, (height + sliderHeight) / 2); + cr.lineTo(sliderBorderRadius + sliderBorderWidth, (height + sliderHeight) / 2); Clutter.cairo_set_source_color(cr, sliderActiveColor); cr.fillPreserve(); Clutter.cairo_set_source_color(cr, sliderActiveBorderColor); cr.setLineWidth(sliderBorderWidth); cr.stroke(); - cr.rectangle(width * this._value, (height - sliderHeight) / 2, width * (1 - this._value), sliderHeight); + cr.arc(width - sliderBorderRadius - sliderBorderWidth, height / 2, sliderBorderRadius, TAU * 3/4, TAU * 1/4); + cr.lineTo(handleX, (height + sliderHeight) / 2); + cr.lineTo(handleX, (height - sliderHeight) / 2); + cr.lineTo(width - sliderBorderRadius - sliderBorderWidth, (height - sliderHeight) / 2); Clutter.cairo_set_source_color(cr, sliderColor); cr.fillPreserve(); Clutter.cairo_set_source_color(cr, sliderBorderColor); @@ -73,7 +84,6 @@ const Slider = new Lang.Class({ cr.stroke(); let handleY = height / 2; - let handleX = handleRadius + (width - 2 * handleRadius) * this._value; let color = themeNode.get_foreground_color(); Clutter.cairo_set_source_color(cr, color);