Commit d2891f7f authored by Wenzhao Zang's avatar Wenzhao Zang Committed by Commit Bot

cros: Add rounded background to login shelf buttons

Login shelf buttons should have a rounded background to indicate they
are touch / click targets. Spec is included in the bug.

Bug: 874290
Change-Id: Id3cacca32412a47b90206d637c39623977a66550
Reviewed-on: https://chromium-review.googlesource.com/c/1184161
Commit-Queue: Wenzhao (Colin) Zang <wzang@chromium.org>
Reviewed-by: default avatarXiyuan Xia <xiyuan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#596412}
parent 9fcffa24
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
#include "ui/base/l10n/l10n_util.h" #include "ui/base/l10n/l10n_util.h"
#include "ui/base/models/menu_model.h" #include "ui/base/models/menu_model.h"
#include "ui/base/models/simple_menu_model.h" #include "ui/base/models/simple_menu_model.h"
#include "ui/gfx/canvas.h"
#include "ui/gfx/geometry/rect.h" #include "ui/gfx/geometry/rect.h"
#include "ui/gfx/geometry/size.h" #include "ui/gfx/geometry/size.h"
#include "ui/gfx/image/image_skia_operations.h" #include "ui/gfx/image/image_skia_operations.h"
...@@ -78,14 +79,33 @@ LoginMetricsRecorder::ShelfButtonClickTarget GetUserClickTarget(int button_id) { ...@@ -78,14 +79,33 @@ LoginMetricsRecorder::ShelfButtonClickTarget GetUserClickTarget(int button_id) {
return LoginMetricsRecorder::ShelfButtonClickTarget::kTargetCount; return LoginMetricsRecorder::ShelfButtonClickTarget::kTargetCount;
} }
// The margins of the button contents.
constexpr int kButtonMarginTopDp = 18;
constexpr int kButtonMarginLeftDp = 18;
constexpr int kButtonMarginBottomDp = 18;
constexpr int kButtonMarginRightDp = 16;
// The margins of the button background.
constexpr int kButtonBackgroundMarginTopDp = 8;
constexpr int kButtonBackgroundMarginLeftDp = 8;
constexpr int kButtonBackgroundMarginBottomDp = 8;
constexpr int kButtonBackgroundMarginRightDp = 0;
// Spacing between the button image and label. // Spacing between the button image and label.
constexpr int kImageLabelSpacingDp = 8; constexpr int kImageLabelSpacingDp = 10;
// The border radius of the button background.
constexpr int kButtonRoundedBorderRadiusDp = 20;
// The width of the four margins of each button. // The color of the button background.
constexpr int kButtonMarginDp = 13; constexpr SkColor kButtonBackgroundColor =
SkColorSetARGB(0x19, 0xF1, 0xF3, 0xF4);
// The size of the icons in the apps menu. // The color of the button text.
constexpr gfx::Size kAppIconSize(16, 16); constexpr SkColor kButtonTextColor = SkColorSetRGB(0xF1, 0xF3, 0xF4);
// The color of the button icon.
constexpr SkColor kButtonIconColor = SkColorSetRGB(0xEB, 0xEA, 0xED);
class LoginShelfButton : public views::LabelButton { class LoginShelfButton : public views::LabelButton {
public: public:
...@@ -95,10 +115,10 @@ class LoginShelfButton : public views::LabelButton { ...@@ -95,10 +115,10 @@ class LoginShelfButton : public views::LabelButton {
: LabelButton(listener, text) { : LabelButton(listener, text) {
SetAccessibleName(text); SetAccessibleName(text);
SetImage(views::Button::STATE_NORMAL, SetImage(views::Button::STATE_NORMAL,
gfx::CreateVectorIcon(icon, login_constants::kButtonEnabledColor)); gfx::CreateVectorIcon(icon, kButtonIconColor));
SetImage(views::Button::STATE_DISABLED, SetImage(views::Button::STATE_DISABLED,
gfx::CreateVectorIcon( gfx::CreateVectorIcon(
icon, SkColorSetA(login_constants::kButtonEnabledColor, icon, SkColorSetA(kButtonIconColor,
login_constants::kButtonDisabledAlpha))); login_constants::kButtonDisabledAlpha)));
SetFocusBehavior(FocusBehavior::ALWAYS); SetFocusBehavior(FocusBehavior::ALWAYS);
SetFocusPainter(views::Painter::CreateSolidFocusPainter( SetFocusPainter(views::Painter::CreateSolidFocusPainter(
...@@ -116,24 +136,39 @@ class LoginShelfButton : public views::LabelButton { ...@@ -116,24 +136,39 @@ class LoginShelfButton : public views::LabelButton {
SetTextSubpixelRenderingEnabled(false); SetTextSubpixelRenderingEnabled(false);
SetImageLabelSpacing(kImageLabelSpacingDp); SetImageLabelSpacing(kImageLabelSpacingDp);
SetTextColor(views::Button::STATE_NORMAL, SetTextColor(views::Button::STATE_NORMAL, kButtonTextColor);
login_constants::kButtonEnabledColor); SetTextColor(views::Button::STATE_HOVERED, kButtonTextColor);
SetTextColor(views::Button::STATE_HOVERED, SetTextColor(views::Button::STATE_PRESSED, kButtonTextColor);
login_constants::kButtonEnabledColor); SetTextColor(
SetTextColor(views::Button::STATE_PRESSED, views::Button::STATE_DISABLED,
login_constants::kButtonEnabledColor); SkColorSetA(kButtonTextColor, login_constants::kButtonDisabledAlpha));
SetTextColor(views::Button::STATE_DISABLED,
SkColorSetA(login_constants::kButtonEnabledColor,
login_constants::kButtonDisabledAlpha));
label()->SetFontList(views::Label::GetDefaultFontList().Derive( label()->SetFontList(views::Label::GetDefaultFontList().Derive(
1, gfx::Font::FontStyle::NORMAL, gfx::Font::Weight::NORMAL)); 1, gfx::Font::FontStyle::NORMAL, gfx::Font::Weight::NORMAL));
} }
~LoginShelfButton() override = default; ~LoginShelfButton() override = default;
gfx::Insets GetBackgroundInsets() const {
return gfx::Insets(
kButtonBackgroundMarginTopDp, kButtonBackgroundMarginLeftDp,
kButtonBackgroundMarginBottomDp, kButtonBackgroundMarginRightDp);
}
// views::View: // views::View:
gfx::Insets GetInsets() const override { gfx::Insets GetInsets() const override {
return gfx::Insets(kButtonMarginDp); return gfx::Insets(kButtonMarginTopDp, kButtonMarginLeftDp,
kButtonMarginBottomDp, kButtonMarginRightDp);
}
// views::Button:
void PaintButtonContents(gfx::Canvas* canvas) override {
cc::PaintFlags flags;
flags.setAntiAlias(true);
flags.setColor(kButtonBackgroundColor);
flags.setStyle(cc::PaintFlags::kFill_Style);
gfx::Rect bounds = GetLocalBounds();
bounds.Inset(GetBackgroundInsets());
canvas->DrawRoundRect(bounds, kButtonRoundedBorderRadiusDp, flags);
} }
// views::InkDropHostView: // views::InkDropHostView:
...@@ -144,9 +179,8 @@ class LoginShelfButton : public views::LabelButton { ...@@ -144,9 +179,8 @@ class LoginShelfButton : public views::LabelButton {
return ink_drop; return ink_drop;
} }
std::unique_ptr<views::InkDropMask> CreateInkDropMask() const override { std::unique_ptr<views::InkDropMask> CreateInkDropMask() const override {
gfx::InsetsF insets(ash::kHitRegionPadding, ash::kHitRegionPadding);
return std::make_unique<views::RoundRectInkDropMask>( return std::make_unique<views::RoundRectInkDropMask>(
size(), insets, kTrayRoundedBorderRadius); size(), GetBackgroundInsets(), kButtonRoundedBorderRadiusDp);
} }
private: private:
...@@ -182,12 +216,9 @@ class KioskAppsButton : public views::MenuButton, ...@@ -182,12 +216,9 @@ class KioskAppsButton : public views::MenuButton,
SetImage(views::Button::STATE_NORMAL, image); SetImage(views::Button::STATE_NORMAL, image);
SetImageLabelSpacing(kImageLabelSpacingDp); SetImageLabelSpacing(kImageLabelSpacingDp);
SetTextColor(views::Button::STATE_NORMAL, SetTextColor(views::Button::STATE_NORMAL, kButtonTextColor);
login_constants::kButtonEnabledColor); SetTextColor(views::Button::STATE_HOVERED, kButtonTextColor);
SetTextColor(views::Button::STATE_HOVERED, SetTextColor(views::Button::STATE_PRESSED, kButtonTextColor);
login_constants::kButtonEnabledColor);
SetTextColor(views::Button::STATE_PRESSED,
login_constants::kButtonEnabledColor);
label()->SetFontList(views::Label::GetDefaultFontList().Derive( label()->SetFontList(views::Label::GetDefaultFontList().Derive(
1, gfx::Font::FontStyle::NORMAL, gfx::Font::Weight::NORMAL)); 1, gfx::Font::FontStyle::NORMAL, gfx::Font::Weight::NORMAL));
} }
...@@ -196,6 +227,7 @@ class KioskAppsButton : public views::MenuButton, ...@@ -196,6 +227,7 @@ class KioskAppsButton : public views::MenuButton,
void SetApps(std::vector<mojom::KioskAppInfoPtr> kiosk_apps) { void SetApps(std::vector<mojom::KioskAppInfoPtr> kiosk_apps) {
kiosk_apps_ = std::move(kiosk_apps); kiosk_apps_ = std::move(kiosk_apps);
Clear(); Clear();
const gfx::Size kAppIconSize(16, 16);
for (size_t i = 0; i < kiosk_apps_.size(); ++i) { for (size_t i = 0; i < kiosk_apps_.size(); ++i) {
gfx::ImageSkia icon = gfx::ImageSkiaOperations::CreateResizedImage( gfx::ImageSkia icon = gfx::ImageSkiaOperations::CreateResizedImage(
kiosk_apps_[i]->icon, skia::ImageOperations::RESIZE_GOOD, kiosk_apps_[i]->icon, skia::ImageOperations::RESIZE_GOOD,
...@@ -206,6 +238,29 @@ class KioskAppsButton : public views::MenuButton, ...@@ -206,6 +238,29 @@ class KioskAppsButton : public views::MenuButton,
bool HasApps() const { return !kiosk_apps_.empty(); } bool HasApps() const { return !kiosk_apps_.empty(); }
gfx::Insets GetBackgroundInsets() const {
return gfx::Insets(
kButtonBackgroundMarginTopDp, kButtonBackgroundMarginLeftDp,
kButtonBackgroundMarginBottomDp, kButtonBackgroundMarginRightDp);
}
// views::View:
gfx::Insets GetInsets() const override {
return gfx::Insets(kButtonMarginTopDp, kButtonMarginLeftDp,
kButtonMarginBottomDp, kButtonMarginRightDp);
}
// views::Button:
void PaintButtonContents(gfx::Canvas* canvas) override {
cc::PaintFlags flags;
flags.setAntiAlias(true);
flags.setColor(kButtonBackgroundColor);
flags.setStyle(cc::PaintFlags::kFill_Style);
gfx::Rect bounds = GetLocalBounds();
bounds.Inset(GetBackgroundInsets());
canvas->DrawRoundRect(bounds, kButtonRoundedBorderRadiusDp, flags);
}
// views::MenuButton: // views::MenuButton:
void SetVisible(bool visible) override { void SetVisible(bool visible) override {
MenuButton::SetVisible(visible); MenuButton::SetVisible(visible);
...@@ -265,11 +320,9 @@ class KioskAppsButton : public views::MenuButton, ...@@ -265,11 +320,9 @@ class KioskAppsButton : public views::MenuButton,
ink_drop->SetShowHighlightOnFocus(false); ink_drop->SetShowHighlightOnFocus(false);
return ink_drop; return ink_drop;
} }
std::unique_ptr<views::InkDropMask> CreateInkDropMask() const override { std::unique_ptr<views::InkDropMask> CreateInkDropMask() const override {
gfx::InsetsF insets(ash::kHitRegionPadding, ash::kHitRegionPadding);
return std::make_unique<views::RoundRectInkDropMask>( return std::make_unique<views::RoundRectInkDropMask>(
size(), insets, kTrayRoundedBorderRadius); size(), GetBackgroundInsets(), kButtonRoundedBorderRadiusDp);
} }
private: private:
...@@ -307,8 +360,7 @@ LoginShelfView::LoginShelfView( ...@@ -307,8 +360,7 @@ LoginShelfView::LoginShelfView(
kShelfShutdownButtonIcon); kShelfShutdownButtonIcon);
kiosk_apps_button_ = new KioskAppsButton( kiosk_apps_button_ = new KioskAppsButton(
l10n_util::GetStringUTF16(IDS_ASH_SHELF_APPS_BUTTON), l10n_util::GetStringUTF16(IDS_ASH_SHELF_APPS_BUTTON),
CreateVectorIcon(kShelfAppsButtonIcon, CreateVectorIcon(kShelfAppsButtonIcon, kButtonIconColor));
login_constants::kButtonEnabledColor));
kiosk_apps_button_->set_id(kApps); kiosk_apps_button_->set_id(kApps);
AddChildView(kiosk_apps_button_); AddChildView(kiosk_apps_button_);
add_button(kRestart, IDS_ASH_SHELF_RESTART_BUTTON, kShelfShutdownButtonIcon); add_button(kRestart, IDS_ASH_SHELF_RESTART_BUTTON, kShelfShutdownButtonIcon);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment