DisplaySettings: Give the UI a facelift :^)

- Split the main UI into two tabs: "Background" and "Monitor".
- Use a GUI::IconView for selecting background pictures.
- Tweak layout, spacing, etc.

Base/home/anon/BackgroundSettings.gml

@@ -0,0 +1,65 @@
+@GUI::Widget {
+    fill_with_background_color: true
+
+    layout: @GUI::VerticalBoxLayout {
+        margins: [4, 4, 4, 4]
+    }
+
+    @DisplaySettings::MonitorWidget {
+        name: "monitor_widget"
+    }
+
+    @GUI::Widget {
+        shrink_to_fit: true
+        layout: @GUI::HorizontalBoxLayout
+
+        @GUI::Label {
+            text: "Wallpaper:"
+            text_alignment: "CenterLeft"
+            fixed_width: 70
+        }
+
+        @GUI::ComboBox {
+            name: "wallpaper_combo"
+        }
+
+        @GUI::Button {
+            name: "wallpaper_open_button"
+            tooltip: "Select wallpaper from file system."
+            button_style: "Coolbar"
+            fixed_width: 22
+            fixed_height: 22
+        }
+    }
+
+    @GUI::Widget {
+        shrink_to_fit: true
+        layout: @GUI::HorizontalBoxLayout
+
+        @GUI::Label {
+            text: "Modes:"
+            text_alignment: "CenterLeft"
+            fixed_width: 70
+        }
+
+        @GUI::ComboBox {
+            name: "mode_combo"
+        }
+    }
+
+    @GUI::Widget {
+        shrink_to_fit: true
+        layout: @GUI::HorizontalBoxLayout
+
+        @GUI::Label {
+            text: "Color:"
+            text_alignment: "CenterLeft"
+            fixed_width: 70
+        }
+
+        @GUI::ColorInput {
+            name: "color_input"
+            fixed_width: 90
+        }
+    }
+}

Userland/Applications/DisplaySettings/BackgroundSettings.gml

@@ -0,0 +1,77 @@
+@GUI::Widget {
+    fill_with_background_color: true
+
+    layout: @GUI::VerticalBoxLayout {
+        margins: [8, 8, 8, 8]
+    }
+
+    @DisplaySettings::MonitorWidget {
+        name: "monitor_widget"
+        fixed_width: 304
+        fixed_height: 201
+    }
+
+    @GUI::Widget {
+        fixed_height: 20
+    }
+
+    @GUI::Label {
+        shrink_to_fit: true
+        fixed_height: 16
+        text_alignment: "CenterLeft"
+        text: "Select a background picture:"
+    }
+
+    @GUI::Widget {
+        layout: @GUI::HorizontalBoxLayout {
+            spacing: 8
+        }
+
+        @GUI::IconView {
+            name: "wallpaper_view"
+        }
+
+        @GUI::Widget {
+            shrink_to_fit: true
+
+            layout: @GUI::VerticalBoxLayout {
+            }
+
+            @GUI::Button {
+                name: "wallpaper_open_button"
+                tooltip: "Select wallpaper from file system."
+                text: "Browse..."
+                shrink_to_fit: true
+            }
+
+            @GUI::Widget {
+                fixed_height: 12
+            }
+
+            @GUI::Label {
+                text: "Mode:"
+                text_alignment: "CenterLeft"
+                fixed_height: 16
+            }
+
+            @GUI::ComboBox {
+                name: "mode_combo"
+            }
+
+            @GUI::Widget {
+                fixed_height: 12
+            }
+
+            @GUI::Label {
+                text: "Color:"
+                text_alignment: "CenterLeft"
+                fixed_height: 16
+            }
+
+            @GUI::ColorInput {
+                name: "color_input"
+                fixed_width: 90
+            }
+        }
+    }
+}

Userland/Applications/DisplaySettings/BackgroundSettingsWidget.cpp

@@ -0,0 +1,142 @@
+/*
+ * Copyright (c) 2019-2020, Jesse Buhagiar <jooster669@gmail.com>
+ * Copyright (c) 2020-2021, Andreas Kling <kling@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include "BackgroundSettingsWidget.h"
+#include <AK/StringBuilder.h>
+#include <Applications/DisplaySettings/BackgroundSettingsGML.h>
+#include <LibCore/ConfigFile.h>
+#include <LibGUI/Application.h>
+#include <LibGUI/BoxLayout.h>
+#include <LibGUI/Button.h>
+#include <LibGUI/ComboBox.h>
+#include <LibGUI/Desktop.h>
+#include <LibGUI/FilePicker.h>
+#include <LibGUI/FileSystemModel.h>
+#include <LibGUI/IconView.h>
+#include <LibGUI/ItemListModel.h>
+#include <LibGUI/MessageBox.h>
+#include <LibGUI/RadioButton.h>
+#include <LibGUI/WindowServerConnection.h>
+#include <LibGfx/Palette.h>
+#include <LibGfx/SystemTheme.h>
+
+namespace DisplaySettings {
+
+BackgroundSettingsWidget::BackgroundSettingsWidget()
+{
+    m_modes.append("simple");
+    m_modes.append("tile");
+    m_modes.append("center");
+    m_modes.append("stretch");
+
+    create_frame();
+    load_current_settings();
+}
+
+BackgroundSettingsWidget::~BackgroundSettingsWidget()
+{
+}
+
+void BackgroundSettingsWidget::create_frame()
+{
+    load_from_gml(background_settings_gml);
+
+    m_monitor_widget = *find_descendant_of_type_named<DisplaySettings::MonitorWidget>("monitor_widget");
+
+    m_wallpaper_view = *find_descendant_of_type_named<GUI::IconView>("wallpaper_view");
+    m_wallpaper_view->set_model(GUI::FileSystemModel::create("/res/wallpapers"));
+    m_wallpaper_view->set_model_column(GUI::FileSystemModel::Column::Name);
+    m_wallpaper_view->on_selection_change = [this] {
+        String path;
+        if (m_wallpaper_view->selection().is_empty()) {
+            path = "";
+        } else {
+            auto index = m_wallpaper_view->selection().first();
+            path = static_cast<GUI::FileSystemModel*>(m_wallpaper_view->model())->full_path(index);
+        }
+
+        m_monitor_widget->set_wallpaper(path);
+        m_monitor_widget->update();
+    };
+
+    auto& button = *find_descendant_of_type_named<GUI::Button>("wallpaper_open_button");
+    button.set_icon(Gfx::Bitmap::load_from_file("/res/icons/16x16/open.png"));
+    button.on_click = [this](auto) {
+        auto path = GUI::FilePicker::get_open_filepath(nullptr, "Select wallpaper from file system.");
+        if (!path.has_value())
+            return;
+        m_wallpaper_view->selection().clear();
+        m_monitor_widget->set_wallpaper(path.value());
+    };
+
+    m_mode_combo = *find_descendant_of_type_named<GUI::ComboBox>("mode_combo");
+    m_mode_combo->set_only_allow_values_from_model(true);
+    m_mode_combo->set_model(*GUI::ItemListModel<String>::create(m_modes));
+    m_mode_combo->on_change = [this](auto&, const GUI::ModelIndex& index) {
+        m_monitor_widget->set_wallpaper_mode(m_modes.at(index.row()));
+        m_monitor_widget->update();
+    };
+
+    m_color_input = *find_descendant_of_type_named<GUI::ColorInput>("color_input");
+    m_color_input->set_color_has_alpha_channel(false);
+    m_color_input->set_color_picker_title("Select color for desktop");
+    m_color_input->on_change = [this] {
+        m_monitor_widget->set_background_color(m_color_input->color());
+        m_monitor_widget->update();
+    };
+}
+
+void BackgroundSettingsWidget::load_current_settings()
+{
+    auto ws_config = Core::ConfigFile::open("/etc/WindowServer.ini");
+    auto wm_config = Core::ConfigFile::get_for_app("WindowManager");
+
+    auto selected_wallpaper = wm_config->read_entry("Background", "Wallpaper", "");
+    if (!selected_wallpaper.is_empty()) {
+        m_monitor_widget->set_wallpaper(selected_wallpaper);
+        auto index = static_cast<GUI::FileSystemModel*>(m_wallpaper_view->model())->index(selected_wallpaper, m_wallpaper_view->model_column());
+        m_wallpaper_view->selection().set(index);
+    }
+
+    auto mode = ws_config->read_entry("Background", "Mode", "simple");
+    if (!m_modes.contains_slow(mode)) {
+        warnln("Invalid background mode '{}' in WindowServer config, falling back to 'simple'", mode);
+        mode = "simple";
+    }
+    m_monitor_widget->set_wallpaper_mode(mode);
+    m_mode_combo->set_selected_index(m_modes.find_first_index(mode).value_or(0));
+
+    auto palette_desktop_color = palette().desktop_background();
+    auto background_color = ws_config->read_entry("Background", "Color", "");
+
+    if (!background_color.is_empty()) {
+        auto opt_color = Color::from_string(background_color);
+        if (opt_color.has_value())
+            palette_desktop_color = opt_color.value();
+    }
+
+    m_color_input->set_color(palette_desktop_color);
+    m_monitor_widget->set_background_color(palette_desktop_color);
+
+    m_monitor_widget->update();
+}
+
+void BackgroundSettingsWidget::apply_settings()
+{
+    auto ws_config = Core::ConfigFile::open("/etc/WindowServer.ini");
+
+    if (!m_monitor_widget->wallpaper().is_empty()) {
+        GUI::Desktop::the().set_wallpaper(m_monitor_widget->wallpaper());
+    } else {
+        GUI::Desktop::the().set_wallpaper("");
+        GUI::Desktop::the().set_background_color(m_color_input->text());
+    }
+
+    GUI::Desktop::the().set_wallpaper_mode(m_monitor_widget->wallpaper_mode());
+}
+
+}

Userland/Applications/DisplaySettings/BackgroundSettingsWidget.h

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2019-2020, Jesse Buhagiar <jooster669@gmail.com>
+ * Copyright (c) 2021, Andreas Kling <kling@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include "MonitorWidget.h"
+#include <LibCore/Timer.h>
+#include <LibGUI/ColorInput.h>
+#include <LibGUI/ComboBox.h>
+#include <LibGUI/RadioButton.h>
+
+namespace DisplaySettings {
+
+class BackgroundSettingsWidget : public GUI::Widget {
+    C_OBJECT(BackgroundSettingsWidget);
+
+public:
+    virtual ~BackgroundSettingsWidget() override;
+
+    void apply_settings();
+
+private:
+    BackgroundSettingsWidget();
+
+    void create_frame();
+    void load_current_settings();
+
+    Vector<String> m_modes;
+
+    RefPtr<DisplaySettings::MonitorWidget> m_monitor_widget;
+    RefPtr<GUI::IconView> m_wallpaper_view;
+    RefPtr<GUI::ComboBox> m_mode_combo;
+    RefPtr<GUI::ColorInput> m_color_input;
+};
+
+}

Userland/Applications/DisplaySettings/CMakeLists.txt

@@ -1,10 +1,13 @@
 compile_gml(DisplaySettingsWindow.gml DisplaySettingsWindowGML.h display_settings_window_gml)
+compile_gml(BackgroundSettings.gml BackgroundSettingsGML.h background_settings_gml)
 
 set(SOURCES
+    BackgroundSettingsGML.h
+    BackgroundSettingsWidget.cpp
     DisplaySettings.cpp
     DisplaySettingsWindowGML.h
-    main.cpp
     MonitorWidget.cpp
+    main.cpp
 )
 
 serenity_app(DisplaySettings ICON app-display-settings)

Userland/Applications/DisplaySettings/DisplaySettings.cpp

@@ -17,22 +17,16 @@
 #include <LibGUI/Desktop.h>
 #include <LibGUI/FilePicker.h>
 #include <LibGUI/ItemListModel.h>
-#include <LibGUI/Label.h>
 #include <LibGUI/MessageBox.h>
 #include <LibGUI/RadioButton.h>
 #include <LibGUI/WindowServerConnection.h>
 #include <LibGfx/Palette.h>
 #include <LibGfx/SystemTheme.h>
 
-REGISTER_WIDGET(DisplaySettings, MonitorWidget)
-
 DisplaySettingsWidget::DisplaySettingsWidget()
 {
     create_resolution_list();
-    create_wallpaper_list();
-
     create_frame();
-
     load_current_settings();
 }
 
@@ -57,74 +51,12 @@ void DisplaySettingsWidget::create_resolution_list()
     m_resolutions.append({ 2560, 1440 });
 }
 
-void DisplaySettingsWidget::create_wallpaper_list()
-{
-    Core::DirIterator iterator("/res/wallpapers/", Core::DirIterator::Flags::SkipDots);
-
-    m_wallpapers.append("Use background color");
-
-    while (iterator.has_next()) {
-        m_wallpapers.append(iterator.next_path());
-    }
-
-    m_modes.append("simple");
-    m_modes.append("tile");
-    m_modes.append("center");
-    m_modes.append("stretch");
-}
-
 void DisplaySettingsWidget::create_frame()
 {
     load_from_gml(display_settings_window_gml);
 
     m_monitor_widget = *find_descendant_of_type_named<DisplaySettings::MonitorWidget>("monitor_widget");
 
-    m_wallpaper_combo = *find_descendant_of_type_named<GUI::ComboBox>("wallpaper_combo");
-    m_wallpaper_combo->set_only_allow_values_from_model(true);
-    m_wallpaper_combo->set_model(*GUI::ItemListModel<String>::create(m_wallpapers));
-    m_wallpaper_combo->on_change = [this](auto& text, const GUI::ModelIndex& index) {
-        String path = text;
-        if (path.starts_with("/") && m_monitor_widget->set_wallpaper(path)) {
-            m_monitor_widget->update();
-            return;
-        }
-
-        if (index.row() == 0) {
-            path = "";
-        } else {
-            if (index.is_valid()) {
-                StringBuilder builder;
-                builder.append("/res/wallpapers/");
-                builder.append(path);
-                path = builder.to_string();
-            }
-        }
-
-        m_monitor_widget->set_wallpaper(path);
-        m_monitor_widget->update();
-    };
-
-    auto& button = *find_descendant_of_type_named<GUI::Button>("wallpaper_open_button");
-    button.set_icon(Gfx::Bitmap::load_from_file("/res/icons/16x16/open.png"));
-    button.on_click = [this](auto) {
-        Optional<String> open_path = GUI::FilePicker::get_open_filepath(nullptr, "Select wallpaper from file system.");
-
-        if (!open_path.has_value())
-            return;
-
-        m_wallpaper_combo->set_only_allow_values_from_model(false);
-        m_wallpaper_combo->set_text(open_path.value());
-        m_wallpaper_combo->set_only_allow_values_from_model(true);
-    };
-
-    m_mode_combo = *find_descendant_of_type_named<GUI::ComboBox>("mode_combo");
-    m_mode_combo->set_only_allow_values_from_model(true);
-    m_mode_combo->set_model(*GUI::ItemListModel<String>::create(m_modes));
-    m_mode_combo->on_change = [this](auto&, const GUI::ModelIndex& index) {
-        m_monitor_widget->set_wallpaper_mode(m_modes.at(index.row()));
-        m_monitor_widget->update();
-    };
-
     m_resolution_combo = *find_descendant_of_type_named<GUI::ComboBox>("resolution_combo");
     m_resolution_combo->set_only_allow_values_from_model(true);
     m_resolution_combo->set_model(*GUI::ItemListModel<Gfx::IntSize>::create(m_resolutions));
@@ -147,75 +79,12 @@ void DisplaySettingsWidget::create_frame()
             m_monitor_widget->update();
         }
     };
-
-    m_color_input = *find_descendant_of_type_named<GUI::ColorInput>("color_input");
-    m_color_input->set_color_has_alpha_channel(false);
-    m_color_input->set_color_picker_title("Select color for desktop");
-    m_color_input->on_change = [this] {
-        m_monitor_widget->set_background_color(m_color_input->color());
-        m_monitor_widget->update();
-    };
-
-    auto& ok_button = *find_descendant_of_type_named<GUI::Button>("ok_button");
-    ok_button.on_click = [this](auto) {
-        send_settings_to_window_server();
-        GUI::Application::the()->quit();
-    };
-
-    auto& cancel_button = *find_descendant_of_type_named<GUI::Button>("cancel_button");
-    cancel_button.on_click = [](auto) {
-        GUI::Application::the()->quit();
-    };
-
-    auto& apply_button = *find_descendant_of_type_named<GUI::Button>("apply_button");
-    apply_button.on_click = [this](auto) {
-        send_settings_to_window_server();
-    };
 }
 
 void DisplaySettingsWidget::load_current_settings()
 {
-    auto ws_config(Core::ConfigFile::open("/etc/WindowServer.ini"));
-    auto wm_config = Core::ConfigFile::get_for_app("WindowManager");
+    auto ws_config = Core::ConfigFile::open("/etc/WindowServer.ini");
 
-    /// Wallpaper path ////////////////////////////////////////////////////////////////////////////
-    /// Read wallpaper path from config file and set value to monitor widget and combo box.
-    auto selected_wallpaper = wm_config->read_entry("Background", "Wallpaper", "");
-    if (!selected_wallpaper.is_empty()) {
-        m_monitor_widget->set_wallpaper(selected_wallpaper);
-
-        Optional<size_t> optional_index;
-        if (selected_wallpaper.starts_with("/res/wallpapers/")) {
-            auto name_parts = selected_wallpaper.split('/', true);
-            optional_index = m_wallpapers.find_first_index(name_parts[2]);
-
-            if (optional_index.has_value()) {
-                m_wallpaper_combo->set_selected_index(optional_index.value());
-            }
-        }
-
-        if (!optional_index.has_value()) {
-            m_wallpaper_combo->set_only_allow_values_from_model(false);
-            m_wallpaper_combo->set_text(selected_wallpaper);
-            m_wallpaper_combo->set_only_allow_values_from_model(true);
-        }
-    } else {
-        m_wallpaper_combo->set_selected_index(0);
-    }
-
-    size_t index;
-
-    /// Mode //////////////////////////////////////////////////////////////////////////////////////
-    auto mode = ws_config->read_entry("Background", "Mode", "simple");
-    if (!m_modes.contains_slow(mode)) {
-        warnln("Invalid background mode '{}' in WindowServer config, falling back to 'simple'", mode);
-        mode = "simple";
-    }
-    m_monitor_widget->set_wallpaper_mode(mode);
-    index = m_modes.find_first_index(mode).value();
-    m_mode_combo->set_selected_index(index);
-
-    /// Resolution and scale factor ///////////////////////////////////////////////////////////////
     int scale_factor = ws_config->read_num_entry("Screen", "ScaleFactor", 1);
     if (scale_factor != 1 && scale_factor != 2) {
         dbgln("unexpected ScaleFactor {}, setting to 1", scale_factor);
@@ -228,29 +97,15 @@ void DisplaySettingsWidget::load_current_settings()
     Gfx::IntSize find_size;
     find_size.set_width(ws_config->read_num_entry("Screen", "Width", 1024));
     find_size.set_height(ws_config->read_num_entry("Screen", "Height", 768));
-    index = m_resolutions.find_first_index(find_size).value_or(0);
+    auto index = m_resolutions.find_first_index(find_size).value_or(0);
     Gfx::IntSize m_current_resolution = m_resolutions.at(index);
     m_monitor_widget->set_desktop_resolution(m_current_resolution);
     m_resolution_combo->set_selected_index(index);
 
-    /// Color /////////////////////////////////////////////////////////////////////////////////////
-    /// If presend read from config file. If not paint with palette color.
-    Color palette_desktop_color = palette().desktop_background();
-
-    auto background_color = ws_config->read_entry("Background", "Color", "");
-    if (!background_color.is_empty()) {
-        auto opt_color = Color::from_string(background_color);
-        if (opt_color.has_value())
-            palette_desktop_color = opt_color.value();
-    }
-
-    m_color_input->set_color(palette_desktop_color);
-    m_monitor_widget->set_background_color(palette_desktop_color);
-
     m_monitor_widget->update();
 }
 
-void DisplaySettingsWidget::send_settings_to_window_server()
+void DisplaySettingsWidget::apply_settings()
 {
     // Store the current screen resolution and scale factor in case the user wants to revert to it.
     auto ws_config(Core::ConfigFile::open("/etc/WindowServer.ini"));
@@ -290,14 +145,4 @@ void DisplaySettingsWidget::send_settings_to_window_server()
             }
         }
     }
-
-    if (!m_monitor_widget->wallpaper().is_empty()) {
-        GUI::Desktop::the().set_wallpaper(m_monitor_widget->wallpaper());
-    } else {
-        dbgln("Setting color input: __{}__", m_color_input->text());
-        GUI::Desktop::the().set_wallpaper("");
-        GUI::Desktop::the().set_background_color(m_color_input->text());
-    }
-
-    GUI::Desktop::the().set_wallpaper_mode(m_monitor_widget->wallpaper_mode());
 }

Userland/Applications/DisplaySettings/DisplaySettings.h

@@ -16,24 +16,19 @@ class DisplaySettingsWidget : public GUI::Widget {
     C_OBJECT(DisplaySettingsWidget);
 
 public:
-    DisplaySettingsWidget();
+    void apply_settings();
 
 private:
+    DisplaySettingsWidget();
+
     void create_frame();
-    void create_wallpaper_list();
     void create_resolution_list();
     void load_current_settings();
-    void send_settings_to_window_server(); // Apply the settings to the Window Server
 
-    Vector<String> m_wallpapers;
-    Vector<String> m_modes;
     Vector<Gfx::IntSize> m_resolutions;
 
     RefPtr<DisplaySettings::MonitorWidget> m_monitor_widget;
-    RefPtr<GUI::ComboBox> m_wallpaper_combo;
-    RefPtr<GUI::ComboBox> m_mode_combo;
     RefPtr<GUI::ComboBox> m_resolution_combo;
     RefPtr<GUI::RadioButton> m_display_scale_radio_1x;
     RefPtr<GUI::RadioButton> m_display_scale_radio_2x;
-    RefPtr<GUI::ColorInput> m_color_input;
 };

Userland/Applications/DisplaySettings/DisplaySettingsWindow.gml

@@ -2,67 +2,52 @@
     fill_with_background_color: true
 
     layout: @GUI::VerticalBoxLayout {
-        margins: [4, 4, 4, 4]
+        margins: [8, 8, 8, 8]
     }
 
     @DisplaySettings::MonitorWidget {
         name: "monitor_widget"
+        fixed_width: 304
+        fixed_height: 201
     }
 
     @GUI::Widget {
-        shrink_to_fit: true
-        layout: @GUI::HorizontalBoxLayout
-
-        @GUI::Label {
-            text: "Wallpaper:"
-            text_alignment: "CenterLeft"
-            fixed_width: 70
+        fixed_height: 20
     }
 
-        @GUI::ComboBox {
-            name: "wallpaper_combo"
+    @GUI::GroupBox {
+        layout: @GUI::VerticalBoxLayout {
+            margins: [16, 24, 16, 6]
         }
 
-        @GUI::Button {
-            name: "wallpaper_open_button"
-            tooltip: "Select wallpaper from file system."
-            button_style: "Coolbar"
-            fixed_width: 22
-            fixed_height: 22
-        }
-    }
+        title: "Screen settings"
 
         @GUI::Widget {
             shrink_to_fit: true
-        layout: @GUI::HorizontalBoxLayout
 
-        @GUI::Label {
-            text: "Modes:"
-            text_alignment: "CenterLeft"
-            fixed_width: 70
+            layout: @GUI::HorizontalBoxLayout {
             }
 
-        @GUI::ComboBox {
-            name: "mode_combo"
-        }
-    }
-
-    @GUI::Widget {
-        shrink_to_fit: true
-        layout: @GUI::HorizontalBoxLayout
-
             @GUI::Label {
                 text: "Resolution:"
                 text_alignment: "CenterLeft"
-            fixed_width: 70
+                fixed_width: 95
             }
 
             @GUI::ComboBox {
                 name: "resolution_combo"
-            fixed_width: 90
+            }
         }
 
-        @GUI::Widget
+        @GUI::Widget {
+            fixed_height: 8
+        }
+
+        @GUI::Widget {
+            shrink_to_fit: true
+
+            layout: @GUI::HorizontalBoxLayout {
+            }
 
             @GUI::Label {
                 text: "Display scale:"
@@ -73,54 +58,14 @@
             @GUI::RadioButton {
                 name: "scale_1x"
                 text: "1x"
+                fixed_width: 50
             }
 
             @GUI::RadioButton {
                 name: "scale_2x"
                 text: "2x"
-        }
-    }
-
-    @GUI::Widget {
-        shrink_to_fit: true
-        layout: @GUI::HorizontalBoxLayout
-
-        @GUI::Label {
-            text: "Color:"
-            text_alignment: "CenterLeft"
-            fixed_width: 70
-        }
-
-        @GUI::ColorInput {
-            name: "color_input"
-            fixed_width: 90
-        }
-    }
-
-    @GUI::Widget
-
-    @GUI::Widget {
-        shrink_to_fit: true
-        layout: @GUI::HorizontalBoxLayout
-
-        @GUI::Widget
-
-        @GUI::Button {
-            name: "ok_button"
-            text: "OK"
-            fixed_width: 75
-        }
-
-        @GUI::Button {
-            name: "cancel_button"
-            text: "Cancel"
-            fixed_width: 75
-        }
-
-        @GUI::Button {
-            name: "apply_button"
-            text: "Apply"
-            fixed_width: 75
+                fixed_width: 50
+            }
         }
     }
 }

Userland/Applications/DisplaySettings/MonitorWidget.cpp

@@ -1,18 +1,23 @@
 /*
  * Copyright (c) 2020, Hüseyin Aslıtürk <asliturk@hotmail.com>
+ * Copyright (c) 2021, Andreas Kling <kling@serenityos.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
 #include "MonitorWidget.h"
+#include <LibGUI/Desktop.h>
 #include <LibGUI/Painter.h>
 #include <LibGfx/Bitmap.h>
 #include <LibGfx/Font.h>
 
+REGISTER_WIDGET(DisplaySettings, MonitorWidget)
+
 namespace DisplaySettings {
 
 MonitorWidget::MonitorWidget()
 {
+    m_desktop_resolution = GUI::Desktop::the().rect().size();
     m_monitor_bitmap = Gfx::Bitmap::load_from_file("/res/graphics/monitor.png");
     m_monitor_rect = { 12, 13, 280, 158 };
     set_fixed_size(304, 201);
@@ -91,6 +96,7 @@ void MonitorWidget::paint_event(GUI::PaintEvent& event)
     painter.blit({ 0, 0 }, *m_monitor_bitmap, m_monitor_bitmap->rect());
     painter.draw_scaled_bitmap(m_monitor_rect, *screen_bitmap, screen_bitmap->rect());
 
+#if 0
     if (!m_desktop_resolution.is_null()) {
         auto displayed_resolution_string = Gfx::IntSize { m_desktop_resolution.width(), m_desktop_resolution.height() }.to_string();
 
@@ -110,6 +116,7 @@ void MonitorWidget::paint_event(GUI::PaintEvent& event)
         text_rect.center_within(m_monitor_rect);
         painter.draw_scaled_bitmap(text_rect, *text_bitmap, text_bitmap->rect());
     }
+#endif
 }
 
 }

Userland/Applications/DisplaySettings/main.cpp

@@ -5,10 +5,12 @@
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
+#include "BackgroundSettingsWidget.h"
 #include "DisplaySettings.h"
 #include <LibGUI/Action.h>
 #include <LibGUI/Application.h>
 #include <LibGUI/BoxLayout.h>
+#include <LibGUI/Button.h>
 #include <LibGUI/Icon.h>
 #include <LibGUI/Menu.h>
 #include <LibGUI/Menubar.h>
@@ -36,16 +38,45 @@ int main(int argc, char** argv)
 
     auto window = GUI::Window::construct();
     window->set_title("Display Settings");
-    window->resize(360, 410);
+    window->resize(400, 480);
     window->set_resizable(false);
 
     auto& main_widget = window->set_main_widget<GUI::Widget>();
     main_widget.set_fill_with_background_color(true);
     main_widget.set_layout<GUI::VerticalBoxLayout>();
     main_widget.layout()->set_margins({ 4, 4, 4, 4 });
+    main_widget.layout()->set_spacing(6);
 
     auto& tab_widget = main_widget.add<GUI::TabWidget>();
-    tab_widget.add_tab<DisplaySettingsWidget>("Display Settings");
+    auto& background_settings_widget = tab_widget.add_tab<DisplaySettings::BackgroundSettingsWidget>("Background");
+    auto& monitor_settings_widget = tab_widget.add_tab<DisplaySettingsWidget>("Monitor");
+
+    auto& button_container = main_widget.add<GUI::Widget>();
+    button_container.set_shrink_to_fit(true);
+    button_container.set_layout<GUI::HorizontalBoxLayout>();
+    button_container.layout()->set_spacing(6);
+    button_container.layout()->add_spacer();
+
+    auto& ok_button = button_container.add<GUI::Button>("OK");
+    ok_button.set_fixed_width(75);
+    ok_button.on_click = [&] {
+        background_settings_widget.apply_settings();
+        monitor_settings_widget.apply_settings();
+        app->quit();
+    };
+
+    auto& cancel_button = button_container.add<GUI::Button>("Cancel");
+    cancel_button.set_fixed_width(75);
+    cancel_button.on_click = [&] {
+        app->quit();
+    };
+
+    auto& apply_button = button_container.add<GUI::Button>("Apply");
+    apply_button.set_fixed_width(75);
+    apply_button.on_click = [&] {
+        background_settings_widget.apply_settings();
+        monitor_settings_widget.apply_settings();
+    };
 
     window->set_icon(app_icon.bitmap_for_size(16));