| OLD | NEW |
| 1 // Copyright 2017 The Chromium Authors. All rights reserved. | 1 // Copyright 2017 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/message_center/views/notification_view_md.h" | 5 #include "ui/message_center/views/notification_view_md.h" |
| 6 | 6 |
| 7 #include <stddef.h> | 7 #include <stddef.h> |
| 8 | 8 |
| 9 #include "base/i18n/case_conversion.h" | 9 #include "base/i18n/case_conversion.h" |
| 10 #include "base/strings/string_util.h" | 10 #include "base/strings/string_util.h" |
| (...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 110 | 110 |
| 111 // ItemView //////////////////////////////////////////////////////////////////// | 111 // ItemView //////////////////////////////////////////////////////////////////// |
| 112 | 112 |
| 113 // ItemViews are responsible for drawing each list notification item's title and | 113 // ItemViews are responsible for drawing each list notification item's title and |
| 114 // message next to each other within a single column. | 114 // message next to each other within a single column. |
| 115 class ItemView : public views::View { | 115 class ItemView : public views::View { |
| 116 public: | 116 public: |
| 117 explicit ItemView(const message_center::NotificationItem& item); | 117 explicit ItemView(const message_center::NotificationItem& item); |
| 118 ~ItemView() override; | 118 ~ItemView() override; |
| 119 | 119 |
| 120 const char* GetClassName() const override; | |
| 121 | |
| 122 private: | 120 private: |
| 123 DISALLOW_COPY_AND_ASSIGN(ItemView); | 121 DISALLOW_COPY_AND_ASSIGN(ItemView); |
| 124 }; | 122 }; |
| 125 | 123 |
| 126 ItemView::ItemView(const message_center::NotificationItem& item) { | 124 ItemView::ItemView(const message_center::NotificationItem& item) { |
| 127 SetLayoutManager( | 125 SetLayoutManager( |
| 128 new views::BoxLayout(views::BoxLayout::kHorizontal, gfx::Insets(), 0)); | 126 new views::BoxLayout(views::BoxLayout::kHorizontal, gfx::Insets(), 0)); |
| 129 | 127 |
| 130 views::Label* title = new views::Label(item.title); | 128 views::Label* title = new views::Label(item.title); |
| 131 title->set_collapse_when_hidden(true); | 129 title->set_collapse_when_hidden(true); |
| 132 title->SetHorizontalAlignment(gfx::ALIGN_LEFT); | 130 title->SetHorizontalAlignment(gfx::ALIGN_LEFT); |
| 133 title->SetEnabledColor(message_center::kRegularTextColor); | 131 title->SetEnabledColor(message_center::kRegularTextColor); |
| 134 title->SetBackgroundColor(message_center::kDimTextBackgroundColor); | 132 title->SetBackgroundColor(message_center::kDimTextBackgroundColor); |
| 135 AddChildView(title); | 133 AddChildView(title); |
| 136 | 134 |
| 137 views::Label* message = new views::Label(l10n_util::GetStringFUTF16( | 135 views::Label* message = new views::Label(l10n_util::GetStringFUTF16( |
| 138 IDS_MESSAGE_CENTER_LIST_NOTIFICATION_MESSAGE_WITH_DIVIDER, item.message)); | 136 IDS_MESSAGE_CENTER_LIST_NOTIFICATION_MESSAGE_WITH_DIVIDER, item.message)); |
| 139 message->set_collapse_when_hidden(true); | 137 message->set_collapse_when_hidden(true); |
| 140 message->SetHorizontalAlignment(gfx::ALIGN_LEFT); | 138 message->SetHorizontalAlignment(gfx::ALIGN_LEFT); |
| 141 message->SetEnabledColor(message_center::kDimTextColor); | 139 message->SetEnabledColor(message_center::kDimTextColor); |
| 142 message->SetBackgroundColor(message_center::kDimTextBackgroundColor); | 140 message->SetBackgroundColor(message_center::kDimTextBackgroundColor); |
| 143 AddChildView(message); | 141 AddChildView(message); |
| 144 } | 142 } |
| 145 | 143 |
| 146 ItemView::~ItemView() = default; | 144 ItemView::~ItemView() = default; |
| 147 | 145 |
| 148 const char* ItemView::GetClassName() const { | |
| 149 return "ItemView"; | |
| 150 } | |
| 151 | |
| 152 // CompactTitleMessageView ///////////////////////////////////////////////////// | 146 // CompactTitleMessageView ///////////////////////////////////////////////////// |
| 153 | 147 |
| 154 // CompactTitleMessageView shows notification title and message in a single | 148 // CompactTitleMessageView shows notification title and message in a single |
| 155 // line. This view is used for NOTIFICATION_TYPE_PROGRESS. | 149 // line. This view is used for NOTIFICATION_TYPE_PROGRESS. |
| 156 class CompactTitleMessageView : public views::View { | 150 class CompactTitleMessageView : public views::View { |
| 157 public: | 151 public: |
| 158 explicit CompactTitleMessageView(); | 152 explicit CompactTitleMessageView(); |
| 159 ~CompactTitleMessageView() override; | 153 ~CompactTitleMessageView() override; |
| 160 | 154 |
| 161 const char* GetClassName() const override; | |
| 162 | |
| 163 void OnPaint(gfx::Canvas* canvas) override; | 155 void OnPaint(gfx::Canvas* canvas) override; |
| 164 | 156 |
| 165 void set_title(const base::string16& title) { title_ = title; } | 157 void set_title(const base::string16& title) { title_ = title; } |
| 166 void set_message(const base::string16& message) { message_ = message; } | 158 void set_message(const base::string16& message) { message_ = message; } |
| 167 | 159 |
| 168 private: | 160 private: |
| 169 DISALLOW_COPY_AND_ASSIGN(CompactTitleMessageView); | 161 DISALLOW_COPY_AND_ASSIGN(CompactTitleMessageView); |
| 170 | 162 |
| 171 base::string16 title_; | 163 base::string16 title_; |
| 172 base::string16 message_; | 164 base::string16 message_; |
| 173 | 165 |
| 174 views::Label* title_view_ = nullptr; | 166 views::Label* title_view_ = nullptr; |
| 175 views::Label* message_view_ = nullptr; | 167 views::Label* message_view_ = nullptr; |
| 176 }; | 168 }; |
| 177 | 169 |
| 178 CompactTitleMessageView::~CompactTitleMessageView() = default; | 170 CompactTitleMessageView::~CompactTitleMessageView() {} |
| 179 | |
| 180 const char* CompactTitleMessageView::GetClassName() const { | |
| 181 return "CompactTitleMessageView"; | |
| 182 } | |
| 183 | 171 |
| 184 CompactTitleMessageView::CompactTitleMessageView() { | 172 CompactTitleMessageView::CompactTitleMessageView() { |
| 185 SetLayoutManager(new views::FillLayout()); | 173 SetLayoutManager(new views::FillLayout()); |
| 186 | 174 |
| 187 const gfx::FontList& font_list = views::Label().font_list().Derive( | 175 const gfx::FontList& font_list = views::Label().font_list().Derive( |
| 188 1, gfx::Font::NORMAL, gfx::Font::Weight::NORMAL); | 176 1, gfx::Font::NORMAL, gfx::Font::Weight::NORMAL); |
| 189 | 177 |
| 190 title_view_ = new views::Label(); | 178 title_view_ = new views::Label(); |
| 191 title_view_->SetFontList(font_list); | 179 title_view_->SetFontList(font_list); |
| 192 title_view_->SetHorizontalAlignment(gfx::ALIGN_LEFT); | 180 title_view_->SetHorizontalAlignment(gfx::ALIGN_LEFT); |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 235 // This class is needed in addition to LabelButton mainly becuase we want to set | 223 // This class is needed in addition to LabelButton mainly becuase we want to set |
| 236 // visible_opacity of InkDropHighlight. | 224 // visible_opacity of InkDropHighlight. |
| 237 // This button capitalizes the given label string. | 225 // This button capitalizes the given label string. |
| 238 class NotificationButtonMD : public views::LabelButton { | 226 class NotificationButtonMD : public views::LabelButton { |
| 239 public: | 227 public: |
| 240 NotificationButtonMD(views::ButtonListener* listener, | 228 NotificationButtonMD(views::ButtonListener* listener, |
| 241 const base::string16& text); | 229 const base::string16& text); |
| 242 ~NotificationButtonMD() override; | 230 ~NotificationButtonMD() override; |
| 243 | 231 |
| 244 void SetText(const base::string16& text) override; | 232 void SetText(const base::string16& text) override; |
| 245 const char* GetClassName() const override; | |
| 246 | 233 |
| 247 std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight() | 234 std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight() |
| 248 const override; | 235 const override; |
| 249 | 236 |
| 250 private: | 237 private: |
| 251 DISALLOW_COPY_AND_ASSIGN(NotificationButtonMD); | 238 DISALLOW_COPY_AND_ASSIGN(NotificationButtonMD); |
| 252 }; | 239 }; |
| 253 | 240 |
| 254 NotificationButtonMD::NotificationButtonMD(views::ButtonListener* listener, | 241 NotificationButtonMD::NotificationButtonMD(views::ButtonListener* listener, |
| 255 const base::string16& text) | 242 const base::string16& text) |
| (...skipping 10 matching lines...) Expand all Loading... |
| 266 SetMinSize(kActionButtonMinSize); | 253 SetMinSize(kActionButtonMinSize); |
| 267 SetFocusForPlatform(); | 254 SetFocusForPlatform(); |
| 268 } | 255 } |
| 269 | 256 |
| 270 NotificationButtonMD::~NotificationButtonMD() = default; | 257 NotificationButtonMD::~NotificationButtonMD() = default; |
| 271 | 258 |
| 272 void NotificationButtonMD::SetText(const base::string16& text) { | 259 void NotificationButtonMD::SetText(const base::string16& text) { |
| 273 views::LabelButton::SetText(base::i18n::ToUpper(text)); | 260 views::LabelButton::SetText(base::i18n::ToUpper(text)); |
| 274 } | 261 } |
| 275 | 262 |
| 276 const char* NotificationButtonMD::GetClassName() const { | |
| 277 return "NotificationButtonMD"; | |
| 278 } | |
| 279 | |
| 280 std::unique_ptr<views::InkDropHighlight> | 263 std::unique_ptr<views::InkDropHighlight> |
| 281 NotificationButtonMD::CreateInkDropHighlight() const { | 264 NotificationButtonMD::CreateInkDropHighlight() const { |
| 282 std::unique_ptr<views::InkDropHighlight> highlight = | 265 std::unique_ptr<views::InkDropHighlight> highlight = |
| 283 views::LabelButton::CreateInkDropHighlight(); | 266 views::LabelButton::CreateInkDropHighlight(); |
| 284 highlight->set_visible_opacity(kActionButtonInkDropHighlightVisibleOpacity); | 267 highlight->set_visible_opacity(kActionButtonInkDropHighlightVisibleOpacity); |
| 285 return highlight; | 268 return highlight; |
| 286 } | 269 } |
| 287 | 270 |
| 288 } // anonymous namespace | 271 } // anonymous namespace |
| 289 | 272 |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 325 void NotificationViewMD::CreateOrUpdateViews(const Notification& notification) { | 308 void NotificationViewMD::CreateOrUpdateViews(const Notification& notification) { |
| 326 CreateOrUpdateContextTitleView(notification); | 309 CreateOrUpdateContextTitleView(notification); |
| 327 CreateOrUpdateTitleView(notification); | 310 CreateOrUpdateTitleView(notification); |
| 328 CreateOrUpdateMessageView(notification); | 311 CreateOrUpdateMessageView(notification); |
| 329 CreateOrUpdateCompactTitleMessageView(notification); | 312 CreateOrUpdateCompactTitleMessageView(notification); |
| 330 CreateOrUpdateProgressBarView(notification); | 313 CreateOrUpdateProgressBarView(notification); |
| 331 CreateOrUpdateListItemViews(notification); | 314 CreateOrUpdateListItemViews(notification); |
| 332 CreateOrUpdateIconView(notification); | 315 CreateOrUpdateIconView(notification); |
| 333 CreateOrUpdateSmallIconView(notification); | 316 CreateOrUpdateSmallIconView(notification); |
| 334 CreateOrUpdateImageView(notification); | 317 CreateOrUpdateImageView(notification); |
| 318 CreateOrUpdateActionButtonViews(notification); |
| 335 CreateOrUpdateCloseButtonView(notification); | 319 CreateOrUpdateCloseButtonView(notification); |
| 336 CreateOrUpdateSettingsButtonView(notification); | 320 CreateOrUpdateSettingsButtonView(notification); |
| 337 UpdateViewForExpandedState(expanded_); | 321 UpdateViewForExpandedState(expanded_); |
| 338 // Should be called at the last because SynthesizeMouseMoveEvent() requires | |
| 339 // everything is in the right location when called. | |
| 340 CreateOrUpdateActionButtonViews(notification); | |
| 341 } | 322 } |
| 342 | 323 |
| 343 NotificationViewMD::NotificationViewMD(MessageCenterController* controller, | 324 NotificationViewMD::NotificationViewMD(MessageCenterController* controller, |
| 344 const Notification& notification) | 325 const Notification& notification) |
| 345 : MessageView(controller, notification), | 326 : MessageView(controller, notification), |
| 346 clickable_(notification.clickable()) { | 327 clickable_(notification.clickable()) { |
| 347 SetLayoutManager( | 328 SetLayoutManager( |
| 348 new views::BoxLayout(views::BoxLayout::kVertical, gfx::Insets(), 0)); | 329 new views::BoxLayout(views::BoxLayout::kVertical, gfx::Insets(), 0)); |
| 349 | 330 |
| 350 // |header_row_| contains app_icon, app_name, control buttons, etc... | 331 // |header_row_| contains app_icon, app_name, control buttons, etc... |
| (...skipping 144 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 495 } | 476 } |
| 496 | 477 |
| 497 void NotificationViewMD::CreateOrUpdateContextTitleView( | 478 void NotificationViewMD::CreateOrUpdateContextTitleView( |
| 498 const Notification& notification) { | 479 const Notification& notification) { |
| 499 header_row_->SetAppName(notification.display_source()); | 480 header_row_->SetAppName(notification.display_source()); |
| 500 header_row_->SetTimestamp(notification.timestamp()); | 481 header_row_->SetTimestamp(notification.timestamp()); |
| 501 } | 482 } |
| 502 | 483 |
| 503 void NotificationViewMD::CreateOrUpdateTitleView( | 484 void NotificationViewMD::CreateOrUpdateTitleView( |
| 504 const Notification& notification) { | 485 const Notification& notification) { |
| 505 if (notification.title().empty() || | 486 if (notification.type() == NOTIFICATION_TYPE_PROGRESS) { |
| 506 notification.type() == NOTIFICATION_TYPE_PROGRESS) { | 487 left_content_->RemoveChildView(title_view_); |
| 507 if (title_view_) | |
| 508 left_content_->RemoveChildView(title_view_); | |
| 509 title_view_ = nullptr; | 488 title_view_ = nullptr; |
| 510 return; | 489 return; |
| 511 } | 490 } |
| 512 const gfx::FontList& font_list = views::Label().font_list().Derive( | 491 const gfx::FontList& font_list = views::Label().font_list().Derive( |
| 513 1, gfx::Font::NORMAL, gfx::Font::Weight::NORMAL); | 492 1, gfx::Font::NORMAL, gfx::Font::Weight::NORMAL); |
| 514 | 493 |
| 515 int title_character_limit = | 494 int title_character_limit = |
| 516 kNotificationWidth * kMaxTitleLines / kMinPixelsPerTitleCharacter; | 495 kNotificationWidth * kMaxTitleLines / kMinPixelsPerTitleCharacter; |
| 517 | 496 |
| 518 base::string16 title = gfx::TruncateString( | 497 base::string16 title = gfx::TruncateString( |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 553 } else { | 532 } else { |
| 554 message_view_->SetText(text); | 533 message_view_->SetText(text); |
| 555 } | 534 } |
| 556 | 535 |
| 557 message_view_->SetVisible(notification.items().empty()); | 536 message_view_->SetVisible(notification.items().empty()); |
| 558 } | 537 } |
| 559 | 538 |
| 560 void NotificationViewMD::CreateOrUpdateCompactTitleMessageView( | 539 void NotificationViewMD::CreateOrUpdateCompactTitleMessageView( |
| 561 const Notification& notification) { | 540 const Notification& notification) { |
| 562 if (notification.type() != NOTIFICATION_TYPE_PROGRESS) { | 541 if (notification.type() != NOTIFICATION_TYPE_PROGRESS) { |
| 563 if (compact_title_message_view_) | 542 left_content_->RemoveChildView(compact_title_message_view_); |
| 564 left_content_->RemoveChildView(compact_title_message_view_); | |
| 565 compact_title_message_view_ = nullptr; | 543 compact_title_message_view_ = nullptr; |
| 566 return; | 544 return; |
| 567 } | 545 } |
| 568 if (!compact_title_message_view_) { | 546 if (!compact_title_message_view_) { |
| 569 compact_title_message_view_ = new CompactTitleMessageView(); | 547 compact_title_message_view_ = new CompactTitleMessageView(); |
| 570 left_content_->AddChildView(compact_title_message_view_); | 548 left_content_->AddChildView(compact_title_message_view_); |
| 571 } | 549 } |
| 572 | 550 |
| 573 compact_title_message_view_->set_title(notification.title()); | 551 compact_title_message_view_->set_title(notification.title()); |
| 574 compact_title_message_view_->set_message(notification.message()); | 552 compact_title_message_view_->set_message(notification.message()); |
| 575 left_content_->InvalidateLayout(); | 553 left_content_->InvalidateLayout(); |
| 576 } | 554 } |
| 577 | 555 |
| 578 void NotificationViewMD::CreateOrUpdateProgressBarView( | 556 void NotificationViewMD::CreateOrUpdateProgressBarView( |
| 579 const Notification& notification) { | 557 const Notification& notification) { |
| 580 if (notification.type() != NOTIFICATION_TYPE_PROGRESS) { | 558 if (notification.type() != NOTIFICATION_TYPE_PROGRESS) { |
| 581 if (progress_bar_view_) | 559 left_content_->RemoveChildView(progress_bar_view_); |
| 582 left_content_->RemoveChildView(progress_bar_view_); | |
| 583 progress_bar_view_ = nullptr; | 560 progress_bar_view_ = nullptr; |
| 584 header_row_->ClearProgress(); | 561 header_row_->ClearProgress(); |
| 585 return; | 562 return; |
| 586 } | 563 } |
| 587 | 564 |
| 588 DCHECK(left_content_); | 565 DCHECK(left_content_); |
| 589 | 566 |
| 590 if (!progress_bar_view_) { | 567 if (!progress_bar_view_) { |
| 591 progress_bar_view_ = new views::ProgressBar(kProgressBarHeight, | 568 progress_bar_view_ = new views::ProgressBar(kProgressBarHeight, |
| 592 /* allow_round_corner */ false); | 569 /* allow_round_corner */ false); |
| (...skipping 27 matching lines...) Expand all Loading... |
| 620 | 597 |
| 621 // Needed when CreateOrUpdateViews is called for update. | 598 // Needed when CreateOrUpdateViews is called for update. |
| 622 if (!item_views_.empty()) | 599 if (!item_views_.empty()) |
| 623 left_content_->InvalidateLayout(); | 600 left_content_->InvalidateLayout(); |
| 624 } | 601 } |
| 625 | 602 |
| 626 void NotificationViewMD::CreateOrUpdateIconView( | 603 void NotificationViewMD::CreateOrUpdateIconView( |
| 627 const Notification& notification) { | 604 const Notification& notification) { |
| 628 if (notification.type() == NOTIFICATION_TYPE_PROGRESS || | 605 if (notification.type() == NOTIFICATION_TYPE_PROGRESS || |
| 629 notification.type() == NOTIFICATION_TYPE_MULTIPLE) { | 606 notification.type() == NOTIFICATION_TYPE_MULTIPLE) { |
| 630 if (icon_view_) | 607 right_content_->RemoveChildView(icon_view_); |
| 631 right_content_->RemoveChildView(icon_view_); | |
| 632 icon_view_ = nullptr; | 608 icon_view_ = nullptr; |
| 633 return; | 609 return; |
| 634 } | 610 } |
| 635 | 611 |
| 636 gfx::Size image_view_size(30, 30); | 612 gfx::Size image_view_size(30, 30); |
| 637 if (!icon_view_) { | 613 if (!icon_view_) { |
| 638 icon_view_ = new ProportionalImageView(image_view_size); | 614 icon_view_ = new ProportionalImageView(image_view_size); |
| 639 right_content_->AddChildView(icon_view_); | 615 right_content_->AddChildView(icon_view_); |
| 640 } | 616 } |
| 641 | 617 |
| (...skipping 71 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 713 new NotificationButtonMD(this, button_info.title); | 689 new NotificationButtonMD(this, button_info.title); |
| 714 action_buttons_.push_back(button); | 690 action_buttons_.push_back(button); |
| 715 actions_row_->AddChildView(button); | 691 actions_row_->AddChildView(button); |
| 716 } else { | 692 } else { |
| 717 action_buttons_[i]->SetText(button_info.title); | 693 action_buttons_[i]->SetText(button_info.title); |
| 718 action_buttons_[i]->SchedulePaint(); | 694 action_buttons_[i]->SchedulePaint(); |
| 719 action_buttons_[i]->Layout(); | 695 action_buttons_[i]->Layout(); |
| 720 } | 696 } |
| 721 } | 697 } |
| 722 | 698 |
| 723 // Inherit mouse hover state when action button views reset. | 699 if (new_buttons) { |
| 724 // If the view is not expanded, there should be no hover state. | 700 // TODO(fukino): Investigate if this Layout() is necessary. |
| 725 if (new_buttons && expanded_) { | 701 Layout(); |
| 726 views::Widget* widget = GetWidget(); | 702 views::Widget* widget = GetWidget(); |
| 727 if (widget) { | 703 if (widget != NULL) { |
| 728 // This Layout() is needed because button should be in the right location | |
| 729 // in the view hierarchy when SynthesizeMouseMoveEvent() is called. | |
| 730 Layout(); | |
| 731 widget->SetSize(widget->GetContentsView()->GetPreferredSize()); | 704 widget->SetSize(widget->GetContentsView()->GetPreferredSize()); |
| 732 GetWidget()->SynthesizeMouseMoveEvent(); | 705 GetWidget()->SynthesizeMouseMoveEvent(); |
| 733 } | 706 } |
| 734 } | 707 } |
| 735 } | 708 } |
| 736 | 709 |
| 737 void NotificationViewMD::CreateOrUpdateCloseButtonView( | 710 void NotificationViewMD::CreateOrUpdateCloseButtonView( |
| 738 const Notification& notification) { | 711 const Notification& notification) { |
| 739 if (!notification.pinned()) { | 712 if (!notification.pinned()) { |
| 740 header_row_->SetCloseButtonEnabled(true); | 713 header_row_->SetCloseButtonEnabled(true); |
| (...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 806 header_row_->expand_button()->HasFocus()) || | 779 header_row_->expand_button()->HasFocus()) || |
| 807 (header_row_->IsCloseButtonEnabled() && | 780 (header_row_->IsCloseButtonEnabled() && |
| 808 header_row_->close_button()->HasFocus()) || | 781 header_row_->close_button()->HasFocus()) || |
| 809 (header_row_->IsSettingsButtonEnabled() && | 782 (header_row_->IsSettingsButtonEnabled() && |
| 810 header_row_->settings_button()->HasFocus()); | 783 header_row_->settings_button()->HasFocus()); |
| 811 | 784 |
| 812 header_row_->SetControlButtonsVisible(target_visibility); | 785 header_row_->SetControlButtonsVisible(target_visibility); |
| 813 } | 786 } |
| 814 | 787 |
| 815 } // namespace message_center | 788 } // namespace message_center |
| OLD | NEW |