From ff000565e58e8f32882477c24eb731f2b0225231 Mon Sep 17 00:00:00 2001
From: Robbert van der Helm <mail@robbertvanderhelm.nl>
Date: Tue, 22 Mar 2022 18:31:40 +0100
Subject: [PATCH] Add ScrollView styling to make it look flatter

---
 Cargo.lock                               |  8 +++---
 nih_plug_vizia/assets/theme.css          | 35 ++++++++++++++++++++++++
 nih_plug_vizia/assets/widgets.css        |  1 +
 nih_plug_vizia/src/lib.rs                |  3 +-
 nih_plug_vizia/src/widgets/generic_ui.rs |  9 ++++++
 5 files changed, 50 insertions(+), 6 deletions(-)
 create mode 100644 nih_plug_vizia/assets/theme.css

diff --git a/Cargo.lock b/Cargo.lock
index 47f65699..0481e988 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3606,7 +3606,7 @@ checksum = "49874b5167b65d7193b8aba1567f5c7d93d001cafc34600cee003eda787e483f"
 [[package]]
 name = "vizia"
 version = "0.1.0"
-source = "git+https://github.com/robbert-vdh/vizia.git?branch=feature/baseview-modifiers#4be520b39ba4a93e9e24fb769b058e49ee8256d6"
+source = "git+https://github.com/robbert-vdh/vizia.git?branch=feature/baseview-modifiers#8772bc3f68441fb2ae89809b5c4624be4ae21da3"
 dependencies = [
  "vizia_baseview",
  "vizia_core",
@@ -3615,7 +3615,7 @@ dependencies = [
 [[package]]
 name = "vizia_baseview"
 version = "0.1.0"
-source = "git+https://github.com/robbert-vdh/vizia.git?branch=feature/baseview-modifiers#4be520b39ba4a93e9e24fb769b058e49ee8256d6"
+source = "git+https://github.com/robbert-vdh/vizia.git?branch=feature/baseview-modifiers#8772bc3f68441fb2ae89809b5c4624be4ae21da3"
 dependencies = [
  "baseview",
  "femtovg",
@@ -3627,7 +3627,7 @@ dependencies = [
 [[package]]
 name = "vizia_core"
 version = "0.1.0"
-source = "git+https://github.com/robbert-vdh/vizia.git?branch=feature/baseview-modifiers#4be520b39ba4a93e9e24fb769b058e49ee8256d6"
+source = "git+https://github.com/robbert-vdh/vizia.git?branch=feature/baseview-modifiers#8772bc3f68441fb2ae89809b5c4624be4ae21da3"
 dependencies = [
  "bitflags",
  "copypasta",
@@ -3650,7 +3650,7 @@ dependencies = [
 [[package]]
 name = "vizia_derive"
 version = "0.1.0"
-source = "git+https://github.com/robbert-vdh/vizia.git?branch=feature/baseview-modifiers#4be520b39ba4a93e9e24fb769b058e49ee8256d6"
+source = "git+https://github.com/robbert-vdh/vizia.git?branch=feature/baseview-modifiers#8772bc3f68441fb2ae89809b5c4624be4ae21da3"
 dependencies = [
  "proc-macro2",
  "quote",
diff --git a/nih_plug_vizia/assets/theme.css b/nih_plug_vizia/assets/theme.css
new file mode 100644
index 00000000..7c1b01dd
--- /dev/null
+++ b/nih_plug_vizia/assets/theme.css
@@ -0,0 +1,35 @@
+/* Overrides for default VIZIA widgets */
+
+* {
+  color: #0a0a0a;
+  /* VIZIA uses points instead of pixels, this is 20px */
+  font-size: 15;
+}
+
+scrollview > vstack {
+  /* Normally the scroll bar overlaps with the content, so we'll add a little offset to prevent that */
+  child-right: 15px;
+}
+scrollview scrollbar {
+  background-color: #dadada;
+  border-radius: 0;
+  child-space: 0;
+}
+scrollview scrollbar.horizontal {
+  right: 10px;
+  height: 10px;
+}
+scrollview scrollbar.vertical {
+  width: 10px;
+}
+scrollview scrollbar .thumb {
+  background-color: #5d5d5d;
+  border-radius: 0;
+  min-width: 10px;
+  min-height: 10px;
+  transition: background-color 0.1 0;
+}
+scrollview scrollbar .thumb:hover {
+  background-color: #808080;
+  transition: background-color 0.1 0;
+}
diff --git a/nih_plug_vizia/assets/widgets.css b/nih_plug_vizia/assets/widgets.css
index 03ae51c8..be59801c 100644
--- a/nih_plug_vizia/assets/widgets.css
+++ b/nih_plug_vizia/assets/widgets.css
@@ -1,4 +1,5 @@
 /* Default styling for the widgets included in nih_plug_vizia */
+/* See ./theme.css for overrides for the default widgets */
 
 generic-ui {
   child-space: 10px;
diff --git a/nih_plug_vizia/src/lib.rs b/nih_plug_vizia/src/lib.rs
index 3147ca31..f8ea5514 100644
--- a/nih_plug_vizia/src/lib.rs
+++ b/nih_plug_vizia/src/lib.rs
@@ -97,8 +97,7 @@ impl Editor for ViziaEditor {
 
             // TOOD: `:root { background-color: #fafafa; }` in a stylesheet doesn't work
             Entity::root().set_background_color(cx, Color::rgb(250, 250, 250));
-            // VIZIA uses points instead of pixels, this is 20px
-            cx.add_theme("* { color: #0a0a0a; font-size: 15; }");
+            cx.add_theme(include_str!("../assets/theme.css"));
 
             // There doesn't seem to be any way to bundle styles with a widget, so we'll always
             // include the style sheet for our custom widgets at context creation
diff --git a/nih_plug_vizia/src/widgets/generic_ui.rs b/nih_plug_vizia/src/widgets/generic_ui.rs
index 8e4a2aca..de545d40 100644
--- a/nih_plug_vizia/src/widgets/generic_ui.rs
+++ b/nih_plug_vizia/src/widgets/generic_ui.rs
@@ -17,6 +17,15 @@ pub struct GenericUI;
 impl GenericUI {
     /// Creates a new [`GenericUi`] for all provided parameters. Use
     /// [`new_custom()`][Self::new_custom()] to decide which widget gets used for each parameter.
+    ///
+    /// Wrap this in a [`ScrollView`] for plugins with longer parameter lists:
+    ///
+    /// ```ignore
+    /// ScrollView::new(cx, 0.0, 0.0, false, true, |cx| {
+    ///     GenericUI::new(cx, Data::params);
+    /// })
+    /// .width(Percentage(100.0));
+    ///```
     pub fn new<L, PsPtr, Ps>(cx: &mut Context, params: L) -> Handle<'_, GenericUI>
     where
         L: Lens<Target = Pin<PsPtr>> + Copy,