diff --git a/editor/src/messages/layout/layout_message_handler.rs b/editor/src/messages/layout/layout_message_handler.rs index 87ff6247a2..aa770f5a1c 100644 --- a/editor/src/messages/layout/layout_message_handler.rs +++ b/editor/src/messages/layout/layout_message_handler.rs @@ -96,8 +96,8 @@ impl Vec> MessageHandler { - let update_value = value.as_object().expect("ColorInput update was not of type: object"); + Widget::ColorButton(color_button) => { + let update_value = value.as_object().expect("ColorButton update was not of type: object"); let parsed_color = (|| { let is_none = update_value.get("none")?.as_bool()?; @@ -112,9 +112,9 @@ impl Vec> MessageHandler { diff --git a/editor/src/messages/layout/utility_types/layout_widget.rs b/editor/src/messages/layout/utility_types/layout_widget.rs index b3cffff984..134757bd41 100644 --- a/editor/src/messages/layout/utility_types/layout_widget.rs +++ b/editor/src/messages/layout/utility_types/layout_widget.rs @@ -320,7 +320,7 @@ impl LayoutGroup { for widget in &mut widgets { let val = match &mut widget.widget { Widget::CheckboxInput(x) => &mut x.tooltip, - Widget::ColorInput(x) => &mut x.tooltip, + Widget::ColorButton(x) => &mut x.tooltip, Widget::CurveInput(x) => &mut x.tooltip, Widget::DropdownInput(x) => &mut x.tooltip, Widget::FontInput(x) => &mut x.tooltip, @@ -471,7 +471,7 @@ impl Default for WidgetCallback { pub enum Widget { BreadcrumbTrailButtons(BreadcrumbTrailButtons), CheckboxInput(CheckboxInput), - ColorInput(ColorInput), + ColorButton(ColorButton), CurveInput(CurveInput), DropdownInput(DropdownInput), FontInput(FontInput), @@ -545,7 +545,7 @@ impl DiffUpdate { let mut tooltip_shortcut = match &mut widget_holder.widget { Widget::BreadcrumbTrailButtons(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)), Widget::CheckboxInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)), - Widget::ColorInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)), + Widget::ColorButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)), Widget::DropdownInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)), Widget::FontInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)), Widget::IconButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)), diff --git a/editor/src/messages/layout/utility_types/widgets/button_widgets.rs b/editor/src/messages/layout/utility_types/widgets/button_widgets.rs index 25ed64536a..aff02a4d39 100644 --- a/editor/src/messages/layout/utility_types/widgets/button_widgets.rs +++ b/editor/src/messages/layout/utility_types/widgets/button_widgets.rs @@ -2,6 +2,7 @@ use crate::messages::input_mapper::utility_types::misc::ActionKeys; use crate::messages::layout::utility_types::widget_prelude::*; use crate::messages::portfolio::document::node_graph::FrontendGraphDataType; +use graphene_core::raster::color::Color; use graphite_proc_macros::WidgetBuilder; use derivative::*; @@ -105,6 +106,32 @@ pub struct TextButton { pub on_update: WidgetCallback, } +#[derive(Clone, Derivative, Serialize, Deserialize, WidgetBuilder, specta::Type)] +#[derivative(Debug, PartialEq, Default)] +pub struct ColorButton { + #[widget_builder(constructor)] + pub value: Option, + + // TODO: Implement + // #[serde(rename = "allowTransparency")] + // #[derivative(Default(value = "false"))] + // pub allow_transparency: bool, + #[serde(rename = "allowNone")] + #[derivative(Default(value = "true"))] + pub allow_none: bool, + + // pub disabled: bool, + pub tooltip: String, + + #[serde(skip)] + pub tooltip_shortcut: Option, + + // Callbacks + #[serde(skip)] + #[derivative(Debug = "ignore", PartialEq = "ignore")] + pub on_update: WidgetCallback, +} + #[derive(Clone, Serialize, Deserialize, Derivative, Default, WidgetBuilder, specta::Type)] #[derivative(Debug, PartialEq)] #[serde(rename_all = "camelCase")] diff --git a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs index 80114af835..79405a9881 100644 --- a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs +++ b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs @@ -44,32 +44,6 @@ impl Default for CheckboxInput { } } -#[derive(Clone, Derivative, Serialize, Deserialize, WidgetBuilder, specta::Type)] -#[derivative(Debug, PartialEq, Default)] -pub struct ColorInput { - #[widget_builder(constructor)] - pub value: Option, - - // TODO: Implement - // #[serde(rename = "allowTransparency")] - // #[derivative(Default(value = "false"))] - // pub allow_transparency: bool, - #[serde(rename = "allowNone")] - #[derivative(Default(value = "true"))] - pub allow_none: bool, - - // pub disabled: bool, - pub tooltip: String, - - #[serde(skip)] - pub tooltip_shortcut: Option, - - // Callbacks - #[serde(skip)] - #[derivative(Debug = "ignore", PartialEq = "ignore")] - pub on_update: WidgetCallback, -} - #[derive(Clone, Serialize, Deserialize, Derivative, WidgetBuilder, specta::Type)] #[derivative(Debug, PartialEq, Default)] pub struct DropdownInput { diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs index 6cc7d993f0..8ff274960d 100644 --- a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs +++ b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs @@ -507,13 +507,13 @@ fn gradient_row(row: &mut Vec, positions: &Vec<(f64, Option row.push(label.widget_holder()); let on_update = { let positions = positions.clone(); - move |color_input: &ColorInput| { + move |color_button: &ColorButton| { let mut new_positions = positions.clone(); - new_positions[index].1 = color_input.value; + new_positions[index].1 = color_button.value; TaggedValue::GradientPositions(new_positions) } }; - let color = ColorInput::new(positions[index].1).on_update(update_value(on_update, node_id, input_index)); + let color = ColorButton::new(positions[index].1).on_update(update_value(on_update, node_id, input_index)); add_blank_assist(row); row.push(Separator::new(SeparatorType::Unrelated).widget_holder()); row.push(color.widget_holder()); @@ -617,7 +617,7 @@ fn gradient_positions(rows: &mut Vec, document_node: &DocumentNode, } } -fn color_widget(document_node: &DocumentNode, node_id: u64, index: usize, name: &str, color_props: ColorInput, blank_assist: bool) -> LayoutGroup { +fn color_widget(document_node: &DocumentNode, node_id: u64, index: usize, name: &str, color_props: ColorButton, blank_assist: bool) -> LayoutGroup { let mut widgets = start_widgets(document_node, node_id, index, name, FrontendGraphDataType::Number, blank_assist); if let NodeInput::Value { tagged_value, exposed: false } = &document_node.inputs[index] { @@ -626,7 +626,7 @@ fn color_widget(document_node: &DocumentNode, node_id: u64, index: usize, name: Separator::new(SeparatorType::Unrelated).widget_holder(), color_props .value(Some(x as Color)) - .on_update(update_value(|x: &ColorInput| TaggedValue::Color(x.value.unwrap()), node_id, index)) + .on_update(update_value(|x: &ColorButton| TaggedValue::Color(x.value.unwrap()), node_id, index)) .widget_holder(), ]) } else if let &TaggedValue::OptionalColor(x) = tagged_value { @@ -634,7 +634,7 @@ fn color_widget(document_node: &DocumentNode, node_id: u64, index: usize, name: Separator::new(SeparatorType::Unrelated).widget_holder(), color_props .value(x) - .on_update(update_value(|x: &ColorInput| TaggedValue::OptionalColor(x.value), node_id, index)) + .on_update(update_value(|x: &ColorButton| TaggedValue::OptionalColor(x.value), node_id, index)) .widget_holder(), ]) } @@ -691,7 +691,7 @@ pub fn black_and_white_properties(document_node: &DocumentNode, node_id: NodeId, const MIN: f64 = -200.; const MAX: f64 = 300.; // TODO: Add tint color (blended above using the "Color" blend mode) - let tint = color_widget(document_node, node_id, 1, "Tint", ColorInput::default(), true); + let tint = color_widget(document_node, node_id, 1, "Tint", ColorButton::default(), true); let r_weight = number_widget(document_node, node_id, 2, "Reds", NumberInput::default().min(MIN).max(MAX).unit("%"), true); let y_weight = number_widget(document_node, node_id, 3, "Yellows", NumberInput::default().min(MIN).max(MAX).unit("%"), true); let g_weight = number_widget(document_node, node_id, 4, "Greens", NumberInput::default().min(MIN).max(MAX).unit("%"), true); @@ -711,7 +711,7 @@ pub fn black_and_white_properties(document_node: &DocumentNode, node_id: NodeId, } pub fn blend_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec { - let backdrop = color_widget(document_node, node_id, 1, "Backdrop", ColorInput::default(), true); + let backdrop = color_widget(document_node, node_id, 1, "Backdrop", ColorButton::default(), true); let blend_mode = blend_mode(document_node, node_id, 2, "Blend Mode", true); let opacity = number_widget(document_node, node_id, 3, "Opacity", NumberInput::default().min(0.).max(100.).unit("%"), true); @@ -731,7 +731,7 @@ pub fn boolean_properties(document_node: &DocumentNode, node_id: NodeId, _contex } pub fn color_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec { - vec![color_widget(document_node, node_id, 0, "Color", ColorInput::default(), true)] + vec![color_widget(document_node, node_id, 0, "Color", ColorButton::default(), true)] } pub fn load_image_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec { @@ -772,7 +772,7 @@ pub fn output_properties(_document_node: &DocumentNode, _node_id: NodeId, contex } pub fn mask_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec { - let mask = color_widget(document_node, node_id, 1, "Stencil", ColorInput::default(), true); + let mask = color_widget(document_node, node_id, 1, "Stencil", ColorButton::default(), true); vec![mask] } @@ -1797,7 +1797,7 @@ pub fn stroke_properties(document_node: &DocumentNode, node_id: NodeId, _context let line_join_index = 6; let miter_limit_index = 7; - let color = color_widget(document_node, node_id, color_index, "Color", ColorInput::default(), true); + let color = color_widget(document_node, node_id, color_index, "Color", ColorButton::default(), true); let weight = number_widget(document_node, node_id, weight_index, "Weight", NumberInput::default().unit("px").min(0.), true); let dash_lengths = vec_f32_input(document_node, node_id, dash_lengths_index, "Dash Lengths", TextInput::default().centered(true), true); let dash_offset = number_widget(document_node, node_id, dash_offset_index, "Dash Offset", NumberInput::default().unit("px").min(0.), true); @@ -1862,7 +1862,7 @@ pub fn fill_properties(document_node: &DocumentNode, node_id: NodeId, _context: widgets.push(fill_type_switch); if fill_type.is_none() || solid { - let solid_color = color_widget(document_node, node_id, solid_color_index, "Color", ColorInput::default(), true); + let solid_color = color_widget(document_node, node_id, solid_color_index, "Color", ColorButton::default(), true); widgets.push(solid_color); } @@ -1895,7 +1895,7 @@ pub fn layer_properties(document_node: &DocumentNode, node_id: NodeId, _context: pub fn artboard_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec { let location = vec2_widget(document_node, node_id, 1, "Location", "X", "Y", " px", add_blank_assist); let dimensions = vec2_widget(document_node, node_id, 2, "Dimensions", "W", "H", " px", add_blank_assist); - let background = color_widget(document_node, node_id, 3, "Background", ColorInput::default().allow_none(false), true); + let background = color_widget(document_node, node_id, 3, "Background", ColorButton::default().allow_none(false), true); let clip = LayoutGroup::Row { widgets: bool_widget(document_node, node_id, 4, "Clip", true), }; @@ -1903,12 +1903,12 @@ pub fn artboard_properties(document_node: &DocumentNode, node_id: NodeId, _conte } pub fn color_fill_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec { - let color = color_widget(document_node, node_id, 1, "Color", ColorInput::default(), true); + let color = color_widget(document_node, node_id, 1, "Color", ColorButton::default(), true); vec![color] } pub fn color_overlay_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec { - let color = color_widget(document_node, node_id, 1, "Color", ColorInput::default(), true); + let color = color_widget(document_node, node_id, 1, "Color", ColorButton::default(), true); let blend_mode = blend_mode(document_node, node_id, 2, "Blend Mode", true); let opacity = number_widget(document_node, node_id, 3, "Opacity", NumberInput::default().percentage(), true); diff --git a/editor/src/messages/portfolio/document/properties_panel/utility_functions.rs b/editor/src/messages/portfolio/document/properties_panel/utility_functions.rs index ef50fe90a2..e23dd70034 100644 --- a/editor/src/messages/portfolio/document/properties_panel/utility_functions.rs +++ b/editor/src/messages/portfolio/document/properties_panel/utility_functions.rs @@ -361,8 +361,8 @@ fn node_gradient_color(gradient: &Gradient, position: usize) -> LayoutGroup { Separator::new(SeparatorType::Unrelated).widget_holder(), // TODO: which is the width of the Assist area. Separator::new(SeparatorType::Unrelated).widget_holder(), // TODO: Remove these when we have proper entry row formatting that includes room for Assists. Separator::new(SeparatorType::Unrelated).widget_holder(), - ColorInput::new(gradient_clone.positions[position].1) - .on_update(move |text_input: &ColorInput| { + ColorButton::new(gradient_clone.positions[position].1) + .on_update(move |text_input: &ColorButton| { let mut new_gradient = (*gradient_clone).clone(); new_gradient.positions[position].1 = text_input.value; send_fill_message(new_gradient) @@ -425,8 +425,8 @@ fn node_section_fill(fill: &Fill) -> Option { Separator::new(SeparatorType::Unrelated).widget_holder(), // TODO: which is the width of the Assist area. Separator::new(SeparatorType::Unrelated).widget_holder(), // TODO: Remove these when we have proper entry row formatting that includes room for Assists. Separator::new(SeparatorType::Unrelated).widget_holder(), - ColorInput::new(if let Fill::Solid(color) = fill { Some(*color) } else { None }) - .on_update(|text_input: &ColorInput| { + ColorButton::new(if let Fill::Solid(color) = fill { Some(*color) } else { None }) + .on_update(|text_input: &ColorButton| { let fill = if let Some(value) = text_input.value { Fill::Solid(value) } else { Fill::None }; PropertiesPanelMessage::ModifyFill { fill }.into() }) @@ -543,8 +543,8 @@ fn node_section_stroke(stroke: &Stroke) -> LayoutGroup { Separator::new(SeparatorType::Unrelated).widget_holder(), // TODO: which is the width of the Assist area. Separator::new(SeparatorType::Unrelated).widget_holder(), // TODO: Remove these when we have proper entry row formatting that includes room for Assists. Separator::new(SeparatorType::Unrelated).widget_holder(), - ColorInput::new(stroke.color()) - .on_update(move |text_input: &ColorInput| { + ColorButton::new(stroke.color()) + .on_update(move |text_input: &ColorButton| { internal_stroke1 .clone() .with_color(&text_input.value) diff --git a/editor/src/messages/tool/common_functionality/color_selector.rs b/editor/src/messages/tool/common_functionality/color_selector.rs index fb686b72fb..d437057537 100644 --- a/editor/src/messages/tool/common_functionality/color_selector.rs +++ b/editor/src/messages/tool/common_functionality/color_selector.rs @@ -65,7 +65,7 @@ impl ToolColorOptions { color_allow_none: bool, reset_callback: impl Fn(&IconButton) -> Message + 'static + Send + Sync, radio_callback: fn(ToolColorType) -> WidgetCallback<()>, - color_callback: impl Fn(&ColorInput) -> Message + 'static + Send + Sync, + color_callback: impl Fn(&ColorButton) -> Message + 'static + Send + Sync, ) -> Vec { let mut widgets = vec![TextLabel::new(label_text).widget_holder()]; @@ -98,8 +98,8 @@ impl ToolColorOptions { widgets.push(radio); widgets.push(Separator::new(SeparatorType::Related).widget_holder()); - let color_input = ColorInput::new(self.active_color()).allow_none(color_allow_none).on_update(color_callback); - widgets.push(color_input.widget_holder()); + let color_button = ColorButton::new(self.active_color()).allow_none(color_allow_none).on_update(color_callback); + widgets.push(color_button.widget_holder()); widgets } diff --git a/editor/src/messages/tool/tool_messages/brush_tool.rs b/editor/src/messages/tool/tool_messages/brush_tool.rs index 129978abe5..7e6d38915f 100644 --- a/editor/src/messages/tool/tool_messages/brush_tool.rs +++ b/editor/src/messages/tool/tool_messages/brush_tool.rs @@ -187,7 +187,7 @@ impl LayoutHolder for BrushTool { false, |_| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::Color(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::ColorType(color_type.clone())).into()), - |color: &ColorInput| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::Color(color.value)).into(), + |color: &ColorButton| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::Color(color.value)).into(), )); widgets.push(Separator::new(SeparatorType::Related).widget_holder()); diff --git a/editor/src/messages/tool/tool_messages/ellipse_tool.rs b/editor/src/messages/tool/tool_messages/ellipse_tool.rs index 4a71293538..e35fad22bd 100644 --- a/editor/src/messages/tool/tool_messages/ellipse_tool.rs +++ b/editor/src/messages/tool/tool_messages/ellipse_tool.rs @@ -91,7 +91,7 @@ impl LayoutHolder for EllipseTool { true, |_| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::FillColor(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::FillColorType(color_type.clone())).into()), - |color: &ColorInput| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::FillColor(color.value)).into(), + |color: &ColorButton| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::FillColor(color.value)).into(), ); widgets.push(Separator::new(SeparatorType::Section).widget_holder()); @@ -101,7 +101,7 @@ impl LayoutHolder for EllipseTool { true, |_| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::StrokeColor(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::StrokeColorType(color_type.clone())).into()), - |color: &ColorInput| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::StrokeColor(color.value)).into(), + |color: &ColorButton| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::StrokeColor(color.value)).into(), )); widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder()); widgets.push(create_weight_widget(self.options.line_weight)); diff --git a/editor/src/messages/tool/tool_messages/freehand_tool.rs b/editor/src/messages/tool/tool_messages/freehand_tool.rs index 43dbfa5b26..3ad89ffe8b 100644 --- a/editor/src/messages/tool/tool_messages/freehand_tool.rs +++ b/editor/src/messages/tool/tool_messages/freehand_tool.rs @@ -98,7 +98,7 @@ impl LayoutHolder for FreehandTool { true, |_| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::FillColor(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::FillColorType(color_type.clone())).into()), - |color: &ColorInput| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::FillColor(color.value)).into(), + |color: &ColorButton| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::FillColor(color.value)).into(), ); widgets.push(Separator::new(SeparatorType::Section).widget_holder()); @@ -108,7 +108,7 @@ impl LayoutHolder for FreehandTool { true, |_| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::StrokeColor(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::StrokeColorType(color_type.clone())).into()), - |color: &ColorInput| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::StrokeColor(color.value)).into(), + |color: &ColorButton| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::StrokeColor(color.value)).into(), )); widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder()); widgets.push(create_weight_widget(self.options.line_weight)); diff --git a/editor/src/messages/tool/tool_messages/line_tool.rs b/editor/src/messages/tool/tool_messages/line_tool.rs index fdaf49bdf1..f7edb4a382 100644 --- a/editor/src/messages/tool/tool_messages/line_tool.rs +++ b/editor/src/messages/tool/tool_messages/line_tool.rs @@ -92,7 +92,7 @@ impl LayoutHolder for LineTool { true, |_| LineToolMessage::UpdateOptions(LineOptionsUpdate::StrokeColor(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| LineToolMessage::UpdateOptions(LineOptionsUpdate::StrokeColorType(color_type.clone())).into()), - |color: &ColorInput| LineToolMessage::UpdateOptions(LineOptionsUpdate::StrokeColor(color.value)).into(), + |color: &ColorButton| LineToolMessage::UpdateOptions(LineOptionsUpdate::StrokeColor(color.value)).into(), ); widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder()); widgets.push(create_weight_widget(self.options.line_weight)); diff --git a/editor/src/messages/tool/tool_messages/pen_tool.rs b/editor/src/messages/tool/tool_messages/pen_tool.rs index 51a39eadf7..ac1d5884b1 100644 --- a/editor/src/messages/tool/tool_messages/pen_tool.rs +++ b/editor/src/messages/tool/tool_messages/pen_tool.rs @@ -113,7 +113,7 @@ impl LayoutHolder for PenTool { true, |_| PenToolMessage::UpdateOptions(PenOptionsUpdate::FillColor(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| PenToolMessage::UpdateOptions(PenOptionsUpdate::FillColorType(color_type.clone())).into()), - |color: &ColorInput| PenToolMessage::UpdateOptions(PenOptionsUpdate::FillColor(color.value)).into(), + |color: &ColorButton| PenToolMessage::UpdateOptions(PenOptionsUpdate::FillColor(color.value)).into(), ); widgets.push(Separator::new(SeparatorType::Section).widget_holder()); @@ -123,7 +123,7 @@ impl LayoutHolder for PenTool { true, |_| PenToolMessage::UpdateOptions(PenOptionsUpdate::StrokeColor(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| PenToolMessage::UpdateOptions(PenOptionsUpdate::StrokeColorType(color_type.clone())).into()), - |color: &ColorInput| PenToolMessage::UpdateOptions(PenOptionsUpdate::StrokeColor(color.value)).into(), + |color: &ColorButton| PenToolMessage::UpdateOptions(PenOptionsUpdate::StrokeColor(color.value)).into(), )); widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder()); widgets.push(create_weight_widget(self.options.line_weight)); diff --git a/editor/src/messages/tool/tool_messages/polygon_tool.rs b/editor/src/messages/tool/tool_messages/polygon_tool.rs index 4c5578562e..1bb8842fd6 100644 --- a/editor/src/messages/tool/tool_messages/polygon_tool.rs +++ b/editor/src/messages/tool/tool_messages/polygon_tool.rs @@ -130,7 +130,7 @@ impl LayoutHolder for PolygonTool { true, |_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::FillColor(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::FillColorType(color_type.clone())).into()), - |color: &ColorInput| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::FillColor(color.value)).into(), + |color: &ColorButton| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::FillColor(color.value)).into(), )); widgets.push(Separator::new(SeparatorType::Section).widget_holder()); @@ -140,7 +140,7 @@ impl LayoutHolder for PolygonTool { true, |_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::StrokeColor(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::StrokeColorType(color_type.clone())).into()), - |color: &ColorInput| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::StrokeColor(color.value)).into(), + |color: &ColorButton| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::StrokeColor(color.value)).into(), )); widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder()); widgets.push(create_weight_widget(self.options.line_weight)); diff --git a/editor/src/messages/tool/tool_messages/rectangle_tool.rs b/editor/src/messages/tool/tool_messages/rectangle_tool.rs index 341549b39c..6113bb16c9 100644 --- a/editor/src/messages/tool/tool_messages/rectangle_tool.rs +++ b/editor/src/messages/tool/tool_messages/rectangle_tool.rs @@ -79,7 +79,7 @@ impl LayoutHolder for RectangleTool { true, |_| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::FillColor(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::FillColorType(color_type.clone())).into()), - |color: &ColorInput| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::FillColor(color.value)).into(), + |color: &ColorButton| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::FillColor(color.value)).into(), ); widgets.push(Separator::new(SeparatorType::Section).widget_holder()); @@ -89,7 +89,7 @@ impl LayoutHolder for RectangleTool { true, |_| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::StrokeColor(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::StrokeColorType(color_type.clone())).into()), - |color: &ColorInput| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::StrokeColor(color.value)).into(), + |color: &ColorButton| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::StrokeColor(color.value)).into(), )); widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder()); widgets.push(create_weight_widget(self.options.line_weight)); diff --git a/editor/src/messages/tool/tool_messages/spline_tool.rs b/editor/src/messages/tool/tool_messages/spline_tool.rs index 73e4d7827b..1c3988dae2 100644 --- a/editor/src/messages/tool/tool_messages/spline_tool.rs +++ b/editor/src/messages/tool/tool_messages/spline_tool.rs @@ -100,7 +100,7 @@ impl LayoutHolder for SplineTool { true, |_| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::FillColor(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::FillColorType(color_type.clone())).into()), - |color: &ColorInput| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::FillColor(color.value)).into(), + |color: &ColorButton| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::FillColor(color.value)).into(), ); widgets.push(Separator::new(SeparatorType::Section).widget_holder()); @@ -110,7 +110,7 @@ impl LayoutHolder for SplineTool { true, |_| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::StrokeColor(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::StrokeColorType(color_type.clone())).into()), - |color: &ColorInput| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::StrokeColor(color.value)).into(), + |color: &ColorButton| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::StrokeColor(color.value)).into(), )); widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder()); widgets.push(create_weight_widget(self.options.line_weight)); diff --git a/editor/src/messages/tool/tool_messages/text_tool.rs b/editor/src/messages/tool/tool_messages/text_tool.rs index 29ebea4245..2b5a903729 100644 --- a/editor/src/messages/tool/tool_messages/text_tool.rs +++ b/editor/src/messages/tool/tool_messages/text_tool.rs @@ -135,7 +135,7 @@ impl LayoutHolder for TextTool { true, |_| TextToolMessage::UpdateOptions(TextOptionsUpdate::FillColor(None)).into(), |color_type: ToolColorType| WidgetCallback::new(move |_| TextToolMessage::UpdateOptions(TextOptionsUpdate::FillColorType(color_type.clone())).into()), - |color: &ColorInput| TextToolMessage::UpdateOptions(TextOptionsUpdate::FillColor(color.value)).into(), + |color: &ColorButton| TextToolMessage::UpdateOptions(TextOptionsUpdate::FillColor(color.value)).into(), )); Layout::WidgetLayout(WidgetLayout::new(vec![LayoutGroup::Row { widgets }])) diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte index 3716e21251..e1b7da85ab 100644 --- a/frontend/src/components/Editor.svelte +++ b/frontend/src/components/Editor.svelte @@ -125,29 +125,34 @@ --color-none-position: center center; // 24px tall, 48px wide --color-none-size-24px: 60px 24px; - --color-none-image-24px: - // Red diagonal slash (24px tall) - url('data:image/svg+xml;utf8,'); + // Red diagonal slash (24px tall) + --color-none-image-24px: url('data:image/svg+xml;utf8,\ + \ + '); // 32px tall, 64px wide --color-none-size-32px: 80px 32px; - --color-none-image-32px: - // Red diagonal slash (32px tall) - url('data:image/svg+xml;utf8,'); + // Red diagonal slash (32px tall) + --color-none-image-32px: url('data:image/svg+xml;utf8,\ + \ + '); --color-transparent-checkered-background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(#ffffff, #ffffff); --color-transparent-checkered-background-size: 16px 16px; --color-transparent-checkered-background-position: 0 0, 8px 8px; - --icon-expand-collapse-arrow: - // Arrow triangle (#eee fill) - url('data:image/svg+xml;utf8,'); - --icon-expand-collapse-arrow-hover: - // Arrow triangle (#fff fill) - url('data:image/svg+xml;utf8,'); - --icon-expand-collapse-arrow-disabled: - // Arrow triangle (#888 fill) - url('data:image/svg+xml;utf8,'); + // Arrow triangle (#eee fill) + --icon-expand-collapse-arrow: url('data:image/svg+xml;utf8,\ + \ + '); + // Arrow triangle (#fff fill) + --icon-expand-collapse-arrow-hover: url('data:image/svg+xml;utf8,\ + \ + '); + // Arrow triangle (#888 fill) + --icon-expand-collapse-arrow-disabled: url('data:image/svg+xml;utf8,\ + \ + '); } html, @@ -265,7 +270,7 @@ .icon-button, .text-button, .popover-button, - .color-input > button, + .color-button > button, .color-picker .preset-color, .swatch-pair .swatch > button, .radio-input button, diff --git a/frontend/src/components/floating-menus/ColorPicker.svelte b/frontend/src/components/floating-menus/ColorPicker.svelte index 907a701527..e34185d318 100644 --- a/frontend/src/components/floating-menus/ColorPicker.svelte +++ b/frontend/src/components/floating-menus/ColorPicker.svelte @@ -384,20 +384,20 @@ {#if allowNone} - diff --git a/frontend/src/components/widgets/WidgetRow.svelte b/frontend/src/components/widgets/WidgetRow.svelte index 58c8f00985..01c26868f2 100644 --- a/frontend/src/components/widgets/WidgetRow.svelte +++ b/frontend/src/components/widgets/WidgetRow.svelte @@ -1,6 +1,8 @@ - + + > (open = detail)} @@ -47,15 +48,12 @@ }} {allowNone} /> - + {colorLabel(value)} + diff --git a/frontend/src/components/widgets/inputs/SwatchPairInput.svelte b/frontend/src/components/widgets/inputs/SwatchPairInput.svelte index b7394e7c70..ab38c99efc 100644 --- a/frontend/src/components/widgets/inputs/SwatchPairInput.svelte +++ b/frontend/src/components/widgets/inputs/SwatchPairInput.svelte @@ -37,11 +37,11 @@ -