Add item chip view for holding space

Bug: 1123454
Change-Id: I936c38b274b62d0c3f5218bc414833ee6e6a7223
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2384909
Commit-Queue: Ahmed Mehfooz <amehfooz@chromium.org>
Reviewed-by: Xiyuan Slow <xiyuan@chromium.org>
Reviewed-by: David Black <dmblack@google.com>
Cr-Commit-Position: refs/heads/master@{#803691}

ash/BUILD.gn

@@ -915,6 +915,10 @@ component("ash") {
     "system/enterprise/enterprise_domain_observer.h",
     "system/gesture_education/gesture_education_notification_controller.cc",
     "system/gesture_education/gesture_education_notification_controller.h",
+    "system/holding_space/holding_space_item_chip_view.cc",
+    "system/holding_space/holding_space_item_chip_view.h",
+    "system/holding_space/holding_space_item_chips_container.cc",
+    "system/holding_space/holding_space_item_chips_container.h",
     "system/holding_space/holding_space_tray.cc",
     "system/holding_space/holding_space_tray.h",
     "system/holding_space/pinned_files_container.cc",

ash/system/holding_space/holding_space_item_chip_view.cc

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "ash/system/holding_space/holding_space_item_chip_view.h"
+
+#include "ash/public/cpp/holding_space/holding_space_item.h"
+#include "ash/public/cpp/shelf_config.h"
+#include "ash/style/ash_color_provider.h"
+#include "ash/system/tray/tray_constants.h"
+#include "ash/system/tray/tray_popup_item_style.h"
+#include "ash/system/tray/tray_popup_utils.h"
+#include "ash/system/unified/unified_system_tray_view.h"
+#include "ash/system/user/rounded_image_view.h"
+#include "ui/gfx/canvas.h"
+#include "ui/gfx/paint_vector_icon.h"
+#include "ui/gfx/text_constants.h"
+#include "ui/views/animation/flood_fill_ink_drop_ripple.h"
+#include "ui/views/animation/ink_drop_host_view.h"
+#include "ui/views/animation/ink_drop_impl.h"
+#include "ui/views/controls/button/image_button.h"
+#include "ui/views/controls/button/label_button.h"
+#include "ui/views/layout/box_layout.h"
+#include "ui/views/vector_icons.h"
+
+namespace ash {
+
+HoldingSpaceItemChipView::HoldingSpaceItemChipView(HoldingSpaceItem* item)
+    : item_(item) {
+  auto* layout = SetLayoutManager(std::make_unique<views::BoxLayout>(
+      views::BoxLayout::Orientation::kHorizontal,
+      gfx::Insets(kHoldingSpaceChipPadding), kHoldingSpaceChipChildSpacing));
+
+  image_ =
+      AddChildView(std::make_unique<tray::RoundedImageView>(kTrayItemSize / 2));
+  label_ = AddChildView(std::make_unique<views::Label>());
+  label_->SetElideBehavior(gfx::ELIDE_MIDDLE);
+  layout->SetFlexForView(label_, 1);
+
+  AddPinButton();
+
+  SetPaintToLayer();
+  layer()->SetFillsBoundsOpaquely(false);
+
+  TrayPopupItemStyle style(TrayPopupItemStyle::FontStyle::HOLDING_SPACE_TITLE);
+  style.SetupLabel(label_);
+
+  set_ink_drop_visible_opacity(ShelfConfig::Get()->GetInkDropVisibleOpacity());
+  SetFocusBehavior(FocusBehavior::ALWAYS);
+  SetInkDropMode(InkDropMode::ON_NO_GESTURE_HANDLER);
+
+  set_notify_enter_exit_on_child(true);
+
+  Update();
+}
+
+HoldingSpaceItemChipView::~HoldingSpaceItemChipView() = default;
+
+void HoldingSpaceItemChipView::Update() {
+  image_->SetImage(item_->image(), gfx::Size(kTrayItemSize, kTrayItemSize));
+  label_->SetText(item_->text());
+}
+
+void HoldingSpaceItemChipView::AddPinButton() {
+  pin_ = AddChildView(std::make_unique<views::ToggleImageButton>(this));
+
+  const SkColor icon_color = AshColorProvider::Get()->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kSystemMenuIconColor,
+      AshColorProvider::AshColorMode::kDark);
+
+  const gfx::ImageSkia unpinned_icon =
+      gfx::CreateVectorIcon(views::kUnpinIcon, icon_color);
+  const gfx::ImageSkia pinned_icon =
+      gfx::CreateVectorIcon(views::kPinIcon, icon_color);
+  pin_->SetVisible(false);
+  pin_->SetImage(views::Button::STATE_NORMAL, unpinned_icon);
+  pin_->SetToggledImage(views::Button::STATE_NORMAL, &pinned_icon);
+}
+
+void HoldingSpaceItemChipView::ButtonPressed(views::Button* sender,
+                                             const ui::Event& event) {
+  if (sender == pin_) {
+    pin_->SetToggled(!pin_->toggled());
+    // TODO(amehfooz): Toggle pin
+  }
+}
+
+const char* HoldingSpaceItemChipView::GetClassName() const {
+  return "HoldingSpaceItemChipView";
+}
+
+SkColor HoldingSpaceItemChipView::GetInkDropBaseColor() const {
+  return ShelfConfig::Get()->GetInkDropBaseColor();
+}
+
+void HoldingSpaceItemChipView::OnMouseEvent(ui::MouseEvent* event) {
+  switch (event->type()) {
+    case ui::ET_MOUSE_ENTERED:
+      pin_->SetVisible(IsMouseHovered());
+      break;
+    case ui::ET_MOUSE_EXITED:
+      pin_->SetVisible(IsMouseHovered());
+      break;
+    default:
+      break;
+  }
+  views::InkDropHostView::OnMouseEvent(event);
+}
+
+void HoldingSpaceItemChipView::OnPaint(gfx::Canvas* canvas) {
+  cc::PaintFlags flags;
+  flags.setAntiAlias(true);
+
+  const AshColorProvider* color_provider = AshColorProvider::Get();
+  SkColor color = color_provider->GetControlsLayerColor(
+      AshColorProvider::ControlsLayerType::kControlBackgroundColorInactive,
+      AshColorProvider::AshColorMode::kDark);
+  flags.setColor(color);
+
+  flags.setStyle(cc::PaintFlags::kFill_Style);
+  canvas->DrawRoundRect(GetContentsBounds(), kHoldingSpaceChipCornerRadius,
+                        flags);
+
+  views::InkDropHostView::OnPaint(canvas);
+}
+
+}  // namespace ash

ash/system/holding_space/holding_space_item_chip_view.h

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef ASH_SYSTEM_HOLDING_SPACE_HOLDING_SPACE_ITEM_CHIP_VIEW_H_
+#define ASH_SYSTEM_HOLDING_SPACE_HOLDING_SPACE_ITEM_CHIP_VIEW_H_
+
+#include "ash/ash_export.h"
+#include "ash/system/user/rounded_image_view.h"
+#include "ui/base/ui_base_types.h"
+#include "ui/views/animation/ink_drop_host_view.h"
+#include "ui/views/context_menu_controller.h"
+#include "ui/views/controls/button/label_button.h"
+
+namespace views {
+class Button;
+class Label;
+class ToggleImageButton;
+}  // namespace views
+
+namespace ash {
+
+class HoldingSpaceItem;
+
+// A button with an image derived from a file's thumbnail and file's name as the
+// label.
+class ASH_EXPORT HoldingSpaceItemChipView : public views::InkDropHostView,
+                                            public views::ButtonListener {
+ public:
+  explicit HoldingSpaceItemChipView(HoldingSpaceItem* item);
+  HoldingSpaceItemChipView(const HoldingSpaceItemChipView& other) = delete;
+  HoldingSpaceItemChipView& operator=(const HoldingSpaceItemChipView& other) =
+      delete;
+  ~HoldingSpaceItemChipView() override;
+
+  // views::InkDropHostView:
+  const char* GetClassName() const override;
+  SkColor GetInkDropBaseColor() const override;
+  void OnMouseEvent(ui::MouseEvent* event) override;
+  void OnPaint(gfx::Canvas* canvas) override;
+
+  // views::ButtonListener:
+  void ButtonPressed(views::Button* sender, const ui::Event& event) override;
+
+ private:
+  // Updates the image and label.
+  void Update();
+
+  void AddPinButton();
+
+  HoldingSpaceItem* const item_;
+  tray::RoundedImageView* image_ = nullptr;
+  views::Label* label_ = nullptr;
+  views::ToggleImageButton* pin_ = nullptr;
+};
+
+}  // namespace ash
+
+#endif  // ASH_SYSTEM_HOLDING_SPACE_HOLDING_SPACE_ITEM_CHIP_VIEW_H_

ash/system/holding_space/holding_space_item_chips_container.cc

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "ash/system/holding_space/holding_space_item_chips_container.h"
+
+#include "ash/public/cpp/holding_space/holding_space_item.h"
+#include "ash/system/holding_space/holding_space_item_chip_view.h"
+#include "ash/system/tray/tray_constants.h"
+#include "ui/views/layout/grid_layout.h"
+
+namespace ash {
+
+HoldingSpaceItemChipsContainer::HoldingSpaceItemChipsContainer() {
+  using views::GridLayout;
+  layout_ = SetLayoutManager(std::make_unique<views::GridLayout>());
+  column_set_ = layout_->AddColumnSet(0);
+
+  column_set_->AddColumn(
+      GridLayout::Alignment::FILL, GridLayout::Alignment::FILL, 0,
+      GridLayout::ColumnSize::kFixed, kHoldingSpaceColumnWidth, 0);
+  column_set_->AddPaddingColumn(0, kHoldingSpaceColumnPadding);
+  column_set_->AddColumn(
+      GridLayout::Alignment::FILL, GridLayout::Alignment::FILL, 0,
+      GridLayout::ColumnSize::kFixed, kHoldingSpaceColumnWidth, 0);
+}
+
+HoldingSpaceItemChipsContainer::~HoldingSpaceItemChipsContainer() = default;
+
+void HoldingSpaceItemChipsContainer::AddItemChip(HoldingSpaceItem* item) {
+  if ((children().size() % 2) == 0) {
+    layout_->StartRowWithPadding(0, 0, 0, kHoldingSpaceRowPadding);
+  }
+  layout_->AddView(std::make_unique<HoldingSpaceItemChipView>(item));
+}
+
+const char* HoldingSpaceItemChipsContainer::GetClassName() const {
+  return "HoldingSpaceItemChipsContainer";
+}
+
+}  // namespace ash
\ No newline at end of file

ash/system/holding_space/holding_space_item_chips_container.h

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef ASH_SYSTEM_HOLDING_SPACE_HOLDING_SPACE_ITEM_CHIPS_CONTAINER_H_
+#define ASH_SYSTEM_HOLDING_SPACE_HOLDING_SPACE_ITEM_CHIPS_CONTAINER_H_
+
+#include "ash/ash_export.h"
+#include "ui/views/layout/grid_layout.h"
+#include "ui/views/view.h"
+
+namespace views {
+class ColumnSet;
+class GridLayout;
+}  // namespace views
+
+namespace ash {
+
+class HoldingSpaceItem;
+
+// A container view which automatically arranges item chips into a 2 column
+// grid.
+class HoldingSpaceItemChipsContainer : public views::View {
+ public:
+  HoldingSpaceItemChipsContainer();
+  HoldingSpaceItemChipsContainer(const HoldingSpaceItemChipsContainer& other) =
+      delete;
+  HoldingSpaceItemChipsContainer& operator=(
+      const HoldingSpaceItemChipsContainer& other) = delete;
+  ~HoldingSpaceItemChipsContainer() override;
+
+  void AddItemChip(HoldingSpaceItem* item);
+
+  // views::View:
+  const char* GetClassName() const override;
+
+ private:
+  views::GridLayout* layout_ = nullptr;
+  views::ColumnSet* column_set_ = nullptr;
+};
+
+}  // namespace ash
+
+#endif  // ASH_SYSTEM_HOLDING_SPACE_HOLDING_SPACE_ITEM_CHIPS_CONTAINER_H_

ash/system/holding_space/holding_space_tray.cc

@@ -34,7 +34,7 @@ namespace {
 constexpr int kTrayIconMainAxisInset = 6;
 
 // Width of the holding space bubble itself (dp).
-constexpr int kHoldingSpaceWidth = 332;
+constexpr int kHoldingSpaceWidth = 360;
 
 void SetupChildLayer(views::View* child) {
   child->SetPaintToLayer(ui::LAYER_SOLID_COLOR);

ash/system/holding_space/pinned_files_container.cc

@@ -3,9 +3,14 @@
 // found in the LICENSE file.
 
 #include "ash/system/holding_space/pinned_files_container.h"
-#include <memory>
 
+#include "ash/public/cpp/holding_space/holding_space_controller.h"
+#include "ash/public/cpp/holding_space/holding_space_item.h"
+#include "ash/public/cpp/holding_space/holding_space_model.h"
+#include "ash/shell.h"
 #include "ash/strings/grit/ash_strings.h"
+#include "ash/system/holding_space/holding_space_item_chip_view.h"
+#include "ash/system/holding_space/holding_space_item_chips_container.h"
 #include "ash/system/tray/tray_constants.h"
 #include "ash/system/tray/tray_popup_item_style.h"
 #include "ui/base/l10n/l10n_util.h"
@@ -28,8 +33,12 @@ PinnedFilesContainer::PinnedFilesContainer() {
   title_label->SetPaintToLayer();
   title_label->layer()->SetFillsBoundsOpaquely(false);
 
-  auto* separator = AddChildView(std::make_unique<views::Separator>());
-  separator->SetBorder(views::CreateEmptyBorder(72, 0, 0, 0));
+  item_chips_container_ =
+      AddChildView(std::make_unique<HoldingSpaceItemChipsContainer>());
+  for (const auto& item : HoldingSpaceController::Get()->model()->items()) {
+    if (item->type() == HoldingSpaceItem::Type::kPinnedFile)
+      item_chips_container_->AddItemChip(item.get());
+  }
 }
 
 PinnedFilesContainer::~PinnedFilesContainer() = default;

ash/system/holding_space/pinned_files_container.h

@@ -9,6 +9,8 @@
 
 namespace ash {
 
+class HoldingSpaceItemChipsContainer;
+
 // Container for pinned files that the user adds to the holding space bubble.
 class PinnedFilesContainer : public views::View {
  public:
@@ -19,6 +21,9 @@ class PinnedFilesContainer : public views::View {
 
   // views::View:
   const char* GetClassName() const override;
+
+ private:
+  HoldingSpaceItemChipsContainer* item_chips_container_ = nullptr;
 };
 
 }  // namespace ash

ash/system/tray/tray_constants.h

@@ -236,8 +236,13 @@ constexpr int kPrivacyScreenToastSpacing = 16;
 
 // constants used for holding space tray.
 constexpr gfx::Insets kHoldingSpaceContainerPadding = gfx::Insets(16);
+constexpr gfx::Insets kHoldingSpaceChipPadding = gfx::Insets(8);
+constexpr int kHoldingSpaceChipChildSpacing = 8;
+constexpr int kHoldingSpaceChipCornerRadius = 8;
 constexpr int kHoldingSpaceContainerSeparation = 8;
-
+constexpr int kHoldingSpaceColumnWidth = 160;
+constexpr int kHoldingSpaceColumnPadding = 8;
+constexpr int kHoldingSpaceRowPadding = 8;
 // Constants used for media tray.
 constexpr int kMediaTrayPadding = 8;