oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into diagnostics-style-2

Browse Source
This commit is contained in:
Marshall Bowers
2023-12-04 11:56:55 -05:00
parent e928ed44a0 4f4029524f
commit fb352af35c
54 changed files with 2433 additions and 6417 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/ui2/src/components/button.rs
+1
View File
@@ -1,4 +1,5 @@
mod button;
pub(self) mod button_icon;
mod button_like;
mod icon_button;
crates/ui2/src/components/button/button.rs
+64 -8
View File
@@ -1,13 +1,22 @@
use gpui::{AnyView, DefiniteLength};
use crate::prelude::*;
use crate::{ButtonCommon, ButtonLike, ButtonSize, ButtonStyle, Label, LineHeightStyle};
use crate::{
ButtonCommon, ButtonLike, ButtonSize, ButtonStyle, Icon, IconSize, Label, LineHeightStyle,
};
use super::button_icon::ButtonIcon;
#[derive(IntoElement)]
pub struct Button {
base: ButtonLike,
label: SharedString,
label_color: Option<Color>,
selected_label: Option<SharedString>,
icon: Option<Icon>,
icon_size: Option<IconSize>,
icon_color: Option<Color>,
selected_icon: Option<Icon>,
}
impl Button {
@@ -16,6 +25,11 @@ impl Button {
base: ButtonLike::new(id),
label: label.into(),
label_color: None,
selected_label: None,
icon: None,
icon_size: None,
icon_color: None,
selected_icon: None,
}
}
@@ -23,6 +37,31 @@ impl Button {
self.label_color = label_color.into();
self
}
pub fn selected_label<L: Into<SharedString>>(mut self, label: impl Into<Option<L>>) -> Self {
self.selected_label = label.into().map(Into::into);
self
}
pub fn icon(mut self, icon: impl Into<Option<Icon>>) -> Self {
self.icon = icon.into();
self
}
pub fn icon_size(mut self, icon_size: impl Into<Option<IconSize>>) -> Self {
self.icon_size = icon_size.into();
self
}
pub fn icon_color(mut self, icon_color: impl Into<Option<Color>>) -> Self {
self.icon_color = icon_color.into();
self
}
pub fn selected_icon(mut self, icon: impl Into<Option<Icon>>) -> Self {
self.selected_icon = icon.into();
self
}
}
impl Selectable for Button {
@@ -86,18 +125,35 @@ impl RenderOnce for Button {
type Rendered = ButtonLike;
fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
let label_color = if self.base.disabled {
let is_disabled = self.base.disabled;
let is_selected = self.base.selected;
let label = self
.selected_label
.filter(|_| is_selected)
.unwrap_or(self.label);
let label_color = if is_disabled {
Color::Disabled
} else if self.base.selected {
} else if is_selected {
Color::Selected
} else {
self.label_color.unwrap_or_default()
};
self.base.child(
Label::new(self.label)
.color(label_color)
.line_height_style(LineHeightStyle::UILabel),
)
self.base
.children(self.icon.map(|icon| {
ButtonIcon::new(icon)
.disabled(is_disabled)
.selected(is_selected)
.selected_icon(self.selected_icon)
.size(self.icon_size)
.color(self.icon_color)
}))
.child(
Label::new(label)
.color(label_color)
.line_height_style(LineHeightStyle::UILabel),
)
}
}
crates/ui2/src/components/button/button_icon.rs
+84
View File
@@ -0,0 +1,84 @@
use crate::{prelude::*, Icon, IconElement, IconSize};
/// An icon that appears within a button.
///
/// Can be used as either an icon alongside a label, like in [`Button`](crate::Button),
/// or as a standalone icon, like in [`IconButton`](crate::IconButton).
#[derive(IntoElement)]
pub(super) struct ButtonIcon {
icon: Icon,
size: IconSize,
color: Color,
disabled: bool,
selected: bool,
selected_icon: Option<Icon>,
}
impl ButtonIcon {
pub fn new(icon: Icon) -> Self {
Self {
icon,
size: IconSize::default(),
color: Color::default(),
disabled: false,
selected: false,
selected_icon: None,
}
}
pub fn size(mut self, size: impl Into<Option<IconSize>>) -> Self {
if let Some(size) = size.into() {
self.size = size;
}
self
}
pub fn color(mut self, color: impl Into<Option<Color>>) -> Self {
if let Some(color) = color.into() {
self.color = color;
}
self
}
pub fn selected_icon(mut self, icon: impl Into<Option<Icon>>) -> Self {
self.selected_icon = icon.into();
self
}
}
impl Disableable for ButtonIcon {
fn disabled(mut self, disabled: bool) -> Self {
self.disabled = disabled;
self
}
}
impl Selectable for ButtonIcon {
fn selected(mut self, selected: bool) -> Self {
self.selected = selected;
self
}
}
impl RenderOnce for ButtonIcon {
type Rendered = IconElement;
fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
let icon = self
.selected_icon
.filter(|_| self.selected)
.unwrap_or(self.icon);
let icon_color = if self.disabled {
Color::Disabled
} else if self.selected {
Color::Selected
} else {
self.color
};
IconElement::new(icon).size(self.size).color(icon_color)
}
}
crates/ui2/src/components/button/button_like.rs
+76 -5
View File
@@ -6,18 +6,50 @@ use crate::h_stack;
use crate::prelude::*;
pub trait ButtonCommon: Clickable + Disableable {
/// A unique element ID to identify the button.
fn id(&self) -> &ElementId;
/// The visual style of the button.
///
/// Mosty commonly will be [`ButtonStyle::Subtle`], or [`ButtonStyle::Filled`]
/// for an emphasized button.
fn style(self, style: ButtonStyle) -> Self;
/// The size of the button.
///
/// Most buttons will use the default size.
///
/// [`ButtonSize`] can also be used to help build non-button elements
/// that are consistently sized with buttons.
fn size(self, size: ButtonSize) -> Self;
/// The tooltip that shows when a user hovers over the button.
///
/// Nearly all interactable elements should have a tooltip. Some example
/// exceptions might a scroll bar, or a slider.
fn tooltip(self, tooltip: impl Fn(&mut WindowContext) -> AnyView + 'static) -> Self;
}
#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
pub enum ButtonStyle {
#[default]
/// A filled button with a solid background color. Provides emphasis versus
/// the more common subtle button.
Filled,
// Tinted,
/// 🚧 Under construction 🚧
///
/// Used to emphasize a button in some way, like a selected state, or a semantic
/// coloring like an error or success button.
Tinted,
/// The default button style, used for most buttons. Has a transparent background,
/// but has a background color to indicate states like hover and active.
#[default]
Subtle,
/// Used for buttons that only change forground color on hover and active states.
///
/// TODO: Better docs for this.
Transparent,
}
@@ -41,6 +73,12 @@ impl ButtonStyle {
label_color: Color::Default.color(cx),
icon_color: Color::Default.color(cx),
},
ButtonStyle::Tinted => ButtonLikeStyles {
background: gpui::red(),
border_color: gpui::red(),
label_color: gpui::red(),
icon_color: gpui::red(),
},
ButtonStyle::Subtle => ButtonLikeStyles {
background: cx.theme().colors().ghost_element_background,
border_color: transparent_black(),
@@ -64,6 +102,12 @@ impl ButtonStyle {
label_color: Color::Default.color(cx),
icon_color: Color::Default.color(cx),
},
ButtonStyle::Tinted => ButtonLikeStyles {
background: gpui::red(),
border_color: gpui::red(),
label_color: gpui::red(),
icon_color: gpui::red(),
},
ButtonStyle::Subtle => ButtonLikeStyles {
background: cx.theme().colors().ghost_element_hover,
border_color: transparent_black(),
@@ -89,6 +133,12 @@ impl ButtonStyle {
label_color: Color::Default.color(cx),
icon_color: Color::Default.color(cx),
},
ButtonStyle::Tinted => ButtonLikeStyles {
background: gpui::red(),
border_color: gpui::red(),
label_color: gpui::red(),
icon_color: gpui::red(),
},
ButtonStyle::Subtle => ButtonLikeStyles {
background: cx.theme().colors().ghost_element_active,
border_color: transparent_black(),
@@ -115,6 +165,12 @@ impl ButtonStyle {
label_color: Color::Default.color(cx),
icon_color: Color::Default.color(cx),
},
ButtonStyle::Tinted => ButtonLikeStyles {
background: gpui::red(),
border_color: gpui::red(),
label_color: gpui::red(),
icon_color: gpui::red(),
},
ButtonStyle::Subtle => ButtonLikeStyles {
background: cx.theme().colors().ghost_element_background,
border_color: cx.theme().colors().border_focused,
@@ -138,6 +194,12 @@ impl ButtonStyle {
label_color: Color::Disabled.color(cx),
icon_color: Color::Disabled.color(cx),
},
ButtonStyle::Tinted => ButtonLikeStyles {
background: gpui::red(),
border_color: gpui::red(),
label_color: gpui::red(),
icon_color: gpui::red(),
},
ButtonStyle::Subtle => ButtonLikeStyles {
background: cx.theme().colors().ghost_element_disabled,
border_color: cx.theme().colors().border_disabled,
@@ -154,6 +216,8 @@ impl ButtonStyle {
}
}
/// ButtonSize can also be used to help build non-button elements
/// that are consistently sized with buttons.
#[derive(Default, PartialEq, Clone, Copy)]
pub enum ButtonSize {
#[default]
@@ -172,6 +236,11 @@ impl ButtonSize {
}
}
/// A button-like element that can be used to create a custom button when
/// prebuilt buttons are not sufficient. Use this sparingly, as it is
/// unconstrained and may make the UI feel less consistent.
///
/// This is also used to build the prebuilt buttons.
#[derive(IntoElement)]
pub struct ButtonLike {
id: ElementId,
@@ -272,12 +341,14 @@ impl RenderOnce for ButtonLike {
.h(self.size.height())
.when_some(self.width, |this, width| this.w(width))
.rounded_md()
.cursor_pointer()
.gap_1()
.px_1()
.bg(self.style.enabled(cx).background)
.hover(|hover| hover.bg(self.style.hovered(cx).background))
.active(|active| active.bg(self.style.active(cx).background))
.when(!self.disabled, |this| {
this.cursor_pointer()
.hover(|hover| hover.bg(self.style.hovered(cx).background))
.active(|active| active.bg(self.style.active(cx).background))
})
.when_some(
self.on_click.filter(|_| !self.disabled),
|this, on_click| {
crates/ui2/src/components/button/icon_button.rs
+17 -10
View File
@@ -1,7 +1,9 @@
use gpui::{Action, AnyView, DefiniteLength};
use crate::prelude::*;
use crate::{ButtonCommon, ButtonLike, ButtonSize, ButtonStyle, Icon, IconElement, IconSize};
use crate::{ButtonCommon, ButtonLike, ButtonSize, ButtonStyle, Icon, IconSize};
use super::button_icon::ButtonIcon;
#[derive(IntoElement)]
pub struct IconButton {
@@ -9,6 +11,7 @@ pub struct IconButton {
icon: Icon,
icon_size: IconSize,
icon_color: Color,
selected_icon: Option<Icon>,
}
impl IconButton {
@@ -18,6 +21,7 @@ impl IconButton {
icon,
icon_size: IconSize::default(),
icon_color: Color::Default,
selected_icon: None,
}
}
@@ -31,6 +35,11 @@ impl IconButton {
self
}
pub fn selected_icon(mut self, icon: impl Into<Option<Icon>>) -> Self {
self.selected_icon = icon.into();
self
}
pub fn action(self, action: Box<dyn Action>) -> Self {
self.on_click(move |_event, cx| cx.dispatch_action(action.boxed_clone()))
}
@@ -97,18 +106,16 @@ impl RenderOnce for IconButton {
type Rendered = ButtonLike;
fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
let icon_color = if self.base.disabled {
Color::Disabled
} else if self.base.selected {
Color::Selected
} else {
self.icon_color
};
let is_disabled = self.base.disabled;
let is_selected = self.base.selected;
self.base.child(
IconElement::new(self.icon)
ButtonIcon::new(self.icon)
.disabled(is_disabled)
.selected(is_selected)
.selected_icon(self.selected_icon)
.size(self.icon_size)
.color(icon_color),
.color(self.icon_color),
)
}
}
crates/ui2/src/components/context_menu.rs
+37 -7
View File
@@ -1,5 +1,6 @@
use crate::{
h_stack, prelude::*, v_stack, KeyBinding, Label, List, ListItem, ListSeparator, ListSubHeader,
h_stack, prelude::*, v_stack, Icon, IconElement, KeyBinding, Label, List, ListItem,
ListSeparator, ListSubHeader,
};
use gpui::{
px, Action, AppContext, DismissEvent, Div, EventEmitter, FocusHandle, FocusableView,
@@ -13,6 +14,7 @@ pub enum ContextMenuItem {
Header(SharedString),
Entry {
label: SharedString,
icon: Option<Icon>,
handler: Rc<dyn Fn(&mut WindowContext)>,
key_binding: Option<KeyBinding>,
},
@@ -69,6 +71,7 @@ impl ContextMenu {
label: label.into(),
handler: Rc::new(on_click),
key_binding: None,
icon: None,
});
self
}
@@ -83,6 +86,22 @@ impl ContextMenu {
label: label.into(),
key_binding: KeyBinding::for_action(&*action, cx),
handler: Rc::new(move |cx| cx.dispatch_action(action.boxed_clone())),
icon: None,
});
self
}
pub fn link(
mut self,
label: impl Into<SharedString>,
action: Box<dyn Action>,
cx: &mut WindowContext,
) -> Self {
self.items.push(ContextMenuItem::Entry {
label: label.into(),
key_binding: KeyBinding::for_action(&*action, cx),
handler: Rc::new(move |cx| cx.dispatch_action(action.boxed_clone())),
icon: Some(Icon::Link),
});
self
}
@@ -175,19 +194,30 @@ impl Render for ContextMenu {
ListSubHeader::new(header.clone()).into_any_element()
}
ContextMenuItem::Entry {
label: entry,
handler: callback,
label,
handler,
key_binding,
icon,
} => {
let callback = callback.clone();
let handler = handler.clone();
let dismiss = cx.listener(|_, _, cx| cx.emit(DismissEvent));
ListItem::new(entry.clone())
let label_element = if let Some(icon) = icon {
h_stack()
.gap_1()
.child(Label::new(label.clone()))
.child(IconElement::new(*icon))
.into_any_element()
} else {
Label::new(label.clone()).into_any_element()
};
ListItem::new(label.clone())
.child(
h_stack()
.w_full()
.justify_between()
.child(Label::new(entry.clone()))
.child(label_element)
.children(
key_binding
.clone()
@@ -196,7 +226,7 @@ impl Render for ContextMenu {
)
.selected(Some(ix) == self.selected_index)
.on_click(move |event, cx| {
callback(cx);
handler(cx);
dismiss(event, cx)
})
.into_any_element()
crates/ui2/src/components/icon.rs
+2
View File
@@ -55,6 +55,7 @@ pub enum Icon {
FolderX,
Hash,
InlayHint,
Link,
MagicWand,
MagnifyingGlass,
MailOpen,
@@ -128,6 +129,7 @@ impl Icon {
Icon::FolderX => "icons/stop_sharing.svg",
Icon::Hash => "icons/hash.svg",
Icon::InlayHint => "icons/inlay_hint.svg",
Icon::Link => "icons/link.svg",
Icon::MagicWand => "icons/magic-wand.svg",
Icon::MagnifyingGlass => "icons/magnifying_glass.svg",
Icon::MailOpen => "icons/mail-open.svg",
crates/ui2/src/components/label.rs
+23 -27
View File
@@ -1,6 +1,8 @@
use std::ops::Range;
use crate::prelude::*;
use crate::styled_ext::StyledExt;
use gpui::{relative, Div, IntoElement, StyledText, TextRun, WindowContext};
use gpui::{relative, Div, HighlightStyle, IntoElement, StyledText, WindowContext};
#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
pub enum LabelSize {
@@ -99,38 +101,32 @@ impl RenderOnce for HighlightedLabel {
fn render(self, cx: &mut WindowContext) -> Self::Rendered {
let highlight_color = cx.theme().colors().text_accent;
let mut text_style = cx.text_style().clone();
let mut highlight_indices = self.highlight_indices.iter().copied().peekable();
let mut highlights: Vec<(Range<usize>, HighlightStyle)> = Vec::new();
let mut runs: Vec<TextRun> = Vec::new();
while let Some(start_ix) = highlight_indices.next() {
let mut end_ix = start_ix;
for (char_ix, char) in self.label.char_indices() {
let mut color = self.color.color(cx);
if let Some(highlight_ix) = highlight_indices.peek() {
if char_ix == *highlight_ix {
color = highlight_color;
highlight_indices.next();
loop {
end_ix = end_ix + self.label[end_ix..].chars().next().unwrap().len_utf8();
if let Some(&next_ix) = highlight_indices.peek() {
if next_ix == end_ix {
end_ix = next_ix;
highlight_indices.next();
continue;
}
}
break;
}
let last_run = runs.last_mut();
let start_new_run = if let Some(last_run) = last_run {
if color == last_run.color {
last_run.len += char.len_utf8();
false
} else {
true
}
} else {
true
};
if start_new_run {
text_style.color = color;
runs.push(text_style.to_run(char.len_utf8()))
}
highlights.push((
start_ix..end_ix,
HighlightStyle {
color: Some(highlight_color),
..Default::default()
},
));
}
div()
@@ -150,7 +146,7 @@ impl RenderOnce for HighlightedLabel {
LabelSize::Default => this.text_ui(),
LabelSize::Small => this.text_ui_sm(),
})
.child(StyledText::new(self.label).with_runs(runs))
.child(StyledText::new(self.label).with_highlights(&cx.text_style(), highlights))
}
}
crates/ui2/src/components/stories/button.rs
+15 -1
View File
@@ -1,7 +1,7 @@
use gpui::{Div, Render};
use story::Story;
use crate::prelude::*;
use crate::{prelude::*, Icon};
use crate::{Button, ButtonStyle};
pub struct ButtonStory;
@@ -16,8 +16,22 @@ impl Render for ButtonStory {
.child(Button::new("default_filled", "Click me"))
.child(Story::label("Selected"))
.child(Button::new("selected_filled", "Click me").selected(true))
.child(Story::label("Selected with `selected_label`"))
.child(
Button::new("selected_label_filled", "Click me")
.selected(true)
.selected_label("I have been selected"),
)
.child(Story::label("With `label_color`"))
.child(Button::new("filled_with_label_color", "Click me").color(Color::Created))
.child(Story::label("With `icon`"))
.child(Button::new("filled_with_icon", "Click me").icon(Icon::FileGit))
.child(Story::label("Selected with `icon`"))
.child(
Button::new("filled_and_selected_with_icon", "Click me")
.selected(true)
.icon(Icon::FileGit),
)
.child(Story::label("Default (Subtle)"))
.child(Button::new("default_subtle", "Click me").style(ButtonStyle::Subtle))
.child(Story::label("Default (Transparent)"))
crates/ui2/src/components/stories/icon_button.rs
+8
View File
@@ -20,6 +20,14 @@ impl Render for IconButtonStory {
.w_8()
.child(IconButton::new("icon_a", Icon::Hash).selected(true)),
)
.child(Story::label("Selected with `selected_icon`"))
.child(
div().w_8().child(
IconButton::new("icon_a", Icon::AudioOn)
.selected(true)
.selected_icon(Icon::AudioOff),
),
)
.child(Story::label("Disabled"))
.child(
div()