color_picker: Add icon use icon as color picker button. (#711)
This commit is contained in:
Jason Lee
GitHub
parent
d0abcb2456
commit
89170eea1d
3 changed files with 57 additions and 22 deletions
|
|
@ -5,6 +5,7 @@ use gpui::{
|
|||
use gpui_component::{
|
||||
button::{Button, ButtonGroup},
|
||||
checkbox::Checkbox,
|
||||
color_picker::ColorPicker,
|
||||
date_picker::DatePicker,
|
||||
divider::Divider,
|
||||
form::{form_field, v_form},
|
||||
|
|
@ -20,6 +21,7 @@ pub struct FormStory {
|
|||
name_input: Entity<TextInput>,
|
||||
email_input: Entity<TextInput>,
|
||||
bio_input: Entity<TextInput>,
|
||||
color_picker: Entity<ColorPicker>,
|
||||
subscribe_email: bool,
|
||||
date_picker: Entity<DatePicker>,
|
||||
layout: Axis,
|
||||
|
|
@ -51,6 +53,11 @@ impl FormStory {
|
|||
input.set_text("Jason Lee", window, cx);
|
||||
input
|
||||
});
|
||||
let color_picker = cx.new(|cx| {
|
||||
ColorPicker::new("color-picker-1", window, cx)
|
||||
.small()
|
||||
.label("Theme color")
|
||||
});
|
||||
|
||||
let email_input = cx.new(|cx| TextInput::new(window, cx).placeholder("Enter text here..."));
|
||||
let bio_input = cx.new(|cx| {
|
||||
|
|
@ -68,6 +75,7 @@ impl FormStory {
|
|||
email_input,
|
||||
bio_input,
|
||||
date_picker,
|
||||
color_picker,
|
||||
subscribe_email: false,
|
||||
layout: Axis::Vertical,
|
||||
size: Size::default(),
|
||||
|
|
@ -197,6 +205,7 @@ impl Render for FormStory {
|
|||
})),
|
||||
),
|
||||
)
|
||||
.child(form_field().child(self.color_picker.clone()))
|
||||
.child(
|
||||
form_field().child(
|
||||
Checkbox::new("use-vertical-layout")
|
||||
|
|
|
|||
|
|
@ -45,9 +45,9 @@ impl AppTitleBar {
|
|||
|
||||
let theme_color_picker = cx.new(|cx| {
|
||||
let mut picker = ColorPicker::new("theme-color-picker", window, cx)
|
||||
.xsmall()
|
||||
.small()
|
||||
.anchor(Corner::TopRight)
|
||||
.label("Theme Color");
|
||||
.icon(IconName::Palette);
|
||||
picker.set_value(cx.theme().primary, window, cx);
|
||||
picker
|
||||
});
|
||||
|
|
@ -122,8 +122,8 @@ impl Render for AppTitleBar {
|
|||
.px_2()
|
||||
.gap_2()
|
||||
.on_mouse_down(MouseButton::Left, |_, _, cx| cx.stop_propagation())
|
||||
.child(self.theme_color_picker.clone())
|
||||
.child((self.child.clone())(window, cx))
|
||||
.child(self.theme_color_picker.clone())
|
||||
.child(
|
||||
Button::new("theme-mode")
|
||||
.map(|this| {
|
||||
|
|
|
|||
|
|
@ -6,12 +6,13 @@ use gpui::{
|
|||
};
|
||||
|
||||
use crate::{
|
||||
button::{Button, ButtonVariants},
|
||||
divider::Divider,
|
||||
h_flex,
|
||||
input::{InputEvent, TextInput},
|
||||
popover::Escape,
|
||||
tooltip::Tooltip,
|
||||
v_flex, ActiveTheme as _, Colorize as _, Sizable, Size, StyleSized,
|
||||
v_flex, ActiveTheme as _, Colorize as _, Icon, Selectable as _, Sizable, Size, StyleSized,
|
||||
};
|
||||
|
||||
const KEY_CONTEXT: &'static str = "ColorPicker";
|
||||
|
|
@ -60,6 +61,7 @@ pub struct ColorPicker {
|
|||
featured_colors: Vec<Hsla>,
|
||||
hovered_color: Option<Hsla>,
|
||||
label: Option<SharedString>,
|
||||
icon: Option<Icon>,
|
||||
size: Size,
|
||||
anchor: Corner,
|
||||
color_input: Entity<TextInput>,
|
||||
|
|
@ -114,6 +116,7 @@ impl ColorPicker {
|
|||
hovered_color: None,
|
||||
size: Size::Medium,
|
||||
label: None,
|
||||
icon: None,
|
||||
anchor: Corner::TopLeft,
|
||||
color_input,
|
||||
open: false,
|
||||
|
|
@ -142,6 +145,15 @@ impl ColorPicker {
|
|||
self
|
||||
}
|
||||
|
||||
/// Set the icon to the color picker button.
|
||||
///
|
||||
/// If this is set the color picker button will display the icon.
|
||||
/// Else it will display the square color of the current value.
|
||||
pub fn icon(mut self, icon: impl Into<Icon>) -> Self {
|
||||
self.icon = Some(icon.into());
|
||||
self
|
||||
}
|
||||
|
||||
/// Set the label to be displayed above the color picker.
|
||||
///
|
||||
/// Default is `None`.
|
||||
|
|
@ -314,24 +326,38 @@ impl Render for ColorPicker {
|
|||
.items_center()
|
||||
.input_text_size(self.size)
|
||||
.line_height(relative(1.))
|
||||
.child(
|
||||
div()
|
||||
.id("color-picker-square")
|
||||
.bg(cx.theme().background)
|
||||
.border_1()
|
||||
.border_color(cx.theme().input)
|
||||
.rounded(cx.theme().radius)
|
||||
.bg(cx.theme().background)
|
||||
.shadow_sm()
|
||||
.overflow_hidden()
|
||||
.size_with(self.size)
|
||||
.when_some(self.value, |this, value| {
|
||||
this.bg(value).border_color(value.darken(0.3))
|
||||
})
|
||||
.tooltip(move |window, cx| {
|
||||
Tooltip::new(display_title.clone(), window, cx)
|
||||
}),
|
||||
)
|
||||
.when_some(self.icon.clone(), |this, icon| {
|
||||
this.child(
|
||||
Button::new("btn")
|
||||
.ghost()
|
||||
.selected(self.open)
|
||||
.with_size(self.size)
|
||||
.icon(icon.clone()),
|
||||
)
|
||||
})
|
||||
.when_none(&self.icon, |this| {
|
||||
this.child(
|
||||
div()
|
||||
.id("color-picker-square")
|
||||
.bg(cx.theme().background)
|
||||
.border_1()
|
||||
.border_color(cx.theme().input)
|
||||
.rounded(cx.theme().radius)
|
||||
.shadow_sm()
|
||||
.overflow_hidden()
|
||||
.size_with(self.size)
|
||||
.when_some(self.value, |this, value| {
|
||||
this.bg(value)
|
||||
.border_color(value.darken(0.3))
|
||||
.when(self.open, |this| this.border_2())
|
||||
})
|
||||
.when(!display_title.is_empty(), |this| {
|
||||
this.tooltip(move |window, cx| {
|
||||
Tooltip::new(display_title.clone(), window, cx)
|
||||
})
|
||||
}),
|
||||
)
|
||||
})
|
||||
.when_some(self.label.clone(), |this, label| this.child(label))
|
||||
.on_click(cx.listener(Self::toggle_picker))
|
||||
.on_mouse_up_out(
|
||||
|
|
|
|||
Loading…
Reference in a new issue