fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-05 21:08:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Redesign ColorInput widget and rename it to ColorButton

Browse Source
This commit is contained in:
Keavon Chambers
2023-11-16 18:38:39 -08:00
parent 8a816cd701
commit e3f5e7001f
22 changed files with 142 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
editor/src/messages/layout/layout_message_handler.rs
+5 -5
View File
@@ -96,8 +96,8 @@ impl<F: Fn(&MessageDiscriminant) -> Vec<KeysGroup>> MessageHandler<LayoutMessage
let callback_message = (checkbox_input.on_update.callback)(checkbox_input); let callback_message = (checkbox_input.on_update.callback)(checkbox_input);
responses.add(callback_message); responses.add(callback_message);
} }
Widget::ColorInput(color_input) => { Widget::ColorButton(color_button) => {
let update_value = value.as_object().expect("ColorInput update was not of type: object"); let update_value = value.as_object().expect("ColorButton update was not of type: object");
let parsed_color = (|| { let parsed_color = (|| {
let is_none = update_value.get("none")?.as_bool()?; let is_none = update_value.get("none")?.as_bool()?;
@@ -112,9 +112,9 @@ impl<F: Fn(&MessageDiscriminant) -> Vec<KeysGroup>> MessageHandler<LayoutMessage
Some(None) Some(None)
} }
})() })()
.unwrap_or_else(|| panic!("ColorInput update was not able to be parsed with color data: {color_input:?}")); .unwrap_or_else(|| panic!("ColorButton update was not able to be parsed with color data: {color_button:?}"));
color_input.value = parsed_color; color_button.value = parsed_color;
let callback_message = (color_input.on_update.callback)(color_input); let callback_message = (color_button.on_update.callback)(color_button);
responses.add(callback_message); responses.add(callback_message);
} }
Widget::CurveInput(curve_input) => { Widget::CurveInput(curve_input) => {
editor/src/messages/layout/utility_types/layout_widget.rs
+3 -3
View File
@@ -320,7 +320,7 @@ impl LayoutGroup {
for widget in &mut widgets { for widget in &mut widgets {
let val = match &mut widget.widget { let val = match &mut widget.widget {
Widget::CheckboxInput(x) => &mut x.tooltip, 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::CurveInput(x) => &mut x.tooltip,
Widget::DropdownInput(x) => &mut x.tooltip, Widget::DropdownInput(x) => &mut x.tooltip,
Widget::FontInput(x) => &mut x.tooltip, Widget::FontInput(x) => &mut x.tooltip,
@@ -471,7 +471,7 @@ impl<T> Default for WidgetCallback<T> {
pub enum Widget { pub enum Widget {
BreadcrumbTrailButtons(BreadcrumbTrailButtons), BreadcrumbTrailButtons(BreadcrumbTrailButtons),
CheckboxInput(CheckboxInput), CheckboxInput(CheckboxInput),
ColorInput(ColorInput), ColorButton(ColorButton),
CurveInput(CurveInput), CurveInput(CurveInput),
DropdownInput(DropdownInput), DropdownInput(DropdownInput),
FontInput(FontInput), FontInput(FontInput),
@@ -545,7 +545,7 @@ impl DiffUpdate {
let mut tooltip_shortcut = match &mut widget_holder.widget { let mut tooltip_shortcut = match &mut widget_holder.widget {
Widget::BreadcrumbTrailButtons(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)), Widget::BreadcrumbTrailButtons(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
Widget::CheckboxInput(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::DropdownInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
Widget::FontInput(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)), Widget::IconButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
editor/src/messages/layout/utility_types/widgets/button_widgets.rs
+27
View File
@@ -2,6 +2,7 @@ use crate::messages::input_mapper::utility_types::misc::ActionKeys;
use crate::messages::layout::utility_types::widget_prelude::*; use crate::messages::layout::utility_types::widget_prelude::*;
use crate::messages::portfolio::document::node_graph::FrontendGraphDataType; use crate::messages::portfolio::document::node_graph::FrontendGraphDataType;
use graphene_core::raster::color::Color;
use graphite_proc_macros::WidgetBuilder; use graphite_proc_macros::WidgetBuilder;
use derivative::*; use derivative::*;
@@ -105,6 +106,32 @@ pub struct TextButton {
pub on_update: WidgetCallback<TextButton>, pub on_update: WidgetCallback<TextButton>,
} }
#[derive(Clone, Derivative, Serialize, Deserialize, WidgetBuilder, specta::Type)]
#[derivative(Debug, PartialEq, Default)]
pub struct ColorButton {
#[widget_builder(constructor)]
pub value: Option<Color>,
// 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<ActionKeys>,
// Callbacks
#[serde(skip)]
#[derivative(Debug = "ignore", PartialEq = "ignore")]
pub on_update: WidgetCallback<ColorButton>,
}
#[derive(Clone, Serialize, Deserialize, Derivative, Default, WidgetBuilder, specta::Type)] #[derive(Clone, Serialize, Deserialize, Derivative, Default, WidgetBuilder, specta::Type)]
#[derivative(Debug, PartialEq)] #[derivative(Debug, PartialEq)]
#[serde(rename_all = "camelCase")] #[serde(rename_all = "camelCase")]
editor/src/messages/layout/utility_types/widgets/input_widgets.rs
-26
View File
@@ -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<Color>,
// 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<ActionKeys>,
// Callbacks
#[serde(skip)]
#[derivative(Debug = "ignore", PartialEq = "ignore")]
pub on_update: WidgetCallback<ColorInput>,
}
#[derive(Clone, Serialize, Deserialize, Derivative, WidgetBuilder, specta::Type)] #[derive(Clone, Serialize, Deserialize, Derivative, WidgetBuilder, specta::Type)]
#[derivative(Debug, PartialEq, Default)] #[derivative(Debug, PartialEq, Default)]
pub struct DropdownInput { pub struct DropdownInput {
editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
+15 -15
View File
@@ -507,13 +507,13 @@ fn gradient_row(row: &mut Vec<WidgetHolder>, positions: &Vec<(f64, Option<Color>
row.push(label.widget_holder()); row.push(label.widget_holder());
let on_update = { let on_update = {
let positions = positions.clone(); let positions = positions.clone();
move |color_input: &ColorInput| { move |color_button: &ColorButton| {
let mut new_positions = positions.clone(); let mut new_positions = positions.clone();
new_positions[index].1 = color_input.value; new_positions[index].1 = color_button.value;
TaggedValue::GradientPositions(new_positions) 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); add_blank_assist(row);
row.push(Separator::new(SeparatorType::Unrelated).widget_holder()); row.push(Separator::new(SeparatorType::Unrelated).widget_holder());
row.push(color.widget_holder()); row.push(color.widget_holder());
@@ -617,7 +617,7 @@ fn gradient_positions(rows: &mut Vec<LayoutGroup>, 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); 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] { 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(), Separator::new(SeparatorType::Unrelated).widget_holder(),
color_props color_props
.value(Some(x as Color)) .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(), .widget_holder(),
]) ])
} else if let &TaggedValue::OptionalColor(x) = tagged_value { } 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(), Separator::new(SeparatorType::Unrelated).widget_holder(),
color_props color_props
.value(x) .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(), .widget_holder(),
]) ])
} }
@@ -691,7 +691,7 @@ pub fn black_and_white_properties(document_node: &DocumentNode, node_id: NodeId,
const MIN: f64 = -200.; const MIN: f64 = -200.;
const MAX: f64 = 300.; const MAX: f64 = 300.;
// TODO: Add tint color (blended above using the "Color" blend mode) // 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 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 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); 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<LayoutGroup> { pub fn blend_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
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 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); 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<LayoutGroup> { pub fn color_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
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<LayoutGroup> { pub fn load_image_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
@@ -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<LayoutGroup> { pub fn mask_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
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] vec![mask]
} }
@@ -1797,7 +1797,7 @@ pub fn stroke_properties(document_node: &DocumentNode, node_id: NodeId, _context
let line_join_index = 6; let line_join_index = 6;
let miter_limit_index = 7; 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 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_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); 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); widgets.push(fill_type_switch);
if fill_type.is_none() || solid { 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); 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<LayoutGroup> { pub fn artboard_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
let location = vec2_widget(document_node, node_id, 1, "Location", "X", "Y", " px", add_blank_assist); 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 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 { let clip = LayoutGroup::Row {
widgets: bool_widget(document_node, node_id, 4, "Clip", true), 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<LayoutGroup> { pub fn color_fill_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
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] vec![color]
} }
pub fn color_overlay_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> { pub fn color_overlay_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
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 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); let opacity = number_widget(document_node, node_id, 3, "Opacity", NumberInput::default().percentage(), true);
editor/src/messages/portfolio/document/properties_panel/utility_functions.rs
+6 -6
View File
@@ -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: 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(), // TODO: Remove these when we have proper entry row formatting that includes room for Assists.
Separator::new(SeparatorType::Unrelated).widget_holder(), Separator::new(SeparatorType::Unrelated).widget_holder(),
ColorInput::new(gradient_clone.positions[position].1) ColorButton::new(gradient_clone.positions[position].1)
.on_update(move |text_input: &ColorInput| { .on_update(move |text_input: &ColorButton| {
let mut new_gradient = (*gradient_clone).clone(); let mut new_gradient = (*gradient_clone).clone();
new_gradient.positions[position].1 = text_input.value; new_gradient.positions[position].1 = text_input.value;
send_fill_message(new_gradient) send_fill_message(new_gradient)
@@ -425,8 +425,8 @@ fn node_section_fill(fill: &Fill) -> Option<LayoutGroup> {
Separator::new(SeparatorType::Unrelated).widget_holder(), // TODO: which is the width of the Assist area. 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(), // TODO: Remove these when we have proper entry row formatting that includes room for Assists.
Separator::new(SeparatorType::Unrelated).widget_holder(), Separator::new(SeparatorType::Unrelated).widget_holder(),
ColorInput::new(if let Fill::Solid(color) = fill { Some(*color) } else { None }) ColorButton::new(if let Fill::Solid(color) = fill { Some(*color) } else { None })
.on_update(|text_input: &ColorInput| { .on_update(|text_input: &ColorButton| {
let fill = if let Some(value) = text_input.value { Fill::Solid(value) } else { Fill::None }; let fill = if let Some(value) = text_input.value { Fill::Solid(value) } else { Fill::None };
PropertiesPanelMessage::ModifyFill { fill }.into() 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: 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(), // TODO: Remove these when we have proper entry row formatting that includes room for Assists.
Separator::new(SeparatorType::Unrelated).widget_holder(), Separator::new(SeparatorType::Unrelated).widget_holder(),
ColorInput::new(stroke.color()) ColorButton::new(stroke.color())
.on_update(move |text_input: &ColorInput| { .on_update(move |text_input: &ColorButton| {
internal_stroke1 internal_stroke1
.clone() .clone()
.with_color(&text_input.value) .with_color(&text_input.value)
editor/src/messages/tool/common_functionality/color_selector.rs
+3 -3
View File
@@ -65,7 +65,7 @@ impl ToolColorOptions {
color_allow_none: bool, color_allow_none: bool,
reset_callback: impl Fn(&IconButton) -> Message + 'static + Send + Sync, reset_callback: impl Fn(&IconButton) -> Message + 'static + Send + Sync,
radio_callback: fn(ToolColorType) -> WidgetCallback<()>, radio_callback: fn(ToolColorType) -> WidgetCallback<()>,
color_callback: impl Fn(&ColorInput) -> Message + 'static + Send + Sync, color_callback: impl Fn(&ColorButton) -> Message + 'static + Send + Sync,
) -> Vec<WidgetHolder> { ) -> Vec<WidgetHolder> {
let mut widgets = vec![TextLabel::new(label_text).widget_holder()]; let mut widgets = vec![TextLabel::new(label_text).widget_holder()];
@@ -98,8 +98,8 @@ impl ToolColorOptions {
widgets.push(radio); widgets.push(radio);
widgets.push(Separator::new(SeparatorType::Related).widget_holder()); 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); let color_button = ColorButton::new(self.active_color()).allow_none(color_allow_none).on_update(color_callback);
widgets.push(color_input.widget_holder()); widgets.push(color_button.widget_holder());
widgets widgets
} }
editor/src/messages/tool/tool_messages/brush_tool.rs
+1 -1
View File
@@ -187,7 +187,7 @@ impl LayoutHolder for BrushTool {
false, false,
|_| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::Color(None)).into(), |_| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::Color(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::ColorType(color_type.clone())).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()); widgets.push(Separator::new(SeparatorType::Related).widget_holder());
editor/src/messages/tool/tool_messages/ellipse_tool.rs
+2 -2
View File
@@ -91,7 +91,7 @@ impl LayoutHolder for EllipseTool {
true, true,
|_| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::FillColor(None)).into(), |_| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::FillColor(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::FillColorType(color_type.clone())).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()); widgets.push(Separator::new(SeparatorType::Section).widget_holder());
@@ -101,7 +101,7 @@ impl LayoutHolder for EllipseTool {
true, true,
|_| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::StrokeColor(None)).into(), |_| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::StrokeColor(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::StrokeColorType(color_type.clone())).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(Separator::new(SeparatorType::Unrelated).widget_holder());
widgets.push(create_weight_widget(self.options.line_weight)); widgets.push(create_weight_widget(self.options.line_weight));
editor/src/messages/tool/tool_messages/freehand_tool.rs
+2 -2
View File
@@ -98,7 +98,7 @@ impl LayoutHolder for FreehandTool {
true, true,
|_| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::FillColor(None)).into(), |_| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::FillColor(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::FillColorType(color_type.clone())).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()); widgets.push(Separator::new(SeparatorType::Section).widget_holder());
@@ -108,7 +108,7 @@ impl LayoutHolder for FreehandTool {
true, true,
|_| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::StrokeColor(None)).into(), |_| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::StrokeColor(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::StrokeColorType(color_type.clone())).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(Separator::new(SeparatorType::Unrelated).widget_holder());
widgets.push(create_weight_widget(self.options.line_weight)); widgets.push(create_weight_widget(self.options.line_weight));
editor/src/messages/tool/tool_messages/line_tool.rs
+1 -1
View File
@@ -92,7 +92,7 @@ impl LayoutHolder for LineTool {
true, true,
|_| LineToolMessage::UpdateOptions(LineOptionsUpdate::StrokeColor(None)).into(), |_| LineToolMessage::UpdateOptions(LineOptionsUpdate::StrokeColor(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| LineToolMessage::UpdateOptions(LineOptionsUpdate::StrokeColorType(color_type.clone())).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(Separator::new(SeparatorType::Unrelated).widget_holder());
widgets.push(create_weight_widget(self.options.line_weight)); widgets.push(create_weight_widget(self.options.line_weight));
editor/src/messages/tool/tool_messages/pen_tool.rs
+2 -2
View File
@@ -113,7 +113,7 @@ impl LayoutHolder for PenTool {
true, true,
|_| PenToolMessage::UpdateOptions(PenOptionsUpdate::FillColor(None)).into(), |_| PenToolMessage::UpdateOptions(PenOptionsUpdate::FillColor(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| PenToolMessage::UpdateOptions(PenOptionsUpdate::FillColorType(color_type.clone())).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()); widgets.push(Separator::new(SeparatorType::Section).widget_holder());
@@ -123,7 +123,7 @@ impl LayoutHolder for PenTool {
true, true,
|_| PenToolMessage::UpdateOptions(PenOptionsUpdate::StrokeColor(None)).into(), |_| PenToolMessage::UpdateOptions(PenOptionsUpdate::StrokeColor(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| PenToolMessage::UpdateOptions(PenOptionsUpdate::StrokeColorType(color_type.clone())).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(Separator::new(SeparatorType::Unrelated).widget_holder());
widgets.push(create_weight_widget(self.options.line_weight)); widgets.push(create_weight_widget(self.options.line_weight));
editor/src/messages/tool/tool_messages/polygon_tool.rs
+2 -2
View File
@@ -130,7 +130,7 @@ impl LayoutHolder for PolygonTool {
true, true,
|_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::FillColor(None)).into(), |_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::FillColor(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::FillColorType(color_type.clone())).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()); widgets.push(Separator::new(SeparatorType::Section).widget_holder());
@@ -140,7 +140,7 @@ impl LayoutHolder for PolygonTool {
true, true,
|_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::StrokeColor(None)).into(), |_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::StrokeColor(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::StrokeColorType(color_type.clone())).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(Separator::new(SeparatorType::Unrelated).widget_holder());
widgets.push(create_weight_widget(self.options.line_weight)); widgets.push(create_weight_widget(self.options.line_weight));
editor/src/messages/tool/tool_messages/rectangle_tool.rs
+2 -2
View File
@@ -79,7 +79,7 @@ impl LayoutHolder for RectangleTool {
true, true,
|_| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::FillColor(None)).into(), |_| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::FillColor(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::FillColorType(color_type.clone())).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()); widgets.push(Separator::new(SeparatorType::Section).widget_holder());
@@ -89,7 +89,7 @@ impl LayoutHolder for RectangleTool {
true, true,
|_| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::StrokeColor(None)).into(), |_| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::StrokeColor(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::StrokeColorType(color_type.clone())).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(Separator::new(SeparatorType::Unrelated).widget_holder());
widgets.push(create_weight_widget(self.options.line_weight)); widgets.push(create_weight_widget(self.options.line_weight));
editor/src/messages/tool/tool_messages/spline_tool.rs
+2 -2
View File
@@ -100,7 +100,7 @@ impl LayoutHolder for SplineTool {
true, true,
|_| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::FillColor(None)).into(), |_| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::FillColor(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::FillColorType(color_type.clone())).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()); widgets.push(Separator::new(SeparatorType::Section).widget_holder());
@@ -110,7 +110,7 @@ impl LayoutHolder for SplineTool {
true, true,
|_| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::StrokeColor(None)).into(), |_| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::StrokeColor(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::StrokeColorType(color_type.clone())).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(Separator::new(SeparatorType::Unrelated).widget_holder());
widgets.push(create_weight_widget(self.options.line_weight)); widgets.push(create_weight_widget(self.options.line_weight));
editor/src/messages/tool/tool_messages/text_tool.rs
+1 -1
View File
@@ -135,7 +135,7 @@ impl LayoutHolder for TextTool {
true, true,
|_| TextToolMessage::UpdateOptions(TextOptionsUpdate::FillColor(None)).into(), |_| TextToolMessage::UpdateOptions(TextOptionsUpdate::FillColor(None)).into(),
|color_type: ToolColorType| WidgetCallback::new(move |_| TextToolMessage::UpdateOptions(TextOptionsUpdate::FillColorType(color_type.clone())).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 }])) Layout::WidgetLayout(WidgetLayout::new(vec![LayoutGroup::Row { widgets }]))
frontend/src/components/Editor.svelte
+16 -11
View File
@@ -125,29 +125,34 @@
--color-none-position: center center; --color-none-position: center center;
// 24px tall, 48px wide // 24px tall, 48px wide
--color-none-size-24px: 60px 24px; --color-none-size-24px: 60px 24px;
--color-none-image-24px:
// Red diagonal slash (24px tall) // Red diagonal slash (24px tall)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 24"><line stroke="red" stroke-width="4px" x1="0" y1="27" x2="60" y2="-3" /></svg>'); --color-none-image-24px: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 24"><line stroke="red" stroke-width="4px" x1="0" y1="27" x2="60" y2="-3" /></svg>\
');
// 32px tall, 64px wide // 32px tall, 64px wide
--color-none-size-32px: 80px 32px; --color-none-size-32px: 80px 32px;
--color-none-image-32px:
// Red diagonal slash (32px tall) // Red diagonal slash (32px tall)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 32"><line stroke="red" stroke-width="4px" x1="0" y1="36" x2="80" y2="-4" /></svg>'); --color-none-image-32px: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 32"><line stroke="red" stroke-width="4px" x1="0" y1="36" x2="80" y2="-4" /></svg>\
');
--color-transparent-checkered-background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), --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); 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-size: 16px 16px;
--color-transparent-checkered-background-position: 0 0, 8px 8px; --color-transparent-checkered-background-position: 0 0, 8px 8px;
--icon-expand-collapse-arrow:
// Arrow triangle (#eee fill) // Arrow triangle (#eee fill)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23eee" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>'); --icon-expand-collapse-arrow: url('data:image/svg+xml;utf8,\
--icon-expand-collapse-arrow-hover: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23eee" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>\
');
// Arrow triangle (#fff fill) // Arrow triangle (#fff fill)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23fff" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>'); --icon-expand-collapse-arrow-hover: url('data:image/svg+xml;utf8,\
--icon-expand-collapse-arrow-disabled: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23fff" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>\
');
// Arrow triangle (#888 fill) // Arrow triangle (#888 fill)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23888" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>'); --icon-expand-collapse-arrow-disabled: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23888" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>\
');
} }
html, html,
@@ -265,7 +270,7 @@
.icon-button, .icon-button,
.text-button, .text-button,
.popover-button, .popover-button,
.color-input > button, .color-button > button,
.color-picker .preset-color, .color-picker .preset-color,
.swatch-pair .swatch > button, .swatch-pair .swatch > button,
.radio-input button, .radio-input button,
frontend/src/components/floating-menus/ColorPicker.svelte
+9 -9
View File
@@ -384,20 +384,20 @@
<LayoutRow class="leftover-space" /> <LayoutRow class="leftover-space" />
<LayoutRow> <LayoutRow>
{#if allowNone} {#if allowNone}
<button class="preset-color none" on:click={() => setColorPreset("none")} title="Set none" tabindex="0" /> <button class="preset-color none" on:click={() => setColorPreset("none")} title="Set No Color" tabindex="0" />
<Separator type="Related" /> <Separator type="Related" />
{/if} {/if}
<button class="preset-color black" on:click={() => setColorPreset("black")} title="Set black" tabindex="0" /> <button class="preset-color black" on:click={() => setColorPreset("black")} title="Set Black" tabindex="0" />
<Separator type="Related" /> <Separator type="Related" />
<button class="preset-color white" on:click={() => setColorPreset("white")} title="Set white" tabindex="0" /> <button class="preset-color white" on:click={() => setColorPreset("white")} title="Set White" tabindex="0" />
<Separator type="Related" /> <Separator type="Related" />
<button class="preset-color pure" on:click={setColorPresetSubtile} tabindex="-1"> <button class="preset-color pure" on:click={setColorPresetSubtile} tabindex="-1">
<div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" title="Set red" /> <div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" title="Set Red" />
<div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" title="Set yellow" /> <div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" title="Set Yellow" />
<div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" title="Set green" /> <div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" title="Set Green" />
<div data-pure-tile="cyan" style="--pure-color: #00ffff; --pure-color-gray: #b2b2b2" title="Set cyan" /> <div data-pure-tile="cyan" style="--pure-color: #00ffff; --pure-color-gray: #b2b2b2" title="Set Cyan" />
<div data-pure-tile="blue" style="--pure-color: #0000ff; --pure-color-gray: #1c1c1c" title="Set blue" /> <div data-pure-tile="blue" style="--pure-color: #0000ff; --pure-color-gray: #1c1c1c" title="Set Blue" />
<div data-pure-tile="magenta" style="--pure-color: #ff00ff; --pure-color-gray: #696969" title="Set magenta" /> <div data-pure-tile="magenta" style="--pure-color: #ff00ff; --pure-color-gray: #696969" title="Set Magenta" />
</button> </button>
<Separator type="Related" /> <Separator type="Related" />
<IconButton icon="Eyedropper" size={24} action={activateEyedropperSample} tooltip="Sample a pixel color from the document" /> <IconButton icon="Eyedropper" size={24} action={activateEyedropperSample} tooltip="Sample a pixel color from the document" />
frontend/src/components/widgets/WidgetRow.svelte
+4 -3
View File
@@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import { getContext } from "svelte"; import { getContext } from "svelte";
import ColorButton from "./buttons/ColorButton.svelte";
import { debouncer } from "@graphite/utility-functions/debounce"; import { debouncer } from "@graphite/utility-functions/debounce";
import type { Editor } from "@graphite/wasm-communication/editor"; import type { Editor } from "@graphite/wasm-communication/editor";
import type { Widget, WidgetColumn, WidgetRow } from "@graphite/wasm-communication/messages"; import type { Widget, WidgetColumn, WidgetRow } from "@graphite/wasm-communication/messages";
@@ -13,7 +15,6 @@
import PopoverButton from "@graphite/components/widgets/buttons/PopoverButton.svelte"; import PopoverButton from "@graphite/components/widgets/buttons/PopoverButton.svelte";
import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte"; import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
import CheckboxInput from "@graphite/components/widgets/inputs/CheckboxInput.svelte"; import CheckboxInput from "@graphite/components/widgets/inputs/CheckboxInput.svelte";
import ColorInput from "@graphite/components/widgets/inputs/ColorInput.svelte";
import CurveInput from "@graphite/components/widgets/inputs/CurveInput.svelte"; import CurveInput from "@graphite/components/widgets/inputs/CurveInput.svelte";
import DropdownInput from "@graphite/components/widgets/inputs/DropdownInput.svelte"; import DropdownInput from "@graphite/components/widgets/inputs/DropdownInput.svelte";
import FontInput from "@graphite/components/widgets/inputs/FontInput.svelte"; import FontInput from "@graphite/components/widgets/inputs/FontInput.svelte";
@@ -88,9 +89,9 @@
{#if checkboxInput} {#if checkboxInput}
<CheckboxInput {...exclude(checkboxInput)} on:checked={({ detail }) => updateLayout(index, detail)} /> <CheckboxInput {...exclude(checkboxInput)} on:checked={({ detail }) => updateLayout(index, detail)} />
{/if} {/if}
{@const colorInput = narrowWidgetProps(component.props, "ColorInput")} {@const colorInput = narrowWidgetProps(component.props, "ColorButton")}
{#if colorInput} {#if colorInput}
<ColorInput {...exclude(colorInput)} on:value={({ detail }) => updateLayout(index, detail)} sharpRightCorners={nextIsSuffix} /> <ColorButton {...exclude(colorInput)} on:value={({ detail }) => updateLayout(index, detail)} sharpRightCorners={nextIsSuffix} />
{/if} {/if}
{@const curvesInput = narrowWidgetProps(component.props, "CurveInput")} {@const curvesInput = narrowWidgetProps(component.props, "CurveInput")}
{#if curvesInput} {#if curvesInput}
frontend/src/components/widgets/inputs/ColorInput.svelte → frontend/src/components/widgets/buttons/ColorButton.svelte
+25 -35
View File
@@ -4,7 +4,7 @@
import type { Color } from "@graphite/wasm-communication/messages"; import type { Color } from "@graphite/wasm-communication/messages";
import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte"; import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte"; import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte"; import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
// emits: ["update:value"], // emits: ["update:value"],
@@ -20,11 +20,16 @@
export let tooltip: string | undefined = undefined; export let tooltip: string | undefined = undefined;
export let sharpRightCorners = false; export let sharpRightCorners = false;
// TODO: Implement function colorLabel(value: Color): string {
$: chip = undefined; if (value.none) return "No Color";
const type = "Color"; // TODO: Add "Gradient" type
const hex = value.toHexNoAlpha();
const alpha = value.alpha === 1 ? undefined : `${Math.floor(value.alpha * 100)}%`;
return [type, hex, alpha].filter((x) => x).join(" — ");
}
</script> </script>
<LayoutRow class="color-input" classes={{ "sharp-right-corners": sharpRightCorners }} {tooltip}> <LayoutCol class="color-button" classes={{ "sharp-right-corners": sharpRightCorners }} {tooltip}>
<button <button
class:none={value.none} class:none={value.none}
class:sharp-right-corners={sharpRightCorners} class:sharp-right-corners={sharpRightCorners}
@@ -32,11 +37,7 @@
on:click={() => (open = true)} on:click={() => (open = true)}
tabindex="0" tabindex="0"
data-floating-menu-spawner data-floating-menu-spawner
> ></button>
{#if chip}
<TextLabel class="chip" bold={true}>{chip}</TextLabel>
{/if}
</button>
<ColorPicker <ColorPicker
{open} {open}
on:open={({ detail }) => (open = detail)} on:open={({ detail }) => (open = detail)}
@@ -47,15 +48,12 @@
}} }}
{allowNone} {allowNone}
/> />
</LayoutRow> <TextLabel>{colorLabel(value)}</TextLabel>
</LayoutCol>
<style lang="scss" global> <style lang="scss" global>
.color-input { .color-button {
box-sizing: border-box;
position: relative; position: relative;
border: 1px solid var(--color-5-dullgray);
border-radius: 2px;
padding: 1px;
min-width: 80px; min-width: 80px;
> button { > button {
@@ -65,8 +63,10 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 100%; height: 16px;
border-radius: 1px; // TODO: Find a way to work around Chrome's light-colored antialiasing artifacts around the rounded parts of the pill border most visible when the color is dark colored
border: 1px solid var(--color-5-dullgray);
border-radius: 10000px;
&::before { &::before {
content: ""; content: "";
@@ -88,29 +88,19 @@
background-size: var(--color-none-size-24px); background-size: var(--color-none-size-24px);
background-image: var(--color-none-image-24px); background-image: var(--color-none-image-24px);
} }
.chip {
position: absolute;
bottom: -1px;
right: 0;
height: 13px;
line-height: 13px;
background: var(--color-f-white);
color: var(--color-2-mildblack);
border-radius: 4px 0 0 0;
padding: 0 4px;
font-size: 10px;
box-shadow: 0 0 2px var(--color-3-darkgray);
}
}
&.color-input.color-input > button {
outline-offset: 0;
} }
> .floating-menu { > .floating-menu {
left: 50%; left: 50%;
bottom: 0; bottom: 0;
} }
> .text-label {
margin-top: 1px;
height: 24px - 16px - 1px;
line-height: 24px - 16px - 1px;
font-size: 10px;
text-align: center;
}
} }
</style> </style>
frontend/src/components/widgets/inputs/SwatchPairInput.svelte
+7 -2
View File
@@ -37,11 +37,11 @@
<LayoutCol class="swatch-pair"> <LayoutCol class="swatch-pair">
<LayoutRow class="primary swatch"> <LayoutRow class="primary swatch">
<button on:click={clickPrimarySwatch} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" /> <button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
<ColorPicker open={primaryOpen} on:open={({ detail }) => (primaryOpen = detail)} color={primary} on:color={({ detail }) => primaryColorChanged(detail)} direction="Right" /> <ColorPicker open={primaryOpen} on:open={({ detail }) => (primaryOpen = detail)} color={primary} on:color={({ detail }) => primaryColorChanged(detail)} direction="Right" />
</LayoutRow> </LayoutRow>
<LayoutRow class="secondary swatch"> <LayoutRow class="secondary swatch">
<button on:click={clickSecondarySwatch} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" /> <button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
<ColorPicker open={secondaryOpen} on:open={({ detail }) => (secondaryOpen = detail)} color={secondary} on:color={({ detail }) => secondaryColorChanged(detail)} direction="Right" /> <ColorPicker open={secondaryOpen} on:open={({ detail }) => (secondaryOpen = detail)} color={secondary} on:color={({ detail }) => secondaryColorChanged(detail)} direction="Right" />
</LayoutRow> </LayoutRow>
</LayoutCol> </LayoutCol>
@@ -70,6 +70,11 @@
background-size: var(--color-transparent-checkered-background-size); background-size: var(--color-transparent-checkered-background-size);
background-position: var(--color-transparent-checkered-background-position); background-position: var(--color-transparent-checkered-background-position);
overflow: hidden; overflow: hidden;
&:hover,
&.open {
border-color: var(--color-6-lowergray);
}
} }
.floating-menu { .floating-menu {
frontend/src/wasm-communication/messages.ts
+2 -2
View File
@@ -762,7 +762,7 @@ export class CheckboxInput extends WidgetProps {
tooltip!: string | undefined; tooltip!: string | undefined;
} }
export class ColorInput extends WidgetProps { export class ColorButton extends WidgetProps {
@Transform(({ value }: { value: { red: number; green: number; blue: number; alpha: number } | undefined }) => @Transform(({ value }: { value: { red: number; green: number; blue: number; alpha: number } | undefined }) =>
value === undefined ? new Color("none") : new Color(value.red, value.green, value.blue, value.alpha), value === undefined ? new Color("none") : new Color(value.red, value.green, value.blue, value.alpha),
) )
@@ -1130,7 +1130,7 @@ export class PivotAssist extends WidgetProps {
const widgetSubTypes = [ const widgetSubTypes = [
{ value: BreadcrumbTrailButtons, name: "BreadcrumbTrailButtons" }, { value: BreadcrumbTrailButtons, name: "BreadcrumbTrailButtons" },
{ value: CheckboxInput, name: "CheckboxInput" }, { value: CheckboxInput, name: "CheckboxInput" },
{ value: ColorInput, name: "ColorInput" }, { value: ColorButton, name: "ColorButton" },
{ value: CurveInput, name: "CurveInput" }, { value: CurveInput, name: "CurveInput" },
{ value: DropdownInput, name: "DropdownInput" }, { value: DropdownInput, name: "DropdownInput" },
{ value: FontInput, name: "FontInput" }, { value: FontInput, name: "FontInput" },