diff --git a/client/assets/placeholders/eye_closed_left.png b/client/assets/placeholders/eye_closed_left.png index 87451db..88d8064 100644 Binary files a/client/assets/placeholders/eye_closed_left.png and b/client/assets/placeholders/eye_closed_left.png differ diff --git a/client/assets/placeholders/eye_closed_right.png b/client/assets/placeholders/eye_closed_right.png index 2d1a307..564ae45 100644 Binary files a/client/assets/placeholders/eye_closed_right.png and b/client/assets/placeholders/eye_closed_right.png differ diff --git a/client/assets/placeholders/eye_open_left.png b/client/assets/placeholders/eye_open_left.png index 8c58816..669b144 100644 Binary files a/client/assets/placeholders/eye_open_left.png and b/client/assets/placeholders/eye_open_left.png differ diff --git a/client/assets/placeholders/eye_open_right.png b/client/assets/placeholders/eye_open_right.png index d8ca1da..60a5f12 100644 Binary files a/client/assets/placeholders/eye_open_right.png and b/client/assets/placeholders/eye_open_right.png differ diff --git a/client/src/launcher/ui_components/build_contexts.rs b/client/src/launcher/ui_components/build_contexts.rs index f3e633f..3d86d1f 100644 --- a/client/src/launcher/ui_components/build_contexts.rs +++ b/client/src/launcher/ui_components/build_contexts.rs @@ -22,9 +22,9 @@ struct DeviceControlsContext { speaker_combo: gtk::ComboBoxText, keyboard_combo: gtk::ComboBoxText, mouse_combo: gtk::ComboBoxText, - camera_channel_toggle: gtk::CheckButton, - microphone_channel_toggle: gtk::CheckButton, - audio_channel_toggle: gtk::CheckButton, + camera_channel_toggle: gtk::ToggleButton, + microphone_channel_toggle: gtk::ToggleButton, + audio_channel_toggle: gtk::ToggleButton, audio_gain_scale: gtk::Scale, audio_gain_value: gtk::Label, mic_gain_scale: gtk::Scale, diff --git a/client/src/launcher/ui_components/build_device_controls.rs b/client/src/launcher/ui_components/build_device_controls.rs index 0610973..f5112cb 100644 --- a/client/src/launcher/ui_components/build_device_controls.rs +++ b/client/src/launcher/ui_components/build_device_controls.rs @@ -75,15 +75,24 @@ media_grid.set_row_spacing(10); media_grid.set_column_spacing(8); media_group.append(&media_grid); - let camera_channel_toggle = gtk::CheckButton::with_label("Camera"); + let camera_channel_toggle = gtk::ToggleButton::with_label("Camera"); camera_channel_toggle.set_active(state.channels.camera); camera_channel_toggle.set_tooltip_text(Some("Send webcam during relay.")); - let audio_channel_toggle = gtk::CheckButton::with_label("Speaker"); + camera_channel_toggle.add_css_class("pill-toggle"); + camera_channel_toggle.add_css_class("media-toggle"); + stabilize_button(&camera_channel_toggle, 92); + let audio_channel_toggle = gtk::ToggleButton::with_label("Speaker"); audio_channel_toggle.set_active(state.channels.audio); audio_channel_toggle.set_tooltip_text(Some("Play remote audio here.")); - let microphone_channel_toggle = gtk::CheckButton::with_label("Mic"); + audio_channel_toggle.add_css_class("pill-toggle"); + audio_channel_toggle.add_css_class("media-toggle"); + stabilize_button(&audio_channel_toggle, 92); + let microphone_channel_toggle = gtk::ToggleButton::with_label("Mic"); microphone_channel_toggle.set_active(state.channels.microphone); microphone_channel_toggle.set_tooltip_text(Some("Send mic during relay.")); + microphone_channel_toggle.add_css_class("pill-toggle"); + microphone_channel_toggle.add_css_class("media-toggle"); + stabilize_button(µphone_channel_toggle, 92); let audio_gain_adjustment = gtk::Adjustment::new( f64::from(state.audio_gain_percent), diff --git a/client/src/launcher/ui_components/combo_helpers.rs b/client/src/launcher/ui_components/combo_helpers.rs index 8f1c487..514a6b2 100644 --- a/client/src/launcher/ui_components/combo_helpers.rs +++ b/client/src/launcher/ui_components/combo_helpers.rs @@ -113,7 +113,7 @@ pub fn sync_input_device_combo( fn attach_device_control_row( grid: >k::Grid, row: i32, - stream_toggle: >k::CheckButton, + stream_toggle: &impl IsA, selector: &impl IsA, test_button: >k::Button, ) { diff --git a/client/src/launcher/ui_components/control_buttons.rs b/client/src/launcher/ui_components/control_buttons.rs index e089512..6f6fe1b 100644 --- a/client/src/launcher/ui_components/control_buttons.rs +++ b/client/src/launcher/ui_components/control_buttons.rs @@ -28,6 +28,6 @@ pub(crate) fn set_rail_button_label(button: >k::Button, label: &str) { } } -fn stabilize_button(button: >k::Button, width: i32) { - button.set_size_request(width, 36); +fn stabilize_button(button: &impl IsA, width: i32) { + button.as_ref().set_size_request(width, 36); } diff --git a/client/src/launcher/ui_components/style.rs b/client/src/launcher/ui_components/style.rs index ca65063..c2af3d3 100644 --- a/client/src/launcher/ui_components/style.rs +++ b/client/src/launcher/ui_components/style.rs @@ -147,6 +147,20 @@ pub fn install_css(window: >k::ApplicationWindow) { min-height: 36px; padding: 0 14px; } + button.media-toggle { + background: rgba(214, 81, 81, 0.18); + border-color: rgba(214, 81, 81, 0.42); + color: #f7d6d6; + font-weight: 700; + } + button.media-toggle:checked { + background: rgba(96, 214, 126, 0.20); + border-color: rgba(96, 214, 126, 0.46); + color: #dff7e4; + } + button.media-toggle:disabled { + opacity: 0.7; + } button.pill-toggle-active { background: rgba(91, 179, 162, 0.2); border-color: rgba(91, 179, 162, 0.45); diff --git a/client/src/launcher/ui_components/types.rs b/client/src/launcher/ui_components/types.rs index c13f166..15de3cc 100644 --- a/client/src/launcher/ui_components/types.rs +++ b/client/src/launcher/ui_components/types.rs @@ -128,9 +128,9 @@ pub struct LauncherWidgets { pub speaker_combo: gtk::ComboBoxText, pub keyboard_combo: gtk::ComboBoxText, pub mouse_combo: gtk::ComboBoxText, - pub camera_channel_toggle: gtk::CheckButton, - pub microphone_channel_toggle: gtk::CheckButton, - pub audio_channel_toggle: gtk::CheckButton, + pub camera_channel_toggle: gtk::ToggleButton, + pub microphone_channel_toggle: gtk::ToggleButton, + pub audio_channel_toggle: gtk::ToggleButton, pub power_auto_button: gtk::Button, pub power_on_button: gtk::Button, pub power_off_button: gtk::Button, diff --git a/testing/tests/client_launcher_layout_contract.rs b/testing/tests/client_launcher_layout_contract.rs index e6bc15f..c068056 100644 --- a/testing/tests/client_launcher_layout_contract.rs +++ b/testing/tests/client_launcher_layout_contract.rs @@ -267,9 +267,13 @@ fn media_controls_own_stream_toggles_and_inline_gain_controls() { UI_LAYOUT_SRC.contains("let power_shell = gtk::Box::new(gtk::Orientation::Vertical, 6);") ); assert!(!UI_LAYOUT_SRC.contains("let channel_heading = gtk::Label::new(Some(\"Streams\"));")); - assert!(UI_LAYOUT_SRC.contains("gtk::CheckButton::with_label(\"Camera\")")); - assert!(UI_LAYOUT_SRC.contains("gtk::CheckButton::with_label(\"Mic\")")); - assert!(UI_LAYOUT_SRC.contains("gtk::CheckButton::with_label(\"Speaker\")")); + assert!(UI_LAYOUT_SRC.contains("gtk::ToggleButton::with_label(\"Camera\")")); + assert!(UI_LAYOUT_SRC.contains("gtk::ToggleButton::with_label(\"Mic\")")); + assert!(UI_LAYOUT_SRC.contains("gtk::ToggleButton::with_label(\"Speaker\")")); + assert!(UI_LAYOUT_SRC.contains("camera_channel_toggle.add_css_class(\"media-toggle\");")); + assert!(UI_LAYOUT_SRC.contains("audio_channel_toggle.add_css_class(\"media-toggle\");")); + assert!(UI_LAYOUT_SRC.contains("microphone_channel_toggle.add_css_class(\"media-toggle\");")); + assert!(UI_LAYOUT_SRC.contains("button.media-toggle:checked")); assert!(UI_LAYOUT_SRC.contains("let camera_quality_combo = gtk::ComboBoxText::new();")); assert!(UI_LAYOUT_SRC.contains("sync_camera_quality_combo(")); assert!(UI_LAYOUT_SRC.contains("camera_quality_combo.set_size_request(88, -1);"));