First set of UI tweaks

alvr/dashboard/src/dashboard/components/devices.rs

@@ -64,10 +64,7 @@ impl DevicesTab {
                         ui.horizontal(|ui| {
                             ui.add_space(10.0);
                             ui.heading(
-                                RichText::new(format!(
-                                    "ALVR requires running SteamVR! {}",
-                                    "Devices will not be discovered or connected"
-                                ))
+                                RichText::new("ALVR requires running SteamVR! Devices will not be discovered or connected.")
                                 .color(Color32::BLACK)
                                 .size(16.0),
                             );
@@ -203,6 +200,7 @@ fn wired_client_section(
                     ui.heading("Wired Connection");
                     ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
                         let mut wired = maybe_client.is_some();
+
                         if alvr_gui_common::switch(ui, &mut wired).changed() {
                             if wired {
                                 request = Some(ServerRequest::UpdateClientList {

alvr/dashboard/src/dashboard/components/settings.rs

@@ -3,7 +3,10 @@ use super::{
     presets::{PresetControl, builtin_schema},
 };
 use crate::dashboard::ServerRequest;
-use alvr_gui_common::{DisplayString, theme};
+use alvr_gui_common::{
+    DisplayString,
+    theme::{self, SETTINGS_TAB_FRAME_MARGIN},
+};
 use alvr_session::{SessionSettings, Settings};
 use eframe::egui::{self, Align, Frame, Grid, Layout, RichText, ScrollArea, Ui};
 #[cfg(target_arch = "wasm32")]
@@ -123,9 +126,16 @@ impl SettingsTab {
 
         let mut path_value_pairs = vec![];
         ui.with_layout(Layout::left_to_right(Align::Min), |ui| {
+            let corner_radius =
+                ui.style().visuals.widgets.open.corner_radius.average() + SETTINGS_TAB_FRAME_MARGIN;
+
             Frame::group(ui.style())
                 .fill(theme::DARKER_BG)
-                .inner_margin(egui::vec2(15.0, 12.0))
+                .inner_margin(egui::vec2(
+                    SETTINGS_TAB_FRAME_MARGIN,
+                    SETTINGS_TAB_FRAME_MARGIN,
+                ))
+                .corner_radius(corner_radius)
                 .show(ui, |ui| {
                     ui.horizontal_wrapped(|ui| {
                         ui.selectable_value(

alvr/dashboard/src/dashboard/components/settings_controls/number.rs

@@ -1,5 +1,6 @@
 use super::{NestingInfo, reset};
 use crate::dashboard::components::f64_eq;
+use alvr_gui_common::theme::SCROLLBAR_DOT_DIAMETER;
 use alvr_packets::PathValuePair;
 use alvr_session::settings_schema::{NumberType, NumericGuiType};
 use eframe::{
@@ -78,45 +79,53 @@ impl Control {
                 &mut session_value
             };
 
-            let response = match &self.gui_type {
-                NumericGuiType::Slider {
-                    range,
-                    step,
-                    logarithmic,
-                } => {
-                    let mut slider =
-                        Slider::new(editing_value_mut, range.clone()).logarithmic(*logarithmic);
-
-                    if let Some(step) = step {
-                        slider = slider.step_by(*step);
-                    }
-                    if !matches!(self.ty, NumberType::Float) {
-                        slider = slider.integer();
-                    }
-                    if let Some(suffix) = &self.suffix {
-                        slider = slider.suffix(suffix);
-                    }
-
-                    // todo: investigate why the slider does not get centered vertically
-                    ui.with_layout(Layout::left_to_right(Align::Center), |ui| ui.add(slider))
-                        .inner
-                }
-                NumericGuiType::TextBox => {
-                    let mut textbox = DragValue::new(editing_value_mut);
+            let mut is_editing = false;
+            let mut finished_editing = false;
 
-                    if !matches!(self.ty, NumberType::Float) {
-                        textbox = textbox.fixed_decimals(0);
-                    }
-                    if let Some(suffix) = &self.suffix {
-                        textbox = textbox.suffix(suffix);
-                    }
+            if let NumericGuiType::Slider {
+                range,
+                step,
+                logarithmic,
+            } = &self.gui_type
+            {
+                let mut slider = Slider::new(editing_value_mut, range.clone())
+                    .logarithmic(*logarithmic)
+                    .show_value(false);
 
-                    ui.add(textbox)
+                if let Some(step) = step {
+                    slider = slider.step_by(*step);
                 }
-            };
-            if response.drag_started() || response.gained_focus() {
+                if !matches!(self.ty, NumberType::Float) {
+                    slider = slider.integer();
+                }
+                if let Some(suffix) = &self.suffix {
+                    slider = slider.suffix(suffix);
+                }
+
+                ui.scope(|ui| {
+                    ui.style_mut().spacing.interact_size.y = SCROLLBAR_DOT_DIAMETER;
+                    let slider_response = ui.add(slider);
+
+                    is_editing = slider_response.drag_started() || slider_response.gained_focus();
+                    finished_editing =
+                        slider_response.drag_stopped() || slider_response.lost_focus();
+                });
+            }
+
+            let mut drag_value = DragValue::new(editing_value_mut);
+
+            if !matches!(self.ty, NumberType::Float) {
+                drag_value = drag_value.fixed_decimals(0);
+            }
+            if let Some(suffix) = &self.suffix {
+                drag_value = drag_value.suffix(suffix);
+            }
+
+            let response = ui.add(drag_value);
+
+            if is_editing || response.drag_started() || response.gained_focus() {
                 self.editing_value_f64 = Some(session_value)
-            } else if response.drag_stopped() || response.lost_focus() {
+            } else if finished_editing || response.drag_stopped() || response.lost_focus() {
                 request = get_request(&self.nesting_info, *editing_value_mut, self.ty);
                 *session_fragment = to_json_value(*editing_value_mut, self.ty);
 

alvr/dashboard/src/dashboard/components/settings_controls/reset.rs

@@ -1,14 +1,18 @@
 use eframe::{
-    egui::{Button, Layout, Response, Ui},
+    egui::{self, Button, Layout, Response, Ui},
     emath::Align,
 };
 
 pub fn reset_button(ui: &mut Ui, enabled: bool, default_str: &str) -> Response {
     ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
         ui.add_space(5.0);
 
-        ui.add_enabled(enabled, Button::new("⟲"))
-            .on_hover_text(format!("Reset to {default_str}"))
+        let height = ui.spacing().interact_size.y;
+        ui.add_enabled(
+            enabled,
+            Button::new("⟲").min_size(egui::vec2(height, height)),
+        )
+        .on_hover_text(format!("Reset to {default_str}"))
     })
     .inner
 }

alvr/gui_common/src/basic_components/switch.rs

@@ -1,7 +1,9 @@
 use egui::{self, Response, Sense, StrokeKind, Ui, WidgetInfo, WidgetType};
 
+use crate::theme::SWITCH_DOT_DIAMETER;
+
 pub fn switch(ui: &mut Ui, on: &mut bool) -> Response {
-    let desired_size = ui.spacing().interact_size.y * egui::vec2(2.0, 1.0);
+    let desired_size = SWITCH_DOT_DIAMETER * egui::vec2(2.0, 1.0);
     let (rect, mut response) = ui.allocate_exact_size(desired_size, Sense::click());
     if response.clicked() {
         *on = !*on;

alvr/gui_common/src/theme.rs

@@ -7,6 +7,9 @@ pub const SECTION_BG: Color32 = Color32::from_rgb(36, 36, 36);
 pub const DARKER_BG: Color32 = Color32::from_rgb(26, 26, 26);
 pub const SEPARATOR_BG: Color32 = Color32::from_rgb(69, 69, 69);
 pub const FG: Color32 = Color32::from_rgb(250, 250, 250);
+pub const SCROLLBAR_DOT_DIAMETER: f32 = 20.0;
+pub const SWITCH_DOT_DIAMETER: f32 = SCROLLBAR_DOT_DIAMETER;
+pub const SETTINGS_TAB_FRAME_MARGIN: f32 = 12.0;
 
 pub const OK_GREEN: Color32 = Color32::GREEN;
 pub const KO_RED: Color32 = Color32::RED;
@@ -49,7 +52,10 @@ pub fn set_theme(ctx: &Context) {
     ctx.set_theme(ThemePreference::Dark);
 
     let mut style = (*ctx.style()).clone();
-    style.spacing.slider_width = 200_f32; // slider width can only be set globally
+    style.spacing.slider_width = 200_f32; // slider width can only be set globally, but you can use ui.scope to override it locally
+    style.spacing.interact_size.x = 35.0;
+    style.spacing.interact_size.y = 35.0;
+
     style.spacing.item_spacing = egui::vec2(15.0, 15.0);
     style.spacing.button_padding = egui::vec2(10.0, 10.0);
     style.text_styles.get_mut(&TextStyle::Body).unwrap().size = 14.0;
@@ -75,11 +81,12 @@ pub fn set_theme(ctx: &Context) {
     visuals.selection.bg_fill = ACCENT;
     visuals.selection.stroke = Stroke::new(1.0, FG);
 
-    visuals.widgets.noninteractive.bg_fill = BG;
     visuals.faint_bg_color = DARKER_BG;
+
+    visuals.widgets.noninteractive.bg_fill = BG;
     visuals.widgets.noninteractive.fg_stroke = Stroke::new(1.0, FG);
     visuals.widgets.noninteractive.bg_stroke = Stroke::new(0.5, SEPARATOR_BG);
-    visuals.widgets.noninteractive.corner_radius = corner_radius;
+    visuals.widgets.noninteractive.corner_radius = CornerRadius::same(15); // Frame corner radius
 
     ctx.set_visuals(visuals);
 }