Detailed changes
@@ -5,7 +5,6 @@ mod button;
mod callout;
mod chip;
mod collab;
-mod content_group;
mod context_menu;
mod data_table;
mod diff_stat;
@@ -28,11 +27,8 @@ mod notification;
mod popover;
mod popover_menu;
mod progress;
-mod radio;
mod right_click_menu;
mod scrollbar;
-mod settings_container;
-mod settings_group;
mod stack;
mod sticky_items;
mod tab;
@@ -51,7 +47,6 @@ pub use button::*;
pub use callout::*;
pub use chip::*;
pub use collab::*;
-pub use content_group::*;
pub use context_menu::*;
pub use data_table::*;
pub use diff_stat::*;
@@ -74,11 +69,8 @@ pub use notification::*;
pub use popover::*;
pub use popover_menu::*;
pub use progress::*;
-pub use radio::*;
pub use right_click_menu::*;
pub use scrollbar::*;
-pub use settings_container::*;
-pub use settings_group::*;
pub use stack::*;
pub use sticky_items::*;
pub use tab::*;
@@ -1,137 +0,0 @@
-use crate::component_prelude::*;
-use crate::prelude::*;
-use gpui::{AnyElement, IntoElement, ParentElement, StyleRefinement, Styled};
-use smallvec::SmallVec;
-
-/// Creates a new [ContentGroup].
-pub fn content_group() -> ContentGroup {
- ContentGroup::new()
-}
-
-/// A [ContentGroup] that vertically stacks its children.
-///
-/// This is a convenience function that simply combines [`ContentGroup`] and [`v_flex`](crate::v_flex).
-pub fn v_container() -> ContentGroup {
- content_group().v_flex()
-}
-
-/// Creates a new horizontal [ContentGroup].
-///
-/// This is a convenience function that simply combines [`ContentGroup`] and [`h_flex`](crate::h_flex).
-pub fn h_container() -> ContentGroup {
- content_group().h_flex()
-}
-
-/// A flexible container component that can hold other elements.
-#[derive(IntoElement, Documented, RegisterComponent)]
-pub struct ContentGroup {
- base: Div,
- border: bool,
- fill: bool,
- children: SmallVec<[AnyElement; 2]>,
-}
-
-impl ContentGroup {
- /// Creates a new [`ContentGroup`].
- pub fn new() -> Self {
- Self {
- base: div(),
- border: true,
- fill: true,
- children: SmallVec::new(),
- }
- }
-
- /// Removes the border from the [`ContentGroup`].
- pub fn borderless(mut self) -> Self {
- self.border = false;
- self
- }
-
- /// Removes the background fill from the [`ContentGroup`].
- pub fn unfilled(mut self) -> Self {
- self.fill = false;
- self
- }
-}
-
-impl ParentElement for ContentGroup {
- fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
- self.children.extend(elements)
- }
-}
-
-impl Styled for ContentGroup {
- fn style(&mut self) -> &mut StyleRefinement {
- self.base.style()
- }
-}
-
-impl RenderOnce for ContentGroup {
- fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
- // TODO:
- // Baked in padding will make scrollable views inside of content boxes awkward.
- //
- // Do we make the padding optional, or do we push to use a different component?
-
- self.base
- .when(self.fill, |this| {
- this.bg(cx.theme().colors().text.opacity(0.05))
- })
- .when(self.border, |this| {
- this.border_1().border_color(cx.theme().colors().border)
- })
- .rounded_sm()
- .children(self.children)
- }
-}
-
-impl Component for ContentGroup {
- fn scope() -> ComponentScope {
- ComponentScope::Layout
- }
-
- fn description() -> Option<&'static str> {
- Some(ContentGroup::DOCS)
- }
-
- fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
- Some(
- example_group(vec![
- single_example(
- "Default",
- ContentGroup::new()
- .flex_1()
- .items_center()
- .justify_center()
- .h_48()
- .child(Label::new("Default ContentGroup"))
- .into_any_element(),
- ).description("A contained style for laying out groups of content. Has a default background and border color."),
- single_example(
- "Without Border",
- ContentGroup::new()
- .flex_1()
- .items_center()
- .justify_center()
- .h_48()
- .borderless()
- .child(Label::new("Borderless ContentGroup"))
- .into_any_element(),
- ),
- single_example(
- "Without Fill",
- ContentGroup::new()
- .flex_1()
- .items_center()
- .justify_center()
- .h_48()
- .unfilled()
- .child(Label::new("Unfilled ContentGroup"))
- .into_any_element(),
- ),
- ])
- .into_any_element(),
- )
- }
-}
@@ -1,60 +0,0 @@
-use std::sync::Arc;
-
-use crate::prelude::*;
-
-#[derive(IntoElement)]
-pub struct RadioWithLabel {
- id: ElementId,
- label: Label,
- selected: bool,
- on_click: Arc<dyn Fn(&bool, &mut Window, &mut App) + 'static>,
-}
-
-impl RadioWithLabel {
- pub fn new(
- id: impl Into<ElementId>,
- label: Label,
- selected: bool,
- on_click: impl Fn(&bool, &mut Window, &mut App) + 'static,
- ) -> Self {
- Self {
- id: id.into(),
- label,
- selected,
- on_click: Arc::new(on_click),
- }
- }
-}
-
-impl RenderOnce for RadioWithLabel {
- fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
- let inner_diameter = rems_from_px(6.);
- let outer_diameter = rems_from_px(16.);
- let border_width = rems_from_px(1.);
- h_flex()
- .id(self.id)
- .gap(DynamicSpacing::Base08.rems(cx))
- .group("")
- .child(
- div()
- .size(outer_diameter)
- .rounded(outer_diameter / 2.)
- .border_color(cx.theme().colors().border)
- .border(border_width)
- .group_hover("", |el| el.bg(cx.theme().colors().element_hover))
- .when(self.selected, |el| {
- el.child(
- div()
- .m((outer_diameter - inner_diameter) / 2. - border_width)
- .size(inner_diameter)
- .rounded(inner_diameter / 2.)
- .bg(cx.theme().colors().icon_accent),
- )
- }),
- )
- .child(self.label)
- .on_click(move |_event, window, cx| {
- (self.on_click)(&true, window, cx);
- })
- }
-}
@@ -1,89 +0,0 @@
-use gpui::AnyElement;
-use smallvec::SmallVec;
-
-use crate::prelude::*;
-
-use super::Checkbox;
-
-#[derive(IntoElement, RegisterComponent)]
-pub struct SettingsContainer {
- children: SmallVec<[AnyElement; 2]>,
-}
-
-impl Default for SettingsContainer {
- fn default() -> Self {
- Self::new()
- }
-}
-
-impl SettingsContainer {
- pub fn new() -> Self {
- Self {
- children: SmallVec::new(),
- }
- }
-}
-
-impl ParentElement for SettingsContainer {
- fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
- self.children.extend(elements)
- }
-}
-
-impl RenderOnce for SettingsContainer {
- fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
- v_flex().px_2().gap_1().children(self.children)
- }
-}
-
-impl Component for SettingsContainer {
- fn scope() -> ComponentScope {
- ComponentScope::Layout
- }
-
- fn name() -> &'static str {
- "SettingsContainer"
- }
-
- fn description() -> Option<&'static str> {
- Some("A container for organizing and displaying settings in a structured manner.")
- }
-
- fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
- Some(
- v_flex()
- .gap_6()
- .children(vec![
- example_group_with_title(
- "Basic Usage",
- vec![
- single_example(
- "Empty Container",
- SettingsContainer::new().into_any_element(),
- ),
- single_example(
- "With Content",
- SettingsContainer::new()
- .child(Label::new("Setting 1"))
- .child(Label::new("Setting 2"))
- .child(Label::new("Setting 3"))
- .into_any_element(),
- ),
- ],
- ),
- example_group_with_title(
- "With Different Elements",
- vec![single_example(
- "Mixed Content",
- SettingsContainer::new()
- .child(Label::new("Text Setting"))
- .child(Checkbox::new("checkbox", ToggleState::Unselected))
- .child(Button::new("button", "Click me"))
- .into_any_element(),
- )],
- ),
- ])
- .into_any_element(),
- )
- }
-}
@@ -1,110 +0,0 @@
-use gpui::AnyElement;
-use smallvec::SmallVec;
-
-use crate::{ListHeader, prelude::*};
-
-use super::Checkbox;
-
-/// A group of settings.
-#[derive(IntoElement, RegisterComponent)]
-pub struct SettingsGroup {
- header: SharedString,
- children: SmallVec<[AnyElement; 2]>,
-}
-
-impl SettingsGroup {
- pub fn new(header: impl Into<SharedString>) -> Self {
- Self {
- header: header.into(),
- children: SmallVec::new(),
- }
- }
-}
-
-impl ParentElement for SettingsGroup {
- fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
- self.children.extend(elements)
- }
-}
-
-impl RenderOnce for SettingsGroup {
- fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
- v_flex()
- .p_1()
- .gap_2()
- .child(ListHeader::new(self.header))
- .children(self.children)
- }
-}
-
-impl Component for SettingsGroup {
- fn scope() -> ComponentScope {
- ComponentScope::Layout
- }
-
- fn name() -> &'static str {
- "SettingsGroup"
- }
-
- fn description() -> Option<&'static str> {
- Some("A group of settings with a header, used to organize related settings.")
- }
-
- fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
- Some(
- v_flex()
- .gap_6()
- .children(vec![
- example_group_with_title(
- "Basic Usage",
- vec![
- single_example(
- "Empty Group",
- SettingsGroup::new("General Settings").into_any_element(),
- ),
- single_example(
- "With Children",
- SettingsGroup::new("Appearance")
- .child(
- Checkbox::new("dark_mode", ToggleState::Unselected)
- .label("Dark Mode"),
- )
- .child(
- Checkbox::new("high_contrast", ToggleState::Unselected)
- .label("High Contrast"),
- )
- .into_any_element(),
- ),
- ],
- ),
- example_group_with_title(
- "Multiple Groups",
- vec![single_example(
- "Two Groups",
- v_flex()
- .gap_4()
- .child(
- SettingsGroup::new("General").child(
- Checkbox::new("auto_update", ToggleState::Selected)
- .label("Auto Update"),
- ),
- )
- .child(
- SettingsGroup::new("Editor")
- .child(
- Checkbox::new("line_numbers", ToggleState::Selected)
- .label("Show Line Numbers"),
- )
- .child(
- Checkbox::new("word_wrap", ToggleState::Unselected)
- .label("Word Wrap"),
- ),
- )
- .into_any_element(),
- )],
- ),
- ])
- .into_any_element(),
- )
- }
-}
@@ -28,7 +28,7 @@ pub use crate::{ButtonCommon, Color};
pub use crate::{Headline, HeadlineSize};
pub use crate::{Icon, IconName, IconPosition, IconSize};
pub use crate::{Label, LabelCommon, LabelSize, LineHeightStyle, LoadingLabel};
-pub use crate::{h_container, h_flex, v_container, v_flex};
+pub use crate::{h_flex, v_flex};
pub use crate::{
h_group, h_group_lg, h_group_sm, h_group_xl, v_group, v_group_lg, v_group_sm, v_group_xl,
};
@@ -1,4 +1,4 @@
-use crate::{ContentGroup, prelude::*};
+use crate::prelude::*;
use gpui::{AnimationElement, AnimationExt, Styled};
use std::time::Duration;
@@ -111,10 +111,21 @@ impl Component for Animation {
Some("Demonstrates various animation patterns and transitions available in the UI system.")
}
- fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
+ fn preview(_window: &mut Window, cx: &mut App) -> Option<AnyElement> {
let container_size = 128.0;
let element_size = 32.0;
let offset = container_size / 2.0 - element_size / 2.0;
+
+ let container = || {
+ h_flex()
+ .relative()
+ .justify_center()
+ .bg(cx.theme().colors().text.opacity(0.05))
+ .border_1()
+ .border_color(cx.theme().colors().border)
+ .rounded_sm()
+ };
+
Some(
v_flex()
.gap_6()
@@ -124,10 +135,7 @@ impl Component for Animation {
vec![
single_example(
"From Bottom",
- ContentGroup::new()
- .relative()
- .items_center()
- .justify_center()
+ container()
.size(px(container_size))
.child(
div()
@@ -143,10 +151,7 @@ impl Component for Animation {
),
single_example(
"From Top",
- ContentGroup::new()
- .relative()
- .items_center()
- .justify_center()
+ container()
.size(px(container_size))
.child(
div()
@@ -162,10 +167,7 @@ impl Component for Animation {
),
single_example(
"From Left",
- ContentGroup::new()
- .relative()
- .items_center()
- .justify_center()
+ container()
.size(px(container_size))
.child(
div()
@@ -181,10 +183,7 @@ impl Component for Animation {
),
single_example(
"From Right",
- ContentGroup::new()
- .relative()
- .items_center()
- .justify_center()
+ container()
.size(px(container_size))
.child(
div()
@@ -206,10 +205,7 @@ impl Component for Animation {
vec![
single_example(
"From Bottom",
- ContentGroup::new()
- .relative()
- .items_center()
- .justify_center()
+ container()
.size(px(container_size))
.child(
div()
@@ -225,10 +221,7 @@ impl Component for Animation {
),
single_example(
"From Top",
- ContentGroup::new()
- .relative()
- .items_center()
- .justify_center()
+ container()
.size(px(container_size))
.child(
div()
@@ -244,10 +237,7 @@ impl Component for Animation {
),
single_example(
"From Left",
- ContentGroup::new()
- .relative()
- .items_center()
- .justify_center()
+ container()
.size(px(container_size))
.child(
div()
@@ -263,10 +253,7 @@ impl Component for Animation {
),
single_example(
"From Right",
- ContentGroup::new()
- .relative()
- .items_center()
- .justify_center()
+ container()
.size(px(container_size))
.child(
div()
@@ -6,8 +6,8 @@ use strum::IntoEnumIterator;
use theme::all_theme_colors;
use ui::{
AudioStatus, Avatar, AvatarAudioStatusIndicator, AvatarAvailabilityIndicator, ButtonLike,
- Checkbox, CollaboratorAvailability, ContentGroup, DecoratedIcon, ElevationIndex, Facepile,
- IconDecoration, Indicator, KeybindingHint, Switch, TintColor, Tooltip, prelude::*,
+ Checkbox, CollaboratorAvailability, DecoratedIcon, ElevationIndex, Facepile, IconDecoration,
+ Indicator, KeybindingHint, Switch, TintColor, Tooltip, prelude::*,
utils::calculate_contrast_ratio,
};