[[PR Description]]
Adds checkboxes and their stories.
A checkbox can be created simply by passing an id:
~~~rust
#[derive(Component)]
pub struct Checkbox {
id: SharedString,
checked: Selected,
disabled: bool,
}
impl Checkbox {
pub fn new(id: impl Into<SharedString>) -> Self {
Self {
id: id.into(),
checked: Selected::Unselected,
disabled: false,
}
}
//...
}
~~~
I've documented this component rather thoroughly as an example of how
we've been thinking about building out UI elements:
~~~rs
pub fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>)
-> impl Component<V> {
let group_id = format!("checkbox_group_{}", self.id);
// The icon is different depending on the state of the checkbox.
//
// We need the match to return all the same type,
// so we wrap the eatch result in a div.
//
// We are still exploring the best way to handle this.
let icon = match self.checked {
// When selected, we show a checkmark.
Selected::Selected => {
div().child(
IconElement::new(Icon::Check)
.size(crate::IconSize::Small)
.color(
// If the checkbox is disabled we change the color of the icon.
if self.disabled {
IconColor::Disabled
} else {
IconColor::Selected
},
),
)
}
// In an indeterminate state, we show a dash.
Selected::Indeterminate => {
div().child(
IconElement::new(Icon::Dash)
.size(crate::IconSize::Small)
.color(
// If the checkbox is disabled we change the color of the icon.
if self.disabled {
IconColor::Disabled
} else {
IconColor::Selected
},
),
)
}
// When unselected, we show nothing.
Selected::Unselected => div(),
};
// A checkbox could be in an indeterminate state,
// for example the indeterminate state could represent:
// - a group of options of which only some are selected
// - an enabled option that is no longer available
// - a previously agreed to license that has been updated
//
// For the sake of styles we treat the indeterminate state as selected,
// but it's icon will be different.
let selected =
self.checked == Selected::Selected || self.checked ==
Selected::Indeterminate;
// We could use something like this to make the checkbox background when
selected:
//
// ~~~rust
// ...
// .when(selected, |this| {
// this.bg(cx.theme().colors().element_selected)
// })
// ~~~
//
// But we use a match instead here because the checkbox might be
disabled,
// and it could be disabled _while_ it is selected, as well as while it
is not selected.
let (bg_color, border_color) = match (self.disabled, selected) {
(true, _) => (
cx.theme().colors().ghost_element_disabled,
cx.theme().colors().border_disabled,
),
(false, true) => (
cx.theme().colors().element_selected,
cx.theme().colors().border,
),
(false, false) => (cx.theme().colors().element,
cx.theme().colors().border),
};
div()
// Rather than adding `px_1()` to add some space around the checkbox,
// we use a larger parent element to create a slightly larger
// click area for the checkbox.
.size_5()
// Because we've enlarged the click area, we need to create a
// `group` to pass down interaction events to the checkbox.
.group(group_id.clone())
.child(
div()
.flex()
// This prevent the flex element from growing
// or shrinking in response to any size changes
.flex_none()
// The combo of `justify_center()` and `items_center()`
// is used frequently to center elements in a flex container.
//
// We use this to center the icon in the checkbox.
.justify_center()
.items_center()
.m_1()
.size_4()
.rounded_sm()
.bg(bg_color)
.border()
.border_color(border_color)
// We only want the interaction states to fire when we
// are in a checkbox that isn't disabled.
.when(!self.disabled, |this| {
// Here instead of `hover()` we use `group_hover()`
// to pass it the group id.
this.group_hover(group_id.clone(), |el| {
el.bg(cx.theme().colors().element_hover)
})
})
.child(icon),
)
}
~~~
Release Notes:
- N/A
[[PR Description]]
A few mix organizational things in UI, as well as some toggle changes.
Simplify toggle:
```rust
/// Whether the entry is toggleable, and if so, whether it is currently toggled.
///
/// To make an element toggleable, simply add a `Toggle::Toggled(_)` and handle it's cases.
///
/// You can check if an element is toggleable with `.is_toggleable()`
///
/// Possible values:
/// - `Toggle::NotToggleable` - The entry is not toggleable
/// - `Toggle::Toggled(true)` - The entry is toggleable and toggled
/// - `Toggle::Toggled(false)` - The entry is toggleable and not toggled
#[derive(Debug, Copy, Clone, PartialEq, Eq)]
pub enum Toggle {
NotToggleable,
Toggled(bool),
}
```
Adds helper functions to easily get the toggle and toggleable states:
```rust
impl Toggle {
/// Returns true if the entry is toggled (or is not toggleable.)
///
/// As element that isn't toggleable is always "expanded" or "enabled"
/// returning true in that case makes sense.
pub fn is_toggled(&self) -> bool {
match self {
Self::Toggled(false) => false,
_ => true,
}
}
pub fn is_toggleable(&self) -> bool {
match self {
Self::Toggled(_) => true,
_ => false,
}
}
}
```
Pulls `disclosure_control` out of components and creates a common def:
```rust
pub fn disclosure_control<V: 'static>(toggle: Toggle) -> impl Component<V> {
match (toggle.is_toggleable(), toggle.is_toggled()) {
(false, _) => div(),
(_, true) => div().child(
IconElement::new(Icon::ChevronDown)
.color(IconColor::Muted)
.size(IconSize::Small),
),
(_, false) => div().child(
IconElement::new(Icon::ChevronRight)
.color(IconColor::Muted)
.size(IconSize::Small),
),
}
}
```
disclosure_control will likely get pulled into it's own component in the
future instead of being in toggle.
Release Notes:
- N/A
This fixes a tiny UX bug where the tooltip would appear to move if you
hovered over an element, then moved your mouse out and back within
500ms.
The fix is to retain the task, so we can drop it to cancel it when the
mouse leaves.
Also changes the time we construct the tooltip to the time it first
shows.
This PR reorganizes the components in the `ui2` crate.
The distinction between "elements" and "components" is now gone, with
all of the reusable components living under `components/`.
The components that we built while prototyping but will eventually live
in other crates currently reside in the `to_extract/` module.
Release Notes:
- N/A
r-a now has 2 different types of diagnostics:
* "disk-based" ones that come from `cargo check` and related, that emit
`project::Event::DiskBasedDiagnosticsStarted` and
`DiskBasedDiagnosticsFinished`
* "flycheck" diagnostics from r-a itself, that it tries to dynamically
apply to every buffer open, that come with `DiagnosticsUpdated` event.
Latter diagnostics update frequently, on every file close and open, but
`diagnostics.rs` logic had never polled for new diagnostics after
registering the `DiagnosticsUpdated` event, so the only way we could
have newer diagnostics was to re-open the whole panel.
The PR fixes that, and also adds more debug logging to the module.
The logic of the fix looks very familiar to previous related fix:
https://github.com/zed-industries/zed/pull/3128
One notable thing after the fix: "flycheck" diagnostics stay forever if
the diagnostics panel is opened: excerpts in that panel do not allow the
buffer to get dropped (hence, closed in terms of r-a) and get the
updated, zero diagnostics.
If the diagnostics panel is opened and closed multiple times, those
errors gradually disappear.
Release Notes:
- Fixed diagnostics panel not refreshing its contents properly
This PR removes the `Default` impl for `ThemeColors`.
Since we need default light and dark variants for `ThemeColors`, we
can't use a single `Default` impl.
Release Notes:
- N/A
Nate Butler