Continuing TODO items from a previous CL, remove the "extra_field" and "second_extra_field" keys from the API and replace with real keys from the Base Format View spec. Implement a rough layout that resembles the expanded mode of the view.

Outstanding items:

  - As stated above, the layout is still ugly.
  - We don't gracefully handle empty buttons. We don't crash, either, but it looks even uglier when the buttons are missing.
  - The buttons don't do anything when the user clicks on them.
  - The second icon is just a redraw of the first.
  - The timestamp is hardcoded to "10:43 AM" for layout purposes. I need to do more research on the appropriate date-formatting facilities available to us, and from that back out the timestamp field format in the API itself.

Review URL: https://chromiumcodereview.appspot.com/11358144

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@167589 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 114 insertions, 42 deletions

diff --git a/ui/message_center/base_format_view.cc b/ui/message_center/base_format_view.cc
index f8cec95..6f1790e 100644
--- a/ui/message_center/base_format_view.cc
+++ b/ui/message_center/base_format_view.cc
@@ -4,9 +4,11 @@
 
 #include "ui/message_center/base_format_view.h"
 
+#include "base/i18n/time_formatting.h"
 #include "grit/ui_resources.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/views/controls/button/image_button.h"
+#include "ui/views/controls/button/label_button.h"
 #include "ui/views/controls/image_view.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/layout/grid_layout.h"
@@ -16,6 +18,13 @@ namespace message_center {
 const SkColor kNotificationColor = SkColorSetRGB(0xfe, 0xfe, 0xfe);
 const SkColor kNotificationReadColor = SkColorSetRGB(0xfa, 0xfa, 0xfa);
 
+const int kBaseFormatPrimaryIconWidth = 40;
+const int kBaseFormatSecondaryIconWidth = 16;
+const int kBaseFormatTimestampWidth = 60;
+const int kBaseFormatButtonWidth = 60;
+const int kBaseFormatPaddingBetweenItems = 10;
+const int kBaseFormatOuterHorizontalPadding = 18;
+
 BaseFormatView::BaseFormatView(
     NotificationList::Delegate* list_delegate,
     const NotificationList::Notification& notification)
@@ -29,91 +38,154 @@ BaseFormatView::~BaseFormatView() {
 }
 
 void BaseFormatView::SetUpView() {
+  DCHECK(close_button_);
+
   SkColor bg_color = notification_.is_read ?
       kNotificationReadColor : kNotificationColor;
   set_background(views::Background::CreateSolidBackground(bg_color));
 
-  icon_ = new views::ImageView;
-  icon_->SetImageSize(
-      gfx::Size(kWebNotificationIconSize, kWebNotificationIconSize));
-  icon_->SetImage(notification_.image);
+  views::ImageView* icon = new views::ImageView;
+  icon->SetImageSize(
+      gfx::Size(kBaseFormatPrimaryIconWidth, kBaseFormatPrimaryIconWidth));
+  icon->SetImage(notification_.image);
+
+  views::ImageView* second_icon = new views::ImageView;
+  second_icon->SetImageSize(
+      gfx::Size(kBaseFormatSecondaryIconWidth, kBaseFormatSecondaryIconWidth));
+  // TODO: set up second image
+  second_icon->SetImage(notification_.image);
 
   views::Label* title = new views::Label(notification_.title);
   title->SetHorizontalAlignment(gfx::ALIGN_LEFT);
   title->SetFont(title->font().DeriveFont(0, gfx::Font::BOLD));
 
-  views::Label* extra_field = new views::Label(notification_.extra_field);
-  extra_field->SetHorizontalAlignment(gfx::ALIGN_LEFT);
-  views::Label* second_extra_field =
-      new views::Label(notification_.second_extra_field);
-  second_extra_field->SetHorizontalAlignment(gfx::ALIGN_LEFT);
-
   views::Label* message = new views::Label(notification_.message);
   message->SetHorizontalAlignment(gfx::ALIGN_LEFT);
   message->SetMultiLine(true);
-
-  close_button_ = new views::ImageButton(this);
-  close_button_->SetImage(
-      views::CustomButton::BS_NORMAL,
-      ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
-          IDR_MESSAGE_CLOSE));
-  close_button_->SetImageAlignment(views::ImageButton::ALIGN_CENTER,
-                                   views::ImageButton::ALIGN_MIDDLE);
+  message->SetElideBehavior(views::Label::ELIDE_AT_END);
+
+  views::Label* timestamp = NULL;
+  if (notification_.timestamp != base::Time()) {
+    timestamp = new views::Label(
+        base::TimeFormatTimeOfDay(notification_.timestamp));
+    timestamp->SetHorizontalAlignment(gfx::ALIGN_RIGHT);
+  }
+
+  // TODO(miket): unreadCount
+
+  views::LabelButton* button_one = NULL;
+  if (notification_.button_one_title.length() != 0) {
+    button_one = new views::LabelButton(
+        this, notification_.button_one_title);
+    button_one->SetHorizontalAlignment(gfx::ALIGN_CENTER);
+    button_one->SetNativeTheme(true);
+  }
+  views::LabelButton* button_two = NULL;
+  if (button_one && notification_.button_two_title.length() != 0) {
+    button_two = new views::LabelButton(
+        this, notification_.button_two_title);
+    button_two->SetHorizontalAlignment(gfx::ALIGN_CENTER);
+    button_two->SetNativeTheme(true);
+  }
+
+  views::Label* expanded_message = new views::Label(
+      notification_.expanded_message);
+  expanded_message->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+  expanded_message->SetMultiLine(true);
+
+  // TODO(miket): Image thumbnail for image-type notifications (imageUrl)
 
   views::GridLayout* layout = new views::GridLayout(this);
   SetLayoutManager(layout);
 
   views::ColumnSet* columns = layout->AddColumnSet(0);
 
-  const int padding_width = kPaddingHorizontal / 2;
+  const int padding_width = kBaseFormatOuterHorizontalPadding / 2;
   columns->AddPaddingColumn(0, padding_width);
 
-  // Notification Icon.
+  // Column 0: Notification Icon.
   columns->AddColumn(views::GridLayout::CENTER, views::GridLayout::LEADING,
                      0, /* resize percent */
                      views::GridLayout::FIXED,
-                     kWebNotificationIconSize, kWebNotificationIconSize);
+                     kBaseFormatPrimaryIconWidth, kBaseFormatPrimaryIconWidth);
+  columns->AddPaddingColumn(0, kBaseFormatPaddingBetweenItems);
 
-  columns->AddPaddingColumn(0, padding_width);
-
-  // Notification message text.
-  const int message_width = kWebNotificationWidth - kWebNotificationIconSize -
-      kWebNotificationButtonWidth - (padding_width * 3);
+  // Column 1: Notification message text and first button.
   columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL,
                      100, /* resize percent */
-                     views::GridLayout::FIXED,
-                     message_width, message_width);
+                     views::GridLayout::USE_PREF,
+                     kBaseFormatButtonWidth, kBaseFormatButtonWidth);
+  columns->AddPaddingColumn(0, kBaseFormatPaddingBetweenItems);
 
-  columns->AddPaddingColumn(0, padding_width);
+  // Column 2: Notification message text and second button.
+  columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL,
+                     100, /* resize percent */
+                     views::GridLayout::USE_PREF,
+                     kBaseFormatButtonWidth, kBaseFormatButtonWidth);
+  columns->AddPaddingColumn(0, kBaseFormatPaddingBetweenItems);
 
-  // Close button.
-  columns->AddColumn(views::GridLayout::CENTER, views::GridLayout::LEADING,
+  // Column 3: Notification message text and timestamp.
+  columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL,
                      0, /* resize percent */
                      views::GridLayout::FIXED,
-                     kWebNotificationButtonWidth,
-                     kWebNotificationButtonWidth);
+                     kBaseFormatTimestampWidth, kBaseFormatTimestampWidth);
+  columns->AddPaddingColumn(0, kBaseFormatPaddingBetweenItems);
 
-  // Layout rows
-  layout->AddPaddingRow(0, kPaddingBetweenItems);
+  // Column 4: Close button and secondary icon.
+  columns->AddColumn(views::GridLayout::CENTER, views::GridLayout::BASELINE,
+                     0, /* resize percent */
+                     views::GridLayout::FIXED,
+                     kBaseFormatSecondaryIconWidth,
+                     kBaseFormatSecondaryIconWidth);
+  columns->AddPaddingColumn(0, kBaseFormatPaddingBetweenItems);
 
+  // Lay out rows.
+  // Row 0: Just timestamp and close box.
   layout->StartRow(0, 0);
-  layout->AddView(icon_, 1, 2);
-  layout->AddView(title, 1, 1);
+  layout->SkipColumns(5);
+  if (timestamp)
+    layout->AddView(timestamp, 1, 1);
+  else
+    layout->SkipColumns(2);
   layout->AddView(close_button_, 1, 1);
 
+  // Row 1: Big icon, title.
+  layout->StartRow(0, 0);
+  layout->AddView(icon, 1, 3);
+  layout->AddView(title, 6, 1);
+
+  // Row 2: Continuation of big icon, message.
   layout->StartRow(0, 0);
-  layout->SkipColumns(2);
-  layout->AddView(message, 1, 1);
+  layout->SkipColumns(1);
+  layout->AddView(message, 6, 1);
+  layout->AddPaddingRow(0, kBaseFormatPaddingBetweenItems);
 
+  // Row 3: Continuation of big icon, two buttons, secondary icon.
   layout->StartRow(0,0);
   layout->SkipColumns(1);
-  layout->AddView(extra_field, 1, 1);
+  if (button_one) {
+    layout->AddView(button_one, 1, 1);
+    layout->AddView(button_two, 1, 1);
+  } else {
+    layout->SkipColumns(3);  // two buttons plus padding
+  }
+  layout->SkipColumns(1);
+  layout->AddView(second_icon, 1, 1);
+  layout->AddPaddingRow(0, kBaseFormatPaddingBetweenItems);
 
+  // Row 4: Secondary message.
   layout->StartRow(0,0);
   layout->SkipColumns(1);
-  layout->AddView(second_extra_field, 1, 1);
+  layout->AddView(expanded_message, 3, 1);
+
+  // A final bit of padding to make it look nice.
+  layout->AddPaddingRow(0, kBaseFormatPaddingBetweenItems);
+}
 
-  layout->AddPaddingRow(0, kPaddingBetweenItems);
+void BaseFormatView::ButtonPressed(views::Button* sender,
+                                   const ui::Event& event) {
+  // TODO(miket): propagate to caller.
+  MessageView::ButtonPressed(sender, event);
 }
 
 }  // namespace message_center