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

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

Issue 2440723003: Tweaks to ToggleButton details. (Closed)
Patch Set: Offset 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
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 // 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 .Offset(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
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
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
OLDNEW
« ui/gfx/geometry/insets.h ('K') | « 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