Draw and event position relative to parent (for pages)

15 files changed, 280 insertions, 150 deletions

diff --git a/include/Theme.hpp b/include/Theme.hpp
index 182d264..69589e6 100644
--- a/include/Theme.hpp
+++ b/include/Theme.hpp
@@ -11,6 +11,7 @@ namespace gsr {
         Theme& operator=(const Theme&) = delete;
 
         mgl::Color tint_color = mgl::Color(118, 185, 0);
+        mgl::Color scrollable_page_bg_color = mgl::Color(38, 43, 47);
     };
 
     void init_theme(const gsr::GsrInfo &gsr_info);
diff --git a/include/gui/Button.hpp b/include/gui/Button.hpp
index 972e5c9..88399ae 100644
--- a/include/gui/Button.hpp
+++ b/include/gui/Button.hpp
@@ -1,25 +1,28 @@
 #pragma once
 
 #include "Widget.hpp"
-#include <string>
 #include <functional>
 
+#include <mglpp/graphics/Color.hpp>
+#include <mglpp/graphics/Text.hpp>
+
 namespace gsr {
     class Button : public Widget {
     public:
-        Button(mgl::vec2f size);
+        Button(mgl::Font *font, const char *text, mgl::vec2f size, mgl::Color bg_color);
         Button(const Button&) = delete;
         Button& operator=(const Button&) = delete;
 
-        bool on_event(mgl::Event &event, mgl::Window &window) override;
-        void draw(mgl::Window &window) override;
+        bool on_event(mgl::Event &event, mgl::Window &window, mgl::vec2f offset) override;
+        void draw(mgl::Window &window, mgl::vec2f offset) override;
 
         mgl::vec2f get_size() const { return size; }
 
         std::function<void()> on_click;
     private:
         mgl::vec2f size;
+        mgl::Color bg_color;
         bool mouse_inside = false;
-        bool pressed_inside = false;
+        mgl::Text text;
     };
 }
\ No newline at end of file
diff --git a/include/gui/ComboBox.hpp b/include/gui/ComboBox.hpp
index 5c899a7..05bd236 100644
--- a/include/gui/ComboBox.hpp
+++ b/include/gui/ComboBox.hpp
@@ -12,8 +12,8 @@ namespace gsr {
         ComboBox(const ComboBox&) = delete;
         ComboBox& operator=(const ComboBox&) = delete;
 
-        bool on_event(mgl::Event &event, mgl::Window &window) override;
-        void draw(mgl::Window &window) override;
+        bool on_event(mgl::Event &event, mgl::Window &window, mgl::vec2f offset) override;
+        void draw(mgl::Window &window, mgl::vec2f offset) override;
 
         void add_item(const std::string &text, const std::string &id);
 
diff --git a/include/gui/DropdownButton.hpp b/include/gui/DropdownButton.hpp
index bcf769c..c967f58 100644
--- a/include/gui/DropdownButton.hpp
+++ b/include/gui/DropdownButton.hpp
@@ -14,8 +14,8 @@ namespace gsr {
         DropdownButton(const DropdownButton&) = delete;
         DropdownButton& operator=(const DropdownButton&) = delete;
 
-        bool on_event(mgl::Event &event, mgl::Window &window) override;
-        void draw(mgl::Window &window) override;
+        bool on_event(mgl::Event &event, mgl::Window &window, mgl::vec2f offset) override;
+        void draw(mgl::Window &window, mgl::vec2f offset) override;
 
         void add_item(const std::string &text, const std::string &id);
         void set_item_label(const std::string &id, const std::string &new_label);
diff --git a/include/gui/Page.hpp b/include/gui/Page.hpp
index 1435e68..a5cfaf9 100644
--- a/include/gui/Page.hpp
+++ b/include/gui/Page.hpp
@@ -1,27 +1,19 @@
 #pragma once
 
+#include "Widget.hpp"
 #include <vector>
 #include <memory>
 
-namespace mgl {
-    class Event;
-    class Window;
-}
-
 namespace gsr {
-    class Widget;
-
-    class Page {
+    class Page : public Widget {
     public:
         Page() = default;
         Page(const Page&) = delete;
         Page& operator=(const Page&) = delete;
+        virtual ~Page() = default;
 
         void add_widget(std::unique_ptr<Widget> widget);
-
-        void on_event(mgl::Event &event, mgl::Window &window);
-        void draw(mgl::Window &window);
-    private:
+    protected:
         std::vector<std::unique_ptr<Widget>> widgets;
     };
 }
\ No newline at end of file
diff --git a/include/gui/ScrollablePage.hpp b/include/gui/ScrollablePage.hpp
new file mode 100644
index 0000000..8fab62f
--- /dev/null
+++ b/include/gui/ScrollablePage.hpp
@@ -0,0 +1,21 @@
+#pragma once
+
+#include "Page.hpp"
+
+namespace gsr {
+    class ScrollablePage : public Page {
+    public:
+        ScrollablePage(mgl::vec2f size);
+        ScrollablePage(const ScrollablePage&) = delete;
+        ScrollablePage& operator=(const ScrollablePage&) = delete;
+
+        bool on_event(mgl::Event &event, mgl::Window &window, mgl::vec2f offset) override;
+        void draw(mgl::Window &window, mgl::vec2f offset) override;
+
+        mgl::vec2f get_size() const { return size; }
+    private:
+        float get_border_size(mgl::Window &window) const;
+    private:
+        mgl::vec2f size;
+    };
+}
\ No newline at end of file
diff --git a/include/gui/StaticPage.hpp b/include/gui/StaticPage.hpp
new file mode 100644
index 0000000..cc15531
--- /dev/null
+++ b/include/gui/StaticPage.hpp
@@ -0,0 +1,15 @@
+#pragma once
+
+#include "Page.hpp"
+
+namespace gsr {
+    class StaticPage : public Page {
+    public:
+        StaticPage() = default;
+        StaticPage(const StaticPage&) = delete;
+        StaticPage& operator=(const StaticPage&) = delete;
+
+        bool on_event(mgl::Event &event, mgl::Window &window, mgl::vec2f offset) override;
+        void draw(mgl::Window &window, mgl::vec2f offset) override;
+    };
+}
\ No newline at end of file
diff --git a/include/gui/Widget.hpp b/include/gui/Widget.hpp
index 6324490..bd0d5d9 100644
--- a/include/gui/Widget.hpp
+++ b/include/gui/Widget.hpp
@@ -9,7 +9,8 @@ namespace mgl {
 
 namespace gsr {
     class Widget {
-        friend class Page;
+        friend class StaticPage;
+        friend class ScrollablePage;
     public:
         Widget();
         Widget(const Widget&) = delete;
@@ -17,8 +18,8 @@ namespace gsr {
         virtual ~Widget();
 
         // Return true to allow other widgets to also process the event
-        virtual bool on_event(mgl::Event &event, mgl::Window &window) = 0;
-        virtual void draw(mgl::Window &window) = 0;
+        virtual bool on_event(mgl::Event &event, mgl::Window &window, mgl::vec2f offset) = 0;
+        virtual void draw(mgl::Window &window, mgl::vec2f offset) = 0;
         virtual void set_position(mgl::vec2f position);
 
         virtual mgl::vec2f get_position() const;
diff --git a/src/gui/Button.cpp b/src/gui/Button.cpp
index 3cad31f..48ab085 100644
--- a/src/gui/Button.cpp
+++ b/src/gui/Button.cpp
@@ -1,4 +1,5 @@
 #include "../../include/gui/Button.hpp"
+#include "../../include/gui/Utils.hpp"
 #include "../../include/Theme.hpp"
 #include <mglpp/graphics/Rectangle.hpp>
 #include <mglpp/window/Window.hpp>
@@ -6,80 +7,39 @@
 #include <mglpp/system/FloatRect.hpp>
 
 namespace gsr {
-    Button::Button(mgl::vec2f size) : size(size) {
+    Button::Button(mgl::Font *font, const char *text, mgl::vec2f size, mgl::Color bg_color) : size(size), bg_color(bg_color), text(text, *font) {
 
     }
 
-    bool Button::on_event(mgl::Event &event, mgl::Window&) {
+    bool Button::on_event(mgl::Event &event, mgl::Window&, mgl::vec2f offset) {
         if(event.type == mgl::Event::MouseMoved) {
-            const mgl::vec2f collision_margin(1.0f, 1.0f); // Makes sure that multiple buttons that are next to each other wont activate at the same time when the cursor is right between them
-            const bool inside = mgl::FloatRect(position + collision_margin, size - collision_margin).contains({ (float)event.mouse_move.x, (float)event.mouse_move.y });
+            const bool inside = mgl::FloatRect(position + offset, size).contains({ (float)event.mouse_move.x, (float)event.mouse_move.y });
             if(mouse_inside && !inside) {
                 mouse_inside = false;
             } else if(!mouse_inside && inside) {
                 mouse_inside = true;
             }
         } else if(event.type == mgl::Event::MouseButtonPressed) {
-            pressed_inside = mouse_inside;
-        } else if(event.type == mgl::Event::MouseButtonReleased) {
-            const bool clicked_inside = pressed_inside && mouse_inside;
-            pressed_inside = false;
+            const bool clicked_inside = mouse_inside;
             if(clicked_inside && on_click)
                 on_click();
         }
         return true;
     }
 
-    void Button::draw(mgl::Window &window) {
-        if(mouse_inside) {
-            // Background
-            {
-                mgl::Rectangle rect(size);
-                rect.set_position(position);
-                rect.set_color(mgl::Color(0, 0, 0, 255));
-                window.draw(rect);
-            }
+    void Button::draw(mgl::Window &window, mgl::vec2f offset) {
+        mgl::Rectangle background(size);
+        background.set_position(position + offset);
+        background.set_color(bg_color);
+        window.draw(background);
+
+        text.set_position((position + offset + size * 0.5f - text.get_bounds().size * 0.5f).floor());
+        window.draw(text);
 
+        if(mouse_inside) {
             const int border_size = 5;
             const mgl::Color border_color = gsr::get_theme().tint_color;
-
-            // Green line at top
-            {
-                mgl::Rectangle rect({ size.x, border_size });
-                rect.set_position(position);
-                rect.set_color(border_color);
-                window.draw(rect);
-            }
-
-            // Green line at bottom
-            {
-                mgl::Rectangle rect({ size.x, border_size });
-                rect.set_position(position + mgl::vec2f(0.0f, size.y - border_size));
-                rect.set_color(border_color);
-                window.draw(rect);
-            }
-
-            // Green line at left
-            {
-                mgl::Rectangle rect({ border_size, size.y - border_size * 2 });
-                rect.set_position(position + mgl::vec2f(0, border_size));
-                rect.set_color(border_color);
-                window.draw(rect);
-            }
-
-            // Green line at right
-            {
-                mgl::Rectangle rect({ border_size, size.y - border_size * 2 });
-                rect.set_position(position + mgl::vec2f(size.x - border_size, border_size));
-                rect.set_color(border_color);
-                window.draw(rect);
-            }
-        } else {
-            // Background
-            mgl::Rectangle rect(size);
-            rect.set_position(position);
-            rect.set_color(mgl::Color(0, 0, 0, 220));
-            window.draw(rect);
+            draw_rectangle_outline(window, position, size, border_color, border_size);
         }
     }
 }
\ No newline at end of file
diff --git a/src/gui/ComboBox.cpp b/src/gui/ComboBox.cpp
index dd683e1..6b8ec26 100644
--- a/src/gui/ComboBox.cpp
+++ b/src/gui/ComboBox.cpp
@@ -17,13 +17,14 @@ namespace gsr {
         assert(font);
     }
 
-    bool ComboBox::on_event(mgl::Event &event, mgl::Window&) {
+    bool ComboBox::on_event(mgl::Event &event, mgl::Window&, mgl::vec2f offset) {
         if(event.type == mgl::Event::MouseButtonPressed && event.mouse_button.button == mgl::Mouse::Left) {
+            const mgl::vec2f draw_pos = position + offset;
             const mgl::vec2f mouse_pos = { (float)event.mouse_button.x, (float)event.mouse_button.y };
             const mgl::vec2f item_size(max_size.x, font->get_character_size() + padding_top + padding_bottom);
 
             if(show_dropdown && !items.empty()) {
-                mgl::vec2f pos = position + mgl::vec2f(padding_left, padding_top);
+                mgl::vec2f pos = draw_pos + mgl::vec2f(padding_left, padding_top);
                 pos.y += items[selected_item].text.get_bounds().size.y + padding_top + padding_bottom;
 
                 for(size_t i = 0; i < items.size(); ++i) {
@@ -38,7 +39,7 @@ namespace gsr {
                 }
             }
 
-            if(mgl::FloatRect(position, item_size).contains(mouse_pos)) {
+            if(mgl::FloatRect(draw_pos, item_size).contains(mouse_pos)) {
                 show_dropdown = !show_dropdown;
                 move_to_top = true;
             } else {
@@ -48,26 +49,28 @@ namespace gsr {
         return true;
     }
 
-    void ComboBox::draw(mgl::Window &window) {
+    void ComboBox::draw(mgl::Window &window, mgl::vec2f offset) {
         update_if_dirty();
 
         if(items.empty())
             return;
 
+        const mgl::vec2f draw_pos = position + offset;
+
         const mgl::vec2f item_size(max_size.x, font->get_character_size() + padding_top + padding_bottom);
         const mgl::vec2i mouse_pos = window.get_mouse_position();
         bool inside = false;
 
-        mgl::Rectangle background(position, mgl::vec2f(max_size.x, item_size.y));
+        mgl::Rectangle background(draw_pos, mgl::vec2f(max_size.x, item_size.y));
         if(show_dropdown) {
             background.set_size(max_size);
             background.set_color(mgl::Color(0, 0, 0));
         } else {
-            background.set_color(mgl::Color(0, 0, 0, 220));
+            background.set_color(mgl::Color(0, 0, 0, 120));
         }
         window.draw(background);
 
-        mgl::vec2f pos = position + mgl::vec2f(padding_left, padding_top);
+        mgl::vec2f pos = draw_pos + mgl::vec2f(padding_left, padding_top);
 
         Item &item = items[selected_item];
         item.text.set_position(pos.floor());
diff --git a/src/gui/DropdownButton.cpp b/src/gui/DropdownButton.cpp
index 9610e26..ecc284a 100644
--- a/src/gui/DropdownButton.cpp
+++ b/src/gui/DropdownButton.cpp
@@ -25,10 +25,11 @@ namespace gsr {
         this->description.set_color(mgl::Color(150, 150, 150));
     }
 
-    bool DropdownButton::on_event(mgl::Event &event, mgl::Window&) {
+    bool DropdownButton::on_event(mgl::Event &event, mgl::Window&, mgl::vec2f offset) {
         if(event.type == mgl::Event::MouseMoved) {
+            const mgl::vec2f draw_pos = position + offset;
             const mgl::vec2f collision_margin(1.0f, 1.0f); // Makes sure that multiple buttons that are next to each other wont activate at the same time when the cursor is right between them
-            const bool inside = mgl::FloatRect(position + collision_margin, size - collision_margin).contains({ (float)event.mouse_move.x, (float)event.mouse_move.y });
+            const bool inside = mgl::FloatRect(draw_pos + collision_margin, size - collision_margin).contains({ (float)event.mouse_move.x, (float)event.mouse_move.y });
             if(mouse_inside && !inside) {
                 mouse_inside = false;
             } else if(!mouse_inside && inside) {
@@ -43,14 +44,16 @@ namespace gsr {
         return true;
     }
 
-    void DropdownButton::draw(mgl::Window &window) {
+    void DropdownButton::draw(mgl::Window &window, mgl::vec2f offset) {
         update_if_dirty();
 
+        const mgl::vec2f draw_pos = position + offset;
+
         if(show_dropdown) {
             // Background
             {
                 mgl::Rectangle rect(size);
-                rect.set_position(position);
+                rect.set_position(draw_pos);
                 rect.set_color(mgl::Color(0, 0, 0, 255));
                 window.draw(rect);
             }
@@ -60,7 +63,7 @@ namespace gsr {
             // Green line at top
             {
                 mgl::Rectangle rect({ size.x, border_size });
-                rect.set_position(position);
+                rect.set_position(draw_pos);
                 rect.set_color(border_color);
                 window.draw(rect);
             }
@@ -68,33 +71,33 @@ namespace gsr {
             // Background
             {
                 mgl::Rectangle rect(size);
-                rect.set_position(position);
+                rect.set_position(draw_pos);
                 rect.set_color(mgl::Color(0, 0, 0, 255));
                 window.draw(rect);
             }
 
             const mgl::Color border_color = gsr::get_theme().tint_color;
-            draw_rectangle_outline(window, position, size, border_color, border_size);
+            draw_rectangle_outline(window, draw_pos, size, border_color, border_size);
         } else {
             // Background
             mgl::Rectangle rect(size);
-            rect.set_position(position);
-            rect.set_color(mgl::Color(0, 0, 0, 220));
+            rect.set_position(draw_pos);
+            rect.set_color(mgl::Color(0, 0, 0, 120));
             window.draw(rect);
         }
 
         const int text_margin = size.y * 0.085;
 
         const auto title_bounds = title.get_bounds();
-        title.set_position((position + mgl::vec2f(size.x * 0.5f - title_bounds.size.x * 0.5f, text_margin)).floor());
+        title.set_position((draw_pos + mgl::vec2f(size.x * 0.5f - title_bounds.size.x * 0.5f, text_margin)).floor());
         window.draw(title);
 
         const auto description_bounds = description.get_bounds();
-        description.set_position((position + mgl::vec2f(size.x * 0.5f - description_bounds.size.x * 0.5f, size.y - description_bounds.size.y - text_margin)).floor());
+        description.set_position((draw_pos + mgl::vec2f(size.x * 0.5f - description_bounds.size.x * 0.5f, size.y - description_bounds.size.y - text_margin)).floor());
         window.draw(description);
 
         if(icon_sprite.get_texture()->is_valid()) {
-            icon_sprite.set_position((position + size * 0.5f - icon_sprite.get_size() * 0.5f).floor());
+            icon_sprite.set_position((draw_pos + size * 0.5f - icon_sprite.get_size() * 0.5f).floor());
             window.draw(icon_sprite);
         }
 
@@ -103,7 +106,7 @@ namespace gsr {
             const mgl::vec2i mouse_pos = window.get_mouse_position();
 
             mgl::Rectangle dropdown_bg(max_size);
-            dropdown_bg.set_position(position + mgl::vec2f(0.0f, size.y));
+            dropdown_bg.set_position(draw_pos + mgl::vec2f(0.0f, size.y));
             dropdown_bg.set_color(mgl::Color(0, 0, 0));
             window.draw(dropdown_bg);
 
diff --git a/src/gui/Page.cpp b/src/gui/Page.cpp
index 813c2bd..19e3f2c 100644
--- a/src/gui/Page.cpp
+++ b/src/gui/Page.cpp
@@ -1,30 +1,7 @@
 #include "../../include/gui/Page.hpp"
-#include "../../include/gui/Widget.hpp"
 
 namespace gsr {
     void Page::add_widget(std::unique_ptr<Widget> widget) {
         widgets.push_back(std::move(widget));
     }
-
-    void Page::on_event(mgl::Event &event, mgl::Window &window) {
-        // Process widgets by visibility (backwards)
-        for(auto it = widgets.rbegin(), end = widgets.rend(); it != end; ++it) {
-            if(!(*it)->on_event(event, window))
-                return;
-        }
-    }
-
-    void Page::draw(mgl::Window &window) {
-        for(auto &widget : widgets) {
-            if(widget->move_to_top) {
-                widget->move_to_top = false;
-                std::swap(widget, widgets.back());
-            }
-            widget->draw(window);
-        }
-
-        for(auto &widget : widgets) {
-            widget->draw(window);
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/gui/ScrollablePage.cpp b/src/gui/ScrollablePage.cpp
new file mode 100644
index 0000000..4a4f88b
--- /dev/null
+++ b/src/gui/ScrollablePage.cpp
@@ -0,0 +1,53 @@
+#include "../../include/gui/ScrollablePage.hpp"
+#include "../../include/Theme.hpp"
+
+#include <mglpp/graphics/Rectangle.hpp>
+#include <mglpp/window/Window.hpp>
+
+namespace gsr {
+    ScrollablePage::ScrollablePage(mgl::vec2f size) : size(size) {}
+
+    bool ScrollablePage::on_event(mgl::Event &event, mgl::Window &window, mgl::vec2f offset) {
+        const mgl::vec2f draw_pos = position + offset;
+        offset = draw_pos + mgl::vec2f(0.0f, get_border_size(window)).floor();
+
+        // Process widgets by visibility (backwards)
+        for(auto it = widgets.rbegin(), end = widgets.rend(); it != end; ++it) {
+            if(!(*it)->on_event(event, window, offset))
+                return false;
+        }
+
+        return true;
+    }
+
+    void ScrollablePage::draw(mgl::Window &window, mgl::vec2f offset) {
+        const mgl::vec2f draw_pos = position + offset;
+        offset = draw_pos + mgl::vec2f(0.0f, get_border_size(window)).floor();
+
+        mgl::Rectangle background(size);
+        background.set_position(draw_pos);
+        background.set_color(get_theme().scrollable_page_bg_color);
+        window.draw(background);
+
+        mgl::Rectangle border(mgl::vec2f(size.x, get_border_size(window)).floor());
+        border.set_position(draw_pos);
+        border.set_color(get_theme().tint_color);
+        window.draw(border);
+
+        for(auto &widget : widgets) {
+            if(widget->move_to_top) {
+                widget->move_to_top = false;
+                std::swap(widget, widgets.back());
+            }
+            widget->draw(window, offset);
+        }
+
+        for(auto &widget : widgets) {
+            widget->draw(window, offset);
+        }
+    }
+
+    float ScrollablePage::get_border_size(mgl::Window &window) const {
+        return window.get_size().y * 0.004f;
+    }
+}
\ No newline at end of file
diff --git a/src/gui/StaticPage.cpp b/src/gui/StaticPage.cpp
new file mode 100644
index 0000000..78fa497
--- /dev/null
+++ b/src/gui/StaticPage.cpp
@@ -0,0 +1,33 @@
+#include "../../include/gui/StaticPage.hpp"
+
+namespace gsr {
+    bool StaticPage::on_event(mgl::Event &event, mgl::Window &window, mgl::vec2f offset) {
+        const mgl::vec2f draw_pos = position + offset;
+        offset = draw_pos;
+
+        // Process widgets by visibility (backwards)
+        for(auto it = widgets.rbegin(), end = widgets.rend(); it != end; ++it) {
+            if(!(*it)->on_event(event, window, offset))
+                return false;
+        }
+
+        return true;
+    }
+
+    void StaticPage::draw(mgl::Window &window, mgl::vec2f offset) {
+        const mgl::vec2f draw_pos = position + offset;
+        offset = draw_pos;
+
+        for(auto &widget : widgets) {
+            if(widget->move_to_top) {
+                widget->move_to_top = false;
+                std::swap(widget, widgets.back());
+            }
+            widget->draw(window, offset);
+        }
+
+        for(auto &widget : widgets) {
+            widget->draw(window, offset);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/main.cpp b/src/main.cpp
index dd607ea..dcb7bbe 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -1,6 +1,8 @@
 
-#include "../include/gui/Page.hpp"
+#include "../include/gui/StaticPage.hpp"
+#include "../include/gui/ScrollablePage.hpp"
 #include "../include/gui/DropdownButton.hpp"
+#include "../include/gui/Button.hpp"
 #include "../include/gui/ComboBox.hpp"
 #include "../include/Process.hpp"
 #include "../include/Theme.hpp"
@@ -235,8 +237,31 @@ int main(int argc, char **argv) {
     mgl::Rectangle bg_screenshot_overlay(window.get_size().to_vec2f());
     bg_screenshot_overlay.set_color(bg_color);
 
-    gsr::Page front_page;
-    gsr::Page replay_settings_page;
+    gsr::StaticPage front_page;
+
+    const mgl::vec2f settings_page_size(window_size.x * 0.3333f, window_size.y * 0.7f);
+    const mgl::vec2f settings_page_position = (window_size.to_vec2f() * 0.5f - settings_page_size * 0.5f).floor();
+
+    auto replay_settings_content = std::make_unique<gsr::ScrollablePage>(settings_page_size);
+    gsr::ScrollablePage *replay_settings_content_ptr = replay_settings_content.get();
+    replay_settings_content->set_position(settings_page_position);
+
+    auto record_settings_content = std::make_unique<gsr::ScrollablePage>(settings_page_size);
+    gsr::ScrollablePage *record_settings_content_ptr = record_settings_content.get();
+    record_settings_content->set_position(settings_page_position);
+
+    auto stream_settings_content = std::make_unique<gsr::ScrollablePage>(settings_page_size);
+    gsr::ScrollablePage *stream_settings_content_ptr = stream_settings_content.get();
+    stream_settings_content->set_position(settings_page_position);
+
+    gsr::StaticPage replay_settings_page;
+    replay_settings_page.add_widget(std::move(replay_settings_content));
+
+    gsr::StaticPage record_settings_page;
+    record_settings_page.add_widget(std::move(record_settings_content));
+
+    gsr::StaticPage stream_settings_page;
+    stream_settings_page.add_widget(std::move(stream_settings_content));
 
     gsr::Page *current_page = &front_page;
 
@@ -245,25 +270,27 @@ int main(int argc, char **argv) {
         gsr::GsrMode mode;
     };
 
-    const char *titles[] = {
+    const int num_frontpage_buttons = 3;
+
+    const char *titles[num_frontpage_buttons] = {
         "Instant Replay",
         "Record",
         "Livestream"
     };
 
-    const char *descriptions_off[] = {
+    const char *descriptions_off[num_frontpage_buttons] = {
         "Off",
         "Not recording",
         "Not streaming"
     };
 
-    const char *descriptions_on[] = {
+    const char *descriptions_on[num_frontpage_buttons] = {
         "On",
         "Recording",
         "Streaming"
     };
 
-    mgl::Texture *textures[] = {
+    mgl::Texture *textures[num_frontpage_buttons] = {
         &replay_button_texture,
         &record_button_texture,
         &stream_button_texture
@@ -274,7 +301,7 @@ int main(int argc, char **argv) {
 
     std::vector<MainButton> main_buttons;
 
-    for(int i = 0; i < 3; ++i) {
+    for(int i = 0; i < num_frontpage_buttons; ++i) {
         auto button = std::make_unique<gsr::DropdownButton>(&title_font, &font, titles[i], descriptions_on[i], descriptions_off[i], textures[i], mgl::vec2f(button_width, button_height));
         button->add_item("Start", "start");
         button->add_item("Settings", "settings");
@@ -322,6 +349,7 @@ int main(int argc, char **argv) {
     main_buttons[0].button->on_click = [&](const std::string &id) {
         if(id == "settings") {
             current_page = &replay_settings_page;
+            return;
         }
         /*
         char window_to_record_str[32];
@@ -343,6 +371,11 @@ int main(int argc, char **argv) {
 
     // Record
     main_buttons[1].button->on_click = [&](const std::string &id) {
+        if(id == "settings") {
+            current_page = &record_settings_page;
+            return;
+        }
+
         if(id != "start")
             return;
 
@@ -386,6 +419,13 @@ int main(int argc, char **argv) {
     };
     main_buttons[1].mode = gsr::GsrMode::Record;
 
+    // Stream
+    main_buttons[2].button->on_click = [&](const std::string &id) {
+        if(id == "settings") {
+            current_page = &stream_settings_page;
+            return;
+        }
+    };
     main_buttons[2].mode = gsr::GsrMode::Stream;
 
     update_overlay_shape();
@@ -413,28 +453,56 @@ int main(int argc, char **argv) {
     //XGrabServer(display);
 
     mgl::Rectangle top_bar_background(mgl::vec2f(window.get_size().x, window.get_size().y*0.06f).floor());
-    top_bar_background.set_color(mgl::Color(0, 0, 0, 220));
+    top_bar_background.set_color(mgl::Color(0, 0, 0, 200));
 
     mgl::Text top_bar_text("GPU Screen Recorder", top_bar_font);
     //top_bar_text.set_color(gsr::get_theme().tint_color);
     top_bar_text.set_position((top_bar_background.get_position() + top_bar_background.get_size()*0.5f - top_bar_text.get_bounds().size*0.5f).floor());
 
-    auto record_area_box = std::make_unique<gsr::ComboBox>(&title_font);
-    record_area_box->set_position(mgl::vec2f(300.0f, 300.0f));
-    if(gsr_info.supported_capture_options.window)
-        record_area_box->add_item("Window", "window");
-    if(gsr_info.supported_capture_options.focused)
-        record_area_box->add_item("Focused window", "focused");
-    if(gsr_info.supported_capture_options.screen)
-        record_area_box->add_item("All monitors", "screen");
-    for(const auto &monitor : gsr_info.supported_capture_options.monitors) {
-        char name[256];
-        snprintf(name, sizeof(name), "%s (%dx%d)", monitor.name.c_str(), monitor.size.x, monitor.size.y);
-        record_area_box->add_item(name, monitor.name);
+    const int num_settings_pages = 3;
+
+    gsr::Page *settings_pages[num_settings_pages] = {
+        &replay_settings_page,
+        &record_settings_page,
+        &stream_settings_page
+    };
+
+    gsr::Page *settings_content_pages[num_settings_pages] = {
+        replay_settings_content_ptr,
+        record_settings_content_ptr,
+        stream_settings_content_ptr
+    };
+
+    const auto settings_back_button_callback = [&] {
+        current_page = &front_page;
+    };
+
+    for(int i = 0; i < num_settings_pages; ++i) {
+        gsr::Page *settings_page = settings_pages[i];
+        gsr::Page *settings_content_page = settings_content_pages[i];
+
+        auto record_area_box = std::make_unique<gsr::ComboBox>(&title_font);
+        record_area_box->set_position(mgl::vec2f(300.0f, 300.0f));
+        if(gsr_info.supported_capture_options.window)
+            record_area_box->add_item("Window", "window");
+        if(gsr_info.supported_capture_options.focused)
+            record_area_box->add_item("Focused window", "focused");
+        if(gsr_info.supported_capture_options.screen)
+            record_area_box->add_item("All monitors", "screen");
+        for(const auto &monitor : gsr_info.supported_capture_options.monitors) {
+            char name[256];
+            snprintf(name, sizeof(name), "%s (%dx%d)", monitor.name.c_str(), monitor.size.x, monitor.size.y);
+            record_area_box->add_item(name, monitor.name);
+        }
+        if(gsr_info.supported_capture_options.portal)
+            record_area_box->add_item("Desktop portal", "portal");
+        settings_content_page->add_widget(std::move(record_area_box));
+
+        auto back_button = std::make_unique<gsr::Button>(&title_font, "Back", mgl::vec2f(window_size.x / 10, window_size.y / 15), gsr::get_theme().scrollable_page_bg_color);
+        back_button->set_position(settings_page_position + mgl::vec2f(settings_page_size.x + window_size.x / 50, 0.0f).floor());
+        back_button->on_click = settings_back_button_callback;
+        settings_page->add_widget(std::move(back_button));
     }
-    if(gsr_info.supported_capture_options.portal)
-        record_area_box->add_item("Desktop portal", "portal");
-    replay_settings_page.add_widget(std::move(record_area_box));
 
     // mgl::Text record_area_title("Record area", title_font);
     // record_area_title.set_position(mgl::vec2f(record_area_box.get_position().x, record_area_box.get_position().y - title_font.get_character_size() - 10.0f));
@@ -506,9 +574,9 @@ int main(int argc, char **argv) {
     event.type = mgl::Event::MouseMoved;
     event.mouse_move.x = window.get_mouse_position().x;
     event.mouse_move.y = window.get_mouse_position().y;
-    current_page->on_event(event, window);
+    current_page->on_event(event, window, mgl::vec2f(0.0f, 0.0f));
 
-    auto render = [&] {
+    const auto render = [&] {
         window.clear(bg_color);
         window.draw(screenshot_sprite);
         window.draw(bg_screenshot_overlay);
@@ -520,11 +588,11 @@ int main(int argc, char **argv) {
         // window.draw(audio_input_title);
         // window.draw(video_quality_title);
         // window.draw(framerate_title);
-        current_page->draw(window);
         window.draw(top_bar_background);
         window.draw(top_bar_text);
         window.draw(logo_sprite);
         window.draw(close_sprite);
+        current_page->draw(window, mgl::vec2f(0.0f, 0.0f));
         window.display();
     };
 
@@ -536,7 +604,7 @@ int main(int argc, char **argv) {
         }
 
         while(window.poll_event(event)) {
-            current_page->on_event(event, window);
+            current_page->on_event(event, window, mgl::vec2f(0.0f, 0.0f));
             if(event.type == mgl::Event::KeyPressed) {
                 if(event.key.code == mgl::Keyboard::Escape) {
                     window.set_visible(false);