djkato/egui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[style] more spacious, more alignmnet, more readable

Browse source
This commit is contained in:
Emil Ernerfeldt 2020-09-19 00:58:36 +02:00
parent 05316b7045
commit 2c611292ff
5 changed files with 78 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
egui/src/demos/toggle_switch.rs
View file

@ -19,7 +19,7 @@ pub fn toggle(ui: &mut Ui, on: &mut bool) -> Response {
// 1. Deciding widget size:
// You can query the `ui` how much space is available,
// but in this example we have a fixed size component:
// but in this example we have a fixed size widget of the default size for a button:
let desired_size = ui.style().spacing.interact_size;
// 2. Allocating space:

51
egui/src/style.rs
View file

@ -198,15 +198,15 @@ impl Default for Style {
impl Default for Spacing {
fn default() -> Self {
Self {
item_spacing: vec2(8.0, 6.0),
item_spacing: vec2(8.0, 5.0),
window_padding: vec2(6.0, 6.0),
button_padding: vec2(2.0, 0.0),
button_expand: vec2(1.0, 1.0),
button_padding: vec2(4.0, 1.0),
button_expand: vec2(0.0, 0.0), // TODO: remove
indent: 21.0,
interact_size: vec2(28.0, 14.0), // TODO: larger interact_size.y
interact_size: vec2(40.0, 20.0), // TODO: larger interact_size.y
slider_width: 140.0,
icon_width: 14.0,
menu_bar_height: 16.0,
icon_width: 20.0, // TODO: replace with interact_size.y ?
menu_bar_height: 20.0, // TODO: replace with interact_size.y ?
}
}
}
@ -330,12 +330,12 @@ impl Spacing {
ui_slider_vec2(ui, window_padding, 0.0..=10.0, "window_padding");
ui_slider_vec2(ui, button_padding, 0.0..=10.0, "button_padding");
ui_slider_vec2(ui, button_expand, 0.0..=10.0, "button_expand");
ui.add(Slider::f32(indent, 0.0..=100.0).text("indent"));
ui_slider_vec2(ui, interact_size, 0.0..=40.0, "interact_size")
ui_slider_vec2(ui, interact_size, 0.0..=60.0, "interact_size")
.tooltip_text("Minimum size of an interactive widget");
ui.add(Slider::f32(indent, 0.0..=100.0).text("indent"));
ui.add(Slider::f32(slider_width, 0.0..=1000.0).text("slider_width"));
ui.add(Slider::f32(icon_width, 0.0..=40.0).text("icon_width"));
ui.add(Slider::f32(menu_bar_height, 0.0..=40.0).text("menu_bar_height"));
ui.add(Slider::f32(icon_width, 0.0..=60.0).text("icon_width"));
ui.add(Slider::f32(menu_bar_height, 0.0..=60.0).text("menu_bar_height"));
}
}
@ -436,10 +436,16 @@ impl Stroke {
pub fn ui(&mut self, ui: &mut crate::Ui, text: &str) {
let Self { width, color } = self;
ui.horizontal(|ui| {
ui.label(format!("{}: ", text));
ui.add(DragValue::f32(width).speed(0.1).range(0.0..=5.0))
.tooltip_text("Width");
ui.color_edit_button_srgba(color);
ui.label(text);
// stroke preview:
let stroke_rect = ui.allocate_space(ui.style().spacing.interact_size);
let left = stroke_rect.left_center();
let right = stroke_rect.right_center();
ui.painter().line_segment([left, right], (*width, *color));
});
}
}
@ -452,16 +458,35 @@ fn ui_slider_vec2(
text: &str,
) -> Response {
let (_, rect) = ui.horizontal(|ui| {
ui.label(format!("{}: ", text));
/*
let fsw = full slider_width
let ssw = small slider_width
let space = item_spacing.x
let value = interact_size.x;
fsw + space + value = ssw + space + value + space + ssw + space + value
fsw + space + value = 2 * ssw + 3 * space + 2 * value
fsw + space - value = 2 * ssw + 3 * space
fsw - 2 * space - value = 2 * ssw
ssw = fsw / 2 - space - value / 2
*/
// let spacing = &ui.style().spacing;
// let space = spacing.item_spacing.x;
// let value_w = spacing.interact_size.x;
// let full_slider_width = spacing.slider_width;
// let small_slider_width = full_slider_width / 2.0 - space - value_w / 2.0;
// ui.style_mut().spacing.slider_width = small_slider_width;
ui.add(Slider::f32(&mut value.x, range.clone()).text("w"));
ui.add(Slider::f32(&mut value.y, range.clone()).text("h"));
ui.label(text);
});
ui.interact_hover(rect)
}
fn ui_color(ui: &mut Ui, srgba: &mut Srgba, text: &str) {
ui.horizontal(|ui| {
ui.label(format!("{}: ", text));
ui.color_edit_button_srgba(srgba);
ui.label(text);
});
}

9
egui/src/widgets/drag_value.rs
View file

@ -24,7 +24,7 @@ pub struct DragValue<'a> {
}
impl<'a> DragValue<'a> {
fn from_get_set(value_function: impl 'a + FnMut(Option<f64>) -> f64) -> Self {
pub(crate) fn from_get_set(value_function: impl 'a + FnMut(Option<f64>) -> f64) -> Self {
Self {
value_function: Box::new(value_function),
speed: 1.0,
@ -74,8 +74,8 @@ impl<'a> DragValue<'a> {
}
/// Clamp the value to this range
pub fn range(mut self, range: RangeInclusive<f64>) -> Self {
self.range = range;
pub fn range(mut self, range: RangeInclusive<f32>) -> Self {
self.range = *range.start() as f64..=*range.end() as f64;
self
}
@ -110,6 +110,7 @@ impl<'a> Widget for DragValue<'a> {
let is_kb_editing = ui.memory().has_kb_focus(kb_edit_id);
if is_kb_editing {
let button_width = ui.style().spacing.interact_size.x;
let mut value_text = ui
.memory()
.temp_edit_string
@ -119,7 +120,7 @@ impl<'a> Widget for DragValue<'a> {
TextEdit::new(&mut value_text)
.id(kb_edit_id)
.multiline(false)
.desired_width(0.0)
.desired_width(button_width)
.text_style(TextStyle::Monospace),
);
if let Ok(parsed_value) = value_text.parse() {

15
egui/src/widgets/mod.rs
View file

@ -350,11 +350,16 @@ impl<'a> Widget for Checkbox<'a> {
let font = &ui.fonts()[text_style];
let galley = font.layout_single_line(text);
let icon_width = ui.style().spacing.icon_width;
let button_padding = ui.style().spacing.button_padding;
let mut desired_size =
button_padding + vec2(icon_width, 0.0) + galley.size + button_padding;
desired_size = desired_size.at_least(ui.style().spacing.interact_size);
let spacing = &ui.style().spacing;
let icon_width = spacing.icon_width;
let horizontal_spacing = 0.0; //spacing.item_spacing.x
let button_padding = spacing.button_padding;
let mut desired_size = button_padding
+ vec2(icon_width, 0.0)
+ vec2(horizontal_spacing, 0.0)
+ galley.size
+ button_padding;
desired_size = desired_size.at_least(spacing.interact_size);
let rect = ui.allocate_space(desired_size);
let response = ui.interact(rect, id, Sense::click());

30
egui/src/widgets/slider.rs
View file

@ -191,21 +191,37 @@ impl<'a> Slider<'a> {
}
}
/// Just the text label
fn text_ui(&mut self, ui: &mut Ui, x_range: RangeInclusive<f32>) {
fn label_ui(&mut self, ui: &mut Ui) {
if let Some(label_text) = self.text.as_deref() {
let text_color = self
.text_color
.unwrap_or_else(|| ui.style().visuals.text_color());
ui.style_mut().spacing.item_spacing.x = 0.0;
ui.add(
Label::new(format!("{}: ", label_text))
Label::new(label_text)
.multiline(false)
.text_color(text_color),
);
}
}
// fn value_ui(&mut self, ui: &mut Ui, x_range: RangeInclusive<f32>) {
// TODO: make it a drag value somehow
// fn range_width(range: &RangeInclusive<f32>) -> f32 {
// range.end() - range.start()
// }
// let range = self.range.clone();
// let get_set_f64 = |value: Option<f64>| (self.get_set_value)(value.map(|x| x as f32)) as f64;
// let speed = range_width(&range) / range_width(&x_range);
// // TODO: precision
// ui.add(
// DragValue::from_get_set(get_set_f64)
// .range(range)
// .speed(speed),
// );
// }
fn value_ui(&mut self, ui: &mut Ui, x_range: RangeInclusive<f32>) {
let kb_edit_id = self.id.expect("We should have an id by now").with("edit");
let is_kb_editing = ui.memory().has_kb_focus(kb_edit_id);
@ -213,6 +229,7 @@ impl<'a> Slider<'a> {
let value_text = self.format_value(aim_radius, x_range);
if is_kb_editing {
let button_width = ui.style().spacing.interact_size.x;
let mut value_text = ui
.memory()
.temp_edit_string
@ -222,7 +239,7 @@ impl<'a> Slider<'a> {
TextEdit::new(&mut value_text)
.id(kb_edit_id)
.multiline(false)
.desired_width(0.0)
.desired_width(button_width)
.text_color_opt(self.text_color)
.text_style(TextStyle::Monospace),
);
@ -281,7 +298,8 @@ impl<'a> Widget for Slider<'a> {
let slider_response = self.allocate_slide_space(ui, height);
self.slider_ui(ui, &slider_response);
let x_range = x_range(&slider_response.rect);
self.text_ui(ui, x_range);
self.value_ui(ui, x_range);
self.label_ui(ui);
slider_response
})
.0