1
0
Fork 0

Add ScrollView styling to make it look flatter

This commit is contained in:
Robbert van der Helm 2022-03-22 18:31:40 +01:00
parent 2e91a65f01
commit ff000565e5
5 changed files with 50 additions and 6 deletions

8
Cargo.lock generated
View file

@ -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",

View file

@ -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;
}

View file

@ -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;

View file

@ -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

View file

@ -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,