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 static gfx::Insets GetShadowInsets() { | |
46 return gfx::Insets(kShadowBlur) + | |
47 gfx::Vector2d(kShadowOffsetX, kShadowOffsetY); | |
48 } | |
49 | |
62 private: | 50 private: |
51 static const int kShadowOffsetX = 0; | |
52 static const int kShadowOffsetY = 1; | |
53 static const int kShadowBlur = 2; | |
54 | |
63 // views::View: | 55 // views::View: |
64 const char* GetClassName() const override { | 56 const char* GetClassName() const override { |
65 return "ToggleButton::ThumbView"; | 57 return "ToggleButton::ThumbView"; |
66 } | 58 } |
67 | 59 |
68 void OnPaint(gfx::Canvas* canvas) override { | 60 void OnPaint(gfx::Canvas* canvas) override { |
69 std::vector<gfx::ShadowValue> shadows; | 61 std::vector<gfx::ShadowValue> shadows; |
70 shadows.emplace_back(gfx::Vector2d(0, 1), 4.f, | 62 shadows.emplace_back( |
71 SkColorSetA(SK_ColorBLACK, 0x99)); | 63 gfx::Vector2d(kShadowOffsetX, kShadowOffsetY), 2 * kShadowBlur, |
64 SkColorSetA(GetNativeTheme()->GetSystemColor( | |
65 ui::NativeTheme::kColorId_LabelEnabledColor), | |
66 0x99)); | |
72 SkPaint thumb_paint; | 67 SkPaint thumb_paint; |
73 thumb_paint.setLooper(gfx::CreateShadowDrawLooperCorrectBlur(shadows)); | 68 thumb_paint.setLooper(gfx::CreateShadowDrawLooperCorrectBlur(shadows)); |
74 thumb_paint.setStyle(SkPaint::kFill_Style); | |
75 thumb_paint.setAntiAlias(true); | 69 thumb_paint.setAntiAlias(true); |
76 const SkColor thumb_on_color = GetNativeTheme()->GetSystemColor( | 70 const SkColor thumb_on_color = GetNativeTheme()->GetSystemColor( |
77 ui::NativeTheme::kColorId_ProminentButtonColor); | 71 ui::NativeTheme::kColorId_ProminentButtonColor); |
78 // TODO(estade): get this color from the theme? | 72 const SkColor thumb_off_color = GetNativeTheme()->GetSystemColor( |
79 const SkColor thumb_off_color = SK_ColorWHITE; | 73 ui::NativeTheme::kColorId_DialogBackground); |
80 const SkAlpha blend = static_cast<SkAlpha>(SK_AlphaOPAQUE * color_ratio_); | 74 const SkAlpha blend = static_cast<SkAlpha>(SK_AlphaOPAQUE * color_ratio_); |
81 thumb_paint.setColor( | 75 thumb_paint.setColor( |
82 color_utils::AlphaBlend(thumb_on_color, thumb_off_color, blend)); | 76 color_utils::AlphaBlend(thumb_on_color, thumb_off_color, blend)); |
83 gfx::Rect thumb_bounds = GetLocalBounds(); | 77 |
84 thumb_bounds.Inset(gfx::Insets(kThumbVerticalMargin)); | 78 gfx::RectF thumb_bounds(GetLocalBounds()); |
85 canvas->DrawCircle(gfx::RectF(thumb_bounds).CenterPoint(), | 79 thumb_bounds.Inset(GetShadowInsets()); |
86 thumb_bounds.height() / 2.f, thumb_paint); | 80 thumb_bounds.Inset(gfx::InsetsF(0.5f)); |
81 gfx::RectF bounds_in_px = thumb_bounds; | |
82 // We want the circle to have an integer pixel diameter and to be aligned | |
83 // with pixel boundaries, so we scale dip bounds to pixel bounds, round, and | |
84 // unscale back to dip bounds. | |
sadrul
2016/10/28 02:58:14
This is pretty weird. Can you use Canvas::UndoDevi
Evan Stade
2016/10/28 17:49:39
That makes it harder to deal with the shadows, whi
danakj
2016/10/28 18:44:59
UndoDSF() mostly lets you round to physical pixels
Evan Stade
2016/10/28 19:22:03
I don't think that addresses the problem with shad
sadrul
2016/10/31 18:28:50
We avoid going pixel -> dip (and possibly avoid mo
sadrul
2016/10/31 18:28:50
Can you clarify why scaling the shadow values is h
Evan Stade
2016/11/01 16:26:22
mainly because of a lack of awareness of ShadowVal
Evan Stade
2016/11/01 16:26:22
Done.
| |
85 bounds_in_px.Scale(canvas->image_scale()); | |
86 gfx::RectF bounds_in_dip(gfx::ToEnclosingRect(bounds_in_px)); | |
87 bounds_in_dip.Scale(1.f / canvas->image_scale()); | |
88 canvas->DrawCircle(bounds_in_dip.CenterPoint(), | |
89 bounds_in_dip.height() / 2.f, thumb_paint); | |
87 } | 90 } |
88 | 91 |
89 // Color ratio between 0 and 1 that controls the thumb color. | 92 // Color ratio between 0 and 1 that controls the thumb color. |
90 double color_ratio_; | 93 double color_ratio_; |
91 | 94 |
92 DISALLOW_COPY_AND_ASSIGN(ThumbView); | 95 DISALLOW_COPY_AND_ASSIGN(ThumbView); |
93 }; | 96 }; |
94 | 97 |
95 // static | 98 // static |
96 const char ToggleButton::kViewClassName[] = "ToggleButton"; | 99 const char ToggleButton::kViewClassName[] = "ToggleButton"; |
97 | 100 |
98 ToggleButton::ToggleButton(ButtonListener* listener) | 101 ToggleButton::ToggleButton(ButtonListener* listener) |
99 : CustomButton(listener), | 102 : CustomButton(listener), |
100 is_on_(false), | 103 is_on_(false), |
101 slide_animation_(this), | 104 slide_animation_(this), |
102 thumb_view_(new ToggleButton::ThumbView()) { | 105 thumb_view_(new ThumbView()) { |
103 slide_animation_.SetSlideDuration(80 /* ms */); | 106 slide_animation_.SetSlideDuration(80 /* ms */); |
104 slide_animation_.SetTweenType(gfx::Tween::LINEAR); | 107 slide_animation_.SetTweenType(gfx::Tween::LINEAR); |
105 SetBorder(Border::CreateEmptyBorder( | 108 SetBorder(Border::CreateEmptyBorder( |
106 gfx::Insets(kTrackVerticalMargin, kTrackHorizontalMargin))); | 109 gfx::Insets(kTrackVerticalMargin, kTrackHorizontalMargin))); |
107 AddChildView(thumb_view_.get()); | 110 AddChildView(thumb_view_); |
108 SetInkDropMode(InkDropMode::ON); | 111 SetInkDropMode(InkDropMode::ON); |
109 set_has_ink_drop_action_on_click(true); | 112 set_has_ink_drop_action_on_click(true); |
110 } | 113 } |
111 | 114 |
112 ToggleButton::~ToggleButton() { | 115 ToggleButton::~ToggleButton() { |
113 // Destroying ink drop early allows ink drop layer to be properly removed, | 116 // Destroying ink drop early allows ink drop layer to be properly removed, |
114 SetInkDropMode(InkDropMode::OFF); | 117 SetInkDropMode(InkDropMode::OFF); |
115 } | 118 } |
116 | 119 |
117 void ToggleButton::SetIsOn(bool is_on, bool animate) { | 120 void ToggleButton::SetIsOn(bool is_on, bool animate) { |
(...skipping 11 matching lines...) Expand all Loading... | |
129 | 132 |
130 gfx::Rect ToggleButton::GetThumbBounds() const { | 133 gfx::Rect ToggleButton::GetThumbBounds() const { |
131 gfx::Rect thumb_bounds = GetLocalBounds(); | 134 gfx::Rect thumb_bounds = GetLocalBounds(); |
132 thumb_bounds.Inset(gfx::Insets(kThumbVerticalMargin, kThumbHorizontalMargin)); | 135 thumb_bounds.Inset(gfx::Insets(kThumbVerticalMargin, kThumbHorizontalMargin)); |
133 thumb_bounds.set_x(thumb_bounds.x() + | 136 thumb_bounds.set_x(thumb_bounds.x() + |
134 slide_animation_.GetCurrentValue() * | 137 slide_animation_.GetCurrentValue() * |
135 (thumb_bounds.width() - thumb_bounds.height())); | 138 (thumb_bounds.width() - thumb_bounds.height())); |
136 // The thumb is a circle, so the width should match the height. | 139 // The thumb is a circle, so the width should match the height. |
137 thumb_bounds.set_width(thumb_bounds.height()); | 140 thumb_bounds.set_width(thumb_bounds.height()); |
138 thumb_bounds.set_x(GetMirroredXForRect(thumb_bounds)); | 141 thumb_bounds.set_x(GetMirroredXForRect(thumb_bounds)); |
142 thumb_bounds.Inset(-ThumbView::GetShadowInsets()); | |
139 return thumb_bounds; | 143 return thumb_bounds; |
140 } | 144 } |
141 | 145 |
142 void ToggleButton::UpdateThumb() { | 146 void ToggleButton::UpdateThumb() { |
143 gfx::Rect thumb_bounds = GetThumbBounds(); | 147 thumb_view_->Update(GetThumbBounds(), slide_animation_.GetCurrentValue()); |
144 thumb_bounds.Inset(gfx::Insets(-kThumbVerticalMargin)); | 148 } |
145 thumb_view_->Update(thumb_bounds, slide_animation_.GetCurrentValue()); | 149 |
150 SkColor ToggleButton::GetTrackColor(bool is_on) const { | |
151 const SkAlpha kOffTrackAlpha = 0x29; | |
152 const SkAlpha kOnTrackAlpha = kOffTrackAlpha * 2; | |
153 ui::NativeTheme::ColorId color_id = | |
154 is_on ? ui::NativeTheme::kColorId_ProminentButtonColor | |
155 : ui::NativeTheme::kColorId_LabelEnabledColor; | |
156 return SkColorSetA(GetNativeTheme()->GetSystemColor(color_id), | |
157 is_on ? kOnTrackAlpha : kOffTrackAlpha); | |
146 } | 158 } |
147 | 159 |
148 gfx::Size ToggleButton::GetPreferredSize() const { | 160 gfx::Size ToggleButton::GetPreferredSize() const { |
149 gfx::Rect rect(0, 0, kTrackWidth, kTrackHeight); | 161 gfx::Rect rect(0, 0, kTrackWidth, kTrackHeight); |
150 if (border()) | 162 if (border()) |
151 rect.Inset(-border()->GetInsets()); | 163 rect.Inset(-border()->GetInsets()); |
152 return rect.size(); | 164 return rect.size(); |
153 } | 165 } |
154 | 166 |
155 const char* ToggleButton::GetClassName() const { | 167 const char* ToggleButton::GetClassName() const { |
156 return kViewClassName; | 168 return kViewClassName; |
157 } | 169 } |
158 | 170 |
159 void ToggleButton::OnPaint(gfx::Canvas* canvas) { | 171 void ToggleButton::OnPaint(gfx::Canvas* canvas) { |
160 // Paint the toggle track. | 172 // Paint the toggle track. |
161 gfx::RectF track_rect(GetContentsBounds()); | 173 gfx::RectF track_rect(GetContentsBounds()); |
162 SkPaint track_paint; | 174 SkPaint track_paint; |
163 track_paint.setAntiAlias(true); | 175 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(); | 176 const double color_ratio = slide_animation_.GetCurrentValue(); |
169 track_paint.setColor(color_utils::AlphaBlend( | 177 track_paint.setColor(color_utils::AlphaBlend( |
170 track_on_color, kTrackOffColor, | 178 GetTrackColor(true), GetTrackColor(false), |
171 static_cast<SkAlpha>(SK_AlphaOPAQUE * color_ratio))); | 179 static_cast<SkAlpha>(SK_AlphaOPAQUE * color_ratio))); |
172 canvas->DrawRoundRect(track_rect, track_rect.height() / 2, track_paint); | 180 canvas->DrawRoundRect(track_rect, track_rect.height() / 2, track_paint); |
173 } | 181 } |
174 | 182 |
175 void ToggleButton::NotifyClick(const ui::Event& event) { | 183 void ToggleButton::NotifyClick(const ui::Event& event) { |
176 SetIsOn(!is_on(), true); | 184 SetIsOn(!is_on(), true); |
177 CustomButton::NotifyClick(event); | 185 CustomButton::NotifyClick(event); |
178 } | 186 } |
179 | 187 |
180 void ToggleButton::OnBoundsChanged(const gfx::Rect& previous_bounds) { | 188 void ToggleButton::OnBoundsChanged(const gfx::Rect& previous_bounds) { |
(...skipping 14 matching lines...) Expand all Loading... | |
195 thumb_view_->RemoveInkDropLayer(ink_drop_layer); | 203 thumb_view_->RemoveInkDropLayer(ink_drop_layer); |
196 SchedulePaint(); | 204 SchedulePaint(); |
197 } | 205 } |
198 | 206 |
199 std::unique_ptr<InkDropRipple> ToggleButton::CreateInkDropRipple() const { | 207 std::unique_ptr<InkDropRipple> ToggleButton::CreateInkDropRipple() const { |
200 const int radius = (kTrackHeight + kTrackVerticalMargin * 2) / 2; | 208 const int radius = (kTrackHeight + kTrackVerticalMargin * 2) / 2; |
201 return CreateDefaultInkDropRipple(gfx::Point(radius, radius)); | 209 return CreateDefaultInkDropRipple(gfx::Point(radius, radius)); |
202 } | 210 } |
203 | 211 |
204 SkColor ToggleButton::GetInkDropBaseColor() const { | 212 SkColor ToggleButton::GetInkDropBaseColor() const { |
205 return is_on() | 213 return GetTrackColor(is_on()); |
206 ? GetNativeTheme()->GetSystemColor( | |
207 ui::NativeTheme::kColorId_ProminentButtonColor) | |
208 : kTrackOffColor; | |
209 } | 214 } |
210 | 215 |
211 bool ToggleButton::ShouldShowInkDropHighlight() const { | 216 bool ToggleButton::ShouldShowInkDropHighlight() const { |
212 return false; | 217 return false; |
213 } | 218 } |
214 | 219 |
215 void ToggleButton::AnimationProgressed(const gfx::Animation* animation) { | 220 void ToggleButton::AnimationProgressed(const gfx::Animation* animation) { |
216 if (animation == &slide_animation_) { | 221 if (animation == &slide_animation_) { |
217 // TODO(varkha, estade): The thumb is using its own view. Investigate if | 222 // TODO(varkha, estade): The thumb is using its own view. Investigate if |
218 // repainting in every animation step to update colors could be avoided. | 223 // repainting in every animation step to update colors could be avoided. |
219 UpdateThumb(); | 224 UpdateThumb(); |
220 SchedulePaint(); | 225 SchedulePaint(); |
221 return; | 226 return; |
222 } | 227 } |
223 CustomButton::AnimationProgressed(animation); | 228 CustomButton::AnimationProgressed(animation); |
224 } | 229 } |
225 | 230 |
226 } // namespace views | 231 } // namespace views |
OLD | NEW |