Base+MenuApplet: Add new controls and icons for AudioApplet

Adds a classic volume slider to the AudioApplet. Percent text
and mute state can now be toggled via checkboxes. Left click opens,
right click mutes. Updates existing icons and adds unique icons for
muted vs zero volume states.

6 files changed, 108 insertions, 12 deletions

diff --git a/Base/res/icons/audio-volume-high.png b/Base/res/icons/audio-volume-high.png
index fd512d6ea7..7587917809 100644..100755
--- a/Base/res/icons/audio-volume-high.png
+++ b/Base/res/icons/audio-volume-high.png
diff --git a/Base/res/icons/audio-volume-low.png b/Base/res/icons/audio-volume-low.png
index b5baca3a15..839e2cb3a8 100644..100755
--- a/Base/res/icons/audio-volume-low.png
+++ b/Base/res/icons/audio-volume-low.png
diff --git a/Base/res/icons/audio-volume-medium.png b/Base/res/icons/audio-volume-medium.png
index 839e2cb3a8..d190691578 100644..100755
--- a/Base/res/icons/audio-volume-medium.png
+++ b/Base/res/icons/audio-volume-medium.png
diff --git a/Base/res/icons/audio-volume-muted.png b/Base/res/icons/audio-volume-muted.png
index 9f6940a4b3..ced31e0e5c 100644..100755
--- a/Base/res/icons/audio-volume-muted.png
+++ b/Base/res/icons/audio-volume-muted.png
diff --git a/Base/res/icons/audio-volume-zero.png b/Base/res/icons/audio-volume-zero.png
new file mode 100755
index 0000000000..a14917d983
--- /dev/null
+++ b/Base/res/icons/audio-volume-zero.png
diff --git a/MenuApplets/Audio/main.cpp b/MenuApplets/Audio/main.cpp
index 52319a6e53..42e9c92f9f 100644
--- a/MenuApplets/Audio/main.cpp
+++ b/MenuApplets/Audio/main.cpp
@@ -26,7 +26,11 @@
 
 #include <LibAudio/ClientConnection.h>
 #include <LibGUI/Application.h>
+#include <LibGUI/BoxLayout.h>
+#include <LibGUI/CheckBox.h>
+#include <LibGUI/Label.h>
 #include <LibGUI/Painter.h>
+#include <LibGUI/Slider.h>
 #include <LibGUI/Widget.h>
 #include <LibGUI/Window.h>
 #include <LibGfx/Bitmap.h>
@@ -42,6 +46,8 @@ public:
         m_audio_client->on_muted_state_change = [this](bool muted) {
             if (m_audio_muted == muted)
                 return;
+            m_mute_box->set_checked(!m_audio_muted);
+            m_slider->set_enabled(!muted);
             m_audio_muted = muted;
             update();
         };
@@ -52,21 +58,88 @@ public:
                 update();
         };
 
-        m_volume_level_bitmaps.append({66, Gfx::Bitmap::load_from_file("/res/icons/audio-volume-high.png")});
-        m_volume_level_bitmaps.append({33, Gfx::Bitmap::load_from_file("/res/icons/audio-volume-medium.png")});
-        m_volume_level_bitmaps.append({1,  Gfx::Bitmap::load_from_file("/res/icons/audio-volume-low.png")});
-        m_volume_level_bitmaps.append({0,  Gfx::Bitmap::load_from_file("/res/icons/audio-volume-muted.png")});
+        m_volume_level_bitmaps.append({ 66, Gfx::Bitmap::load_from_file("/res/icons/audio-volume-high.png") });
+        m_volume_level_bitmaps.append({ 33, Gfx::Bitmap::load_from_file("/res/icons/audio-volume-medium.png") });
+        m_volume_level_bitmaps.append({ 1, Gfx::Bitmap::load_from_file("/res/icons/audio-volume-low.png") });
+        m_volume_level_bitmaps.append({ 0, Gfx::Bitmap::load_from_file("/res/icons/audio-volume-zero.png") });
+        m_volume_level_bitmaps.append({ 0, Gfx::Bitmap::load_from_file("/res/icons/audio-volume-muted.png") });
+
+        m_slider_window = add<GUI::Window>(window());
+        m_slider_window->set_frameless(true);
+        m_slider_window->set_resizable(false);
+        m_slider_window->set_minimizable(false);
+        m_slider_window->on_active_input_change = [this](bool is_active_input) {
+            if (!is_active_input)
+                close();
+        };
+
+        m_root_container = m_slider_window->set_main_widget<GUI::Label>();
+        m_root_container->set_fill_with_background_color(true);
+        m_root_container->set_size_policy(GUI::SizePolicy::Fill, GUI::SizePolicy::Fill);
+        m_root_container->set_layout<GUI::VerticalBoxLayout>();
+        m_root_container->layout()->set_margins({ 0, 4, 0, 4 });
+        m_root_container->layout()->set_spacing(0);
+        m_root_container->set_frame_thickness(2);
+        m_root_container->set_frame_shape(Gfx::FrameShape::Container);
+        m_root_container->set_frame_shadow(Gfx::FrameShadow::Raised);
+
+        m_percent_box = m_root_container->add<GUI::CheckBox>("\xE2\x84\xB9");
+        m_percent_box->set_size_policy(GUI::SizePolicy::Fixed, GUI::SizePolicy::Fixed);
+        m_percent_box->set_preferred_size(27, 16);
+        m_percent_box->set_checked(false);
+        m_percent_box->set_tooltip("Show percent");
+        m_percent_box->on_checked = [&](bool show_percent) {
+            m_show_percent = show_percent;
+            if (!m_show_percent) {
+                window()->resize(16, 16);
+                m_percent_box->set_tooltip("Show percent");
+            } else {
+                window()->resize(44, 16);
+                m_percent_box->set_tooltip("Hide percent");
+            }
+            reposition_slider_window();
+            GUI::Application::the()->hide_tooltip();
+        };
+
+        m_slider = m_root_container->add<GUI::VerticalSlider>();
+        m_slider->set_max(20);
+        m_slider->set_value(0);
+        m_slider->set_knob_size_mode(GUI::Slider::KnobSizeMode::Proportional);
+        m_slider->set_size_policy(GUI::SizePolicy::Fill, GUI::SizePolicy::Fill);
+        m_slider->on_value_changed = [&](int value) {
+            int volume = clamp((20 - value) * 5, 0, 100);
+            m_audio_client->set_main_mix_volume(volume);
+            update();
+        };
+
+        m_mute_box = m_root_container->add<GUI::CheckBox>("\xE2\x9D\x8C");
+        m_mute_box->set_size_policy(GUI::SizePolicy::Fixed, GUI::SizePolicy::Fixed);
+        m_mute_box->set_preferred_size(27, 16);
+        m_mute_box->set_checked(false);
+        m_mute_box->set_tooltip("Mute");
+        m_mute_box->on_checked = [&](bool is_muted) {
+            m_mute_box->set_tooltip(is_muted ? "Unmute" : "Mute");
+            m_audio_client->set_muted(is_muted);
+            GUI::Application::the()->hide_tooltip();
+        };
     }
 
-    virtual ~AudioWidget() override {}
+    virtual ~AudioWidget() override { }
 
 private:
     virtual void mousedown_event(GUI::MouseEvent& event) override
     {
-        if (event.button() != GUI::MouseButton::Left)
+        if (event.button() == GUI::MouseButton::Left) {
+            if (!m_slider_window->is_visible())
+                open();
+            else
+                close();
             return;
-        m_audio_client->set_muted(!m_audio_muted);
-        update();
+        }
+        if (event.button() == GUI::MouseButton::Right) {
+            m_audio_client->set_muted(!m_audio_muted);
+            update();
+        }
     }
 
     virtual void mousewheel_event(GUI::MouseEvent& event) override
@@ -75,6 +148,7 @@ private:
             return;
         int volume = clamp(m_audio_volume - event.wheel_delta() * 5, 0, 100);
         m_audio_client->set_main_mix_volume(volume);
+        m_slider->set_value(20 - (volume / 5));
         update();
     }
 
@@ -87,8 +161,21 @@ private:
         auto& audio_bitmap = choose_bitmap_from_volume();
         painter.blit({}, audio_bitmap, audio_bitmap.rect());
 
-        auto volume_text = m_audio_muted ? "Mut" : String::format("%d%%", m_audio_volume);
-        painter.draw_text({16, 3, 24, 16}, volume_text, Gfx::Font::default_font(), Gfx::TextAlignment::TopLeft, palette().window_text());
+        if (m_show_percent) {
+            auto volume_text = m_audio_muted ? "mute" : String::format("%d%%", m_audio_volume);
+            painter.draw_text({ 16, 3, 24, 16 }, volume_text, Gfx::Font::default_fixed_width_font(), Gfx::TextAlignment::TopLeft, palette().window_text());
+        }
+    }
+
+    void open()
+    {
+        reposition_slider_window();
+        m_slider_window->show();
+    }
+
+    void close()
+    {
+        m_slider_window->hide();
     }
 
     Gfx::Bitmap& choose_bitmap_from_volume()
@@ -103,15 +190,24 @@ private:
         ASSERT_NOT_REACHED();
     }
 
+    void reposition_slider_window() { m_slider_window->set_rect(window()->rect_in_menubar().x() - 20, 19, 50, 100); }
+
     struct VolumeBitmapPair {
         int volume_threshold { 0 };
         RefPtr<Gfx::Bitmap> bitmap;
     };
 
     NonnullRefPtr<Audio::ClientConnection> m_audio_client;
-    Vector<VolumeBitmapPair, 4> m_volume_level_bitmaps;
+    Vector<VolumeBitmapPair, 5> m_volume_level_bitmaps;
+    bool m_show_percent { false };
     bool m_audio_muted { false };
     int m_audio_volume { 100 };
+
+    RefPtr<GUI::Slider> m_slider;
+    RefPtr<GUI::Window> m_slider_window;
+    RefPtr<GUI::CheckBox> m_mute_box;
+    RefPtr<GUI::CheckBox> m_percent_box;
+    RefPtr<GUI::Label> m_root_container;
 };
 
 int main(int argc, char** argv)
@@ -132,7 +228,7 @@ int main(int argc, char** argv)
     window->set_has_alpha_channel(true);
     window->set_title("Audio");
     window->set_window_type(GUI::WindowType::MenuApplet);
-    window->resize(42, 16);
+    window->resize(16, 16);
 
     window->set_main_widget<AudioWidget>();
     window->show();