LibGUI: Add shortcuts to common locations in GUI::FilePicker

This patch adds a handy set of buttons on the left hand side that can
take you to common locations such as:

- Your home directory
- Your desktop directory
- The root directory

2 files changed, 84 insertions, 34 deletions

diff --git a/Userland/Libraries/LibGUI/FilePicker.cpp b/Userland/Libraries/LibGUI/FilePicker.cpp
index 99958bff93..ce7183b39e 100644
--- a/Userland/Libraries/LibGUI/FilePicker.cpp
+++ b/Userland/Libraries/LibGUI/FilePicker.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2018-2021, Andreas Kling <kling@serenityos.org>
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -43,6 +43,7 @@
 #include <LibGUI/TextBox.h>
 #include <LibGUI/ToolBar.h>
 #include <LibGfx/FontDatabase.h>
+#include <LibGfx/Palette.h>
 #include <string.h>
 
 namespace GUI {
@@ -222,6 +223,22 @@ FilePicker::FilePicker(Window* parent_window, Mode mode, const StringView& file_
             on_file_return();
         }
     };
+
+    auto& common_locations_frame = *widget.find_descendant_of_type_named<GUI::Frame>("common_locations_frame");
+    auto add_common_location_button = [&](auto& name, String path) {
+        auto& button = common_locations_frame.add<GUI::Button>();
+        button.set_button_style(Gfx::ButtonStyle::CoolBar);
+        button.set_text_alignment(Gfx::TextAlignment::CenterLeft);
+        button.set_text(move(name));
+        button.set_icon(FileIconProvider::icon_for_path(path).bitmap_for_size(16));
+        button.set_fixed_height(22);
+        button.on_click = [this, path] {
+            set_path(path);
+        };
+    };
+    add_common_location_button("Home", Core::StandardPaths::home_directory());
+    add_common_location_button("Desktop", Core::StandardPaths::desktop_directory());
+    add_common_location_button("Root", "/");
 }
 
 FilePicker::~FilePicker()
diff --git a/Userland/Libraries/LibGUI/FilePickerDialog.gml b/Userland/Libraries/LibGUI/FilePickerDialog.gml
index 1c02195230..48492e128b 100644
--- a/Userland/Libraries/LibGUI/FilePickerDialog.gml
+++ b/Userland/Libraries/LibGUI/FilePickerDialog.gml
@@ -1,73 +1,106 @@
 @GUI::Widget {
     fill_with_background_color: true
 
-    layout: @GUI::VerticalBoxLayout {
+    layout: @GUI::HorizontalBoxLayout {
         margins: [4, 4, 4, 4]
     }
 
     @GUI::Widget {
         shrink_to_fit: true
 
-        layout: @GUI::HorizontalBoxLayout {
+        layout: @GUI::VerticalBoxLayout {
+            margins: [4, 4, 4, 4]
         }
 
-        @GUI::TextBox {
-            name: "location_textbox"
+        @GUI::Label {
+            text: "Look in:"
+            text_alignment: "CenterRight"
+            fixed_height: 24
         }
 
-        @GUI::ToolBar {
-            name: "toolbar"
-        }
-    }
+        @GUI::Frame {
+            name: "common_locations_frame"
+            fixed_width: 80
+            fill_with_background_color: true
 
-    @GUI::MultiView {
-        name: "view"
+            layout: @GUI::VerticalBoxLayout {
+                margins: [2, 4, 2, 4]
+                spacing: 0
+            }
+        }
     }
 
     @GUI::Widget {
-        shrink_to_fit: true
-
         layout: @GUI::VerticalBoxLayout {
+            margins: [4, 4, 4, 4]
         }
 
         @GUI::Widget {
-            fixed_height: 24
-            layout: @GUI::HorizontalBoxLayout {
-            }
+            shrink_to_fit: true
 
-            @GUI::Label {
-                text: "File name:"
-                text_alignment: "CenterLeft"
-                fixed_width:80
+            layout: @GUI::HorizontalBoxLayout {
             }
 
             @GUI::TextBox {
-                name: "filename_textbox"
+                name: "location_textbox"
             }
 
-            @GUI::Widget {
-                fixed_width: 20
+            @GUI::ToolBar {
+                name: "toolbar"
             }
+        }
 
-            @GUI::Button {
-                name: "ok_button"
-                text: "OK"
-                fixed_width: 75
-            }
+        @GUI::MultiView {
+            name: "view"
         }
+
         @GUI::Widget {
-            fixed_height: 24
+            shrink_to_fit: true
 
-            layout: @GUI::HorizontalBoxLayout {
+            layout: @GUI::VerticalBoxLayout {
             }
 
             @GUI::Widget {
+                fixed_height: 24
+
+                layout: @GUI::HorizontalBoxLayout {
+                }
+
+                @GUI::Label {
+                    text: "File name:"
+                    text_alignment: "CenterLeft"
+                    fixed_width: 80
+                }
+
+                @GUI::TextBox {
+                    name: "filename_textbox"
+                }
+
+                @GUI::Widget {
+                    fixed_width: 20
+                }
+
+                @GUI::Button {
+                    name: "ok_button"
+                    text: "OK"
+                    fixed_width: 75
+                }
             }
 
-            @GUI::Button {
-                name: "cancel_button"
-                text: "Cancel"
-                fixed_width: 75
+            @GUI::Widget {
+                fixed_height: 24
+
+                layout: @GUI::HorizontalBoxLayout {
+                }
+
+                @GUI::Widget {
+                }
+
+                @GUI::Button {
+                    name: "cancel_button"
+                    text: "Cancel"
+                    fixed_width: 75
+                }
             }
         }
     }