From df1d1cdfe2b33b193f23ec281c5f205a6d606de5 Mon Sep 17 00:00:00 2001
From: Przemyslaw Brudny <przemyslaw.brudny@mudita.com>
Date: Thu, 5 Aug 2021 20:05:20 +0200
Subject: [PATCH] [BH-723] Added ThreeBox and BellBaseLayout

Added ThreeBox template layout type. Applied it to Pure header.
Created BellBaseLayout for most of Bell windows. Modified
SideListView to proper handle new layout with page bar on/off.
---
 .../data/BellSettingsStyle.hpp                |  8 ---
 .../widgets/TimeFormatSetListItem.cpp         | 31 ++++-------
 .../widgets/TimeFormatSetListItem.hpp         |  5 +-
 .../widgets/TimeSetListItem.cpp               | 17 ++----
 .../widgets/TimeSetListItem.hpp               |  7 +--
 .../windows/BellSettingsTimeUnitsWindow.cpp   |  5 +-
 module-apps/apps-common/CMakeLists.txt        |  2 +
 .../apps-common/widgets/BellBaseLayout.cpp    | 37 +++++++++++++
 .../apps-common/widgets/BellBaseLayout.hpp    | 24 +++++++++
 .../apps-common/widgets/BellSideListItem.cpp  | 14 +++--
 .../apps-common/widgets/BellSideListItem.hpp  | 23 ++++++++
 module-gui/gui/widgets/CMakeLists.txt         |  4 +-
 module-gui/gui/widgets/SideListItem.hpp       | 18 -------
 module-gui/gui/widgets/SideListView.cpp       | 20 +++----
 module-gui/gui/widgets/SideListView.hpp       | 11 ++--
 module-gui/gui/widgets/Style.hpp              | 24 ++-------
 module-gui/gui/widgets/ThreeBox.cpp           | 26 ++++++++++
 module-gui/gui/widgets/ThreeBox.hpp           | 32 ++++++++++++
 module-gui/gui/widgets/header/Header.cpp      | 52 +++++++++----------
 module-gui/gui/widgets/header/Header.hpp      |  7 +--
 20 files changed, 217 insertions(+), 150 deletions(-)
 create mode 100644 module-apps/apps-common/widgets/BellBaseLayout.cpp
 create mode 100644 module-apps/apps-common/widgets/BellBaseLayout.hpp
 rename module-gui/gui/widgets/SideListItem.cpp => module-apps/apps-common/widgets/BellSideListItem.cpp (51%)
 create mode 100644 module-apps/apps-common/widgets/BellSideListItem.hpp
 delete mode 100644 module-gui/gui/widgets/SideListItem.hpp
 create mode 100644 module-gui/gui/widgets/ThreeBox.cpp
 create mode 100644 module-gui/gui/widgets/ThreeBox.hpp

diff --git a/module-apps/application-bell-settings/data/BellSettingsStyle.hpp b/module-apps/application-bell-settings/data/BellSettingsStyle.hpp
index 5767e74990f915914dcbde0e0c0dcb5e5b4570df..30ce7361341062873a6e00c3ab1f5fa252c9c88a 100644
--- a/module-apps/application-bell-settings/data/BellSettingsStyle.hpp
+++ b/module-apps/application-bell-settings/data/BellSettingsStyle.hpp
@@ -17,16 +17,8 @@ namespace gui
             inline constexpr auto default_body_width    = 400;
         } // namespace settings_window
 
-        namespace time_set_spinner_list_item
-        {
-            inline constexpr auto w = 450;
-            inline constexpr auto h = 250;
-        } // namespace time_set_spinner_list_item
-
         namespace time_fmt_set_list_item
         {
-            inline constexpr auto w    = 129;
-            inline constexpr auto h    = 130;
             inline constexpr auto font = style::window::font::supersizemelight;
         } // namespace time_fmt_set_list_item
     }     // namespace bell_settings_style
diff --git a/module-apps/application-bell-settings/widgets/TimeFormatSetListItem.cpp b/module-apps/application-bell-settings/widgets/TimeFormatSetListItem.cpp
index 947b810b07677d2720478aebcb17fdb06f2922e5..c6afa51574700d8a71fa38306a25efe22c440280 100644
--- a/module-apps/application-bell-settings/widgets/TimeFormatSetListItem.cpp
+++ b/module-apps/application-bell-settings/widgets/TimeFormatSetListItem.cpp
@@ -16,43 +16,35 @@ namespace
     constexpr auto fmtSpinnerMin  = 12U;
     constexpr auto fmtSpinnerMax  = 24U;
     constexpr auto fmtSpinnerStep = 12U;
-
-    uint16_t getFontHeight()
-    {
-        const gui::RawFont *font = gui::FontManager::getInstance().getFont(style::window::font::supersizemelight);
-        return font->info.line_height;
-    }
 } // namespace
 
 namespace gui
 {
-
     TimeFormatSetListItem::TimeFormatSetListItem(
         Length x, Length y, Length w, Length h, const UTF8 &topDesc, const UTF8 &botDesc)
-        : SideListItem(topDesc)
+        : BellSideListItem(topDesc)
     {
         setMinimumSize(style::sidelistview::list_item::w, style::sidelistview::list_item::h);
         setEdges(RectangleEdge::None);
         setFocusItem(body);
 
         timeFormat = new Spinner(fmtSpinnerMin, fmtSpinnerMax, fmtSpinnerStep, Boundaries::Continuous);
-        timeFormat->setMinimumSize(bell_settings_style::time_fmt_set_list_item::w, getFontHeight());
+        timeFormat->setMaximumSize(style::bell_base_layout::w, style::bell_base_layout::h);
         timeFormat->setFont(bell_settings_style::time_fmt_set_list_item::font);
 
-        timeFormat->setMargins(calculateMargins());
         timeFormat->setAlignment(Alignment(Alignment::Horizontal::Center));
         timeFormat->setFixedFieldWidth(2);
         timeFormat->setEdges(RectangleEdge::None);
         timeFormat->setCurrentValue(fmtSpinnerMin);
         timeFormat->setFocusEdges(RectangleEdge::None);
-        body->addWidget(timeFormat);
+        body->centerBox->addWidget(timeFormat);
 
-        bottomDescription = new Label(body);
-        bottomDescription->setMinimumSize(style::sidelistview::top_message::w, style::sidelistview::top_message::h);
-        bottomDescription->setFont(style::sidelistview::top_message::font);
+        bottomDescription = new Label(body->lastBox);
+        bottomDescription->setMaximumSize(style::bell_base_layout::w, style::bell_base_layout::outer_layouts_h);
+        bottomDescription->setFont(style::bell_sidelist_item::description_font);
         bottomDescription->setEdges(RectangleEdge::None);
         bottomDescription->activeItem = false;
-        bottomDescription->setAlignment(Alignment(Alignment::Horizontal::Center));
+        bottomDescription->setAlignment(Alignment(Alignment::Horizontal::Center, Alignment::Vertical::Center));
         bottomDescription->setText(botDesc);
 
         dimensionChangedCallback = [&](Item &, const BoundingBox &newDim) -> bool {
@@ -76,18 +68,13 @@ namespace gui
 
         inputCallback = [&](Item &, const InputEvent &inputEvent) -> bool { return body->onInput(inputEvent); };
     }
+
     auto TimeFormatSetListItem::getTimeFmt() const noexcept -> utils::time::Locale::TimeFormat
     {
         return timeFormat->getCurrentValue() == fmtSpinnerMin ? utils::time::Locale::TimeFormat::FormatTime12H
                                                               : utils::time::Locale::TimeFormat::FormatTime24H;
     }
-    Margins TimeFormatSetListItem::calculateMargins() const noexcept
-    {
-        constexpr Position availableHeight =
-            style::sidelistview::list_item::h -
-            (bell_settings_style::time_fmt_set_list_item::h + (2 * style::sidelistview::top_message::h));
-        return Margins{0, availableHeight / 2, 0, availableHeight / 4};
-    }
+
     auto TimeFormatSetListItem::setTimeFmt(utils::time::Locale::TimeFormat fmt) noexcept -> void
     {
         using namespace utils::time;
diff --git a/module-apps/application-bell-settings/widgets/TimeFormatSetListItem.hpp b/module-apps/application-bell-settings/widgets/TimeFormatSetListItem.hpp
index 7fa4f956425d8fb4989da2c48d26cdb6120b6bed..53c38ce372b13f3f4fb69a2bcd47a89c277b0bcb 100644
--- a/module-apps/application-bell-settings/widgets/TimeFormatSetListItem.hpp
+++ b/module-apps/application-bell-settings/widgets/TimeFormatSetListItem.hpp
@@ -5,7 +5,7 @@
 
 #include <time/time_locale.hpp>
 #include <utf8/UTF8.hpp>
-#include <widgets/SideListItem.hpp>
+#include <widgets/BellSideListItem.hpp>
 
 #include <functional>
 
@@ -14,7 +14,7 @@ namespace gui
     class Spinner;
     class Label;
 
-    class TimeFormatSetListItem : public gui::SideListItem
+    class TimeFormatSetListItem : public gui::BellSideListItem
     {
       public:
         TimeFormatSetListItem() = delete;
@@ -29,7 +29,6 @@ namespace gui
         std::function<void(Item &)> onNextCallback;
 
       private:
-        Margins calculateMargins() const noexcept;
 
         Label *bottomDescription{};
         Spinner *timeFormat{};
diff --git a/module-apps/application-bell-settings/widgets/TimeSetListItem.cpp b/module-apps/application-bell-settings/widgets/TimeSetListItem.cpp
index 84ae936e9ee60eff40c2eb21e84f489b6ba68503..74d1864bda029d85b655c04085f6afaf540ad66c 100644
--- a/module-apps/application-bell-settings/widgets/TimeSetListItem.cpp
+++ b/module-apps/application-bell-settings/widgets/TimeSetListItem.cpp
@@ -11,14 +11,11 @@ namespace gui
 {
     TimeSetListItem::TimeSetListItem(
         gui::Length x, gui::Length y, gui::Length w, gui::Length h, std::string description)
-        : SideListItem(std::move(description))
+        : BellSideListItem(std::move(description))
     {
         setMinimumSize(style::sidelistview::list_item::w, style::sidelistview::list_item::h);
-        timeSetFmtSpinner = new TimeSetFmtSpinner(body);
-        timeSetFmtSpinner->setMinimumSize(bell_settings_style::time_set_spinner_list_item::w,
-                                          bell_settings_style::time_set_spinner_list_item::h);
-
-        timeSetFmtSpinner->setMargins(calculateMargins());
+        timeSetFmtSpinner = new TimeSetFmtSpinner(body->centerBox);
+        timeSetFmtSpinner->setMaximumSize(style::bell_base_layout::w, style::bell_base_layout::h);
         setFocusItem(body);
 
         dimensionChangedCallback = [&](gui::Item &, const BoundingBox &newDim) -> bool {
@@ -33,12 +30,4 @@ namespace gui
 
         inputCallback = [&](Item &, const InputEvent &inputEvent) -> bool { return body->onInput(inputEvent); };
     }
-    Margins TimeSetListItem::calculateMargins() const noexcept
-    {
-        constexpr auto ratio = 4;
-        constexpr Position availableHeight =
-            style::sidelistview::list_item::h -
-            (bell_settings_style::time_fmt_set_list_item::h + style::sidelistview::top_message::h);
-        return Margins{0, availableHeight / ratio, 0, 0};
-    }
 } /* namespace gui */
diff --git a/module-apps/application-bell-settings/widgets/TimeSetListItem.hpp b/module-apps/application-bell-settings/widgets/TimeSetListItem.hpp
index f7d81741772172f973735e2a9fe7090ab559aed2..9f128e38f408d6a54924f5c832fce96312217470 100644
--- a/module-apps/application-bell-settings/widgets/TimeSetListItem.hpp
+++ b/module-apps/application-bell-settings/widgets/TimeSetListItem.hpp
@@ -3,7 +3,7 @@
 
 #pragma once
 
-#include <widgets/SideListItem.hpp>
+#include <widgets/BellSideListItem.hpp>
 
 #include <string>
 
@@ -11,14 +11,11 @@ namespace gui
 {
     class TimeSetFmtSpinner;
 
-    class TimeSetListItem : public SideListItem
+    class TimeSetListItem : public BellSideListItem
     {
       public:
         TimeSetFmtSpinner *timeSetFmtSpinner = nullptr;
 
         TimeSetListItem(gui::Length x, gui::Length y, gui::Length w, gui::Length h, std::string description);
-
-      private:
-        Margins calculateMargins() const noexcept;
     };
 } /* namespace gui */
diff --git a/module-apps/application-bell-settings/windows/BellSettingsTimeUnitsWindow.cpp b/module-apps/application-bell-settings/windows/BellSettingsTimeUnitsWindow.cpp
index 117e627ac0cb7a10b41693f16253d9856164fbca..47704aba3b94a9159023e2ae3134f7f401582d04 100644
--- a/module-apps/application-bell-settings/windows/BellSettingsTimeUnitsWindow.cpp
+++ b/module-apps/application-bell-settings/windows/BellSettingsTimeUnitsWindow.cpp
@@ -35,10 +35,9 @@ namespace gui
 
         presenter->createData();
 
-        sidelistview =
-            new SideListView(this, 0U, 0U, this->getWidth(), this->getHeight(), presenter->getPagesProvider());
+        sidelistview = new SideListView(
+            this, 0U, 0U, this->getWidth(), this->getHeight(), presenter->getPagesProvider(), PageBarType::None);
         sidelistview->setEdges(RectangleEdge::None);
-        sidelistview->setPageBarVisible(false);
 
         sidelistview->rebuildList(listview::RebuildType::Full);
 
diff --git a/module-apps/apps-common/CMakeLists.txt b/module-apps/apps-common/CMakeLists.txt
index 6ce0435cb8e9721e81b945109a5c4ba6cd66af03..161deba7c9baa8b6123023f6af1a5a7119217690 100644
--- a/module-apps/apps-common/CMakeLists.txt
+++ b/module-apps/apps-common/CMakeLists.txt
@@ -31,6 +31,8 @@ target_sources(apps-common
         widgets/BarGraph.cpp
         widgets/BrightnessBox.cpp
         widgets/ButtonOnOff.cpp
+        widgets/BellBaseLayout.cpp
+        widgets/BellSideListItem.cpp
         widgets/DateWidget.cpp
         widgets/InputBox.cpp
         widgets/ModesBox.cpp
diff --git a/module-apps/apps-common/widgets/BellBaseLayout.cpp b/module-apps/apps-common/widgets/BellBaseLayout.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..2a4eedf3eb7ee6cf87e21903f5a378c93654e345
--- /dev/null
+++ b/module-apps/apps-common/widgets/BellBaseLayout.cpp
@@ -0,0 +1,37 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#include "BellBaseLayout.hpp"
+#include "Style.hpp"
+
+namespace gui
+{
+    BellBaseLayout::BellBaseLayout(Item *parent, Position x, Position y, Length w, Length h)
+        : VThreeBox(parent, x, y, w, h)
+    {
+        setMinimumSize(style::bell_base_layout::w, style::bell_base_layout::h);
+        setAlignment(Alignment(Alignment::Horizontal::Center, Alignment::Vertical::Center));
+        setEdges(RectangleEdge::None);
+
+        firstBox = new VBox(this, 0, 0, 0, 0);
+        firstBox->setMinimumSize(style::bell_base_layout::w, style::bell_base_layout::first_layout_min_h);
+        firstBox->setMaximumHeight(style::bell_base_layout::outer_layouts_h);
+        firstBox->setAlignment(Alignment(gui::Alignment::Horizontal::Center));
+        firstBox->setEdges(RectangleEdge::None);
+        firstBox->activeItem = false;
+
+        centerBox = new VBox(this, 0, 0, 0, 0);
+        centerBox->setEdges(RectangleEdge::None);
+        centerBox->setAlignment(Alignment(gui::Alignment::Horizontal::Center, gui::Alignment::Vertical::Center));
+        centerBox->setMinimumSize(style::bell_base_layout::w,
+                                  style::bell_base_layout::h - 2 * style::bell_base_layout::outer_layouts_h);
+
+        lastBox = new VBox(this, 0, 0, 0, 0);
+        lastBox->setMinimumSize(style::bell_base_layout::w, style::bell_base_layout::outer_layouts_h);
+        lastBox->setAlignment(Alignment(gui::Alignment::Horizontal::Center));
+        lastBox->setEdges(RectangleEdge::None);
+        lastBox->activeItem = false;
+
+        resizeItems();
+    }
+} // namespace gui
diff --git a/module-apps/apps-common/widgets/BellBaseLayout.hpp b/module-apps/apps-common/widgets/BellBaseLayout.hpp
new file mode 100644
index 0000000000000000000000000000000000000000..2de9eb68c056251a1099f282d135ce202b1e1a72
--- /dev/null
+++ b/module-apps/apps-common/widgets/BellBaseLayout.hpp
@@ -0,0 +1,24 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#pragma once
+
+#include <ThreeBox.hpp>
+
+namespace style::bell_base_layout
+{
+    constexpr inline auto w                  = style::window_width;
+    constexpr inline auto h                  = style::window_height;
+    constexpr inline auto first_layout_min_h = 50U;
+    constexpr inline auto outer_layouts_h    = 120U;
+} // namespace style::bell_base_layout
+
+namespace gui
+{
+    class BellBaseLayout : public VThreeBox<VBox, VBox, VBox>
+    {
+      public:
+        explicit BellBaseLayout(Item *parent, Position x = 0, Position y = 0, Length w = 0, Length h = 0);
+    };
+
+} /* namespace gui */
diff --git a/module-gui/gui/widgets/SideListItem.cpp b/module-apps/apps-common/widgets/BellSideListItem.cpp
similarity index 51%
rename from module-gui/gui/widgets/SideListItem.cpp
rename to module-apps/apps-common/widgets/BellSideListItem.cpp
index 3be938d7f0e3e2ce4b9ee8450be5dbd6ba797d1a..1bae1512094be8758a2695fbd38eab78f5198ad1 100644
--- a/module-gui/gui/widgets/SideListItem.cpp
+++ b/module-apps/apps-common/widgets/BellSideListItem.cpp
@@ -3,21 +3,19 @@
 
 #include "Label.hpp"
 #include "ListItemWithDescription.hpp"
-#include "SideListItem.hpp"
+#include "BellSideListItem.hpp"
 #include "Style.hpp"
 
 namespace gui
 {
-    SideListItem::SideListItem(std::string description) : ListItemWithDescription(description)
+    BellSideListItem::BellSideListItem(const std::string &description) : ListItemWithDescription(description)
     {
         setEdges(RectangleEdge::None);
-        body = new VBox(this);
-        body->setMinimumSize(style::sidelistview::list_item::w, style::sidelistview::list_item::h);
-        body->setEdges(RectangleEdge::None);
+        body = new BellBaseLayout(this);
 
-        auto topMessage = new Label(body);
-        topMessage->setMinimumSize(style::sidelistview::top_message::w, style::sidelistview::top_message::h);
-        topMessage->setFont(style::sidelistview::top_message::font);
+        auto topMessage = new Label(body->firstBox);
+        topMessage->setMaximumSize(style::bell_base_layout::w, style::bell_base_layout::outer_layouts_h);
+        topMessage->setFont(style::bell_sidelist_item::description_font);
         topMessage->setEdges(gui::RectangleEdge::None);
         topMessage->activeItem = false;
         topMessage->setAlignment(Alignment(gui::Alignment::Horizontal::Center, gui::Alignment::Vertical::Center));
diff --git a/module-apps/apps-common/widgets/BellSideListItem.hpp b/module-apps/apps-common/widgets/BellSideListItem.hpp
new file mode 100644
index 0000000000000000000000000000000000000000..59a789f59306b08be3e1b025378fd5e8097692f0
--- /dev/null
+++ b/module-apps/apps-common/widgets/BellSideListItem.hpp
@@ -0,0 +1,23 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#pragma once
+
+#include "BellBaseLayout.hpp"
+#include <ListItemWithDescription.hpp>
+
+namespace style::bell_sidelist_item
+{
+    inline constexpr auto description_font = style::window::font::largelight;
+} // namespace style::bell_sidelist_item
+
+namespace gui
+{
+    class BellSideListItem : public ListItemWithDescription
+    {
+      public:
+        BellBaseLayout *body = nullptr;
+
+        explicit BellSideListItem(const std::string &description);
+    };
+} /* namespace gui */
diff --git a/module-gui/gui/widgets/CMakeLists.txt b/module-gui/gui/widgets/CMakeLists.txt
index 1fe8fd4217623122b167e6c05cd9ef4466f0cda7..b66f4cd2cd4d0242d3112eddab99b7b7b86d4d31 100644
--- a/module-gui/gui/widgets/CMakeLists.txt
+++ b/module-gui/gui/widgets/CMakeLists.txt
@@ -22,11 +22,11 @@ target_sources( ${PROJECT_NAME}
         "${CMAKE_CURRENT_LIST_DIR}/Window.cpp"
         "${CMAKE_CURRENT_LIST_DIR}/BoxLayout.cpp"
         "${CMAKE_CURRENT_LIST_DIR}/BoxLayoutSizeStore.cpp"
+        "${CMAKE_CURRENT_LIST_DIR}/ThreeBox.cpp"
         "${CMAKE_CURRENT_LIST_DIR}/header/Header.cpp"
         "${CMAKE_CURRENT_LIST_DIR}/header/IceAction.cpp"
         "${CMAKE_CURRENT_LIST_DIR}/header/AddElementAction.cpp"
         "${CMAKE_CURRENT_LIST_DIR}/header/SearchAction.cpp"
-        "${CMAKE_CURRENT_LIST_DIR}/SideListItem.cpp"
         "${CMAKE_CURRENT_LIST_DIR}/SideListView.cpp"
         "${CMAKE_CURRENT_LIST_DIR}/Spinner.cpp"
         "${CMAKE_CURRENT_LIST_DIR}/TextSpinner.cpp"
@@ -81,8 +81,8 @@ target_sources( ${PROJECT_NAME}
         "${CMAKE_CURRENT_LIST_DIR}/Rect.hpp"
         "${CMAKE_CURRENT_LIST_DIR}/Window.hpp"
         "${CMAKE_CURRENT_LIST_DIR}/BoxLayout.hpp"
+        "${CMAKE_CURRENT_LIST_DIR}/ThreeBox.hpp"
         "${CMAKE_CURRENT_LIST_DIR}/Layout.hpp"
-        "${CMAKE_CURRENT_LIST_DIR}/SideListItem.hpp"
         "${CMAKE_CURRENT_LIST_DIR}/SideListView.hpp"
         "${CMAKE_CURRENT_LIST_DIR}/Spinner.hpp"
         "${CMAKE_CURRENT_LIST_DIR}/TextSpinner.hpp"
diff --git a/module-gui/gui/widgets/SideListItem.hpp b/module-gui/gui/widgets/SideListItem.hpp
deleted file mode 100644
index 284c5906450531fa80ef2505d34e41e989588d3c..0000000000000000000000000000000000000000
--- a/module-gui/gui/widgets/SideListItem.hpp
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
-// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
-
-#pragma once
-
-#include "BoxLayout.hpp"
-#include "ListItemWithDescription.hpp"
-
-namespace gui
-{
-    class SideListItem : public ListItemWithDescription
-    {
-      public:
-        VBox *body = nullptr;
-
-        SideListItem(std::string description);
-    };
-} /* namespace gui */
diff --git a/module-gui/gui/widgets/SideListView.cpp b/module-gui/gui/widgets/SideListView.cpp
index ad306e23e13b2d463e3df9e9ef02a1fa1e8438e1..4e82de3da52ad485f3d7e6c54c43c3d1b36735de 100644
--- a/module-gui/gui/widgets/SideListView.cpp
+++ b/module-gui/gui/widgets/SideListView.cpp
@@ -13,7 +13,8 @@ namespace gui
                                unsigned int y,
                                unsigned int w,
                                unsigned int h,
-                               std::shared_ptr<ListItemProvider> prov)
+                               std::shared_ptr<ListItemProvider> prov,
+                               PageBarType pageBarType)
         : Rect{parent, x, y, w, h}, ListViewEngine(prov)
     {
         setEdges(RectangleEdge::All);
@@ -21,14 +22,13 @@ namespace gui
         bodyOverlay = new VBox{this, 0, 0, w, h};
         bodyOverlay->setEdges(RectangleEdge::None);
 
-        createPageBar();
-        applyScrollCallbacks();
-
-        auto bodyTopMargin = pageBar->widgetMinimumArea.h + pageBar->getMargins().getSumInAxis(Axis::Y);
-        auto bodyHeight    = h - bodyTopMargin;
+        if (pageBarType != PageBarType::None) {
+            createPageBar();
+            applyScrollCallbacks();
+        }
 
         body = new HBox{bodyOverlay, 0, 0, 0, 0};
-        body->setMinimumSize(w, bodyHeight);
+        body->setMaximumSize(w, h);
         body->setAlignment(Alignment::Horizontal::Center);
         body->setEdges(RectangleEdge::None);
         bodyOverlay->resizeItems();
@@ -58,7 +58,7 @@ namespace gui
             return true;
         };
 
-        createArrowsOverlay(0, bodyTopMargin, w, bodyHeight);
+        createArrowsOverlay(0, 0, w, h);
 
         type = gui::ItemType::LIST;
     }
@@ -138,8 +138,4 @@ namespace gui
         }
         return false;
     }
-    auto SideListView::setPageBarVisible(bool value) noexcept -> void
-    {
-        pageBar->setVisible(value);
-    }
 } /* namespace gui */
diff --git a/module-gui/gui/widgets/SideListView.hpp b/module-gui/gui/widgets/SideListView.hpp
index 9a531962c3604d9ecf6b0c4bce0b878df6203340..0420525bbbc154b06030c98569e6a0ecc275eba0 100644
--- a/module-gui/gui/widgets/SideListView.hpp
+++ b/module-gui/gui/widgets/SideListView.hpp
@@ -10,6 +10,12 @@
 
 namespace gui
 {
+    enum class PageBarType
+    {
+        None,
+        Round,
+    };
+
     class SideListView : public Rect, public ListViewEngine
     {
       protected:
@@ -28,9 +34,8 @@ namespace gui
                      unsigned int y,
                      unsigned int w,
                      unsigned int h,
-                     std::shared_ptr<ListItemProvider> prov);
-
-        auto setPageBarVisible(bool value) noexcept -> void;
+                     std::shared_ptr<ListItemProvider> prov,
+                     PageBarType pageBarType = PageBarType::None);
 
         auto onInput(const InputEvent &inputEvent) -> bool override;
     };
diff --git a/module-gui/gui/widgets/Style.hpp b/module-gui/gui/widgets/Style.hpp
index ba9ead211f3d01af4c27bcfa3b0ca81fc17ca2d6..2bd9bc32bff394de8a2883439bdb61957b99b5bc 100644
--- a/module-gui/gui/widgets/Style.hpp
+++ b/module-gui/gui/widgets/Style.hpp
@@ -243,25 +243,12 @@ namespace style
         inline auto arrow_left_image  = "arrow_left_24px_W_G";
         inline auto arrow_right_image = "arrow_right_24px_W_G";
 
-        namespace arrows_hbox
-        {
-            inline constexpr auto x = 0U;
-            inline constexpr auto y = 150U;
-            inline constexpr auto w = window_width;
-            inline constexpr auto h = 300U;
-        } // namespace arrows_hbox
         namespace list_item
         {
             inline constexpr auto w = window_width;
-            inline constexpr auto h = 550U;
+            inline constexpr auto h = window_height;
         } // namespace list_item
-        namespace middle_box
-        {
-            inline constexpr auto x = 0U;
-            inline constexpr auto y = 50U;
-            inline constexpr auto w = 480U;
-            inline constexpr auto h = 450U;
-        } // namespace middle_box
+
         namespace progress_bar
         {
             inline constexpr auto margin_left   = 0U;
@@ -270,12 +257,7 @@ namespace style
             inline constexpr auto margin_bottom = 10U;
             inline constexpr auto h             = 50U;
         } // namespace progress_bar
-        namespace top_message
-        {
-            inline constexpr auto w    = window_width;
-            inline constexpr auto h    = 50U;
-            inline constexpr auto font = style::window::font::largelight;
-        } // namespace top_message
+
     }     // namespace sidelistview
 
     namespace margins
diff --git a/module-gui/gui/widgets/ThreeBox.cpp b/module-gui/gui/widgets/ThreeBox.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..ba65af24513238357c2e8dbbf484b5184d1044e5
--- /dev/null
+++ b/module-gui/gui/widgets/ThreeBox.cpp
@@ -0,0 +1,26 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#include "ThreeBox.hpp"
+
+namespace gui
+{
+    template <class Parent, class First, class Center, class Last>
+    ThreeBox<Parent, First, Center, Last>::ThreeBox(Item *parent, Position x, Position y, Length w, Length h)
+        : Parent(parent, x, y, w, h)
+    {}
+
+    template <class First, class Center, class Last>
+    HThreeBox<First, Center, Last>::HThreeBox(Item *parent, Position x, Position y, Length w, Length h)
+        : ThreeBox<HBox, First, Center, Last>(parent, x, y, w, h)
+    {}
+
+    template <class First, class Center, class Last>
+    VThreeBox<First, Center, Last>::VThreeBox(Item *parent, Position x, Position y, Length w, Length h)
+        : ThreeBox<VBox, First, Center, Last>(parent, x, y, w, h)
+    {}
+
+    template class HThreeBox<HBox, HBox, HBox>;
+    template class VThreeBox<VBox, VBox, VBox>;
+
+} // namespace gui
diff --git a/module-gui/gui/widgets/ThreeBox.hpp b/module-gui/gui/widgets/ThreeBox.hpp
new file mode 100644
index 0000000000000000000000000000000000000000..bb08b09970c68ce7c719dc896cc6545c3b1c6e70
--- /dev/null
+++ b/module-gui/gui/widgets/ThreeBox.hpp
@@ -0,0 +1,32 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#pragma once
+
+#include <BoxLayout.hpp>
+
+namespace gui
+{
+    template <class Parent, class First, class Center, class Last> class ThreeBox : public Parent
+    {
+      public:
+        explicit ThreeBox(Item *parent, Position x = 0, Position y = 0, Length w = 0, Length = 0);
+        virtual ~ThreeBox() = default;
+
+        First *firstBox   = nullptr;
+        Center *centerBox = nullptr;
+        Last *lastBox     = nullptr;
+    };
+
+    template <class First, class Center, class Last> class HThreeBox : public ThreeBox<HBox, First, Center, Last>
+    {
+      public:
+        explicit HThreeBox(Item *parent, Position x = 0, Position y = 0, Length w = 0, Length = 0);
+    };
+
+    template <class First, class Center, class Last> class VThreeBox : public ThreeBox<VBox, First, Center, Last>
+    {
+      public:
+        explicit VThreeBox(Item *parent, Position x = 0, Position y = 0, Length w = 0, Length = 0);
+    };
+}; // namespace gui
diff --git a/module-gui/gui/widgets/header/Header.cpp b/module-gui/gui/widgets/header/Header.cpp
index 059428122f3259ced9984b126ad6eace39e081cf..4b6219f0ff862fcfff7ff5b221c61a1f57433213 100644
--- a/module-gui/gui/widgets/header/Header.cpp
+++ b/module-gui/gui/widgets/header/Header.cpp
@@ -8,27 +8,27 @@
 
 namespace gui::header
 {
-    Header::Header(Item *parent, Position x, Position y, Length w, Length h) : HBox(parent, x, y, w, h)
+    Header::Header(Item *parent, Position x, Position y, Length w, Length h) : HThreeBox(parent, x, y, w, h)
     {
         setAlignment(Alignment(Alignment::Horizontal::Center, Alignment::Vertical::Center));
         setEdges(RectangleEdge::None);
 
-        leftBox = new HBox(this, 0, 0, 0, 0);
-        leftBox->setMinimumSize(style::header::navigation_indicator::box_width, h);
-        leftBox->setAlignment(Alignment(Alignment::Vertical::Top));
-        leftBox->setEdges(RectangleEdge::None);
-        leftBox->setVisible(false);
+        firstBox = new HBox(this, 0, 0, 0, 0);
+        firstBox->setMinimumSize(style::header::navigation_indicator::box_width, h);
+        firstBox->setAlignment(Alignment(Alignment::Vertical::Top));
+        firstBox->setEdges(RectangleEdge::None);
+        firstBox->setVisible(false);
 
         centerBox = new HBox(this, 0, 0, 0, 0);
         centerBox->setEdges(RectangleEdge::None);
         centerBox->setAlignment(Alignment(gui::Alignment::Horizontal::Center));
         centerBox->setMaximumSize(w, h);
 
-        rightBox = new HBox(this, 0, 0, 0, 0);
-        rightBox->setMinimumSize(style::header::navigation_indicator::box_width, h);
-        rightBox->setAlignment(Alignment(Alignment::Vertical::Top));
-        rightBox->setEdges(RectangleEdge::None);
-        rightBox->setVisible(false);
+        lastBox = new HBox(this, 0, 0, 0, 0);
+        lastBox->setMinimumSize(style::header::navigation_indicator::box_width, h);
+        lastBox->setAlignment(Alignment(Alignment::Vertical::Top));
+        lastBox->setEdges(RectangleEdge::None);
+        lastBox->setVisible(false);
     }
 
     Item *Header::createTitle(const UTF8 &text)
@@ -47,26 +47,26 @@ namespace gui::header
 
     void Header::showOuterBoxes()
     {
-        leftBox->setVisible(true);
-        rightBox->setVisible(true);
+        firstBox->setVisible(true);
+        lastBox->setVisible(true);
         resizeItems();
     }
 
     void Header::hideOuterBoxes()
     {
-        if (rightBox->empty() && leftBox->empty()) {
-            rightBox->setVisible(false);
-            leftBox->setVisible(false);
+        if (lastBox->empty() && firstBox->empty()) {
+            lastBox->setVisible(false);
+            firstBox->setVisible(false);
         }
     }
 
     void Header::addToLeftBox(Item *item)
     {
-        leftBox->erase();
+        firstBox->erase();
         showOuterBoxes();
-        leftBox->addWidget(item);
+        firstBox->addWidget(item);
 
-        leftBox->resizeItems();
+        firstBox->resizeItems();
     }
 
     void Header::addToCenterBox(Item *item)
@@ -79,11 +79,11 @@ namespace gui::header
 
     void Header::addToRightBox(Item *item)
     {
-        rightBox->erase();
+        lastBox->erase();
         showOuterBoxes();
-        rightBox->addWidget(item);
+        lastBox->addWidget(item);
 
-        rightBox->resizeItems();
+        lastBox->resizeItems();
     }
 
     void Header::setTitle(const UTF8 &text)
@@ -128,13 +128,13 @@ namespace gui::header
     {
         switch (boxSelection) {
         case BoxSelection::Left:
-            leftBox->erase();
+            firstBox->erase();
             break;
         case BoxSelection::Center:
             centerBox->erase();
             break;
         case BoxSelection::Right:
-            rightBox->erase();
+            lastBox->erase();
             break;
         }
 
@@ -146,11 +146,11 @@ namespace gui::header
     {
         switch (boxSelection) {
         case BoxSelection::Left:
-            return leftBox->visible;
+            return firstBox->visible;
         case BoxSelection::Center:
             return centerBox->visible;
         case BoxSelection::Right:
-            return rightBox->visible;
+            return lastBox->visible;
         }
         return false;
     }
diff --git a/module-gui/gui/widgets/header/Header.hpp b/module-gui/gui/widgets/header/Header.hpp
index bb80854f3054236a43c7e7225086f27830d4c53a..4e9483354c58db01d1729aee3fbdb904ac6fcc6b 100644
--- a/module-gui/gui/widgets/header/Header.hpp
+++ b/module-gui/gui/widgets/header/Header.hpp
@@ -3,7 +3,7 @@
 
 #pragma once
 
-#include <BoxLayout.hpp>
+#include <ThreeBox.hpp>
 #include <Label.hpp>
 #include <Image.hpp>
 
@@ -16,12 +16,9 @@ namespace gui::header
         Right
     };
 
-    class Header : public HBox
+    class Header : public HThreeBox<HBox, HBox, HBox>
     {
       private:
-        HBox *leftBox   = nullptr;
-        HBox *centerBox = nullptr;
-        HBox *rightBox  = nullptr;
         Label *title    = nullptr;
 
         Item *createTitle(const UTF8 &text);