-
Notifications
You must be signed in to change notification settings - Fork 888
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3569 from brave/native-button-styles
Buttons get Brave style
- Loading branch information
Showing
8 changed files
with
356 additions
and
58 deletions.
There are no files selected for viewing
23 changes: 23 additions & 0 deletions
23
chromium_src/chrome/browser/ui/views/chrome_typography_provider.cc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
// Copyright (c) 2019 The Brave Authors. All rights reserved. | ||
// This Source Code Form is subject to the terms of the Mozilla Public | ||
// License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
// you can obtain one at http://mozilla.org/MPL/2.0/. | ||
|
||
#include "chrome/browser/ui/views/chrome_typography_provider.h" | ||
#include "ui/gfx/color_palette.h" | ||
|
||
namespace gfx { | ||
const SkColor kBraveWhite = SkColorSetRGB(0xff, 0xff, 0xff); | ||
const SkColor kBraveGrey800 = SkColorSetRGB(0x3b, 0x3e, 0x4f); | ||
} | ||
|
||
// Button text color | ||
#define kGoogleGrey900 kBraveWhite | ||
// Button text color (prominent, dark mode) | ||
#define kGoogleBlue300 kBraveWhite | ||
// // Button text color (prominent, light mode) | ||
#define kGoogleBlue600 kBraveGrey800 | ||
#include "../../../../../chrome/browser/ui/views/chrome_typography_provider.cc" | ||
#undef kGoogleGrey900 | ||
#undef kGoogleBlue300 | ||
#undef kGoogleBlue600 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
// Copyright (c) 2019 The Brave Authors. All rights reserved. | ||
// This Source Code Form is subject to the terms of the Mozilla Public | ||
// License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
// you can obtain one at http://mozilla.org/MPL/2.0/. | ||
|
||
#include "ui/native_theme/common_theme.h" | ||
|
||
#define GetAuraColor GetAuraColor_ChromiumImpl | ||
#include "../../../../ui/native_theme/common_theme.cc" | ||
#undef GetAuraColor | ||
|
||
namespace { | ||
const SkColor kBraveBrandColor = SkColorSetRGB(0xff, 0x76, 0x54); | ||
} // namespace | ||
|
||
|
||
namespace ui { | ||
|
||
SkColor GetAuraColor(NativeTheme::ColorId color_id, | ||
const NativeTheme* base_theme, | ||
NativeTheme::ColorScheme color_scheme) { | ||
if (color_scheme == NativeTheme::ColorScheme::kDefault) | ||
color_scheme = base_theme->GetSystemColorScheme(); | ||
const bool is_dark = (color_scheme == NativeTheme::ColorScheme::kDark); | ||
switch (color_id) { | ||
case NativeTheme::kColorId_ButtonEnabledColor: | ||
return is_dark ? SK_ColorWHITE | ||
: SkColorSetRGB(0x3b, 0x3e, 0x4f); | ||
case NativeTheme::kColorId_ButtonHoverColor: | ||
return kBraveBrandColor; | ||
case NativeTheme::kColorId_ButtonPressedShade: | ||
return SkColorSetA(kBraveBrandColor, is_dark ? 0x2b : 0x23); | ||
case NativeTheme::kColorId_ProminentButtonColor: | ||
case NativeTheme::kColorId_ProminentButtonFocusedColor: | ||
return kBraveBrandColor; | ||
case NativeTheme::kColorId_ProminentButtonDisabledColor: | ||
return gfx::kGoogleGrey800; | ||
case NativeTheme::kColorId_TextOnProminentButtonColor: | ||
return SK_ColorWHITE; | ||
case NativeTheme::kColorId_ButtonBorderColor: | ||
return SkColorSetRGB(0xc2, 0xc4, 0xcf); | ||
case NativeTheme::kColorId_LabelEnabledColor: { | ||
SkColor button = GetAuraColor(NativeTheme::kColorId_ButtonEnabledColor, | ||
base_theme); | ||
return button; | ||
} | ||
default: | ||
break; | ||
} | ||
return GetAuraColor_ChromiumImpl(color_id, base_theme, color_scheme); | ||
} | ||
|
||
} // namespace ui | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
170 changes: 170 additions & 0 deletions
170
chromium_src/ui/views/controls/button/md_text_button.cc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,170 @@ | ||
// Copyright (c) 2019 The Brave Authors. All rights reserved. | ||
// This Source Code Form is subject to the terms of the Mozilla Public | ||
// License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
// you can obtain one at http://mozilla.org/MPL/2.0/. | ||
|
||
#include "ui/views/controls/button/md_text_button.h" | ||
#include "ui/views/view_class_properties.h" | ||
|
||
// Override button creation to return BraveTextButton instances | ||
#define Create Create_ChromiumImpl | ||
#define CreateSecondaryUiBlueButton CreateSecondaryUiBlueButton_ChromiumImpl | ||
#define CreateSecondaryUiButton CreateSecondaryUiButton_ChromiumImpl | ||
#include "../../../../../ui/views/controls/button/md_text_button.cc" | ||
#undef CreateSecondaryUiButton | ||
#undef CreateSecondaryUiBlueButton | ||
#undef Create | ||
|
||
namespace { | ||
|
||
constexpr SkColor kBraveBrandColor = SkColorSetRGB(0xff, 0x76, 0x54); | ||
|
||
} // namespace | ||
|
||
namespace views { | ||
|
||
// Make visual changes to MdTextButton in line with Brave visual style: | ||
// - More rounded rectangle (for regular border, focus ring and ink drop) | ||
// - Different hover text and boder color for non-prominent button | ||
// - Differenet hover bg color for prominent background | ||
// - No shadow for prominent background | ||
class BraveTextButton : public MdTextButton { | ||
public: | ||
using MdTextButton::MdTextButton; | ||
// InkDrop | ||
std::unique_ptr<InkDrop> CreateInkDrop() override; | ||
std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight() | ||
const override; | ||
|
||
protected: | ||
void OnPaintBackground(gfx::Canvas* canvas) override; | ||
void OnBoundsChanged(const gfx::Rect& previous_bounds) override; | ||
|
||
private: | ||
void UpdateColors() override; | ||
DISALLOW_COPY_AND_ASSIGN(BraveTextButton); | ||
}; | ||
|
||
// | ||
// These static CreateXYZ functions purely exist to make sure BraveTextButtons | ||
// are created instead of MdTextButtons. | ||
// | ||
|
||
// static | ||
std::unique_ptr<LabelButton> MdTextButton::CreateSecondaryUiButton( | ||
ButtonListener* listener, | ||
const base::string16& text) { | ||
return MdTextButton::Create(listener, text, style::CONTEXT_BUTTON_MD); | ||
} | ||
|
||
// static | ||
std::unique_ptr<LabelButton> MdTextButton::CreateSecondaryUiBlueButton( | ||
ButtonListener* listener, | ||
const base::string16& text) { | ||
auto md_button = | ||
MdTextButton::Create(listener, text, style::CONTEXT_BUTTON_MD); | ||
md_button->SetProminent(true); | ||
return md_button; | ||
} | ||
|
||
// static | ||
std::unique_ptr<MdTextButton> MdTextButton::Create(ButtonListener* listener, | ||
const base::string16& text, | ||
int button_context) { | ||
auto button = base::WrapUnique<BraveTextButton>( | ||
new BraveTextButton(listener, button_context)); | ||
button->SetText(text); | ||
button->SetCornerRadius(100); | ||
button->SetFocusForPlatform(); | ||
return button; | ||
} | ||
|
||
void BraveTextButton::OnPaintBackground(gfx::Canvas* canvas) { | ||
// Set brave-style hover colors | ||
LabelButton::OnPaintBackground(canvas); | ||
if (GetProminent() && ( | ||
hover_animation().is_animating() || state() == STATE_HOVERED)) { | ||
constexpr SkColor normal_color = kBraveBrandColor; | ||
constexpr SkColor hover_color = SkColorSetRGB(0xff, 0x97, 0x7d); | ||
const SkAlpha alpha = hover_animation().CurrentValueBetween(0x00, 0xff); | ||
const SkColor current_color = color_utils::AlphaBlend( | ||
hover_color, normal_color, alpha); | ||
cc::PaintFlags flags; | ||
flags.setColor(current_color); | ||
flags.setStyle(cc::PaintFlags::kFill_Style); | ||
flags.setAntiAlias(true); | ||
canvas->DrawRoundRect(gfx::RectF(GetLocalBounds()), | ||
GetCornerRadius(), flags); | ||
} | ||
} | ||
|
||
std::unique_ptr<InkDrop> BraveTextButton::CreateInkDrop() { | ||
// We don't need a highlight on hover, the hover color | ||
// is handled by the OnPaintBackground and brave-style doesn't | ||
// have a shadow. Plus, it's very difficult (impossible?) to create | ||
// a drop-shadow when clipping the ink drop to the rounded button. | ||
std::unique_ptr<InkDrop> ink_drop = InkDropHostView::CreateInkDrop(); | ||
ink_drop->SetShowHighlightOnFocus(true); | ||
ink_drop->SetShowHighlightOnHover(false); | ||
return ink_drop; | ||
} | ||
|
||
std::unique_ptr<views::InkDropHighlight> | ||
BraveTextButton::CreateInkDropHighlight() const { | ||
// Blank ink drop highlight, not needed | ||
const SkColor fill_color = SK_ColorTRANSPARENT; | ||
gfx::RectF boundsF(GetLocalBounds()); | ||
return std::make_unique<InkDropHighlight>( | ||
boundsF.size(), | ||
GetCornerRadius(), | ||
boundsF.CenterPoint(), fill_color); | ||
} | ||
|
||
void BraveTextButton::OnBoundsChanged(const gfx::Rect& previous_bounds) { | ||
MdTextButton::OnBoundsChanged(previous_bounds); | ||
// Provide a path for the focus border, and for clipping the inkdrop highlight | ||
auto path = std::make_unique<SkPath>(); | ||
int radius = GetCornerRadius(); | ||
path->addRRect(SkRRect::MakeRectXY(RectToSkRect(GetLocalBounds()), | ||
radius, radius)); | ||
SetProperty(kHighlightPathKey, path.release()); | ||
} | ||
|
||
void BraveTextButton::UpdateColors() { | ||
MdTextButton::UpdateColors(); | ||
if (GetProminent()) { | ||
return; | ||
} | ||
// Override different text hover color | ||
if (!color_utils::IsInvertedColorScheme()) { | ||
SetTextColor(ButtonState::STATE_HOVERED, kBraveBrandColor); | ||
SetTextColor(ButtonState::STATE_PRESSED, kBraveBrandColor); | ||
} | ||
// Override border color for hover on non-prominent | ||
if (state() == ButtonState::STATE_PRESSED | ||
|| state() == ButtonState::STATE_HOVERED) { | ||
// First, get the same background fill color that MdTextButton does. | ||
// It is undfortunate to copy these lines almost as-is. Consider otherwise | ||
// patching it in via a #define. | ||
const ui::NativeTheme* theme = GetNativeTheme(); | ||
SkColor bg_color = | ||
theme->GetSystemColor(ui::NativeTheme::kColorId_DialogBackground); | ||
if (GetBgColorOverride()) { | ||
bg_color = *GetBgColorOverride(); | ||
} | ||
if (state() == STATE_PRESSED) { | ||
SkColor shade = | ||
GetNativeTheme()->GetSystemColor( | ||
ui::NativeTheme::kColorId_ButtonPressedShade); | ||
bg_color = color_utils::GetResultingPaintColor(shade, bg_color); | ||
} | ||
// The only thing that differs for Brave is the stroke color | ||
SkColor stroke_color = kBraveBrandColor; | ||
SetBackground( | ||
CreateBackgroundFromPainter( | ||
Painter::CreateRoundRectWith1PxBorderPainter( | ||
bg_color, stroke_color, GetCornerRadius()))); | ||
} | ||
} | ||
|
||
} // namespace views |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
// Copyright (c) 2019 The Brave Authors. All rights reserved. | ||
// This Source Code Form is subject to the terms of the Mozilla Public | ||
// License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
// you can obtain one at http://mozilla.org/MPL/2.0/. | ||
|
||
#ifndef BRAVE_CHROMIUM_SRC_UI_VIEWS_CONTROLS_BUTTON_MD_TEXT_BUTTON_H_ | ||
#define BRAVE_CHROMIUM_SRC_UI_VIEWS_CONTROLS_BUTTON_MD_TEXT_BUTTON_H_ | ||
|
||
#include "base/optional.h" | ||
#include "ui/views/controls/button/label_button.h" | ||
#include "ui/views/controls/focus_ring.h" | ||
#include "ui/views/style/typography.h" | ||
|
||
// Insert our own definition for `CreateXYZ`, and (in concert with the .cc) | ||
// move chromium's definition to `CreateXYZ_ChromiumImpl` | ||
#define CreateSecondaryUiButton CreateSecondaryUiButton_ChromiumImpl( \ | ||
ButtonListener* listener, \ | ||
const base::string16& text); \ | ||
static std::unique_ptr<LabelButton> CreateSecondaryUiButton | ||
#define CreateSecondaryUiBlueButton CreateSecondaryUiBlueButton_ChromiumImpl( \ | ||
ButtonListener* listener, \ | ||
const base::string16& text); \ | ||
static std::unique_ptr<LabelButton> CreateSecondaryUiBlueButton | ||
#define Create Create_ChromiumImpl( \ | ||
ButtonListener* listener, \ | ||
const base::string16& text, \ | ||
int button_context = style::CONTEXT_BUTTON_MD); \ | ||
static std::unique_ptr<MdTextButton> Create | ||
|
||
#include "../../../../../ui/views/controls/button/md_text_button.h" | ||
#undef CreateSecondaryUiButton | ||
#undef CreateSecondaryUiBlueButton | ||
#undef Create | ||
|
||
#endif // BRAVE_CHROMIUM_SRC_UI_VIEWS_CONTROLS_BUTTON_MD_TEXT_BUTTON_H_ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
diff --git a/ui/views/controls/button/md_text_button.h b/ui/views/controls/button/md_text_button.h | ||
index 02bb4d1677e79497e02eaa42a70fd3ece310f803..52e54a1ee6d5bbe1710a20ffde554ac82ff61db2 100644 | ||
--- a/ui/views/controls/button/md_text_button.h | ||
+++ b/ui/views/controls/button/md_text_button.h | ||
@@ -66,7 +66,9 @@ class VIEWS_EXPORT MdTextButton : public LabelButton { | ||
MdTextButton(ButtonListener* listener, int button_context); | ||
|
||
private: | ||
+ friend class BraveTextButton; | ||
void UpdatePadding(); | ||
+ virtual | ||
void UpdateColors(); | ||
|
||
// True if this button uses prominent styling (blue fill, etc.). |
Oops, something went wrong.