PaintBrush: Tidy up the UI a bit. Add some more colors.

4 files changed, 63 insertions, 25 deletions

diff --git a/Applications/PaintBrush/PaintableWidget.cpp b/Applications/PaintBrush/PaintableWidget.cpp
index e33e2e72dc..729dceabbe 100644
--- a/Applications/PaintBrush/PaintableWidget.cpp
+++ b/Applications/PaintBrush/PaintableWidget.cpp
@@ -6,7 +6,7 @@ PaintableWidget::PaintableWidget(GWidget* parent)
     : GWidget(parent)
 {
     set_fill_with_background_color(true);
-    set_background_color(Color::LightGray);
+    set_background_color(Color::DarkGray);
     m_bitmap = GraphicsBitmap::create(GraphicsBitmap::Format::RGB32, { 600, 400 });
     m_bitmap->fill(Color::White);
 }
diff --git a/Applications/PaintBrush/PaletteWidget.cpp b/Applications/PaintBrush/PaletteWidget.cpp
index 171f3b34a1..ec3ff48e05 100644
--- a/Applications/PaintBrush/PaletteWidget.cpp
+++ b/Applications/PaintBrush/PaletteWidget.cpp
@@ -2,13 +2,16 @@
 #include "PaintableWidget.h"
 #include <LibGUI/GBoxLayout.h>
 
-class ColorWidget : public GWidget {
+class ColorWidget : public GFrame {
 public:
     explicit ColorWidget(Color color, PaletteWidget& palette_widget, GWidget* parent)
-        : GWidget(parent)
+        : GFrame(parent)
         , m_palette_widget(palette_widget)
         , m_color(color)
     {
+        set_frame_thickness(2);
+        set_frame_shadow(FrameShadow::Sunken);
+        set_frame_shape(FrameShape::Container);
     }
 
     virtual ~ColorWidget() override
@@ -34,44 +37,79 @@ PaletteWidget::PaletteWidget(PaintableWidget& paintable_widget, GWidget* parent)
 {
     set_frame_shape(FrameShape::Panel);
     set_frame_shadow(FrameShadow::Raised);
-    set_frame_thickness(1);
+    set_frame_thickness(0);
     set_fill_with_background_color(true);
     set_background_color(Color::LightGray);
 
     set_size_policy(SizePolicy::Fill, SizePolicy::Fixed);
-    set_preferred_size({ 0, 32 });
+    set_preferred_size({ 0, 34 });
 
-    m_secondary_color_widget = new GWidget(this);
-    m_secondary_color_widget->set_relative_rect({ 2, 2, 60, 28 });
+    m_secondary_color_widget = new GFrame(this);
+    m_secondary_color_widget->set_frame_thickness(2);
+    m_secondary_color_widget->set_frame_shape(FrameShape::Container);
+    m_secondary_color_widget->set_frame_shadow(FrameShadow::Sunken);
+    m_secondary_color_widget->set_relative_rect({ 2, 2, 60, 31 });
     m_secondary_color_widget->set_fill_with_background_color(true);
     set_secondary_color(paintable_widget.secondary_color());
 
-    m_primary_color_widget = new GWidget(this);
-    Rect rect { 0, 0, 38, 14 };
+    m_primary_color_widget = new GFrame(this);
+    m_primary_color_widget->set_frame_thickness(2);
+    m_primary_color_widget->set_frame_shape(FrameShape::Container);
+    m_primary_color_widget->set_frame_shadow(FrameShadow::Sunken);
+    Rect rect { 0, 0, 38, 15 };
     rect.center_within(m_secondary_color_widget->relative_rect());
     m_primary_color_widget->set_relative_rect(rect);
     m_primary_color_widget->set_fill_with_background_color(true);
     set_primary_color(paintable_widget.primary_color());
 
     auto* color_container = new GWidget(this);
-    color_container->set_relative_rect(m_secondary_color_widget->relative_rect().right() + 2, 2, 500, 28);
-    color_container->set_layout(make<GBoxLayout>(Orientation::Horizontal));
-    color_container->layout()->set_spacing(0);
+    color_container->set_relative_rect(m_secondary_color_widget->relative_rect().right() + 2, 2, 500, 32);
+    color_container->set_layout(make<GBoxLayout>(Orientation::Vertical));
+    color_container->layout()->set_spacing(1);
 
-    auto add_color_widget = [&] (Color color) {
-        auto* color_widget = new ColorWidget(color, *this, color_container);
+    auto* top_color_container = new GWidget(color_container);
+    top_color_container->set_layout(make<GBoxLayout>(Orientation::Horizontal));
+    top_color_container->layout()->set_spacing(1);
+
+    auto* bottom_color_container = new GWidget(color_container);
+    bottom_color_container->set_layout(make<GBoxLayout>(Orientation::Horizontal));
+    bottom_color_container->layout()->set_spacing(1);
+
+    auto add_color_widget = [&] (GWidget* container, Color color) {
+        auto* color_widget = new ColorWidget(color, *this, container);
         color_widget->set_fill_with_background_color(true);
         color_widget->set_background_color(color);
     };
 
-    add_color_widget(Color::Black);
-    add_color_widget(Color::White);
-    add_color_widget(Color::Red);
-    add_color_widget(Color::Green);
-    add_color_widget(Color::Blue);
-    add_color_widget(Color::Cyan);
-    add_color_widget(Color::Magenta);
-    add_color_widget(Color::Yellow);
+    add_color_widget(top_color_container, Color::from_rgb(0x000000));
+    add_color_widget(top_color_container, Color::from_rgb(0x808080));
+    add_color_widget(top_color_container, Color::from_rgb(0x800000));
+    add_color_widget(top_color_container, Color::from_rgb(0x808000));
+    add_color_widget(top_color_container, Color::from_rgb(0x008000));
+    add_color_widget(top_color_container, Color::from_rgb(0x008080));
+    add_color_widget(top_color_container, Color::from_rgb(0x000080));
+    add_color_widget(top_color_container, Color::from_rgb(0x800080));
+    add_color_widget(top_color_container, Color::from_rgb(0x808040));
+    add_color_widget(top_color_container, Color::from_rgb(0x004040));
+    add_color_widget(top_color_container, Color::from_rgb(0x0080ff));
+    add_color_widget(top_color_container, Color::from_rgb(0x004080));
+    add_color_widget(top_color_container, Color::from_rgb(0x8000ff));
+    add_color_widget(top_color_container, Color::from_rgb(0x804000));
+
+    add_color_widget(bottom_color_container, Color::from_rgb(0xffffff));
+    add_color_widget(bottom_color_container, Color::from_rgb(0xc0c0c0));
+    add_color_widget(bottom_color_container, Color::from_rgb(0xff0000));
+    add_color_widget(bottom_color_container, Color::from_rgb(0xffff00));
+    add_color_widget(bottom_color_container, Color::from_rgb(0x00ff00));
+    add_color_widget(bottom_color_container, Color::from_rgb(0x00ffff));
+    add_color_widget(bottom_color_container, Color::from_rgb(0x0000ff));
+    add_color_widget(bottom_color_container, Color::from_rgb(0xff00ff));
+    add_color_widget(bottom_color_container, Color::from_rgb(0xffff80));
+    add_color_widget(bottom_color_container, Color::from_rgb(0x00ff80));
+    add_color_widget(bottom_color_container, Color::from_rgb(0x80ffff));
+    add_color_widget(bottom_color_container, Color::from_rgb(0x8080ff));
+    add_color_widget(bottom_color_container, Color::from_rgb(0xff0080));
+    add_color_widget(bottom_color_container, Color::from_rgb(0xff8040));
 }
 
 PaletteWidget::~PaletteWidget()
diff --git a/Applications/PaintBrush/PaletteWidget.h b/Applications/PaintBrush/PaletteWidget.h
index e4e867a334..dd7ce6d378 100644
--- a/Applications/PaintBrush/PaletteWidget.h
+++ b/Applications/PaintBrush/PaletteWidget.h
@@ -16,6 +16,6 @@ public:
 
 private:
     PaintableWidget& m_paintable_widget;
-    GWidget* m_primary_color_widget { nullptr };
-    GWidget* m_secondary_color_widget { nullptr };
+    GFrame* m_primary_color_widget { nullptr };
+    GFrame* m_secondary_color_widget { nullptr };
 };
diff --git a/Applications/PaintBrush/main.cpp b/Applications/PaintBrush/main.cpp
index dfaa70625b..4489c78dff 100644
--- a/Applications/PaintBrush/main.cpp
+++ b/Applications/PaintBrush/main.cpp
@@ -13,7 +13,7 @@ int main(int argc, char** argv)
 
     auto* window = new GWindow;
     window->set_title("PaintBrush");
-    window->set_rect(100, 100, 600, 432);
+    window->set_rect(100, 100, 600, 434);
 
     auto* main_widget = new GWidget(nullptr);
     window->set_main_widget(main_widget);