LibGUI+Calendar: Make Calendar a common widget in LibGUI

Refactors the Calendar widget into LibGUI and updates the Calendar
app interface. Calendar widget lets layout engine manage most of
its geometry now and has a few new features like tile click
navigation, hover highlighting and a togglable year/month mode.

3 files changed, 513 insertions, 0 deletions

diff --git a/Libraries/LibGUI/CMakeLists.txt b/Libraries/LibGUI/CMakeLists.txt
index 797cceee61..3d3b9a5c57 100644
--- a/Libraries/LibGUI/CMakeLists.txt
+++ b/Libraries/LibGUI/CMakeLists.txt
@@ -8,6 +8,7 @@ set(SOURCES
     Application.cpp
     BoxLayout.cpp
     Button.cpp
+    Calendar.cpp
     CheckBox.cpp
     Clipboard.cpp
     ColorInput.cpp
diff --git a/Libraries/LibGUI/Calendar.cpp b/Libraries/LibGUI/Calendar.cpp
new file mode 100644
index 0000000000..ddae86511d
--- /dev/null
+++ b/Libraries/LibGUI/Calendar.cpp
@@ -0,0 +1,370 @@
+/*
+ * Copyright (c) 2019-2020, Ryan Grieb <ryan.m.grieb@gmail.com>
+ * Copyright (c) 2020, the SerenityOS developers.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice, this
+ *    list of conditions and the following disclaimer.
+ *
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ *    this list of conditions and the following disclaimer in the documentation
+ *    and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+ * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+ * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#include <LibCore/DateTime.h>
+#include <LibGUI/BoxLayout.h>
+#include <LibGUI/Button.h>
+#include <LibGUI/Calendar.h>
+#include <LibGUI/Painter.h>
+#include <LibGUI/Window.h>
+#include <LibGfx/Font.h>
+#include <LibGfx/Palette.h>
+
+namespace GUI {
+
+static const char* long_day_names[] = {
+    "Sunday", "Monday", "Tuesday", "Wednesday",
+    "Thursday", "Friday", "Saturday"
+};
+
+static const char* short_day_names[] = { "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
+static const char* mini_day_names[] = { "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" };
+static const char* micro_day_names[] = { "S", "M", "T", "W", "T", "F", "S" };
+
+static const char* long_month_names[] = {
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December"
+};
+
+static const char* short_month_names[] = {
+    "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
+};
+
+Calendar::Calendar(Core::DateTime date_time)
+    : m_selected_date(date_time)
+    , m_selected_year(date_time.year())
+    , m_selected_month(date_time.month())
+{
+    set_fill_with_background_color(true);
+    set_layout<GUI::VerticalBoxLayout>();
+    layout()->set_spacing(0);
+
+    m_day_name_container = add<GUI::Widget>();
+    m_day_name_container->set_layout<GUI::HorizontalBoxLayout>();
+    m_day_name_container->set_size_policy(GUI::SizePolicy::Fill, GUI::SizePolicy::Fixed);
+    m_day_name_container->set_preferred_size(0, 16);
+    m_day_name_container->set_fill_with_background_color(true);
+    m_day_name_container->set_background_role(Gfx::ColorRole::HoverHighlight);
+    for (auto& day : m_day_names) {
+        day = m_day_name_container->add<GUI::Label>();
+        day->set_font(Gfx::Font::default_bold_font());
+    }
+
+    m_calendar_tile_container = add<GUI::Widget>();
+    m_calendar_tile_container->set_layout<GUI::VerticalBoxLayout>();
+    m_calendar_tile_container->layout()->set_spacing(0);
+
+    for (auto& row : m_week_rows) {
+        row = m_calendar_tile_container->add<GUI::Widget>();
+        row->set_layout<GUI::HorizontalBoxLayout>();
+        row->layout()->set_spacing(0);
+    }
+
+    int i = 0;
+    for (int j = 0; j < 6; j++)
+        for (int k = 0; k < 7; k++) {
+            m_calendar_tiles[i] = m_week_rows[j]->add<CalendarTile>(i, date_time);
+            m_calendar_tiles[i]->on_click = [this](int index) {
+                m_previous_selected_date = m_selected_date;
+                m_selected_date = m_calendar_tiles[index]->get_date_time();
+                update_tiles(m_selected_date.year(), m_selected_date.month());
+                if (on_calendar_tile_click)
+                    on_calendar_tile_click();
+            };
+            m_calendar_tiles[i]->on_doubleclick = [this](int index) {
+                if (m_calendar_tiles[index]->get_date_time().day() != m_previous_selected_date.day())
+                    return;
+                if (on_calendar_tile_doubleclick)
+                    on_calendar_tile_doubleclick();
+            };
+            i++;
+        }
+
+    m_month_tile_container = add<GUI::Widget>();
+    m_month_tile_container->set_visible(false);
+    m_month_tile_container->set_layout<GUI::VerticalBoxLayout>();
+    m_month_tile_container->set_fill_with_background_color(true);
+    m_month_tile_container->set_background_role(Gfx::ColorRole::HoverHighlight);
+    m_month_tile_container->layout()->set_spacing(0);
+
+    for (auto& row : m_month_rows) {
+        row = m_month_tile_container->add<GUI::Widget>();
+        row->set_layout<GUI::HorizontalBoxLayout>();
+        row->layout()->set_spacing(0);
+    }
+
+    i = 0;
+    for (int j = 0; j < 3; j++)
+        for (int k = 0; k < 4; k++) {
+            m_month_tiles[i] = m_month_rows[j]->add<MonthTile>(i, date_time);
+            m_month_tiles[i]->set_button_style(Gfx::ButtonStyle::CoolBar);
+            m_month_tiles[i]->on_indexed_click = [this](int index) {
+                toggle_mode();
+                update_tiles(m_month_tiles[index]->get_date_time().year(), m_month_tiles[index]->get_date_time().month());
+                if (on_month_tile_click)
+                    on_month_tile_click();
+            };
+            i++;
+        }
+
+    update_tiles(selected_year(), selected_month());
+}
+
+Calendar::~Calendar()
+{
+}
+
+void Calendar::toggle_mode()
+{
+    m_mode == Month ? m_mode = Year : m_mode = Month;
+
+    if (mode() == Month) {
+        m_day_name_container->set_visible(true);
+        m_calendar_tile_container->set_visible(true);
+        m_month_tile_container->set_visible(false);
+    } else {
+        m_day_name_container->set_visible(false);
+        m_calendar_tile_container->set_visible(false);
+        m_month_tile_container->set_visible(true);
+    }
+
+    this->resize(this->height(), this->width());
+    update_tiles(selected_year(), selected_month());
+}
+
+void Calendar::set_grid(bool grid)
+{
+    if (m_grid == grid)
+        return;
+
+    m_grid = grid;
+
+    for (int i = 0; i < 42; i++) {
+        m_calendar_tiles[i]->set_grid(grid);
+        m_calendar_tiles[i]->update();
+    }
+}
+
+void Calendar::resize_event(GUI::ResizeEvent& event)
+{
+    if (m_day_name_container->is_visible()) {
+        for (int i = 0; i < 7; i++) {
+            if (event.size().width() < 120)
+                m_day_names[i]->set_text(micro_day_names[i]);
+            else if (event.size().width() < 200)
+                m_day_names[i]->set_text(mini_day_names[i]);
+            else if (event.size().width() < 480)
+                m_day_names[i]->set_text(short_day_names[i]);
+            else
+                m_day_names[i]->set_text(long_day_names[i]);
+        }
+    }
+
+    if (m_month_tile_container->is_visible()) {
+        for (int i = 0; i < 12; i++) {
+            if (event.size().width() < 250)
+                m_month_tiles[i]->set_text(short_month_names[i]);
+            else
+                m_month_tiles[i]->set_text(long_month_names[i]);
+        }
+    }
+
+    (event.size().width() < 200) ? set_grid(false) : set_grid(true);
+}
+
+void Calendar::update_tiles(unsigned int target_year, unsigned int target_month)
+{
+    set_selected_calendar(target_year, target_month);
+    if (mode() == Month) {
+        unsigned int i = 0;
+        for (int y = 0; y < 6; y++)
+            for (int x = 0; x < 7; x++) {
+                auto date_time = Core::DateTime::create(target_year, target_month, 1);
+                unsigned int start_of_month = date_time.weekday();
+                unsigned int year;
+                unsigned int month;
+                unsigned int day;
+
+                if (start_of_month > i) {
+                    month = (target_month - 1 == 0) ? 12 : target_month - 1;
+                    year = (month == 12) ? target_year - 1 : target_year;
+                    date_time.set_time(year, month, 1);
+                    day = (date_time.days_in_month() - (start_of_month) + i) + 1;
+                    date_time.set_time(year, month, day);
+                } else if ((i - start_of_month) + 1 > date_time.days_in_month()) {
+                    month = (target_month + 1) > 12 ? 1 : target_month + 1;
+                    year = (month == 1) ? target_year + 1 : target_year;
+                    day = ((i - start_of_month) + 1) - date_time.days_in_month();
+                    date_time.set_time(year, month, day);
+                } else {
+                    month = target_month;
+                    year = target_year;
+                    day = (i - start_of_month) + 1;
+                    date_time.set_time(year, month, day);
+                }
+
+                m_calendar_tiles[i]->update_values(i, date_time);
+                m_calendar_tiles[i]->set_selected(date_time.year() == m_selected_date.year() && date_time.month() == m_selected_date.month() && date_time.day() == m_selected_date.day());
+                m_calendar_tiles[i]->set_outside_selection(date_time.month() != selected_month() || date_time.year() != selected_year());
+                m_calendar_tiles[i]->update();
+                i++;
+            }
+    } else {
+        for (int i = 0; i < 12; i++) {
+            auto date_time = Core::DateTime::create(target_year, i + 1, 1);
+            m_month_tiles[i]->update_values(date_time);
+        }
+    }
+}
+
+const String Calendar::selected_calendar_text(bool long_names)
+{
+    if (mode() == Month)
+        return String::format("%s %u", long_names ? long_month_names[m_selected_month - 1] : short_month_names[m_selected_month - 1], m_selected_year);
+    else
+        return String::format("%u", m_selected_year);
+}
+
+void Calendar::set_selected_calendar(unsigned int year, unsigned int month)
+{
+    m_selected_year = year;
+    m_selected_month = month;
+}
+
+Calendar::MonthTile::MonthTile(int index, Core::DateTime date_time)
+    : m_index(index)
+    , m_date_time(date_time)
+{
+}
+
+Calendar::MonthTile::~MonthTile()
+{
+}
+
+void Calendar::MonthTile::mouseup_event(GUI::MouseEvent& event)
+{
+    if (on_indexed_click)
+        on_indexed_click(m_index);
+
+    GUI::Button::mouseup_event(event);
+}
+
+Calendar::CalendarTile::CalendarTile(int index, Core::DateTime date_time)
+{
+    set_frame_thickness(0);
+    update_values(index, date_time);
+}
+
+void Calendar::CalendarTile::update_values(int index, Core::DateTime date_time)
+{
+    m_index = index;
+    m_date_time = date_time;
+    m_display_date = (m_date_time.day() == 1) ? String::format("%s %u", short_month_names[m_date_time.month() - 1], m_date_time.day()) : String::number(m_date_time.day());
+}
+
+Calendar::CalendarTile::~CalendarTile()
+{
+}
+
+void Calendar::CalendarTile::doubleclick_event(GUI::MouseEvent&)
+{
+    if (on_doubleclick)
+        on_doubleclick(m_index);
+}
+
+void Calendar::CalendarTile::mousedown_event(GUI::MouseEvent&)
+{
+    if (on_click)
+        on_click(m_index);
+}
+void Calendar::CalendarTile::enter_event(Core::Event&)
+{
+    m_hovered = true;
+    update();
+}
+
+void Calendar::CalendarTile::leave_event(Core::Event&)
+{
+    m_hovered = false;
+    update();
+}
+
+bool Calendar::CalendarTile::is_today() const
+{
+    auto current_date_time = Core::DateTime::now();
+    return m_date_time.day() == current_date_time.day() && m_date_time.month() == current_date_time.month() && m_date_time.year() == current_date_time.year();
+}
+
+void Calendar::CalendarTile::paint_event(GUI::PaintEvent& event)
+{
+    GUI::Frame::paint_event(event);
+
+    GUI::Painter painter(*this);
+    painter.add_clip_rect(frame_inner_rect());
+
+    if (is_hovered() || is_selected())
+        painter.fill_rect(frame_inner_rect(), palette().hover_highlight());
+    else
+        painter.fill_rect(frame_inner_rect(), palette().base());
+
+    if (m_index < 7)
+        painter.draw_line(frame_inner_rect().top_left(), frame_inner_rect().top_right(), Color::NamedColor::Black);
+    if (!((m_index + 1) % 7 == 0) && has_grid())
+        painter.draw_line(frame_inner_rect().top_right(), frame_inner_rect().bottom_right(), Color::NamedColor::Black);
+    if (m_index < 35 && has_grid())
+        painter.draw_line(frame_inner_rect().bottom_left(), frame_inner_rect().bottom_right(), Color::NamedColor::Black);
+
+    Gfx::IntRect day_rect;
+    if (has_grid()) {
+        day_rect = Gfx::IntRect(frame_inner_rect().x(), frame_inner_rect().y(), frame_inner_rect().width(), font().glyph_height() + 4);
+        day_rect.set_y(frame_inner_rect().y() + 4);
+    } else {
+        day_rect = Gfx::IntRect(frame_inner_rect());
+    }
+
+    int highlight_rect_width = (font().glyph_width('0') * (m_display_date.length() + 1)) + 2;
+    auto display_date = (m_date_time.day() == 1 && frame_inner_rect().width() > highlight_rect_width) ? m_display_date : String::number(m_date_time.day());
+
+    if (is_today()) {
+        if (has_grid()) {
+            auto highlight_rect = Gfx::IntRect(day_rect.width() / 2 - (highlight_rect_width / 2), day_rect.y(), highlight_rect_width, font().glyph_height() + 4);
+            painter.draw_rect(highlight_rect, palette().base_text());
+        } else if (is_selected()) {
+            painter.draw_rect(frame_inner_rect(), palette().base_text());
+        }
+        painter.draw_text(day_rect, display_date, Gfx::Font::default_bold_font(), Gfx::TextAlignment::Center, palette().base_text());
+    } else if (is_outside_selection()) {
+        painter.draw_text(day_rect, display_date, Gfx::Font::default_font(), Gfx::TextAlignment::Center, Color::LightGray);
+    } else {
+        if (!has_grid() && is_selected())
+            painter.draw_rect(frame_inner_rect(), palette().base_text());
+        painter.draw_text(day_rect, display_date, Gfx::Font::default_font(), Gfx::TextAlignment::Center, palette().base_text());
+    }
+}
+
+}
diff --git a/Libraries/LibGUI/Calendar.h b/Libraries/LibGUI/Calendar.h
new file mode 100644
index 0000000000..a160665591
--- /dev/null
+++ b/Libraries/LibGUI/Calendar.h
@@ -0,0 +1,142 @@
+/*
+ * Copyright (c) 2019-2020, Ryan Grieb <ryan.m.grieb@gmail.com>
+ * Copyright (c) 2020, the SerenityOS developers.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice, this
+ *    list of conditions and the following disclaimer.
+ *
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ *    this list of conditions and the following disclaimer in the documentation
+ *    and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+ * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+ * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#pragma once
+
+#include <AK/String.h>
+#include <LibCore/DateTime.h>
+#include <LibGUI/Button.h>
+#include <LibGUI/Frame.h>
+#include <LibGUI/Label.h>
+#include <LibGUI/Widget.h>
+
+namespace GUI {
+
+class Calendar final : public GUI::Widget {
+    C_OBJECT(Calendar)
+
+public:
+    enum Mode {
+        Month,
+        Year
+    };
+
+    enum {
+        ShortNames,
+        LongNames
+    };
+
+    Calendar(Core::DateTime);
+    virtual ~Calendar() override;
+
+    unsigned int selected_year() const { return m_selected_year; }
+    unsigned int selected_month() const { return m_selected_month; }
+    const String selected_calendar_text(bool long_names = ShortNames);
+    void update_tiles(unsigned int target_year, unsigned int target_month);
+    void set_selected_calendar(unsigned int year, unsigned int month);
+    void set_selected_date(Core::DateTime date_time) { m_selected_date = date_time; }
+    Core::DateTime selected_date() const { return m_selected_date; }
+    void toggle_mode();
+    void set_grid(bool grid);
+    bool has_grid() { return m_grid; }
+    Mode mode() const { return m_mode; }
+
+    Function<void()> on_calendar_tile_click;
+    Function<void()> on_calendar_tile_doubleclick;
+    Function<void()> on_month_tile_click;
+
+private:
+    virtual void resize_event(GUI::ResizeEvent&) override;
+
+    class CalendarTile final : public GUI::Frame {
+        C_OBJECT(CalendarTile)
+    public:
+        CalendarTile(int index, Core::DateTime m_date_time);
+        void update_values(int index, Core::DateTime date_time);
+        virtual ~CalendarTile() override;
+        bool is_today() const;
+        bool is_hovered() const { return m_hovered; }
+        bool is_selected() const { return m_selected; }
+        void set_selected(bool b) { m_selected = b; }
+        bool is_outside_selection() const { return m_outside_selection; }
+        void set_outside_selection(bool b) { m_outside_selection = b; }
+        bool has_grid() const { return m_grid; }
+        void set_grid(bool b) { m_grid = b; }
+        Core::DateTime get_date_time() { return m_date_time; }
+        Function<void(int index)> on_doubleclick;
+        Function<void(int index)> on_click;
+
+    private:
+        virtual void doubleclick_event(GUI::MouseEvent&) override;
+        virtual void mousedown_event(GUI::MouseEvent&) override;
+        virtual void enter_event(Core::Event&) override;
+        virtual void leave_event(Core::Event&) override;
+        virtual void paint_event(GUI::PaintEvent&) override;
+
+        int m_index { 0 };
+        bool m_outside_selection { false };
+        bool m_hovered { false };
+        bool m_selected { false };
+        bool m_grid { true };
+        String m_display_date;
+        Core::DateTime m_date_time;
+    };
+
+    class MonthTile final : public GUI::Button {
+        C_OBJECT(MonthTile)
+    public:
+        MonthTile(int index, Core::DateTime m_date_time);
+        virtual ~MonthTile() override;
+        void update_values(Core::DateTime date_time) { m_date_time = date_time; }
+        Core::DateTime get_date_time() { return m_date_time; }
+        Function<void(int index)> on_indexed_click;
+
+    private:
+        virtual void mouseup_event(GUI::MouseEvent&) override;
+
+        int m_index { 0 };
+        Core::DateTime m_date_time;
+    };
+
+    RefPtr<MonthTile> m_month_tiles[12];
+    RefPtr<CalendarTile> m_calendar_tiles[42];
+    RefPtr<GUI::Label> m_day_names[7];
+    RefPtr<GUI::Widget> m_week_rows[6];
+    RefPtr<GUI::Widget> m_month_rows[3];
+    RefPtr<GUI::Widget> m_month_tile_container;
+    RefPtr<GUI::Widget> m_calendar_tile_container;
+    RefPtr<GUI::Widget> m_day_name_container;
+
+    Core::DateTime m_selected_date;
+    Core::DateTime m_previous_selected_date;
+    unsigned int m_selected_year { 0 };
+    unsigned int m_selected_month { 0 };
+    bool m_grid { true };
+    Mode m_mode { Month };
+};
+
+}