From fd89447c8ed617bed1a36b4de9bbb930d5576430 Mon Sep 17 00:00:00 2001
From: Przemyslaw Brudny <przemyslaw.brudny@mudita.com>
Date: Thu, 30 Sep 2021 02:53:55 +0200
Subject: [PATCH] [BH-924] Added ListViewWithArrows for Bell purposes

Added ListViewWithArrows and ShortOptionWindow for
Bell purposes.
---
 .../apps-common/options/OptionsList.cpp       |  19 +-
 .../apps-common/options/OptionsList.hpp       |   8 +-
 .../apps-common/options/OptionsModel.cpp      |   5 +-
 .../apps-common/options/OptionsModel.hpp      |   8 +-
 .../apps-common/windows/OptionWindow.hpp      |   2 +-
 module-gui/gui/widgets/CMakeLists.txt         |   2 +
 module-gui/gui/widgets/ListViewWithArrows.cpp | 218 ++++++++++++++++++
 module-gui/gui/widgets/ListViewWithArrows.hpp |  43 ++++
 .../BellHybrid/apps/common/CMakeLists.txt     |   4 +-
 .../common/options/BellOptionWindow.hpp       |   8 +-
 .../common/options/BellShortOptionWindow.hpp  |  27 +++
 .../common/src/options/BellOptionWindow.cpp   |  64 +----
 .../src/options/BellShortOptionWindow.cpp     |  75 ++++++
 13 files changed, 407 insertions(+), 76 deletions(-)
 create mode 100644 module-gui/gui/widgets/ListViewWithArrows.cpp
 create mode 100644 module-gui/gui/widgets/ListViewWithArrows.hpp
 create mode 100644 products/BellHybrid/apps/common/include/common/options/BellShortOptionWindow.hpp
 create mode 100644 products/BellHybrid/apps/common/src/options/BellShortOptionWindow.cpp

diff --git a/module-apps/apps-common/options/OptionsList.cpp b/module-apps/apps-common/options/OptionsList.cpp
index 72d67659938ac9e84ec2a1a4c24b3be60b227cf8..ce46d0946a7eabae67de6ea769f3e1e874ef7712 100644
--- a/module-apps/apps-common/options/OptionsList.cpp
+++ b/module-apps/apps-common/options/OptionsList.cpp
@@ -5,28 +5,30 @@
 
 namespace gui
 {
-    OptionsList::OptionsList(std::shared_ptr<OptionsModel> model, std::list<Option> options)
+    template <class ListType>
+    OptionsList<ListType>::OptionsList(std::shared_ptr<OptionsModel> model, std::list<Option> options)
         : optionsModel{std::move(model)}, options(std::move(options))
     {}
 
-    void OptionsList::createOptions()
+    template <class ListType> void OptionsList<ListType>::createOptions()
     {
         optionsModel->createData(options);
     }
 
-    void OptionsList::refreshOptions(std::list<Option> &&optionList)
+    template <class ListType> void OptionsList<ListType>::refreshOptions(std::list<Option> &&optionList)
     {
         options = std::move(optionList);
         optionsList->rebuildList(listview::RebuildType::InPlace);
     }
 
-    void OptionsList::refreshOptions(std::list<Option> &&optionList, unsigned int pageIndex)
+    template <class ListType>
+    void OptionsList<ListType>::refreshOptions(std::list<Option> &&optionList, unsigned int pageIndex)
     {
         options = std::move(optionList);
         optionsList->rebuildList(listview::RebuildType::OnPageElement, pageIndex);
     }
 
-    void OptionsList::addOptions(std::list<Option> &&optionList)
+    template <class ListType> void OptionsList<ListType>::addOptions(std::list<Option> &&optionList)
     {
         options = std::move(optionList);
         createOptions();
@@ -34,21 +36,22 @@ namespace gui
         optionsList->rebuildList();
     }
 
-    void OptionsList::changeOptions(std::list<Option> &&optionList)
+    template <class ListType> void OptionsList<ListType>::changeOptions(std::list<Option> &&optionList)
     {
         clearOptions();
         addOptions(std::move(optionList));
     }
 
-    void OptionsList::recreateOptions()
+    template <class ListType> void OptionsList<ListType>::recreateOptions()
     {
         clearOptions();
         createOptions();
     }
 
-    void OptionsList::clearOptions()
+    template <class ListType> void OptionsList<ListType>::clearOptions()
     {
         optionsList->clear();
         optionsModel->clearData();
     }
+
 } // namespace gui
diff --git a/module-apps/apps-common/options/OptionsList.hpp b/module-apps/apps-common/options/OptionsList.hpp
index 8a1b4c19c1d7c3154ae0b1b9dac9c262faa35a04..659246cf50b71aecba8632e5f6e0f8fc969b8064 100644
--- a/module-apps/apps-common/options/OptionsList.hpp
+++ b/module-apps/apps-common/options/OptionsList.hpp
@@ -7,15 +7,16 @@
 #include "OptionsModel.hpp"
 
 #include <ListView.hpp>
+#include <ListViewWithArrows.hpp>
 
 namespace gui
 {
-    class OptionsList
+    template <class ListType> class OptionsList
     {
       protected:
         explicit OptionsList(std::shared_ptr<OptionsModel>(app), std::list<Option> = {});
 
-        ListView *optionsList                      = nullptr;
+        ListType *optionsList                      = nullptr;
         std::shared_ptr<OptionsModel> optionsModel = nullptr;
         std::list<Option> options;
 
@@ -27,4 +28,7 @@ namespace gui
         void refreshOptions(std::list<Option> &&optionList);
         void refreshOptions(std::list<Option> &&optionList, unsigned int pageIndex);
     };
+
+    template class OptionsList<ListView>;
+    template class OptionsList<ListViewWithArrows>;
 } // namespace gui
diff --git a/module-apps/apps-common/options/OptionsModel.cpp b/module-apps/apps-common/options/OptionsModel.cpp
index 7a5b56c6047ed63ca8e96d5c61bfc37ca38ba1f2..d869e79ad14904e2d5366a89c2d56658548e1169 100644
--- a/module-apps/apps-common/options/OptionsModel.cpp
+++ b/module-apps/apps-common/options/OptionsModel.cpp
@@ -5,7 +5,8 @@
 #include "ListView.hpp"
 #include "OptionsModel.hpp"
 
-OptionsModel::OptionsModel(app::ApplicationCommon *app) : application(app)
+OptionsModel::OptionsModel(app::ApplicationCommon *app, unsigned int minimalItemSpaceRequired)
+    : application(app), minimalItemSpaceRequired(minimalItemSpaceRequired)
 {}
 
 auto OptionsModel::requestRecordsCount() -> unsigned int
@@ -15,7 +16,7 @@ auto OptionsModel::requestRecordsCount() -> unsigned int
 
 auto OptionsModel::getMinimalItemSpaceRequired() const -> unsigned int
 {
-    return style::window::label::big_h + gui::option::window::option_bottom_margin;
+    return minimalItemSpaceRequired;
 }
 
 void OptionsModel::requestRecords(const uint32_t offset, const uint32_t limit)
diff --git a/module-apps/apps-common/options/OptionsModel.hpp b/module-apps/apps-common/options/OptionsModel.hpp
index 2f9ebe48ee303e1388b65bf774a575bb69fcbf5a..a52fc65e2bbb6ba746bfb80066fb29d968e88df1 100644
--- a/module-apps/apps-common/options/OptionsModel.hpp
+++ b/module-apps/apps-common/options/OptionsModel.hpp
@@ -10,10 +10,14 @@
 
 class OptionsModel : public app::InternalModel<gui::ListItem *>, public gui::ListItemProvider
 {
-    app::ApplicationCommon *application = nullptr;
+  private:
+    app::ApplicationCommon *application   = nullptr;
+    unsigned int minimalItemSpaceRequired = 0;
 
   public:
-    explicit OptionsModel(app::ApplicationCommon *app);
+    explicit OptionsModel(app::ApplicationCommon *app,
+                          unsigned int minimalItemSpaceRequired = style::window::label::big_h +
+                                                                  gui::option::window::option_bottom_margin);
 
     void clearData();
     void createData(std::list<gui::Option> &optionList);
diff --git a/module-apps/apps-common/windows/OptionWindow.hpp b/module-apps/apps-common/windows/OptionWindow.hpp
index 8646551ff4f5e7bc734ecb6414b8ba15e437c2d5..f2230575a88720d4fb360ece183024857c0a2731 100644
--- a/module-apps/apps-common/windows/OptionWindow.hpp
+++ b/module-apps/apps-common/windows/OptionWindow.hpp
@@ -14,7 +14,7 @@ namespace gui
     ///  Options GUI window with ListView populated accordingly to provided options in window constructor.
     ///
 
-    class OptionWindow : public AppWindow, protected OptionsList
+    class OptionWindow : public AppWindow, protected OptionsList<ListView>
     {
       public:
         OptionWindow(app::ApplicationCommon *app, const std::string &name);
diff --git a/module-gui/gui/widgets/CMakeLists.txt b/module-gui/gui/widgets/CMakeLists.txt
index 60e7e59cf29bd2f2754e7edb45427bfd198a79b9..2c4c33be402814b776d40d4bcf85d72ffd2af78a 100644
--- a/module-gui/gui/widgets/CMakeLists.txt
+++ b/module-gui/gui/widgets/CMakeLists.txt
@@ -15,6 +15,7 @@ target_sources( ${PROJECT_NAME}
         "${CMAKE_CURRENT_LIST_DIR}/ListItem.cpp"
         "${CMAKE_CURRENT_LIST_DIR}/ListItemWithDescription.cpp"
         "${CMAKE_CURRENT_LIST_DIR}/ListView.cpp"
+        "${CMAKE_CURRENT_LIST_DIR}/ListViewWithArrows.cpp"
         "${CMAKE_CURRENT_LIST_DIR}/ListViewEngine.cpp"
         "${CMAKE_CURRENT_LIST_DIR}/Margins.cpp"
         "${CMAKE_CURRENT_LIST_DIR}/Navigation.cpp"
@@ -77,6 +78,7 @@ target_sources( ${PROJECT_NAME}
         "${CMAKE_CURRENT_LIST_DIR}/ListItemWithDescription.hpp"
         "${CMAKE_CURRENT_LIST_DIR}/ListItemProvider.hpp"
         "${CMAKE_CURRENT_LIST_DIR}/ListView.hpp"
+        "${CMAKE_CURRENT_LIST_DIR}/ListViewWithArrows.hpp"
         "${CMAKE_CURRENT_LIST_DIR}/ListViewEngine.hpp"
         "${CMAKE_CURRENT_LIST_DIR}/Margins.hpp"
         "${CMAKE_CURRENT_LIST_DIR}/Navigation.hpp"
diff --git a/module-gui/gui/widgets/ListViewWithArrows.cpp b/module-gui/gui/widgets/ListViewWithArrows.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..3d59a288b34a664744ffa221e708c0de2b606785
--- /dev/null
+++ b/module-gui/gui/widgets/ListViewWithArrows.cpp
@@ -0,0 +1,218 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#include "ListViewWithArrows.hpp"
+#include "TextFixedSize.hpp"
+#include <InputEvent.hpp>
+
+namespace gui
+{
+    ListViewWithArrows::ListViewWithArrows(Item *parent,
+                                           unsigned int x,
+                                           unsigned int y,
+                                           unsigned int w,
+                                           unsigned int h,
+                                           std::shared_ptr<ListItemProvider> prov)
+        : Rect{parent, x, y, w, h}, ListViewEngine(prov)
+    {
+        this->setEdges(RectangleEdge::None);
+        createLayout();
+
+        body->borderCallback = [this](const InputEvent &inputEvent) -> bool {
+            if (!inputEvent.isShortRelease()) {
+                return false;
+            }
+            if (inputEvent.is(KeyCode::KEY_UP) && pageLoaded) {
+                return this->requestPreviousPage();
+            }
+            else if (inputEvent.is(KeyCode::KEY_DOWN) && pageLoaded) {
+                return this->requestNextPage();
+            }
+            else {
+                return false;
+            }
+        };
+
+        focusChangedCallback = [this]([[maybe_unused]] Item &item) -> bool {
+            if (focus) {
+                setFocus();
+            }
+            else {
+                setFocusItem(nullptr);
+            }
+            return true;
+        };
+
+        body->dimensionChangedCallback = [&](gui::Item &, const BoundingBox &newDim) -> bool {
+            if (listOverlay->lastBox->visible && direction == listview::Direction::Top) {
+                if (startIndex > 1 && listOverlay->firstBox->visible) {
+                    startIndex += 1;
+                }
+
+                if (startIndex == 1 && !listOverlay->firstBox->visible) {
+                    startIndex = 0;
+                }
+            }
+
+            currentPageSize = body->getVisibleChildrenCount();
+            return true;
+        };
+
+        applyScrollCallbacks();
+
+        type = gui::ItemType::LIST;
+    }
+
+    void ListViewWithArrows::createLayout()
+    {
+        widgetBody = new VBox(this, 0, 0, widgetArea.w, widgetArea.h);
+        widgetBody->setAlignment(Alignment(Alignment::Horizontal::Center, Alignment::Vertical::Center));
+        widgetBody->setEdges(RectangleEdge::None);
+
+        listOverlay = new VThreeBox<VBox, VBox, VBox>(widgetBody, 0, 0, 0, 0);
+        listOverlay->setAlignment(Alignment(Alignment::Horizontal::Center, Alignment::Vertical::Center));
+        listOverlay->setEdges(RectangleEdge::None);
+
+        listOverlay->firstBox = new VBox(listOverlay);
+        listOverlay->firstBox->setAlignment(Alignment(Alignment::Horizontal::Center, Alignment::Vertical::Center));
+        listOverlay->firstBox->setEdges(RectangleEdge::None);
+        listOverlay->firstBox->setVisible(false);
+
+        arrowTop = new ImageBox(listOverlay->firstBox, new Image("bell_arrow_top_W_M"));
+        arrowTop->setMinimumSizeToFitImage();
+
+        listOverlay->centerBox = new VBox(listOverlay);
+        listOverlay->centerBox->setAlignment(Alignment(gui::Alignment::Horizontal::Center));
+        listOverlay->centerBox->setEdges(RectangleEdge::None);
+
+        body = new VBox(listOverlay->centerBox);
+        body->setAlignment(Alignment::Vertical::Top);
+        body->setEdges(RectangleEdge::None);
+
+        listOverlay->lastBox = new VBox(listOverlay);
+        listOverlay->lastBox->setAlignment(Alignment(Alignment::Horizontal::Center, Alignment::Vertical::Center));
+        listOverlay->lastBox->setEdges(RectangleEdge::None);
+        listOverlay->lastBox->setVisible(false);
+
+        arrowDown = new ImageBox(listOverlay->lastBox, new Image("bell_arrow_down_W_M"));
+        arrowDown->setMinimumSizeToFitImage();
+    }
+
+    void ListViewWithArrows::applySizeRestrictions(unsigned int w,
+                                                   unsigned int h,
+                                                   unsigned int outerLayoutsH,
+                                                   int outerLayoutsMargin)
+    {
+        listOverlay->setMinimumSize(w, h);
+        body->setMaximumSize(w, h);
+
+        listOverlay->firstBox->setMinimumSize(w, outerLayoutsH);
+        listOverlay->firstBox->setMargins(Margins(0, 0, 0, outerLayoutsMargin));
+        listOverlay->centerBox->setMaximumSize(w, h);
+        listOverlay->lastBox->setMinimumSize(w, outerLayoutsH);
+        listOverlay->lastBox->setMargins(Margins(0, outerLayoutsMargin, 0, 0));
+
+        widgetBody->resizeItems();
+    }
+
+    void ListViewWithArrows::setListTitle(const std::string &title)
+    {
+        titleBody = new TextFixedSize(listOverlay->firstBox);
+        titleBody->drawUnderline(false);
+        titleBody->setAlignment(Alignment(Alignment::Horizontal::Center, Alignment::Vertical::Top));
+        titleBody->setFont(style::window::font::large);
+        titleBody->setMinimumSize(listOverlay->firstBox->widgetMinimumArea.w,
+                                  listOverlay->firstBox->widgetMinimumArea.h);
+        titleBody->setEdges(RectangleEdge::None);
+        titleBody->setEditMode(EditMode::Browse);
+        titleBody->setText(title);
+
+        body->setAlignment(Alignment(Alignment::Vertical::Top));
+        listOverlay->firstBox->setVisible(true);
+
+        listOverlay->resizeItems();
+        // Second resize is needed as we need to first apply max size for center box and next extra margins.
+        listOverlay->resizeItems();
+
+        arrowTop->setVisible(false);
+        titleBody->setVisible(true);
+        listOverlay->firstBox->resizeItems();
+    }
+
+    void ListViewWithArrows::applyScrollCallbacks()
+    {
+        updateScrollCallback = [this](ListViewScrollUpdateData data) {
+            auto elementsOnPage = listOverlay->centerBox->widgetArea.h / data.elementMinimalSpaceRequired;
+
+            if (boundaries == Boundaries::Continuous) {
+                if (elementsOnPage < data.elementsCount) {
+                    listOverlay->firstBox->setVisible(true);
+                    listOverlay->lastBox->setVisible(true);
+                }
+                else {
+                    listOverlay->firstBox->setVisible(false);
+                    listOverlay->lastBox->setVisible(false);
+                }
+            }
+            else if (boundaries == Boundaries::Fixed) {
+                if (elementsOnPage + data.startIndex < data.elementsCount) {
+                    listOverlay->lastBox->setVisible(true);
+                }
+                else {
+                    listOverlay->lastBox->setVisible(false);
+                }
+
+                if (data.startIndex == 0 && titleBody) {
+                    titleBody->setVisible(true);
+                    arrowTop->setVisible(false);
+                    listOverlay->firstBox->setVisible(true);
+                }
+                else if (data.startIndex > 1) {
+                    if (titleBody) {
+                        titleBody->setVisible(false);
+                    }
+                    arrowTop->setVisible(true);
+                    listOverlay->firstBox->setVisible(true);
+                }
+                else {
+                    listOverlay->firstBox->setVisible(false);
+                }
+            }
+
+            listOverlay->resizeItems();
+            // Second resize is needed as we need to first apply max size for center box and next extra margins.
+            listOverlay->resizeItems();
+        };
+    }
+
+    void ListViewWithArrows::setFocus()
+    {
+        if (!focus) {
+            return;
+        }
+        setFocusItem(body);
+
+        ListViewEngine::setFocus();
+    }
+
+    void ListViewWithArrows::setAlignment(const Alignment &value)
+    {
+        if (body->getAlignment() != value) {
+            body->setAlignment(value);
+        }
+    }
+
+    bool ListViewWithArrows::onDimensionChanged(const BoundingBox &oldDim, const BoundingBox &newDim)
+    {
+        Rect::onDimensionChanged(oldDim, newDim);
+        body->setSize(body->getWidth(), newDim.h);
+
+        return true;
+    }
+
+    bool ListViewWithArrows::onInput(const InputEvent &inputEvent)
+    {
+        return body->onInput(inputEvent);
+    }
+
+} /* namespace gui */
diff --git a/module-gui/gui/widgets/ListViewWithArrows.hpp b/module-gui/gui/widgets/ListViewWithArrows.hpp
new file mode 100644
index 0000000000000000000000000000000000000000..70f643437e8b6320620372c036d0339498dd698e
--- /dev/null
+++ b/module-gui/gui/widgets/ListViewWithArrows.hpp
@@ -0,0 +1,43 @@
+// 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 "ListViewEngine.hpp"
+#include "ListItemProvider.hpp"
+#include "ThreeBox.hpp"
+#include "ImageBox.hpp"
+#include "TextFixedSize.hpp"
+
+namespace gui
+{
+    class ListViewWithArrows : public Rect, public ListViewEngine
+    {
+      protected:
+        VBox *widgetBody                         = nullptr;
+        VThreeBox<VBox, VBox, VBox> *listOverlay = nullptr;
+        ImageBox *arrowTop                       = nullptr;
+        ImageBox *arrowDown                      = nullptr;
+        TextFixedSize *titleBody                 = nullptr;
+
+        void createLayout();
+        void applyScrollCallbacks();
+        void setFocus() override;
+
+      public:
+        ListViewWithArrows(Item *parent,
+                           unsigned int x,
+                           unsigned int y,
+                           unsigned int w,
+                           unsigned int h,
+                           std::shared_ptr<ListItemProvider> prov);
+
+        void setListTitle(const std::string &title);
+        void applySizeRestrictions(unsigned int w, unsigned int h, unsigned int outerLayoutsH, int outerLayoutsMargin);
+
+        void setAlignment(const Alignment &value) override;
+        bool onInput(const InputEvent &inputEvent) override;
+        bool onDimensionChanged(const BoundingBox &oldDim, const BoundingBox &newDim) override;
+    };
+
+} /* namespace gui */
diff --git a/products/BellHybrid/apps/common/CMakeLists.txt b/products/BellHybrid/apps/common/CMakeLists.txt
index ba860c8d8986663f38cce4caec63b38df5a71f18..c5ec2c3b7bc5ee5c7d60a93ce22f70d19b66da2e 100644
--- a/products/BellHybrid/apps/common/CMakeLists.txt
+++ b/products/BellHybrid/apps/common/CMakeLists.txt
@@ -21,6 +21,7 @@ target_sources(application-bell-common
         src/widgets/ListItems.cpp
 
         src/options/BellOptionWindow.cpp
+        src/options/BellShortOptionWindow.cpp
         src/options/OptionBellMenu.cpp
     PUBLIC
         include/common/BellFinishedWindow.hpp
@@ -35,6 +36,7 @@ target_sources(application-bell-common
         include/common/widgets/BellSideListItemWithCallbacks.hpp
         include/common/widgets/ListItems.hpp
         include/common/options/BellOptionWindow.hpp
+        include/common/options/BellShortOptionWindow.hpp
         include/common/options/OptionBellMenu.hpp
 )
 
@@ -45,7 +47,7 @@ target_link_libraries(application-bell-common
 
     PRIVATE
         bell::app-main
-        bell::app-alarm 
+        bell::app-alarm
         module-gui
         service-time
         bell::db
diff --git a/products/BellHybrid/apps/common/include/common/options/BellOptionWindow.hpp b/products/BellHybrid/apps/common/include/common/options/BellOptionWindow.hpp
index 7df39e5162d6a79af844a0dc98d7a40b042eda41..4431c18b18a8d2deba1ad8f7c099789a6b4b665a 100644
--- a/products/BellHybrid/apps/common/include/common/options/BellOptionWindow.hpp
+++ b/products/BellHybrid/apps/common/include/common/options/BellOptionWindow.hpp
@@ -6,26 +6,22 @@
 #include <ApplicationCommon.hpp>
 #include <AppWindow.hpp>
 #include <OptionsList.hpp>
-#include <ThreeBox.hpp>
 
 namespace style::bell_options_list
 {
     inline constexpr auto w                    = 380U;
-    inline constexpr auto center_layout_h      = 400U;
+    inline constexpr auto h                    = 400U;
     inline constexpr auto outer_layouts_h      = 64U;
     inline constexpr auto outer_layouts_margin = 7U;
 } // namespace style::bell_options_list
 
 namespace gui
 {
-    class BellOptionWindow : public AppWindow, protected OptionsList
+    class BellOptionWindow : public AppWindow, protected OptionsList<ListViewWithArrows>
     {
       public:
         BellOptionWindow(app::ApplicationCommon *app, const std::string &name);
-
-        VThreeBox<VBox, VBox, VBox> *body = nullptr;
         void setListTitle(const std::string &title);
-        void createLayout();
 
         void onBeforeShow(ShowMode mode, SwitchData *data) override;
         void onClose(CloseReason reason) override;
diff --git a/products/BellHybrid/apps/common/include/common/options/BellShortOptionWindow.hpp b/products/BellHybrid/apps/common/include/common/options/BellShortOptionWindow.hpp
new file mode 100644
index 0000000000000000000000000000000000000000..0789828c2c71b489ea6cbe2ef002beba0fa2dc7e
--- /dev/null
+++ b/products/BellHybrid/apps/common/include/common/options/BellShortOptionWindow.hpp
@@ -0,0 +1,27 @@
+// 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 <ApplicationCommon.hpp>
+#include <AppWindow.hpp>
+#include <OptionsList.hpp>
+#include <apps-common/widgets/BellBaseLayout.hpp>
+
+namespace gui
+{
+    class BellShortOptionWindow : public AppWindow, protected OptionsList<ListView>
+    {
+      private:
+        BellBaseLayout *body{};
+
+      public:
+        BellShortOptionWindow(app::ApplicationCommon *app, const std::string &name);
+        void setListTitle(const std::string &title);
+
+        void onBeforeShow(ShowMode mode, SwitchData *data) override;
+        void onClose(CloseReason reason) override;
+        void rebuild() override;
+        void buildInterface() override;
+    };
+}; // namespace gui
diff --git a/products/BellHybrid/apps/common/src/options/BellOptionWindow.cpp b/products/BellHybrid/apps/common/src/options/BellOptionWindow.cpp
index 6777f9b3386c3823f7bde285b9c87227d750096d..3506a1718a744edeb1346c80e5d2d7ce55abd802 100644
--- a/products/BellHybrid/apps/common/src/options/BellOptionWindow.cpp
+++ b/products/BellHybrid/apps/common/src/options/BellOptionWindow.cpp
@@ -2,6 +2,7 @@
 // For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
 
 #include "common/options/BellOptionWindow.hpp"
+#include "common/options/OptionBellMenu.hpp"
 
 #include <messages/OptionsWindow.hpp>
 #include <TextFixedSize.hpp>
@@ -9,7 +10,8 @@
 namespace gui
 {
     BellOptionWindow::BellOptionWindow(app::ApplicationCommon *app, const std::string &name)
-        : AppWindow(app, name), OptionsList(std::make_shared<OptionsModel>(app))
+        : AppWindow(app, name), OptionsList(std::make_shared<OptionsModel>(
+                                    app, style::bell_options::h + 2 * style::bell_options::option_margin))
     {
         buildInterface();
     }
@@ -27,68 +29,22 @@ namespace gui
         header->setTitleVisibility(false);
         bottomBar->setVisible(false);
 
-        createLayout();
-
-        optionsList = new gui::ListView(body->centerBox, 0, 0, 0, 0, optionsModel, listview::ScrollBarType::None);
-        optionsList->setAlignment(Alignment(Alignment::Vertical::Center));
-        optionsList->setMaximumSize(style::bell_options_list::w, style::bell_options_list::center_layout_h);
-
-        body->centerBox->resizeItems();
+        optionsList = new gui::ListViewWithArrows(this, 0, 0, style::window_width, style::window_height, optionsModel);
+        optionsList->setAlignment(Alignment(Alignment::Vertical::Top));
+        optionsList->applySizeRestrictions(style::bell_options_list::w,
+                                           style::bell_options_list::h,
+                                           style::bell_options_list::outer_layouts_h,
+                                           style::bell_options_list::outer_layouts_margin);
 
         optionsList->prepareRebuildCallback = [this]() { recreateOptions(); };
-
         optionsModel->createData(options);
 
         setFocusItem(optionsList);
     }
 
-    void BellOptionWindow::createLayout()
-    {
-        auto windowBody = new VBox(this, 0, 0, style::window_width, style::window_height);
-        windowBody->setAlignment(Alignment(Alignment::Horizontal::Center, Alignment::Vertical::Center));
-
-        body = new VThreeBox<VBox, VBox, VBox>(
-            windowBody, 0, 0, style::bell_options_list::w, style::bell_options_list::center_layout_h);
-        body->setAlignment(Alignment(Alignment::Horizontal::Center, Alignment::Vertical::Center));
-        body->setEdges(RectangleEdge::None);
-
-        body->firstBox = new VBox(body);
-        body->firstBox->setMinimumSize(style::bell_options_list::w, style::bell_options_list::outer_layouts_h);
-        body->firstBox->setMargins(Margins(0, 0, 0, style::bell_options_list::outer_layouts_margin));
-        body->firstBox->setAlignment(Alignment(Alignment::Vertical::Top));
-        body->firstBox->setEdges(RectangleEdge::None);
-        body->firstBox->setVisible(false);
-
-        body->centerBox = new VBox(body);
-        body->centerBox->setAlignment(Alignment(gui::Alignment::Horizontal::Center));
-        body->centerBox->setMaximumSize(style::bell_options_list::w, style::bell_options_list::center_layout_h);
-        body->centerBox->setEdges(RectangleEdge::None);
-
-        body->lastBox = new VBox(body);
-        body->lastBox->setMinimumSize(style::bell_options_list::w, style::bell_options_list::outer_layouts_h);
-        body->lastBox->setMargins(Margins(0, style::bell_options_list::outer_layouts_margin, 0, 0));
-        body->lastBox->setAlignment(Alignment(Alignment::Vertical::Top));
-        body->lastBox->setEdges(RectangleEdge::None);
-        body->lastBox->setVisible(false);
-    }
-
     void BellOptionWindow::setListTitle(const std::string &title)
     {
-        auto titleBody = new TextFixedSize(body->firstBox);
-        titleBody->drawUnderline(false);
-        titleBody->setAlignment(Alignment(Alignment::Horizontal::Center, Alignment::Vertical::Top));
-        titleBody->setFont(style::window::font::large);
-        titleBody->setMinimumSize(style::bell_options_list::w, style::bell_options_list::outer_layouts_h);
-        titleBody->setEdges(RectangleEdge::None);
-        titleBody->setEditMode(EditMode::Browse);
-        titleBody->setText(title);
-
-        optionsList->setAlignment(Alignment(Alignment::Vertical::Top));
-        body->firstBox->setVisible(true);
-
-        body->resizeItems();
-        // Second resize is needed as we need to first apply max size for center box and next extra margins.
-        body->resizeItems();
+        optionsList->setListTitle(title);
     }
 
     void BellOptionWindow::onClose([[maybe_unused]] CloseReason reason)
diff --git a/products/BellHybrid/apps/common/src/options/BellShortOptionWindow.cpp b/products/BellHybrid/apps/common/src/options/BellShortOptionWindow.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..dd2dc3447312d9bc8e6d87b81ac9b4e8ccebde07
--- /dev/null
+++ b/products/BellHybrid/apps/common/src/options/BellShortOptionWindow.cpp
@@ -0,0 +1,75 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#include "common/options/BellShortOptionWindow.hpp"
+#include "common/options/OptionBellMenu.hpp"
+
+#include <messages/OptionsWindow.hpp>
+#include <TextFixedSize.hpp>
+
+namespace gui
+{
+    BellShortOptionWindow::BellShortOptionWindow(app::ApplicationCommon *app, const std::string &name)
+        : AppWindow(app, name), OptionsList(std::make_shared<OptionsModel>(
+                                    app, style::bell_options::h + 2 * style::bell_options::option_margin))
+    {
+        buildInterface();
+    }
+
+    void BellShortOptionWindow::rebuild()
+    {
+        recreateOptions();
+    }
+
+    void BellShortOptionWindow::buildInterface()
+    {
+        AppWindow::buildInterface();
+
+        statusBar->setVisible(false);
+        header->setTitleVisibility(false);
+        bottomBar->setVisible(false);
+
+        body = new BellBaseLayout(this, 0, 0, style::window_width, style::window_height, false);
+
+        optionsList = new gui::ListView(body->centerBox, 0, 0, 0, 0, optionsModel, listview::ScrollBarType::None);
+        optionsList->setAlignment(Alignment(Alignment::Vertical::Bottom));
+        optionsList->setMinimumSize(style::bell_options::default_text_width, style::bell_base_layout::center_layout_h);
+        optionsList->setEdges(RectangleEdge::None);
+
+        body->resize();
+
+        optionsList->prepareRebuildCallback = [this]() { recreateOptions(); };
+        optionsModel->createData(options);
+
+        setFocusItem(optionsList);
+    }
+
+    void BellShortOptionWindow::setListTitle(const std::string &title)
+    {
+        auto titleBody = new TextFixedSize(body->firstBox);
+        titleBody->drawUnderline(false);
+        titleBody->setAlignment(Alignment(Alignment::Horizontal::Center, Alignment::Vertical::Top));
+        titleBody->setFont(style::window::font::largelight);
+        titleBody->setMinimumSize(style::bell_base_layout::outer_layouts_w, style::bell_base_layout::outer_layouts_h);
+        titleBody->setEdges(RectangleEdge::None);
+        titleBody->setEditMode(EditMode::Browse);
+        titleBody->setRichText(title);
+
+        body->firstBox->resizeItems();
+    }
+
+    void BellShortOptionWindow::onClose([[maybe_unused]] CloseReason reason)
+    {
+        optionsList->onClose();
+    }
+
+    void BellShortOptionWindow::onBeforeShow(ShowMode mode, SwitchData *data)
+    {
+        if (auto message = dynamic_cast<gui::OptionsWindowOptions *>(data)) {
+            LOG_DEBUG("Options load!");
+            options = message->takeOptions();
+        }
+
+        optionsList->rebuildList(listview::RebuildType::InPlace);
+    }
+} /* namespace gui */