Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: Update Checkbox design (#22794)

Browse source 
This PR shifts the design of checkboxes and introduces ways to style
checkboxes based on Elevation, or tint them with a custom color.

This may have some impacts on existing uses of checkboxes.

When creating a checkbox you now need to call `.fill` if you want the
checkbox to have a filled style.

Before:

![CleanShot 2025-01-07 at 15 54
57@2x](https://github.com/user-attachments/assets/44463383-018e-4e7d-ac60-f3e7e643661d)

![CleanShot 2025-01-07 at 15 56
17@2x](https://github.com/user-attachments/assets/c72af034-4987-418e-b91b-5f50337fb212)


After:

![CleanShot 2025-01-07 at 15 55
47@2x](https://github.com/user-attachments/assets/711dff92-9ec3-485a-89de-e28f0b709833)

![CleanShot 2025-01-07 at 15 56
02@2x](https://github.com/user-attachments/assets/63797be4-22b2-464d-b4d3-fefc0d95537a)


Release Notes:

- N/A
This commit is contained in:
Nate Butler 2025-01-07 16:11:39 -05:00 • committed by GitHub
parent 7a66c764b4
commit c4b470685d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 363 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

148
crates/welcome/src/welcome.rs
View file

@ -11,7 +11,7 @@ use gpui::{
};
use settings::{Settings, SettingsStore};
use std::sync::Arc;
use ui::{prelude::*, CheckboxWithLabel, Tooltip};
use ui::{prelude::*, CheckboxWithLabel, ElevationIndex, Tooltip};
use vim_mode_setting::VimModeSetting;
use workspace::{
dock::DockPosition,
@ -269,72 +269,96 @@ impl Render for WelcomePage {
.child(
h_flex()
.justify_between()
.child(CheckboxWithLabel::new(
"enable-vim",
Label::new("Enable Vim Mode"),
if VimModeSetting::get_global(cx).0 {
ui::ToggleState::Selected
} else {
ui::ToggleState::Unselected
},
cx.listener(move |this, selection, cx| {
this.telemetry
.report_app_event("welcome page: toggle vim".to_string());
this.update_settings::<VimModeSetting>(
selection,
cx,
|setting, value| *setting = Some(value),
);
}),
))
.child(
CheckboxWithLabel::new(
"enable-vim",
Label::new("Enable Vim Mode"),
if VimModeSetting::get_global(cx).0 {
ui::ToggleState::Selected
} else {
ui::ToggleState::Unselected
},
cx.listener(move |this, selection, cx| {
this.telemetry
.report_app_event("welcome page: toggle vim".to_string());
this.update_settings::<VimModeSetting>(
selection,
cx,
|setting, value| *setting = Some(value),
);
}),
)
.fill()
.elevation(ElevationIndex::ElevatedSurface),
)
.child(
IconButton::new("vim-mode", IconName::Info)
.icon_size(IconSize::XSmall)
.icon_color(Color::Muted)
.tooltip(|cx| Tooltip::text("You can also toggle Vim Mode via the command palette or Editor Controls menu.", cx)),
)
.tooltip(|cx| {
Tooltip::text(
"You can also toggle Vim Mode via the command palette or Editor Controls menu.",
cx,
)
}),
),
)
.child(CheckboxWithLabel::new(
"enable-crash",
Label::new("Send Crash Reports"),
if TelemetrySettings::get_global(cx).diagnostics {
ui::ToggleState::Selected
} else {
ui::ToggleState::Unselected
},
cx.listener(move |this, selection, cx| {
this.telemetry.report_app_event(
"welcome page: toggle diagnostic telemetry".to_string(),
);
this.update_settings::<TelemetrySettings>(selection, cx, {
move |settings, value| {
settings.diagnostics = Some(value);
telemetry::event!("Settings Changed", setting = "diagnostic telemetry", value);
}
});
}),
))
.child(CheckboxWithLabel::new(
"enable-telemetry",
Label::new("Send Telemetry"),
if TelemetrySettings::get_global(cx).metrics {
ui::ToggleState::Selected
} else {
ui::ToggleState::Unselected
},
cx.listener(move |this, selection, cx| {
this.telemetry.report_app_event(
"welcome page: toggle metric telemetry".to_string(),
);
this.update_settings::<TelemetrySettings>(selection, cx, {
move |settings, value| {
settings.metrics = Some(value);
telemetry::event!("Settings Changed", setting = "metric telemetry", value);
}
});
}),
)),
.child(
CheckboxWithLabel::new(
"enable-crash",
Label::new("Send Crash Reports"),
if TelemetrySettings::get_global(cx).diagnostics {
ui::ToggleState::Selected
} else {
ui::ToggleState::Unselected
},
cx.listener(move |this, selection, cx| {
this.telemetry.report_app_event(
"welcome page: toggle diagnostic telemetry".to_string(),
);
this.update_settings::<TelemetrySettings>(selection, cx, {
move |settings, value| {
settings.diagnostics = Some(value);
telemetry::event!(
"Settings Changed",
setting = "diagnostic telemetry",
value
);
}
});
}),
)
.fill()
.elevation(ElevationIndex::ElevatedSurface),
)
.child(
CheckboxWithLabel::new(
"enable-telemetry",
Label::new("Send Telemetry"),
if TelemetrySettings::get_global(cx).metrics {
ui::ToggleState::Selected
} else {
ui::ToggleState::Unselected
},
cx.listener(move |this, selection, cx| {
this.telemetry.report_app_event(
"welcome page: toggle metric telemetry".to_string(),
);
this.update_settings::<TelemetrySettings>(selection, cx, {
move |settings, value| {
settings.metrics = Some(value);
telemetry::event!(
"Settings Changed",
setting = "metric telemetry",
value
);
}
});
}),
)
.fill()
.elevation(ElevationIndex::ElevatedSurface),
),
),
)
}