Adding ripple effect for clicks on MD slider

ui/views/controls/md_slider.cc

Index: ui/views/controls/md_slider.cc
diff --git a/ui/views/controls/md_slider.cc b/ui/views/controls/md_slider.cc
index 1a58eaec55cd9ec966c6a5ea67eb260224616532..878e740318236f6cf04d946fa1347c37a35cf62f 100644
--- a/ui/views/controls/md_slider.cc
+++ b/ui/views/controls/md_slider.cc
@@ -16,6 +16,7 @@ namespace views {
 // Color of slider at the active and the disabled state, respectively.
 const SkColor kActiveColor = SkColorSetARGB(0xFF, 0x42, 0x85, 0xF4);
 const SkColor kDisabledColor = SkColorSetARGB(0x42, 0x00, 0x00, 0x00);
+const SkColor kRippleColor = SkColorSetARGB(0x4D, 0x42, 0x85, 0xF4);

[bruthig, 2016/09/12 17:16:48]

I'd recommend using a more generic, and hopefully more intuitive,
kHighlightColor instead of 'Ripple'.  Applies elsewhere too.

[yiyix, 2016/09/20 20:25:46]

Done.

 
 // The thickness of the slider.
 const int kLineThickness = 2;
@@ -26,13 +27,29 @@ const int kThumbRadius = 6;
 // The stroke of the thumb when the slider is disabled.
 const int kThumbStroke = 2;
 
+// The radius and stroke of the thumb's ripple.
+const int kThumbRippleRadius = 10;
+const int kThumbRippleStroke = 4;
+
 MdSlider::MdSlider(SliderListener* listener)
-    : Slider(listener), is_active_(true) {
+    : Slider(listener), is_active_(true), is_pressed_(false) {
   SchedulePaint();
 }
 
 MdSlider::~MdSlider() {}
 
+bool MdSlider::OnMousePressed(const ui::MouseEvent& event) {
+  is_pressed_ = true;

[bruthig, 2016/09/12 17:16:48]

If you replace |is_pressed_| with an int |thumb_ripple_radius_| you should be
able to add the follow-up animation quite easily.

[yiyix, 2016/09/20 20:25:46]

Thanks, I think so..

+  SchedulePaint();
+  return Slider::OnMousePressed(event);
+}
+
+void MdSlider::OnMouseReleased(const ui::MouseEvent& event) {
+  is_pressed_ = false;
+  Slider::OnMouseReleased(event);
+  SchedulePaint();
+}
+
 void MdSlider::OnPaint(gfx::Canvas* canvas) {
   Slider::OnPaint(canvas);
 
@@ -61,6 +78,16 @@ void MdSlider::OnPaint(gfx::Canvas* canvas) {
   canvas->DrawCircle(
       gfx::Point(content.x() + full + kThumbRadius, content.height() / 2),
       is_active_ ? kThumbRadius : (kThumbRadius - kThumbStroke / 2), paint);
+
+  if (is_pressed_ && is_active_) {
+    SkPaint ripple;
+    ripple.setColor(kRippleColor);
+    ripple.setStrokeWidth(kThumbRippleStroke);
+    ripple.setStyle(SkPaint::kStroke_Style);
+    canvas->DrawCircle(
+        gfx::Point(content.x() + full + kThumbRadius, content.height() / 2),
+        (kThumbRippleRadius - kThumbRippleStroke / 2), ripple);
+  }
 }
 
 const char* MdSlider::GetClassName() const {
@@ -75,4 +102,5 @@ void MdSlider::UpdateState(bool control_on) {
 int MdSlider::GetThumbWidth() {
   return kThumbRadius * 2;
 }
+
 }  // namespace views