Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(451)

Side by Side Diff: ui/views/controls/button/toggle_button.cc

Issue 2440723003: Tweaks to ToggleButton details. (Closed)
Patch Set: rearrange fn Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « ui/views/controls/button/toggle_button.h ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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
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
OLDNEW
« no previous file with comments | « ui/views/controls/button/toggle_button.h ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698