brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

slider: Add rounded ends to sliders

Browse Source 
https://bugzilla.gnome.org/show_bug.cgi?id=702825
This commit is contained in:
Jasper St. Pierre 2013-06-21 14:26:42 -04:00
parent bc069b99ec
commit 109b29aeb5
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
js/ui/slider.js
View File

@ -51,6 +51,7 @@ const Slider = new Lang.Class({
let sliderHeight = themeNode.get_length('-slider-height'); let sliderHeight = themeNode.get_length('-slider-height');
let sliderBorderWidth = themeNode.get_length('-slider-border-width'); let sliderBorderWidth = themeNode.get_length('-slider-border-width');
let sliderBorderRadius = Math.min(width, sliderHeight) / 2;
let sliderBorderColor = themeNode.get_color('-slider-border-color'); let sliderBorderColor = themeNode.get_color('-slider-border-color');
let sliderColor = themeNode.get_color('-slider-background-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 sliderActiveBorderColor = themeNode.get_color('-slider-active-border-color');
let sliderActiveColor = themeNode.get_color('-slider-active-background-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); Clutter.cairo_set_source_color(cr, sliderActiveColor);
cr.fillPreserve(); cr.fillPreserve();
Clutter.cairo_set_source_color(cr, sliderActiveBorderColor); Clutter.cairo_set_source_color(cr, sliderActiveBorderColor);
cr.setLineWidth(sliderBorderWidth); cr.setLineWidth(sliderBorderWidth);
cr.stroke(); 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); Clutter.cairo_set_source_color(cr, sliderColor);
cr.fillPreserve(); cr.fillPreserve();
Clutter.cairo_set_source_color(cr, sliderBorderColor); Clutter.cairo_set_source_color(cr, sliderBorderColor);
@ -73,7 +84,6 @@ const Slider = new Lang.Class({
cr.stroke(); cr.stroke();
let handleY = height / 2; let handleY = height / 2;
let handleX = handleRadius + (width - 2 * handleRadius) * this._value;
let color = themeNode.get_foreground_color(); let color = themeNode.get_foreground_color();
Clutter.cairo_set_source_color(cr, color); Clutter.cairo_set_source_color(cr, color);