OLD | NEW |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 #include "ui/views/controls/button/toggle_button.h" | 5 #include "ui/views/controls/button/toggle_button.h" |
6 | 6 |
7 #include "third_party/skia/include/core/SkDrawLooper.h" | 7 #include "third_party/skia/include/core/SkDrawLooper.h" |
8 #include "third_party/skia/include/core/SkPaint.h" | 8 #include "third_party/skia/include/core/SkPaint.h" |
9 #include "ui/gfx/canvas.h" | 9 #include "ui/gfx/canvas.h" |
10 #include "ui/gfx/color_palette.h" | 10 #include "ui/gfx/color_palette.h" |
(...skipping 10 matching lines...) Expand all Loading... |
21 const int kTrackWidth = 28; | 21 const int kTrackWidth = 28; |
22 // Margins from edge of track to edge of view. | 22 // Margins from edge of track to edge of view. |
23 const int kTrackVerticalMargin = 5; | 23 const int kTrackVerticalMargin = 5; |
24 const int kTrackHorizontalMargin = 6; | 24 const int kTrackHorizontalMargin = 6; |
25 // Margin from edge of thumb to closest edge of view. Note that the thumb | 25 // Margin from edge of thumb to closest edge of view. Note that the thumb |
26 // margins must be sufficiently large to allow space for the shadow. | 26 // margins must be sufficiently large to allow space for the shadow. |
27 const int kThumbHorizontalMargin = 4; | 27 const int kThumbHorizontalMargin = 4; |
28 // Margin from top/bottom edge of thumb to top/bottom edge of view. | 28 // Margin from top/bottom edge of thumb to top/bottom edge of view. |
29 const int kThumbVerticalMargin = 3; | 29 const int kThumbVerticalMargin = 3; |
30 | 30 |
31 // TODO(estade): get the base color (black) from the theme? | |
32 const SkColor kTrackOffColor = | |
33 SkColorSetA(SK_ColorBLACK, gfx::kDisabledControlAlpha); | |
34 | |
35 } // namespace | 31 } // namespace |
36 | 32 |
37 // Class representing the thumb. When the thumb is clicked it is separated into | 33 // Class representing the thumb (the circle that slides horizontally). |
38 // its own layer and the ink drop layer is made a child of the thumb layer | 34 class ToggleButton::ThumbView : public InkDropHostView { |
39 // allowing the two to animate in sync. | |
40 class ToggleButton::ThumbView : public views::View { | |
41 public: | 35 public: |
42 ThumbView() : color_ratio_(0.) {} | 36 ThumbView() : color_ratio_(0.) {} |
43 ~ThumbView() override {} | 37 ~ThumbView() override {} |
44 | 38 |
45 void AddInkDropLayer(ui::Layer* ink_drop_layer) { | |
46 SetPaintToLayer(true); | |
47 layer()->SetFillsBoundsOpaquely(false); | |
48 layer()->Add(ink_drop_layer); | |
49 } | |
50 | |
51 void RemoveInkDropLayer(ui::Layer* ink_drop_layer) { | |
52 layer()->Remove(ink_drop_layer); | |
53 SetPaintToLayer(false); | |
54 } | |
55 | |
56 void Update(const gfx::Rect& bounds, double color_ratio) { | 39 void Update(const gfx::Rect& bounds, double color_ratio) { |
57 SetBoundsRect(bounds); | 40 SetBoundsRect(bounds); |
58 color_ratio_ = color_ratio; | 41 color_ratio_ = color_ratio; |
59 SchedulePaint(); | 42 SchedulePaint(); |
60 } | 43 } |
61 | 44 |
| 45 // Returns the extra space needed to draw the shadows around the thumb. Since |
| 46 // the extra space is around the thumb, the insets will be negative. |
| 47 static gfx::Insets GetShadowOutsets() { |
| 48 return gfx::Insets(-kShadowBlur) + |
| 49 gfx::Vector2d(kShadowOffsetX, kShadowOffsetY); |
| 50 } |
| 51 |
62 private: | 52 private: |
| 53 static const int kShadowOffsetX = 0; |
| 54 static const int kShadowOffsetY = 1; |
| 55 static const int kShadowBlur = 2; |
| 56 |
63 // views::View: | 57 // views::View: |
64 const char* GetClassName() const override { | 58 const char* GetClassName() const override { |
65 return "ToggleButton::ThumbView"; | 59 return "ToggleButton::ThumbView"; |
66 } | 60 } |
67 | 61 |
68 void OnPaint(gfx::Canvas* canvas) override { | 62 void OnPaint(gfx::Canvas* canvas) override { |
69 std::vector<gfx::ShadowValue> shadows; | 63 std::vector<gfx::ShadowValue> shadows; |
70 shadows.emplace_back(gfx::Vector2d(0, 1), 4.f, | 64 shadows.emplace_back( |
71 SkColorSetA(SK_ColorBLACK, 0x99)); | 65 gfx::Vector2d(kShadowOffsetX, kShadowOffsetY), 2 * kShadowBlur, |
| 66 SkColorSetA(GetNativeTheme()->GetSystemColor( |
| 67 ui::NativeTheme::kColorId_LabelEnabledColor), |
| 68 0x99)); |
72 SkPaint thumb_paint; | 69 SkPaint thumb_paint; |
73 thumb_paint.setLooper(gfx::CreateShadowDrawLooperCorrectBlur(shadows)); | 70 thumb_paint.setLooper(gfx::CreateShadowDrawLooperCorrectBlur(shadows)); |
74 thumb_paint.setStyle(SkPaint::kFill_Style); | |
75 thumb_paint.setAntiAlias(true); | 71 thumb_paint.setAntiAlias(true); |
76 const SkColor thumb_on_color = GetNativeTheme()->GetSystemColor( | 72 const SkColor thumb_on_color = GetNativeTheme()->GetSystemColor( |
77 ui::NativeTheme::kColorId_ProminentButtonColor); | 73 ui::NativeTheme::kColorId_ProminentButtonColor); |
78 // TODO(estade): get this color from the theme? | 74 const SkColor thumb_off_color = GetNativeTheme()->GetSystemColor( |
79 const SkColor thumb_off_color = SK_ColorWHITE; | 75 ui::NativeTheme::kColorId_DialogBackground); |
80 const SkAlpha blend = static_cast<SkAlpha>(SK_AlphaOPAQUE * color_ratio_); | 76 const SkAlpha blend = static_cast<SkAlpha>(SK_AlphaOPAQUE * color_ratio_); |
81 thumb_paint.setColor( | 77 thumb_paint.setColor( |
82 color_utils::AlphaBlend(thumb_on_color, thumb_off_color, blend)); | 78 color_utils::AlphaBlend(thumb_on_color, thumb_off_color, blend)); |
83 gfx::Rect thumb_bounds = GetLocalBounds(); | 79 |
84 thumb_bounds.Inset(gfx::Insets(kThumbVerticalMargin)); | 80 gfx::RectF thumb_bounds(GetLocalBounds()); |
85 canvas->DrawCircle(gfx::RectF(thumb_bounds).CenterPoint(), | 81 thumb_bounds.Inset(-GetShadowOutsets()); |
86 thumb_bounds.height() / 2.f, thumb_paint); | 82 thumb_bounds.Inset(gfx::InsetsF(0.5f)); |
| 83 gfx::RectF bounds_in_px = thumb_bounds; |
| 84 // We want the circle to have an integer pixel diameter and to be aligned |
| 85 // with pixel boundaries, so we scale dip bounds to pixel bounds, round, and |
| 86 // unscale back to dip bounds. |
| 87 bounds_in_px.Scale(canvas->image_scale()); |
| 88 gfx::RectF bounds_in_dip(gfx::ToEnclosingRect(bounds_in_px)); |
| 89 bounds_in_dip.Scale(1.f / canvas->image_scale()); |
| 90 canvas->DrawCircle(bounds_in_dip.CenterPoint(), |
| 91 bounds_in_dip.height() / 2.f, thumb_paint); |
87 } | 92 } |
88 | 93 |
89 // Color ratio between 0 and 1 that controls the thumb color. | 94 // Color ratio between 0 and 1 that controls the thumb color. |
90 double color_ratio_; | 95 double color_ratio_; |
91 | 96 |
92 DISALLOW_COPY_AND_ASSIGN(ThumbView); | 97 DISALLOW_COPY_AND_ASSIGN(ThumbView); |
93 }; | 98 }; |
94 | 99 |
95 // static | 100 // static |
96 const char ToggleButton::kViewClassName[] = "ToggleButton"; | 101 const char ToggleButton::kViewClassName[] = "ToggleButton"; |
97 | 102 |
98 ToggleButton::ToggleButton(ButtonListener* listener) | 103 ToggleButton::ToggleButton(ButtonListener* listener) |
99 : CustomButton(listener), | 104 : CustomButton(listener), |
100 is_on_(false), | 105 is_on_(false), |
101 slide_animation_(this), | 106 slide_animation_(this), |
102 thumb_view_(new ToggleButton::ThumbView()) { | 107 thumb_view_(new ThumbView()) { |
103 slide_animation_.SetSlideDuration(80 /* ms */); | 108 slide_animation_.SetSlideDuration(80 /* ms */); |
104 slide_animation_.SetTweenType(gfx::Tween::LINEAR); | 109 slide_animation_.SetTweenType(gfx::Tween::LINEAR); |
105 SetBorder(Border::CreateEmptyBorder( | 110 SetBorder(Border::CreateEmptyBorder( |
106 gfx::Insets(kTrackVerticalMargin, kTrackHorizontalMargin))); | 111 gfx::Insets(kTrackVerticalMargin, kTrackHorizontalMargin))); |
107 AddChildView(thumb_view_.get()); | 112 AddChildView(thumb_view_); |
108 SetInkDropMode(InkDropMode::ON); | 113 SetInkDropMode(InkDropMode::ON); |
109 set_has_ink_drop_action_on_click(true); | 114 set_has_ink_drop_action_on_click(true); |
110 } | 115 } |
111 | 116 |
112 ToggleButton::~ToggleButton() { | 117 ToggleButton::~ToggleButton() { |
113 // Destroying ink drop early allows ink drop layer to be properly removed, | 118 // Destroying ink drop early allows ink drop layer to be properly removed, |
114 SetInkDropMode(InkDropMode::OFF); | 119 SetInkDropMode(InkDropMode::OFF); |
115 } | 120 } |
116 | 121 |
117 void ToggleButton::SetIsOn(bool is_on, bool animate) { | 122 void ToggleButton::SetIsOn(bool is_on, bool animate) { |
(...skipping 11 matching lines...) Expand all Loading... |
129 | 134 |
130 gfx::Rect ToggleButton::GetThumbBounds() const { | 135 gfx::Rect ToggleButton::GetThumbBounds() const { |
131 gfx::Rect thumb_bounds = GetLocalBounds(); | 136 gfx::Rect thumb_bounds = GetLocalBounds(); |
132 thumb_bounds.Inset(gfx::Insets(kThumbVerticalMargin, kThumbHorizontalMargin)); | 137 thumb_bounds.Inset(gfx::Insets(kThumbVerticalMargin, kThumbHorizontalMargin)); |
133 thumb_bounds.set_x(thumb_bounds.x() + | 138 thumb_bounds.set_x(thumb_bounds.x() + |
134 slide_animation_.GetCurrentValue() * | 139 slide_animation_.GetCurrentValue() * |
135 (thumb_bounds.width() - thumb_bounds.height())); | 140 (thumb_bounds.width() - thumb_bounds.height())); |
136 // The thumb is a circle, so the width should match the height. | 141 // The thumb is a circle, so the width should match the height. |
137 thumb_bounds.set_width(thumb_bounds.height()); | 142 thumb_bounds.set_width(thumb_bounds.height()); |
138 thumb_bounds.set_x(GetMirroredXForRect(thumb_bounds)); | 143 thumb_bounds.set_x(GetMirroredXForRect(thumb_bounds)); |
| 144 thumb_bounds.Inset(ThumbView::GetShadowOutsets()); |
139 return thumb_bounds; | 145 return thumb_bounds; |
140 } | 146 } |
141 | 147 |
142 void ToggleButton::UpdateThumb() { | 148 void ToggleButton::UpdateThumb() { |
143 gfx::Rect thumb_bounds = GetThumbBounds(); | 149 thumb_view_->Update(GetThumbBounds(), slide_animation_.GetCurrentValue()); |
144 thumb_bounds.Inset(gfx::Insets(-kThumbVerticalMargin)); | 150 } |
145 thumb_view_->Update(thumb_bounds, slide_animation_.GetCurrentValue()); | 151 |
| 152 SkColor ToggleButton::GetTrackColor(bool is_on) const { |
| 153 const SkAlpha kOffTrackAlpha = 0x29; |
| 154 const SkAlpha kOnTrackAlpha = kOffTrackAlpha * 2; |
| 155 ui::NativeTheme::ColorId color_id = |
| 156 is_on ? ui::NativeTheme::kColorId_ProminentButtonColor |
| 157 : ui::NativeTheme::kColorId_LabelEnabledColor; |
| 158 return SkColorSetA(GetNativeTheme()->GetSystemColor(color_id), |
| 159 is_on ? kOnTrackAlpha : kOffTrackAlpha); |
146 } | 160 } |
147 | 161 |
148 gfx::Size ToggleButton::GetPreferredSize() const { | 162 gfx::Size ToggleButton::GetPreferredSize() const { |
149 gfx::Rect rect(0, 0, kTrackWidth, kTrackHeight); | 163 gfx::Rect rect(0, 0, kTrackWidth, kTrackHeight); |
150 if (border()) | 164 if (border()) |
151 rect.Inset(-border()->GetInsets()); | 165 rect.Inset(-border()->GetInsets()); |
152 return rect.size(); | 166 return rect.size(); |
153 } | 167 } |
154 | 168 |
155 const char* ToggleButton::GetClassName() const { | 169 const char* ToggleButton::GetClassName() const { |
156 return kViewClassName; | 170 return kViewClassName; |
157 } | 171 } |
158 | 172 |
159 void ToggleButton::OnPaint(gfx::Canvas* canvas) { | 173 void ToggleButton::OnPaint(gfx::Canvas* canvas) { |
160 // Paint the toggle track. | 174 // Paint the toggle track. |
161 gfx::RectF track_rect(GetContentsBounds()); | 175 gfx::RectF track_rect(GetContentsBounds()); |
162 SkPaint track_paint; | 176 SkPaint track_paint; |
163 track_paint.setAntiAlias(true); | 177 track_paint.setAntiAlias(true); |
164 const SkColor track_on_color = | |
165 SkColorSetA(GetNativeTheme()->GetSystemColor( | |
166 ui::NativeTheme::kColorId_ProminentButtonColor), | |
167 0xFF / 2); | |
168 const double color_ratio = slide_animation_.GetCurrentValue(); | 178 const double color_ratio = slide_animation_.GetCurrentValue(); |
169 track_paint.setColor(color_utils::AlphaBlend( | 179 track_paint.setColor(color_utils::AlphaBlend( |
170 track_on_color, kTrackOffColor, | 180 GetTrackColor(true), GetTrackColor(false), |
171 static_cast<SkAlpha>(SK_AlphaOPAQUE * color_ratio))); | 181 static_cast<SkAlpha>(SK_AlphaOPAQUE * color_ratio))); |
172 canvas->DrawRoundRect(track_rect, track_rect.height() / 2, track_paint); | 182 canvas->DrawRoundRect(track_rect, track_rect.height() / 2, track_paint); |
173 } | 183 } |
174 | 184 |
175 void ToggleButton::NotifyClick(const ui::Event& event) { | 185 void ToggleButton::NotifyClick(const ui::Event& event) { |
176 SetIsOn(!is_on(), true); | 186 SetIsOn(!is_on(), true); |
177 CustomButton::NotifyClick(event); | 187 CustomButton::NotifyClick(event); |
178 } | 188 } |
179 | 189 |
180 void ToggleButton::OnBoundsChanged(const gfx::Rect& previous_bounds) { | 190 void ToggleButton::OnBoundsChanged(const gfx::Rect& previous_bounds) { |
(...skipping 14 matching lines...) Expand all Loading... |
195 thumb_view_->RemoveInkDropLayer(ink_drop_layer); | 205 thumb_view_->RemoveInkDropLayer(ink_drop_layer); |
196 SchedulePaint(); | 206 SchedulePaint(); |
197 } | 207 } |
198 | 208 |
199 std::unique_ptr<InkDropRipple> ToggleButton::CreateInkDropRipple() const { | 209 std::unique_ptr<InkDropRipple> ToggleButton::CreateInkDropRipple() const { |
200 const int radius = (kTrackHeight + kTrackVerticalMargin * 2) / 2; | 210 const int radius = (kTrackHeight + kTrackVerticalMargin * 2) / 2; |
201 return CreateDefaultInkDropRipple(gfx::Point(radius, radius)); | 211 return CreateDefaultInkDropRipple(gfx::Point(radius, radius)); |
202 } | 212 } |
203 | 213 |
204 SkColor ToggleButton::GetInkDropBaseColor() const { | 214 SkColor ToggleButton::GetInkDropBaseColor() const { |
205 return is_on() | 215 return GetTrackColor(is_on()); |
206 ? GetNativeTheme()->GetSystemColor( | |
207 ui::NativeTheme::kColorId_ProminentButtonColor) | |
208 : kTrackOffColor; | |
209 } | 216 } |
210 | 217 |
211 bool ToggleButton::ShouldShowInkDropHighlight() const { | 218 bool ToggleButton::ShouldShowInkDropHighlight() const { |
212 return false; | 219 return false; |
213 } | 220 } |
214 | 221 |
215 void ToggleButton::AnimationProgressed(const gfx::Animation* animation) { | 222 void ToggleButton::AnimationProgressed(const gfx::Animation* animation) { |
216 if (animation == &slide_animation_) { | 223 if (animation == &slide_animation_) { |
217 // TODO(varkha, estade): The thumb is using its own view. Investigate if | 224 // TODO(varkha, estade): The thumb is using its own view. Investigate if |
218 // repainting in every animation step to update colors could be avoided. | 225 // repainting in every animation step to update colors could be avoided. |
219 UpdateThumb(); | 226 UpdateThumb(); |
220 SchedulePaint(); | 227 SchedulePaint(); |
221 return; | 228 return; |
222 } | 229 } |
223 CustomButton::AnimationProgressed(animation); | 230 CustomButton::AnimationProgressed(animation); |
224 } | 231 } |
225 | 232 |
226 } // namespace views | 233 } // namespace views |
OLD | NEW |