Files
oak-gpui/crates/settings_ui/src/components.rs
T
Anthony Eidanddino ec202a26c8 settings ui: Add basic setting page fields to UI (#39343)
This PR starts the process of adding each setting field manually to
their respective page in the UI and organizes user/project fields as
well. The next major step is implementing a numeric stepper component,
and handling discriminate union enums as well.

I also did some minor polish in this PR as well
- Switches now use accent color
- Fixed text input rendering with zero width 
- Made setting pages scrollable 
- Set drop down context menu style to outline

Release Notes:

- N/A

---------

Co-authored-by: dino <dinojoaocosta@gmail.com>
2025-10-02 09:04:02 +00:00

84 lines
2.6 KiB
Rust

use editor::Editor;
use gpui::div;
use ui::{
ActiveTheme as _, App, FluentBuilder as _, InteractiveElement as _, IntoElement,
ParentElement as _, RenderOnce, Styled as _, Window,
};
#[derive(IntoElement)]
pub struct SettingsEditor {
initial_text: Option<String>,
placeholder: Option<&'static str>,
confirm: Option<Box<dyn Fn(Option<String>, &mut App)>>,
}
impl SettingsEditor {
pub fn new() -> Self {
Self {
initial_text: None,
placeholder: None,
confirm: None,
}
}
pub fn with_initial_text(mut self, initial_text: String) -> Self {
self.initial_text = Some(initial_text);
self
}
pub fn with_placeholder(mut self, placeholder: &'static str) -> Self {
self.placeholder = Some(placeholder);
self
}
pub fn on_confirm(mut self, confirm: impl Fn(Option<String>, &mut App) + 'static) -> Self {
self.confirm = Some(Box::new(confirm));
self
}
}
impl RenderOnce for SettingsEditor {
fn render(self, window: &mut Window, cx: &mut App) -> impl ui::IntoElement {
let editor = window.use_state(cx, {
move |window, cx| {
let mut editor = Editor::single_line(window, cx);
if let Some(text) = self.initial_text {
editor.set_text(text, window, cx);
}
if let Some(placeholder) = self.placeholder {
editor.set_placeholder_text(placeholder, window, cx);
}
// todo(settings_ui): We should have an observe global use for settings store
// so whenever a settings file is updated, the settings ui updates too
editor
}
});
let weak_editor = editor.downgrade();
let theme_colors = cx.theme().colors();
div()
.py_1()
.px_2()
.min_w_64()
.rounded_md()
.border_1()
.border_color(theme_colors.border)
.bg(theme_colors.editor_background)
.child(editor)
.when_some(self.confirm, |this, confirm| {
this.on_action::<menu::Confirm>({
move |_, _, cx| {
let Some(editor) = weak_editor.upgrade() else {
return;
};
let new_value = editor.read_with(cx, |editor, cx| editor.text(cx));
let new_value = (!new_value.is_empty()).then_some(new_value);
confirm(new_value, cx);
}
})
})
}
}