From 07cc59d97869e83b319f930403112d2cbd321248 Mon Sep 17 00:00:00 2001
From: Mateusz Piesta <mateusz.piesta@gmail.com>
Date: Thu, 5 Aug 2021 11:51:36 +0200
Subject: [PATCH] [BH-708] Time and units

Added missing views/windows.
From now home screen properly displays current time.
---
 image/assets/lang/English.json                |   3 +
 .../windows/BellMainWindow.cpp                |  30 ++++--
 .../windows/BellMainWindow.hpp                |  25 ++---
 .../ApplicationBellSettings.cpp               |   5 +
 .../application-bell-settings/CMakeLists.txt  |  10 +-
 .../data/BellSettingsStyle.hpp                |   7 ++
 .../ApplicationBellSettings.hpp               |   1 +
 .../models/TimeUnitsModel.cpp                 |  55 +++++++---
 .../models/TimeUnitsModel.hpp                 |  15 ++-
 .../widgets/TimeFormatSetListItem.cpp         | 101 ++++++++++++++++++
 .../widgets/TimeFormatSetListItem.hpp         |  38 +++++++
 ...pinnerListItem.cpp => TimeSetListItem.cpp} |  18 +++-
 ...pinnerListItem.hpp => TimeSetListItem.hpp} |   7 +-
 .../windows/BellSettingsFinishedWindow.cpp    |  61 +++++++++++
 .../windows/BellSettingsFinishedWindow.hpp    |  27 +++++
 .../windows/BellSettingsTimeUnitsWindow.cpp   |   3 +-
 .../apps-common/widgets/TimeSetFmtSpinner.cpp |  12 ++-
 module-gui/gui/widgets/SideListView.cpp       |   4 +
 module-gui/gui/widgets/SideListView.hpp       |   2 +
 module-gui/gui/widgets/Spinner.cpp            |   7 +-
 module-gui/gui/widgets/Spinner.hpp            |   8 +-
 module-gui/gui/widgets/Style.hpp              |   4 +-
 module-gui/gui/widgets/TextSpinner.hpp        |   2 +-
 23 files changed, 388 insertions(+), 57 deletions(-)
 create mode 100644 module-apps/application-bell-settings/widgets/TimeFormatSetListItem.cpp
 create mode 100644 module-apps/application-bell-settings/widgets/TimeFormatSetListItem.hpp
 rename module-apps/application-bell-settings/widgets/{TimeSetSpinnerListItem.cpp => TimeSetListItem.cpp} (60%)
 rename module-apps/application-bell-settings/widgets/{TimeSetSpinnerListItem.hpp => TimeSetListItem.hpp} (61%)
 create mode 100644 module-apps/application-bell-settings/windows/BellSettingsFinishedWindow.cpp
 create mode 100644 module-apps/application-bell-settings/windows/BellSettingsFinishedWindow.hpp

diff --git a/image/assets/lang/English.json b/image/assets/lang/English.json
index bb7d533daebddf119f9792407124849ace302fa0..4006e242bc947ceb2c8a001247fb3bf4ebc6f735 100644
--- a/image/assets/lang/English.json
+++ b/image/assets/lang/English.json
@@ -552,7 +552,10 @@
   "tethering_phone_mode_change_prohibited": "<text>Tethering is on.<br /><br />Other modes (Connected, DND,<br />Offline) are overriden by this mode<br />and are not working.</text>",
   "tethering_menu_access_decline": "<text>Tethering is on.<br /><br />To access menu,<br />turn tethering off.</text>",
 
+  "app_bell_settings_time_units_time_fmt_top_message": "Time format",
+  "app_bell_settings_time_units_time_fmt_bottom_message": "hours",
   "app_bell_settings_time_units_time_message": "Time",
+  "app_bell_settings_time_units_finished_message": "Time and units are set.",
   "app_bellmain_next_alarm": "Next alarm",
   "app_bellmain_power_nap": "Power nap",
   "app_bellmain_meditation_timer": "Meditation timer",
diff --git a/module-apps/application-bell-main/windows/BellMainWindow.cpp b/module-apps/application-bell-main/windows/BellMainWindow.cpp
index f997fdfcac97ece88782488acb127e33b1899a62..9fc590fcfed3da6d61e6099616892f15f0f1c45f 100644
--- a/module-apps/application-bell-main/windows/BellMainWindow.cpp
+++ b/module-apps/application-bell-main/windows/BellMainWindow.cpp
@@ -2,21 +2,30 @@
 // For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
 
 #include "BellMainWindow.hpp"
+
 #include <application-bell-main/ApplicationBellMain.hpp>
 #include <data/BellMainStyle.hpp>
 #include <gui/input/InputEvent.hpp>
 #include <i18n/i18n.hpp>
 #include <log/log.hpp>
-#include <time/time_conversion.hpp>
+#include <service-time/api/TimeSettingsApi.hpp>
+#include <widgets/AlarmSetSpinner.hpp>
+#include <widgets/TimeSetFmtSpinner.hpp>
+#include <widgets/TimeSetSpinner.hpp>
 
-static constexpr uint32_t mockHour   = 10;
-static constexpr uint32_t mockMinute = 15;
+namespace
+{
+    constexpr uint32_t mockHour   = 10;
+    constexpr uint32_t mockMinute = 15;
+} // namespace
 
 namespace gui
 {
     BellMainWindow::BellMainWindow(app::Application *app) : AppWindow(app, gui::name::window::main_window)
     {
         buildInterface();
+
+        preBuildDrawListHook = [this](std::list<Command> &cmd) { updateTime(); };
     }
 
     void BellMainWindow::buildInterface()
@@ -47,11 +56,10 @@ namespace gui
         vBox->addWidget(alarmSetSpinner);
 
         namespace timeLabel = bellMainStyle::mainWindow::timeLabel;
-        time = new gui::Label(this, timeLabel::posX, timeLabel::posY, timeLabel::width, timeLabel::height);
-        time->setFilled(false);
-        time->setBorderColor(gui::ColorNoColor);
-        time->setFont(timeLabel::font);
+        time                = new TimeSetFmtSpinner(
+            this, timeLabel::posX, timeLabel::posY, timeLabel::width, timeLabel::height, stm::api::timeFormat());
         time->setAlignment(Alignment(gui::Alignment::Horizontal::Center, gui::Alignment::Vertical::Center));
+        time->setEditMode(EditMode::Browse);
 
         namespace temperatureLabel = bellMainStyle::mainWindow::temperatureLabel;
         temperature                = new gui::Label(
@@ -90,7 +98,7 @@ namespace gui
     {
         if (alarmEditMode) {
             auto ret = AppWindow::onInput(inputEvent);
-            if (ret == false) {
+            if (not ret) {
                 // alarm setting finished
                 alarmEditMode = false;
                 setFocusItem(nullptr);
@@ -120,8 +128,10 @@ namespace gui
     bool BellMainWindow::updateTime()
     {
         if (time != nullptr) {
-            utils::time::Timestamp timestamp{std::time(nullptr)};
-            time->setText(timestamp.str("%H:%M"));
+            const auto now = std::chrono::system_clock::to_time_t(std::chrono::system_clock::now());
+            time->setHour(std::localtime(&now)->tm_hour);
+            time->setMinute(std::localtime(&now)->tm_min);
+            time->setTimeFormat(stm::api::timeFormat());
             return true;
         }
 
diff --git a/module-apps/application-bell-main/windows/BellMainWindow.hpp b/module-apps/application-bell-main/windows/BellMainWindow.hpp
index 267c0bd76eecf488eda68e94de2a68f82597f827..ffc97466fb8cf53b2e2da5ee45f461ba6305dabb 100644
--- a/module-apps/application-bell-main/windows/BellMainWindow.hpp
+++ b/module-apps/application-bell-main/windows/BellMainWindow.hpp
@@ -3,15 +3,16 @@
 
 #pragma once
 
-#include <data/BellAlarmData.hpp>
-#include <AppWindow.hpp>
-#include <gui/widgets/Spinner.hpp>
-#include <widgets/TimeSetSpinner.hpp>
-#include <widgets/AlarmSetSpinner.hpp>
-#include <BoxLayout.hpp>
+#include "data/BellAlarmData.hpp"
+
+#include <apps-common/windows/AppWindow.hpp>
 
 namespace gui
 {
+    class Label;
+    class AlarmSetSpinner;
+    class TimeSetFmtSpinner;
+
     class BellMainWindow : public AppWindow
     {
       public:
@@ -21,14 +22,14 @@ namespace gui
         bool onInput(const InputEvent &inputEvent) override;
         bool updateTime() override;
 
-        gui::Label *time        = nullptr;
-        gui::Label *temperature = nullptr;
-        AlarmSetSpinner *alarmSetSpinner = nullptr;
-
       private:
         auto handleEnterKey(const InputEvent &inputEvent) -> bool;
         auto handleEditModeEntry() -> void;
-        bool alarmEditMode            = false;
-        BellAlarm::Status alarmStatus = BellAlarm::Status::DEACTIVATED;
+
+        TimeSetFmtSpinner *time          = nullptr;
+        gui::Label *temperature          = nullptr;
+        AlarmSetSpinner *alarmSetSpinner = nullptr;
+        bool alarmEditMode               = false;
+        BellAlarm::Status alarmStatus    = BellAlarm::Status::DEACTIVATED;
     };
 } // namespace gui
diff --git a/module-apps/application-bell-settings/ApplicationBellSettings.cpp b/module-apps/application-bell-settings/ApplicationBellSettings.cpp
index 00ff2cb62ccbc6d398c956ad47ee42bbeef9cf28..db66ff9c72290f61616a540ce2a0a2ab2dafb9e5 100644
--- a/module-apps/application-bell-settings/ApplicationBellSettings.cpp
+++ b/module-apps/application-bell-settings/ApplicationBellSettings.cpp
@@ -4,6 +4,7 @@
 #include "ApplicationBellSettings.hpp"
 #include "TimeUnitsPresenter.hpp"
 #include "windows/BellSettingsAdvancedWindow.hpp"
+#include "windows/BellSettingsFinishedWindow.hpp"
 #include "windows/BellSettingsTimeUnitsWindow.hpp"
 #include "windows/BellSettingsWindow.hpp"
 
@@ -44,6 +45,10 @@ namespace app
             auto presenter         = std::make_unique<bell_settings::TimeUnitsWindowPresenter>(timeUnitsProvider);
             return std::make_unique<gui::BellSettingsTimeUnitsWindow>(app, std::move(presenter));
         });
+
+        windowsFactory.attach(gui::window::name::bellSettingsFinished, [](Application *app, const std::string &name) {
+            return std::make_unique<gui::BellSettingsFinishedWindow>(app);
+        });
     }
 
     sys::MessagePointer ApplicationBellSettings::DataReceivedHandler(sys::DataMessage *msgl, sys::ResponseMessage *resp)
diff --git a/module-apps/application-bell-settings/CMakeLists.txt b/module-apps/application-bell-settings/CMakeLists.txt
index 18d93150c6a9458390453a250d78b42dc9bbba38..680679526a7531d7a18d6e773cba5d70fd88be03 100644
--- a/module-apps/application-bell-settings/CMakeLists.txt
+++ b/module-apps/application-bell-settings/CMakeLists.txt
@@ -23,18 +23,24 @@ target_sources(application-bell-settings
         ApplicationBellSettings.cpp
         models/TimeUnitsModel.cpp
         presenter/TimeUnitsPresenter.cpp
-        widgets/TimeSetSpinnerListItem.cpp
+        widgets/TimeSetListItem.cpp
+        widgets/TimeFormatSetListItem.cpp
         windows/BellSettingsWindow.cpp
         windows/BellSettingsAdvancedWindow.cpp
         windows/BellSettingsTimeUnitsWindow.cpp
+        windows/BellSettingsFinishedWindow.cpp
 
         models/TimeUnitsModel.hpp
         presenter/TimeUnitsPresenter.hpp
-        widgets/TimeSetSpinnerListItem.hpp
+        widgets/TimeSetListItem.hpp
+        widgets/TimeFormatSetListItem.hpp
         windows/BellSettingsWindow.hpp
         windows/BellSettingsAdvancedWindow.hpp
         windows/BellSettingsTimeUnitsWindow.hpp
 
+    PRIVATE
+        windows/BellSettingsFinishedWindow.hpp
+
     PUBLIC
         include/application-bell-settings/ApplicationBellSettings.hpp
 )
diff --git a/module-apps/application-bell-settings/data/BellSettingsStyle.hpp b/module-apps/application-bell-settings/data/BellSettingsStyle.hpp
index 86c69dee1bd32e97fc393f6cedf31426202882ae..5767e74990f915914dcbde0e0c0dcb5e5b4570df 100644
--- a/module-apps/application-bell-settings/data/BellSettingsStyle.hpp
+++ b/module-apps/application-bell-settings/data/BellSettingsStyle.hpp
@@ -22,5 +22,12 @@ namespace gui
             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
 } // namespace gui
diff --git a/module-apps/application-bell-settings/include/application-bell-settings/ApplicationBellSettings.hpp b/module-apps/application-bell-settings/include/application-bell-settings/ApplicationBellSettings.hpp
index 379f9789103133ff93c7aced78ad59ec0a5eaf99..2b7b17cf69e87ea5e00ebfaca1057ad7cd6c7a3a 100644
--- a/module-apps/application-bell-settings/include/application-bell-settings/ApplicationBellSettings.hpp
+++ b/module-apps/application-bell-settings/include/application-bell-settings/ApplicationBellSettings.hpp
@@ -11,6 +11,7 @@ namespace gui::window::name
     inline constexpr auto bellSettingsAdvanced  = "BellSettingsAdvanced";
     inline constexpr auto bellSettingsTimeUnits = "BellSettingsTimeUnits";
     inline constexpr auto bellSettingsDialog    = "BellSettingsDialog";
+    inline constexpr auto bellSettingsFinished  = "BellSettingsFinished";
 
 } // namespace gui::window::name
 
diff --git a/module-apps/application-bell-settings/models/TimeUnitsModel.cpp b/module-apps/application-bell-settings/models/TimeUnitsModel.cpp
index c9dc0e1ea70d8b1620fdab172fc1276675bbbabe..5b7ba4fa4b8f568f8c01ab77956572e99a0dc2e9 100644
--- a/module-apps/application-bell-settings/models/TimeUnitsModel.cpp
+++ b/module-apps/application-bell-settings/models/TimeUnitsModel.cpp
@@ -2,13 +2,16 @@
 // For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
 
 #include "TimeUnitsModel.hpp"
+#include "TimeFormatSetListItem.hpp"
+#include "TimeSetListItem.hpp"
 
-#include <apps-common/widgets/TimeSetFmtSpinner.hpp>
 #include <gui/widgets/ListViewEngine.hpp>
 #include <gui/widgets/Style.hpp>
 #include <gui/widgets/Text.hpp>
 #include <service-time/Constants.hpp>
+#include <service-time/api/TimeSettingsApi.hpp>
 #include <service-time/service-time/TimeMessage.hpp>
+#include <widgets/TimeSetFmtSpinner.hpp>
 
 #include <ctime>
 
@@ -39,9 +42,23 @@ namespace app::bell_settings
 
     void TimeUnitsModel::createData()
     {
-        timeSetWidget = new gui::TimeSetSpinnerListItem(
-            0U, 0U, 0, 0, utils::translate("app_bell_settings_time_units_time_message"));
-        internalData.push_back(timeSetWidget);
+
+        timeFmtSetListItem =
+            new gui::TimeFormatSetListItem(0,
+                                           0,
+                                           0,
+                                           0,
+                                           utils::translate("app_bell_settings_time_units_time_fmt_top_message"),
+                                           utils::translate("app_bell_settings_time_units_time_fmt_bottom_message"));
+        internalData.push_back(timeFmtSetListItem);
+
+        timeSetListItem =
+            new gui::TimeSetListItem(0U, 0U, 0, 0, utils::translate("app_bell_settings_time_units_time_message"));
+        internalData.push_back(timeSetListItem);
+
+        timeFmtSetListItem->onNextCallback = [this](gui::Item &) {
+            timeSetListItem->timeSetFmtSpinner->setTimeFormat(timeFmtSetListItem->getTimeFmt());
+        };
 
         for (auto item : internalData) {
             item->deleteByList = false;
@@ -55,19 +72,28 @@ namespace app::bell_settings
 
     void TimeUnitsModel::saveData()
     {
-        std::time_t now         = std::chrono::system_clock::to_time_t(std::chrono::system_clock::now());
-        struct std::tm *newTime = std::localtime(&now);
-        newTime->tm_hour        = timeSetWidget->timeSetFmtSpinner->getHour();
-        newTime->tm_min         = timeSetWidget->timeSetFmtSpinner->getMinute();
-        LOG_INFO("Setting new time: %d:%d", newTime->tm_hour, newTime->tm_min);
+        const auto now     = std::chrono::system_clock::to_time_t(std::chrono::system_clock::now());
+        const auto newTime = std::localtime(&now);
+        newTime->tm_hour   = timeSetListItem->timeSetFmtSpinner->getHour();
+        newTime->tm_min    = timeSetListItem->timeSetFmtSpinner->getMinute();
+        const auto newFmt  = timeFmtSetListItem->getTimeFmt();
+        LOG_INFO("Setting new time: %d:%d fmt: %s",
+                 newTime->tm_hour,
+                 newTime->tm_min,
+                 utils::time::Locale::format(newFmt).c_str());
         sendRtcUpdateTimeMessage(std::mktime(newTime));
+        sendTimeFmtUpdateMessage(newFmt);
     }
 
     void TimeUnitsModel::loadData()
     {
-        std::time_t now = std::chrono::system_clock::to_time_t(std::chrono::system_clock::now());
-        timeSetWidget->timeSetFmtSpinner->setHour(std::localtime(&now)->tm_hour);
-        timeSetWidget->timeSetFmtSpinner->setMinute(std::localtime(&now)->tm_min);
+        const auto now        = std::chrono::system_clock::to_time_t(std::chrono::system_clock::now());
+        const auto time       = std::localtime(&now);
+        const auto timeFormat = stm::api::timeFormat();
+        timeSetListItem->timeSetFmtSpinner->setHour(time->tm_hour);
+        timeSetListItem->timeSetFmtSpinner->setMinute(time->tm_min);
+        timeSetListItem->timeSetFmtSpinner->setTimeFormat(timeFormat);
+        timeFmtSetListItem->setTimeFmt(timeFormat);
     }
 
     auto TimeUnitsModel::requestRecords(uint32_t offset, uint32_t limit) -> void
@@ -81,5 +107,10 @@ namespace app::bell_settings
         auto msg = std::make_shared<stm::message::TimeChangeRequestMessage>(newTime);
         application->bus.sendUnicast(std::move(msg), service::name::service_time);
     }
+    void TimeUnitsModel::sendTimeFmtUpdateMessage(utils::time::Locale::TimeFormat newFmt)
+    {
+        auto msg = std::make_shared<stm::message::SetTimeFormatRequest>(newFmt);
+        application->bus.sendUnicast(std::move(msg), service::name::service_time);
+    }
 
 } // namespace app::bell_settings
diff --git a/module-apps/application-bell-settings/models/TimeUnitsModel.hpp b/module-apps/application-bell-settings/models/TimeUnitsModel.hpp
index e1cd81e261c3eb2eaa90f13ae98a8129d9add817..4cb632e9d5262be201763e8ff2babe83d7391441 100644
--- a/module-apps/application-bell-settings/models/TimeUnitsModel.hpp
+++ b/module-apps/application-bell-settings/models/TimeUnitsModel.hpp
@@ -3,10 +3,15 @@
 
 #pragma once
 
-#include "TimeSetSpinnerListItem.hpp"
-
 #include <apps-common/Application.hpp>
 #include <apps-common/InternalModel.hpp>
+#include <time/time_locale.hpp>
+
+namespace gui
+{
+    class TimeSetListItem;
+    class TimeFormatSetListItem;
+} // namespace gui
 
 namespace app::bell_settings
 {
@@ -27,9 +32,11 @@ namespace app::bell_settings
         [[nodiscard]] auto getMinimalItemSpaceRequired() const -> unsigned int override;
 
       private:
-        app::Application *application              = nullptr;
-        gui::TimeSetSpinnerListItem *timeSetWidget = nullptr;
+        app::Application *application                  = nullptr;
+        gui::TimeSetListItem *timeSetListItem          = nullptr;
+        gui::TimeFormatSetListItem *timeFmtSetListItem = nullptr;
 
         void sendRtcUpdateTimeMessage(time_t newTime);
+        void sendTimeFmtUpdateMessage(utils::time::Locale::TimeFormat newFmt);
     };
 } // namespace app::bell_settings
diff --git a/module-apps/application-bell-settings/widgets/TimeFormatSetListItem.cpp b/module-apps/application-bell-settings/widgets/TimeFormatSetListItem.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..947b810b07677d2720478aebcb17fdb06f2922e5
--- /dev/null
+++ b/module-apps/application-bell-settings/widgets/TimeFormatSetListItem.cpp
@@ -0,0 +1,101 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#include "TimeFormatSetListItem.hpp"
+#include "BellSettingsStyle.hpp"
+
+#include <gui/core/FontManager.hpp>
+#include <gui/core/RawFont.hpp>
+#include <gui/widgets/Label.hpp>
+#include <gui/widgets/Spinner.hpp>
+
+#include <widgets/TimeSetFmtSpinner.hpp>
+
+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)
+    {
+        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->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);
+
+        bottomDescription = new Label(body);
+        bottomDescription->setMinimumSize(style::sidelistview::top_message::w, style::sidelistview::top_message::h);
+        bottomDescription->setFont(style::sidelistview::top_message::font);
+        bottomDescription->setEdges(RectangleEdge::None);
+        bottomDescription->activeItem = false;
+        bottomDescription->setAlignment(Alignment(Alignment::Horizontal::Center));
+        bottomDescription->setText(botDesc);
+
+        dimensionChangedCallback = [&](Item &, const BoundingBox &newDim) -> bool {
+            body->setArea({0, 0, newDim.w, newDim.h});
+            return true;
+        };
+
+        focusChangedCallback = [&](Item &) {
+            setFocusItem(focus ? body : nullptr);
+            if (focus) {
+                setFocusItem(body);
+            }
+            else {
+                setFocusItem(nullptr);
+                if (onNextCallback) {
+                    onNextCallback(*this);
+                }
+            }
+            return true;
+        };
+
+        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;
+        if (fmt == Locale::TimeFormat::FormatTime12H) {
+            timeFormat->setCurrentValue(fmtSpinnerMin);
+        }
+        else if (fmt == Locale::TimeFormat::FormatTime24H) {
+            timeFormat->setCurrentValue(fmtSpinnerMax);
+        }
+    }
+} // namespace gui
\ No newline at end of file
diff --git a/module-apps/application-bell-settings/widgets/TimeFormatSetListItem.hpp b/module-apps/application-bell-settings/widgets/TimeFormatSetListItem.hpp
new file mode 100644
index 0000000000000000000000000000000000000000..7fa4f956425d8fb4989da2c48d26cdb6120b6bed
--- /dev/null
+++ b/module-apps/application-bell-settings/widgets/TimeFormatSetListItem.hpp
@@ -0,0 +1,38 @@
+// 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 <time/time_locale.hpp>
+#include <utf8/UTF8.hpp>
+#include <widgets/SideListItem.hpp>
+
+#include <functional>
+
+namespace gui
+{
+    class Spinner;
+    class Label;
+
+    class TimeFormatSetListItem : public gui::SideListItem
+    {
+      public:
+        TimeFormatSetListItem() = delete;
+        TimeFormatSetListItem(
+            gui::Length x, gui::Length y, gui::Length w, gui::Length h, const UTF8 &topDesc, const UTF8 &botDesc);
+
+        auto getTimeFmt() const noexcept -> utils::time::Locale::TimeFormat;
+        auto setTimeFmt(utils::time::Locale::TimeFormat fmt) noexcept -> void;
+
+        /// called before next SideListItem is activated
+        /// @param `this` : item
+        std::function<void(Item &)> onNextCallback;
+
+      private:
+        Margins calculateMargins() const noexcept;
+
+        Label *bottomDescription{};
+        Spinner *timeFormat{};
+    };
+
+} // namespace gui
diff --git a/module-apps/application-bell-settings/widgets/TimeSetSpinnerListItem.cpp b/module-apps/application-bell-settings/widgets/TimeSetListItem.cpp
similarity index 60%
rename from module-apps/application-bell-settings/widgets/TimeSetSpinnerListItem.cpp
rename to module-apps/application-bell-settings/widgets/TimeSetListItem.cpp
index 0f3680e79b5b6cbe785c3747ec9b272c0e235cf7..84ae936e9ee60eff40c2eb21e84f489b6ba68503 100644
--- a/module-apps/application-bell-settings/widgets/TimeSetSpinnerListItem.cpp
+++ b/module-apps/application-bell-settings/widgets/TimeSetListItem.cpp
@@ -1,22 +1,24 @@
 // Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
 // For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
 
+#include "TimeSetListItem.hpp"
 #include "BellSettingsStyle.hpp"
-#include "TimeSetSpinnerListItem.hpp"
 
 #include <gui/input/InputEvent.hpp>
 #include <widgets/TimeSetFmtSpinner.hpp>
 
 namespace gui
 {
-    TimeSetSpinnerListItem::TimeSetSpinnerListItem(
+    TimeSetListItem::TimeSetListItem(
         gui::Length x, gui::Length y, gui::Length w, gui::Length h, std::string description)
         : SideListItem(std::move(description))
     {
         setMinimumSize(style::sidelistview::list_item::w, style::sidelistview::list_item::h);
         timeSetFmtSpinner = new TimeSetFmtSpinner(body);
-        timeSetFmtSpinner->setMinimumSize(gui::bell_settings_style::time_set_spinner_list_item::w,
-                                          gui::bell_settings_style::time_set_spinner_list_item::h);
+        timeSetFmtSpinner->setMinimumSize(bell_settings_style::time_set_spinner_list_item::w,
+                                          bell_settings_style::time_set_spinner_list_item::h);
+
+        timeSetFmtSpinner->setMargins(calculateMargins());
         setFocusItem(body);
 
         dimensionChangedCallback = [&](gui::Item &, const BoundingBox &newDim) -> bool {
@@ -31,4 +33,12 @@ 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/TimeSetSpinnerListItem.hpp b/module-apps/application-bell-settings/widgets/TimeSetListItem.hpp
similarity index 61%
rename from module-apps/application-bell-settings/widgets/TimeSetSpinnerListItem.hpp
rename to module-apps/application-bell-settings/widgets/TimeSetListItem.hpp
index a402f44ba54e5e1ffa6dceadc71edda060403915..f7d81741772172f973735e2a9fe7090ab559aed2 100644
--- a/module-apps/application-bell-settings/widgets/TimeSetSpinnerListItem.hpp
+++ b/module-apps/application-bell-settings/widgets/TimeSetListItem.hpp
@@ -11,11 +11,14 @@ namespace gui
 {
     class TimeSetFmtSpinner;
 
-    class TimeSetSpinnerListItem : public SideListItem
+    class TimeSetListItem : public SideListItem
     {
       public:
         TimeSetFmtSpinner *timeSetFmtSpinner = nullptr;
 
-        TimeSetSpinnerListItem(gui::Length x, gui::Length y, gui::Length w, gui::Length h, std::string description);
+        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/BellSettingsFinishedWindow.cpp b/module-apps/application-bell-settings/windows/BellSettingsFinishedWindow.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..128d9bb88063fa4b1305ce32ce90f0eba79f00ee
--- /dev/null
+++ b/module-apps/application-bell-settings/windows/BellSettingsFinishedWindow.cpp
@@ -0,0 +1,61 @@
+// Copyright (c) 2017-2021, Mudita Sp. z.o.o. All rights reserved.
+// For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
+
+#include "BellSettingsFinishedWindow.hpp"
+
+#include <gui/input/InputEvent.hpp>
+#include <gui/widgets/Icon.hpp>
+
+namespace
+{
+    constexpr auto appNameToReturn = gui::window::name::bellSettingsAdvanced;
+}
+
+namespace gui
+{
+
+    BellSettingsFinishedWindow::BellSettingsFinishedWindow(app::Application *app, const std::string &name)
+        : WindowWithTimer(app, name)
+    {
+        buildInterface();
+
+        timerCallback = [this](Item &, sys::Timer &) {
+            application->switchWindow(appNameToReturn);
+            return true;
+        };
+    }
+    void BellSettingsFinishedWindow::buildInterface()
+    {
+        WindowWithTimer::buildInterface();
+
+        statusBar->setVisible(false);
+        header->setTitleVisibility(false);
+        bottomBar->setVisible(false);
+
+        icon = new Icon(this,
+                        0,
+                        0,
+                        style::window_width,
+                        style::window_height,
+                        "circle_success",
+                        utils::translate("app_bell_settings_time_units_finished_message"));
+    }
+    bool BellSettingsFinishedWindow::onInput(const InputEvent &inputEvent)
+    {
+        if (inputEvent.isShortRelease(KeyCode::KEY_ENTER) || inputEvent.isShortRelease(KeyCode::KEY_RF)) {
+            application->switchWindow(appNameToReturn);
+            return true;
+        }
+        if (AppWindow::onInput(inputEvent)) {
+            return true;
+        }
+
+        return AppWindow::onInput(inputEvent);
+    }
+    void BellSettingsFinishedWindow::rebuild()
+    {
+        erase();
+        buildInterface();
+    }
+
+} // namespace gui
diff --git a/module-apps/application-bell-settings/windows/BellSettingsFinishedWindow.hpp b/module-apps/application-bell-settings/windows/BellSettingsFinishedWindow.hpp
new file mode 100644
index 0000000000000000000000000000000000000000..f9b6c69f6f3b173452d6453ae76f940c0cced105
--- /dev/null
+++ b/module-apps/application-bell-settings/windows/BellSettingsFinishedWindow.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 "application-bell-settings/ApplicationBellSettings.hpp"
+
+#include <apps-common/popups/WindowWithTimer.hpp>
+
+namespace gui
+{
+    class Icon;
+
+    class BellSettingsFinishedWindow : public WindowWithTimer
+    {
+      public:
+        BellSettingsFinishedWindow(app::Application *app, const std::string &name = window::name::bellSettingsFinished);
+
+      private:
+        void buildInterface() override;
+        bool onInput(const InputEvent &inputEvent) override;
+        void rebuild() override;
+
+        Icon *icon{};
+    };
+
+} // namespace gui
diff --git a/module-apps/application-bell-settings/windows/BellSettingsTimeUnitsWindow.cpp b/module-apps/application-bell-settings/windows/BellSettingsTimeUnitsWindow.cpp
index 684fdec026b5189a55e1f977f89c82c5db9ad18d..117e627ac0cb7a10b41693f16253d9856164fbca 100644
--- a/module-apps/application-bell-settings/windows/BellSettingsTimeUnitsWindow.cpp
+++ b/module-apps/application-bell-settings/windows/BellSettingsTimeUnitsWindow.cpp
@@ -38,6 +38,7 @@ namespace gui
         sidelistview =
             new SideListView(this, 0U, 0U, this->getWidth(), this->getHeight(), presenter->getPagesProvider());
         sidelistview->setEdges(RectangleEdge::None);
+        sidelistview->setPageBarVisible(false);
 
         sidelistview->rebuildList(listview::RebuildType::Full);
 
@@ -53,7 +54,7 @@ namespace gui
         }
         if (inputEvent.isShortRelease(KeyCode::KEY_ENTER)) {
             presenter->saveData();
-            application->returnToPreviousWindow();
+            application->switchWindow(window::name::bellSettingsFinished);
             return true;
         }
         if (AppWindow::onInput(inputEvent)) {
diff --git a/module-apps/apps-common/widgets/TimeSetFmtSpinner.cpp b/module-apps/apps-common/widgets/TimeSetFmtSpinner.cpp
index e3e73ce1bfe98e061529737a327c846b4da4bdbd..954900f7a2165b859e101cbf7ab9436c02e94fad 100644
--- a/module-apps/apps-common/widgets/TimeSetFmtSpinner.cpp
+++ b/module-apps/apps-common/widgets/TimeSetFmtSpinner.cpp
@@ -2,7 +2,6 @@
 // For licensing, see https://github.com/mudita/MuditaOS/LICENSE.md
 
 #include "TimeSetFmtSpinner.hpp"
-
 #include "TimeSetSpinner.hpp"
 
 #include <date/date.h>
@@ -47,7 +46,13 @@ namespace gui
         fmt->setEdges(RectangleEdge::Bottom);
 
         focusChangedCallback = [&](Item &) {
-            setFocusItem(focus ? timeSetSpinner : nullptr);
+            if (focus && editMode != EditMode::Browse) {
+                setFocusItem(timeSetSpinner);
+            }
+            else {
+                setFocusItem(nullptr);
+            }
+            setTimeFormat(this->timeFormat);
             return true;
         };
 
@@ -173,7 +178,8 @@ namespace gui
     }
     auto TimeSetFmtSpinner::handleEnterKey() -> bool
     {
-        if (focusItem == timeSetSpinner) {
+        using namespace utils::time;
+        if ((focusItem == timeSetSpinner) && (timeFormat == Locale::TimeFormat::FormatTime12H)) {
             setFocusItem(fmt);
             return true;
         }
diff --git a/module-gui/gui/widgets/SideListView.cpp b/module-gui/gui/widgets/SideListView.cpp
index c0197e9ac0c1ba07dab267e9a0728bc5af7d6640..ad306e23e13b2d463e3df9e9ef02a1fa1e8438e1 100644
--- a/module-gui/gui/widgets/SideListView.cpp
+++ b/module-gui/gui/widgets/SideListView.cpp
@@ -138,4 +138,8 @@ 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 9741d0a95c7ac0037d4272b1971d122e5f3e214a..9a531962c3604d9ecf6b0c4bce0b878df6203340 100644
--- a/module-gui/gui/widgets/SideListView.hpp
+++ b/module-gui/gui/widgets/SideListView.hpp
@@ -30,6 +30,8 @@ namespace gui
                      unsigned int h,
                      std::shared_ptr<ListItemProvider> prov);
 
+        auto setPageBarVisible(bool value) noexcept -> void;
+
         auto onInput(const InputEvent &inputEvent) -> bool override;
     };
 } /* namespace gui */
diff --git a/module-gui/gui/widgets/Spinner.cpp b/module-gui/gui/widgets/Spinner.cpp
index 2b2e8123698aa1e0a641b3acc017edf1124bfb00..0179b1ab3e1778c3baa7244ac233030a1239f26f 100644
--- a/module-gui/gui/widgets/Spinner.cpp
+++ b/module-gui/gui/widgets/Spinner.cpp
@@ -87,12 +87,13 @@ namespace gui
     bool Spinner::onFocus(bool state)
     {
         if (focus) {
-            setEdges(RectangleEdge::Bottom);
+            setEdges(focusEdges);
         }
         else {
             setEdges(RectangleEdge::None);
         }
         showCursor(state);
+        updateSpinner();
         return true;
     }
 
@@ -113,5 +114,9 @@ namespace gui
     {
         maxValue = newMaxValue;
     }
+    void Spinner::setFocusEdges(RectangleEdge edges)
+    {
+        focusEdges = edges;
+    }
 
 } // namespace gui
diff --git a/module-gui/gui/widgets/Spinner.hpp b/module-gui/gui/widgets/Spinner.hpp
index 75570bade5131f91d1ee4dd26b4ff9d8f80e6cef..76c7bb55b939f7a7b45bfa95b1431809cc50b3fd 100644
--- a/module-gui/gui/widgets/Spinner.hpp
+++ b/module-gui/gui/widgets/Spinner.hpp
@@ -17,6 +17,7 @@ namespace gui
 
         void setMinValue(int newMinValue);
         void setMaxValue(int newMaxValue);
+        void setFocusEdges(RectangleEdge edges);
 
         [[nodiscard]] int getCurrentValue() const noexcept;
         [[nodiscard]] unsigned char getFixedFieldWidth() const noexcept;
@@ -34,9 +35,10 @@ namespace gui
         int step;
         int currentValue;
         Boundaries boundaries         = Boundaries::Continuous;
-        unsigned char fixedFieldWidth = 0; ///< defins number of chars always displayed,
-                                           ///< if curren < fixFieldWidth Label will be filed with 0
-                                           ///< value of 0 means no wixed width.
+        unsigned char fixedFieldWidth = 0; ///< defines number of chars always displayed,
+        ///< if current < fixedFieldWidth Label will be filled with 0
+        ///< value of 0 means no fixed width.
+        RectangleEdge focusEdges = RectangleEdge::Bottom;
         void updateSpinner();
     };
 } // namespace gui
diff --git a/module-gui/gui/widgets/Style.hpp b/module-gui/gui/widgets/Style.hpp
index af10ad6ec13c5844e40f63f6cc861c3878f32c01..ba9ead211f3d01af4c27bcfa3b0ca81fc17ca2d6 100644
--- a/module-gui/gui/widgets/Style.hpp
+++ b/module-gui/gui/widgets/Style.hpp
@@ -273,8 +273,8 @@ namespace style
         namespace top_message
         {
             inline constexpr auto w    = window_width;
-            inline constexpr auto h    = 100U;
-            inline constexpr auto font = style::window::font::supersizemelight;
+            inline constexpr auto h    = 50U;
+            inline constexpr auto font = style::window::font::largelight;
         } // namespace top_message
     }     // namespace sidelistview
 
diff --git a/module-gui/gui/widgets/TextSpinner.hpp b/module-gui/gui/widgets/TextSpinner.hpp
index a6fab2b7aa2ab9bf699dbace6ac8688646c8713d..3a7df4d9b6e7ed27dfee88d39411c5bd3df092fc 100644
--- a/module-gui/gui/widgets/TextSpinner.hpp
+++ b/module-gui/gui/widgets/TextSpinner.hpp
@@ -13,7 +13,7 @@ namespace gui
     class TextSpinner : public Text
     {
       public:
-        using TextRange = std::vector<std::string>;
+        using TextRange = std::vector<UTF8>;
         using Position  = std::uint32_t;
         using Range     = std::pair<Position, Position>;