Skip to content

Commit a6af8c2

Browse files
Iemand005zmerp
Iemand005
and
zmerp
authored
First set of UI tweaks (#3002)
* Tweak frame corner radius * Adjust settings panel corner radius * Square reset buttons * Switch scale fix * Fixed slider value misalignment * Formatting and cleanup * Variable rename * Formatting * Formatting and small rename * Undo automatic clang formatting * Undo more automatic clang formatting * Undo header formatting * Theme scrollbar and toggle constants and removed unnecessary scope. * Set switch dot diameter to scrollbar dot diameter * Move corner radius inline * Remove redundant clone and extract settings tab frame margin to theme.rs * Formatting * Move tab margin constant and remove comment * Extract frame padding to a constant in `theme.rs` instead of hard coded values. Replaced hard coded frame corner radius with calculation. * Add back text spacing * Make settings tabs padding and radius match that of other frames. Set notice panel corner radius to match buttons. * Formatting * Setting display name updates * UI tweaks Co-Authored-By: Lasse Lauwerys <[email protected]> * Refactor number.rs and fix textbox handling * Fix wrong presets names * 7Remove duplicate import * Fix number.rs * Formatting * Address comments --------- Co-authored-by: Riccardo Zaglia <[email protected]>
1 parent 9fee606 commit a6af8c2

File tree

12 files changed

+139
-85
lines changed

12 files changed

+139
-85
lines changed

‎alvr/dashboard/src/dashboard/components/about.rs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
use alvr_common::ALVR_VERSION;
22
use alvr_gui_common::theme;
3-
use eframe::egui::{self, Frame, RichText, ScrollArea, Ui};
3+
use eframe::egui::{Frame, RichText, ScrollArea, Ui};
44

55
pub fn about_tab_ui(ui: &mut Ui) {
66
ui.label(RichText::new(format!("ALVR streamer v{}", *ALVR_VERSION)).size(30.0));
@@ -19,7 +19,7 @@ pub fn about_tab_ui(ui: &mut Ui) {
1919
ui.label("License:");
2020
Frame::group(ui.style())
2121
.fill(theme::DARKER_BG)
22-
.inner_margin(egui::vec2(15.0, 12.0))
22+
.inner_margin(theme::FRAME_PADDING)
2323
.show(ui, |ui| {
2424
ScrollArea::new([false, true])
2525
.id_salt("license_scroll")

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

Lines changed: 63 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -58,16 +58,17 @@ impl DevicesTab {
5858

5959
if !connected_to_server {
6060
Frame::group(ui.style())
61+
.inner_margin(theme::FRAME_PADDING)
6162
.fill(log_colors::WARNING_LIGHT)
6263
.show(ui, |ui| {
6364
Grid::new(0).num_columns(2).show(ui, |ui| {
6465
ui.horizontal(|ui| {
65-
ui.add_space(10.0);
66+
ui.add_space(theme::FRAME_TEXT_SPACING);
6667
ui.heading(
67-
RichText::new(format!(
68-
"ALVR requires running SteamVR! {}",
69-
"Devices will not be discovered or connected"
70-
))
68+
RichText::new(
69+
"ALVR requires running SteamVR! \
70+
Devices will not be discovered or connected.",
71+
)
7172
.color(Color32::BLACK)
7273
.size(16.0),
7374
);
@@ -96,15 +97,15 @@ impl DevicesTab {
9697
requests.push(request);
9798
}
9899

99-
ui.add_space(10.0);
100+
ui.add_space(theme::FRAME_PADDING);
100101

101102
if let Some(clients) = &self.new_devices
102103
&& let Some(request) = new_clients_section(ui, clients)
103104
{
104105
requests.push(request);
105106
}
106107

107-
ui.add_space(10.0);
108+
ui.add_space(theme::FRAME_PADDING);
108109

109110
if let Some(clients) = &mut self.trusted_devices
110111
&& let Some(request) = trusted_clients_section(
@@ -194,52 +195,61 @@ fn wired_client_section(
194195

195196
Frame::group(ui.style())
196197
.fill(theme::SECTION_BG)
197-
.inner_margin(egui::vec2(15.0, 12.0))
198+
.inner_margin(egui::vec2(
199+
theme::FRAME_PADDING + theme::FRAME_TEXT_SPACING,
200+
theme::FRAME_PADDING,
201+
))
198202
.show(ui, |ui| {
199-
Grid::new("wired-client")
200-
.num_columns(2)
201-
.spacing(egui::vec2(8.0, 8.0))
202-
.show(ui, |ui| {
203-
ui.heading("Wired Connection");
204-
ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
205-
let mut wired = maybe_client.is_some();
206-
if alvr_gui_common::switch(ui, &mut wired).changed() {
207-
if wired {
208-
request = Some(ServerRequest::UpdateClientList {
209-
hostname: WIRED_CLIENT_HOSTNAME.to_owned(),
210-
action: ClientConnectionsAction::AddIfMissing {
211-
trusted: true,
212-
manual_ips: Vec::new(),
213-
},
214-
});
215-
} else {
216-
request = Some(ServerRequest::UpdateClientList {
217-
hostname: WIRED_CLIENT_HOSTNAME.to_owned(),
218-
action: ClientConnectionsAction::RemoveEntry,
219-
});
220-
}
221-
}
222-
});
223-
ui.end_row();
224-
225-
if let Some(progress) = adb_download_progress.filter(|p| *p < 1.0) {
226-
ui.horizontal(|ui| {
227-
ui.label("ADB download progress");
228-
});
229-
ui.horizontal(|ui| {
230-
ui.add(ProgressBar::new(progress).animate(true).show_percentage());
231-
});
232-
ui.end_row();
233-
} else if let Some((_, data)) = maybe_client {
234-
ui.horizontal(|ui| {
235-
ui.label(&data.display_name);
236-
});
203+
ui.horizontal(|ui| {
204+
Grid::new("wired-client")
205+
.num_columns(2)
206+
.spacing(egui::vec2(8.0, 8.0))
207+
.show(ui, |ui| {
208+
ui.heading("Wired Connection");
237209
ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
238-
connection_label(ui, &data.connection_state);
210+
let mut wired = maybe_client.is_some();
211+
212+
if alvr_gui_common::switch(ui, &mut wired).changed() {
213+
if wired {
214+
request = Some(ServerRequest::UpdateClientList {
215+
hostname: WIRED_CLIENT_HOSTNAME.to_owned(),
216+
action: ClientConnectionsAction::AddIfMissing {
217+
trusted: true,
218+
manual_ips: Vec::new(),
219+
},
220+
});
221+
} else {
222+
request = Some(ServerRequest::UpdateClientList {
223+
hostname: WIRED_CLIENT_HOSTNAME.to_owned(),
224+
action: ClientConnectionsAction::RemoveEntry,
225+
});
226+
}
227+
}
228+
ui.horizontal(|ui| {
229+
ui.add_space(theme::FRAME_TEXT_SPACING);
230+
});
239231
});
240232
ui.end_row();
241-
}
242-
});
233+
234+
if let Some(progress) = adb_download_progress.filter(|p| *p < 1.0) {
235+
ui.horizontal(|ui| {
236+
ui.label("ADB download progress");
237+
});
238+
ui.horizontal(|ui| {
239+
ui.add(ProgressBar::new(progress).animate(true).show_percentage());
240+
});
241+
ui.end_row();
242+
} else if let Some((_, data)) = maybe_client {
243+
ui.horizontal(|ui| {
244+
ui.label(&data.display_name);
245+
});
246+
ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
247+
connection_label(ui, &data.connection_state);
248+
});
249+
ui.end_row();
250+
}
251+
});
252+
});
243253
});
244254

245255
request
@@ -252,12 +262,12 @@ fn new_clients_section(
252262
let mut request = None;
253263

254264
Frame::group(ui.style())
265+
.inner_margin(theme::FRAME_PADDING)
255266
.fill(theme::SECTION_BG)
256267
.show(ui, |ui| {
257268
ui.vertical_centered_justified(|ui| {
258-
ui.add_space(5.0);
259269
ui.horizontal(|ui| {
260-
ui.add_space(10.0);
270+
ui.add_space(theme::FRAME_TEXT_SPACING);
261271
ui.heading("New Wireless Devices");
262272

263273
// Extend to the right
@@ -307,10 +317,11 @@ fn trusted_clients_section(
307317

308318
Frame::group(ui.style())
309319
.fill(theme::SECTION_BG)
320+
.inner_margin(theme::FRAME_PADDING)
310321
.show(ui, |ui| {
311322
Grid::new(0).num_columns(2).show(ui, |ui| {
312323
ui.horizontal(|ui| {
313-
ui.add_space(10.0);
324+
ui.add_space(theme::FRAME_TEXT_SPACING);
314325
ui.heading("Trusted Wireless Devices");
315326
});
316327

‎alvr/dashboard/src/dashboard/components/installation.rs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,9 @@ impl InstallationTab {
6464

6565
Frame::group(ui.style())
6666
.fill(theme::SECTION_BG)
67+
.inner_margin(theme::FRAME_PADDING)
6768
.show(ui, |ui| {
6869
ui.vertical_centered(|ui| {
69-
ui.add_space(5.0);
7070
ui.label(RichText::new("Registered drivers").size(18.0));
7171
});
7272

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ use super::{
55
use crate::dashboard::ServerRequest;
66
use alvr_gui_common::{DisplayString, theme};
77
use alvr_session::{SessionSettings, Settings};
8-
use eframe::egui::{self, Align, Frame, Grid, Layout, RichText, ScrollArea, Ui};
8+
use eframe::egui::{Align, Frame, Grid, Layout, RichText, ScrollArea, Ui};
99
#[cfg(target_arch = "wasm32")]
1010
use instant::Instant;
1111
use serde_json as json;
@@ -125,7 +125,7 @@ impl SettingsTab {
125125
ui.with_layout(Layout::left_to_right(Align::Min), |ui| {
126126
Frame::group(ui.style())
127127
.fill(theme::DARKER_BG)
128-
.inner_margin(egui::vec2(15.0, 12.0))
128+
.inner_margin(theme::FRAME_PADDING)
129129
.show(ui, |ui| {
130130
ui.horizontal_wrapped(|ui| {
131131
ui.selectable_value(

‎alvr/dashboard/src/dashboard/components/settings_controls/notice.rs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
use alvr_gui_common::theme::log_colors;
1+
use alvr_gui_common::theme::{self, log_colors};
22
use eframe::{
33
egui::{Frame, Label, RichText, Ui},
44
epaint::Color32,
@@ -7,6 +7,7 @@ use eframe::{
77
pub fn notice(ui: &mut Ui, text: &str) {
88
Frame::group(ui.style())
99
.fill(log_colors::WARNING_LIGHT)
10+
.corner_radius(theme::CORNER_RADIUS)
1011
.show(ui, |ui| {
1112
ui.add(Label::new(RichText::new(text).size(11.0).color(Color32::BLACK)).wrap());
1213
});

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

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
use super::{NestingInfo, reset};
22
use crate::dashboard::components::f64_eq;
3+
use alvr_gui_common::theme::SCROLLBAR_DOT_DIAMETER;
34
use alvr_packets::PathValuePair;
45
use alvr_session::settings_schema::{NumberType, NumericGuiType};
56
use eframe::{
@@ -84,36 +85,50 @@ impl Control {
8485
step,
8586
logarithmic,
8687
} => {
87-
let mut slider =
88-
Slider::new(editing_value_mut, range.clone()).logarithmic(*logarithmic);
89-
88+
let mut slider = Slider::new(editing_value_mut, range.clone())
89+
.logarithmic(*logarithmic)
90+
.show_value(false);
9091
if let Some(step) = step {
9192
slider = slider.step_by(*step);
9293
}
9394
if !matches!(self.ty, NumberType::Float) {
9495
slider = slider.integer();
9596
}
97+
let slider_response = {
98+
ui.style_mut().spacing.interact_size.y = SCROLLBAR_DOT_DIAMETER;
99+
ui.add(slider)
100+
};
101+
102+
let mut drag_value = DragValue::new(editing_value_mut);
103+
// Note: the following ifs cannot be merged with the ones above to avoid double
104+
// mutable borrow of editing_value_mut.
105+
if let Some(step) = step {
106+
drag_value = drag_value.speed(*step);
107+
}
108+
if !matches!(self.ty, NumberType::Float) {
109+
drag_value = drag_value.fixed_decimals(0);
110+
}
96111
if let Some(suffix) = &self.suffix {
97-
slider = slider.suffix(suffix);
112+
drag_value = drag_value.suffix(suffix);
98113
}
114+
let textbox_response = ui.add(drag_value);
99115

100-
// todo: investigate why the slider does not get centered vertically
101-
ui.with_layout(Layout::left_to_right(Align::Center), |ui| ui.add(slider))
102-
.inner
116+
slider_response.union(textbox_response)
103117
}
104118
NumericGuiType::TextBox => {
105-
let mut textbox = DragValue::new(editing_value_mut);
119+
let mut drag_value = DragValue::new(editing_value_mut);
106120

107121
if !matches!(self.ty, NumberType::Float) {
108-
textbox = textbox.fixed_decimals(0);
122+
drag_value = drag_value.fixed_decimals(0);
109123
}
110124
if let Some(suffix) = &self.suffix {
111-
textbox = textbox.suffix(suffix);
125+
drag_value = drag_value.suffix(suffix);
112126
}
113127

114-
ui.add(textbox)
128+
ui.add(drag_value)
115129
}
116130
};
131+
117132
if response.drag_started() || response.gained_focus() {
118133
self.editing_value_f64 = Some(session_value)
119134
} else if response.drag_stopped() || response.lost_focus() {

‎alvr/dashboard/src/dashboard/components/settings_controls/presets/builtin_schema.rs‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ fn bool_modifier(target_path: &str, value: bool) -> PresetModifier {
3131

3232
pub fn resolution_schema() -> PresetSchemaNode {
3333
PresetSchemaNode::HigherOrderChoice(HigherOrderChoiceSchema {
34-
name: "resolution".into(),
34+
name: "Resolution".into(),
3535
strings: [(
3636
"help".into(),
3737
"Choosing too high resolution (commonly 'High (width: 5184)') may result in high latency or black screen.".into(),
@@ -88,7 +88,7 @@ pub fn resolution_schema() -> PresetSchemaNode {
8888

8989
pub fn framerate_schema() -> PresetSchemaNode {
9090
PresetSchemaNode::HigherOrderChoice(HigherOrderChoiceSchema {
91-
name: "preferred_framerate".into(),
91+
name: "Preferred framerate".into(),
9292
strings: HashMap::new(),
9393
flags: ["steamvr-restart".into()].into_iter().collect(),
9494
options: [60, 72, 80, 90, 120]
@@ -111,7 +111,7 @@ pub fn framerate_schema() -> PresetSchemaNode {
111111

112112
pub fn codec_preset_schema() -> PresetSchemaNode {
113113
PresetSchemaNode::HigherOrderChoice(HigherOrderChoiceSchema {
114-
name: "codec_preset".into(),
114+
name: "Codec preset".into(),
115115
strings: [(
116116
"help".into(),
117117
"AV1 encoding is only supported on RDNA3, Ada Lovelace, Intel ARC or newer GPUs (AMD RX 7xxx+ , NVIDIA RTX 40xx+, Intel ARC)
@@ -141,7 +141,7 @@ and on headsets that have XR2 Gen 2 onboard (Quest 3, Pico 4 Ultra)"
141141

142142
pub fn encoder_preset_schema() -> PresetSchemaNode {
143143
PresetSchemaNode::HigherOrderChoice(HigherOrderChoiceSchema {
144-
name: "encoder_preset".into(),
144+
name: "Encoder preset".into(),
145145
strings: [(
146146
"help".into(),
147147
"Selecting a quality too high may result in stuttering or still image!".into(),
@@ -180,7 +180,7 @@ pub fn encoder_preset_schema() -> PresetSchemaNode {
180180
pub fn foveation_preset_schema() -> PresetSchemaNode {
181181
const PREFIX: &str = "session_settings.video.foveated_encoding";
182182
PresetSchemaNode::HigherOrderChoice(HigherOrderChoiceSchema {
183-
name: "foveation_preset".into(),
183+
name: "Foveation preset".into(),
184184
strings: [(
185185
"help".into(),
186186
"Foveation affects pixelation on the edges of \

‎alvr/dashboard/src/dashboard/components/settings_controls/presets/higher_order_choice.rs‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ use settings_schema::{SchemaEntry, SchemaNode};
77
use std::collections::{HashMap, HashSet};
88

99
pub struct Control {
10+
name: String,
1011
modifiers: HashMap<String, Vec<PathValuePair>>,
1112
control: SettingControl,
1213
preset_json: json::Value,
@@ -35,11 +36,11 @@ impl Control {
3536
.collect();
3637

3738
let mut strings = schema.strings;
38-
strings.insert("display_name".into(), schema.name);
39+
strings.insert("display_name".into(), schema.name.clone());
3940

4041
let control_schema = SchemaNode::Section {
4142
entries: vec![SchemaEntry {
42-
name: "".into(),
43+
name: schema.name.clone(),
4344
strings,
4445
flags: schema.flags,
4546
content: SchemaNode::Choice {
@@ -76,9 +77,10 @@ impl Control {
7677
control_schema,
7778
);
7879

79-
let preset_json = json::json!({ "": { "variant": "" } });
80+
let preset_json = json::json!({ {&schema.name}: { "variant": "" } });
8081

8182
Self {
83+
name: schema.name,
8284
modifiers,
8385
control,
8486
preset_json,
@@ -124,7 +126,7 @@ impl Control {
124126
}
125127

126128
// Note: if no modifier matched, the control will unselect all options
127-
self.preset_json[""]["variant"] = json::Value::String(selected_option);
129+
self.preset_json[&self.name]["variant"] = json::Value::String(selected_option);
128130
}
129131

130132
pub fn ui(&mut self, ui: &mut Ui) -> Vec<PathValuePair> {

0 commit comments

Comments
 (0)