diff --git a/editor/src/document/properties_panel_message_handler.rs b/editor/src/document/properties_panel_message_handler.rs index 930f272b..13f65b25 100644 --- a/editor/src/document/properties_panel_message_handler.rs +++ b/editor/src/document/properties_panel_message_handler.rs @@ -162,7 +162,7 @@ impl MessageHandler for PropertiesPan ModifyStroke { color, weight } => { let path = self.active_path.clone().expect("Received update for properties panel with no active layer"); let layer = graphene_document.layer(&path).unwrap(); - if let Some(color) = Color::from_rgba_str(&color).or(Color::from_rgb_str(&color)) { + if let Some(color) = Color::from_rgba_str(&color).or_else(|| Color::from_rgb_str(&color)) { let stroke = Stroke::new(color, weight as f32); responses.push_back(Operation::SetLayerStroke { path, stroke }.into()) } else { @@ -214,15 +214,15 @@ fn register_layer_properties(layer: &Layer, responses: &mut VecDeque) { widgets: vec![ match &layer.data { LayerDataType::Folder(_) => WidgetHolder::new(Widget::IconLabel(IconLabel { - icon: "NodeTypeFolder".into(), + icon: "NodeFolder".into(), gap_after: true, })), LayerDataType::Shape(_) => WidgetHolder::new(Widget::IconLabel(IconLabel { - icon: "NodeTypePath".into(), + icon: "NodePath".into(), gap_after: true, })), LayerDataType::Text(_) => WidgetHolder::new(Widget::IconLabel(IconLabel { - icon: "NodeTypePath".into(), + icon: "NodeText".into(), gap_after: true, })), }, @@ -258,7 +258,7 @@ fn register_layer_properties(layer: &Layer, responses: &mut VecDeque) { vec![] } LayerDataType::Shape(shape) => { - if let Some(fill_layout) = node_section_fill(&shape.style.fill()) { + if let Some(fill_layout) = node_section_fill(shape.style.fill()) { vec![node_section_transform(layer), fill_layout, node_section_stroke(&shape.style.stroke().unwrap_or_default())] } else { vec![node_section_transform(layer), node_section_stroke(&shape.style.stroke().unwrap_or_default())] @@ -267,7 +267,7 @@ fn register_layer_properties(layer: &Layer, responses: &mut VecDeque) { LayerDataType::Text(text) => { vec![ node_section_transform(layer), - node_section_fill(&text.style.fill()).expect("Text should have fill"), + node_section_fill(text.style.fill()).expect("Text should have fill"), node_section_stroke(&text.style.stroke().unwrap_or_default()), ] } @@ -421,13 +421,13 @@ fn node_section_fill(fill: &Fill) -> Option { ..TextLabel::default() })), WidgetHolder::new(Widget::Separator(Separator { - separator_type: SeparatorType::Related, + separator_type: SeparatorType::Unrelated, direction: SeparatorDirection::Horizontal, })), WidgetHolder::new(Widget::ColorInput(ColorInput { value: color.rgba_hex(), on_update: WidgetCallback::new(|text_input: &ColorInput| { - if let Some(color) = Color::from_rgba_str(&text_input.value).or(Color::from_rgb_str(&text_input.value)) { + if let Some(color) = Color::from_rgba_str(&text_input.value).or_else(|| Color::from_rgb_str(&text_input.value)) { let new_fill = Fill::Solid(color); PropertiesPanelMessage::ModifyFill { fill: new_fill }.into() } else { @@ -452,13 +452,13 @@ fn node_section_fill(fill: &Fill) -> Option { ..TextLabel::default() })), WidgetHolder::new(Widget::Separator(Separator { - separator_type: SeparatorType::Related, + separator_type: SeparatorType::Unrelated, direction: SeparatorDirection::Horizontal, })), WidgetHolder::new(Widget::ColorInput(ColorInput { value: gradient_1.positions[0].1.rgba_hex(), on_update: WidgetCallback::new(move |text_input: &ColorInput| { - if let Some(color) = Color::from_rgba_str(&text_input.value).or(Color::from_rgb_str(&text_input.value)) { + if let Some(color) = Color::from_rgba_str(&text_input.value).or_else(|| Color::from_rgb_str(&text_input.value)) { let mut new_gradient = (*gradient_1).clone(); new_gradient.positions[0].1 = color; PropertiesPanelMessage::ModifyFill { @@ -480,13 +480,13 @@ fn node_section_fill(fill: &Fill) -> Option { ..TextLabel::default() })), WidgetHolder::new(Widget::Separator(Separator { - separator_type: SeparatorType::Related, + separator_type: SeparatorType::Unrelated, direction: SeparatorDirection::Horizontal, })), WidgetHolder::new(Widget::ColorInput(ColorInput { value: gradient_2.positions[1].1.rgba_hex(), on_update: WidgetCallback::new(move |text_input: &ColorInput| { - if let Some(color) = Color::from_rgba_str(&text_input.value).or(Color::from_rgb_str(&text_input.value)) { + if let Some(color) = Color::from_rgba_str(&text_input.value).or_else(|| Color::from_rgb_str(&text_input.value)) { let mut new_gradient = (*gradient_2).clone(); new_gradient.positions[1].1 = color; PropertiesPanelMessage::ModifyFill { @@ -521,7 +521,7 @@ fn node_section_stroke(stroke: &Stroke) -> LayoutRow { ..TextLabel::default() })), WidgetHolder::new(Widget::Separator(Separator { - separator_type: SeparatorType::Related, + separator_type: SeparatorType::Unrelated, direction: SeparatorDirection::Horizontal, })), WidgetHolder::new(Widget::ColorInput(ColorInput { @@ -544,7 +544,7 @@ fn node_section_stroke(stroke: &Stroke) -> LayoutRow { ..TextLabel::default() })), WidgetHolder::new(Widget::Separator(Separator { - separator_type: SeparatorType::Related, + separator_type: SeparatorType::Unrelated, direction: SeparatorDirection::Horizontal, })), WidgetHolder::new(Widget::NumberInput(NumberInput { diff --git a/frontend/assets/16px-solid/node-folder.svg b/frontend/assets/16px-solid/node-folder.svg new file mode 100644 index 00000000..0f9cb440 --- /dev/null +++ b/frontend/assets/16px-solid/node-folder.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/assets/16px-solid/node-path.svg b/frontend/assets/16px-solid/node-path.svg new file mode 100644 index 00000000..1dc77c05 --- /dev/null +++ b/frontend/assets/16px-solid/node-path.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/assets/16px-solid/node-text.svg b/frontend/assets/16px-solid/node-text.svg new file mode 100644 index 00000000..222fb82e --- /dev/null +++ b/frontend/assets/16px-solid/node-text.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/assets/24px-full-color/node-type-folder.svg b/frontend/assets/24px-full-color/node-type-folder.svg deleted file mode 100644 index c7eb74aa..00000000 --- a/frontend/assets/24px-full-color/node-type-folder.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/frontend/assets/24px-full-color/node-type-path.svg b/frontend/assets/24px-full-color/node-type-path.svg deleted file mode 100644 index 5ba590b5..00000000 --- a/frontend/assets/24px-full-color/node-type-path.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 9041ee59..44633ca2 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -53,6 +53,7 @@ --color-e-nearwhite-rgb: 238, 238, 238; --color-f-white: #fff; --color-f-white-rgb: 255, 255, 255; + --color-accent: #3194d6; --color-accent-rgb: 49, 148, 214; --color-accent-hover: #49a5e2; @@ -62,6 +63,11 @@ --color-data-raster: #e4bb72; --color-data-raster-rgb: 228, 187, 114; + + --color-node-background: #f1decd; + --color-node-background-rgb: 241, 222, 205; + --color-node-icon: #473a3a; + --color-node-icon-rgb: 71, 58, 58; } html, diff --git a/frontend/src/components/panels/LayerTree.vue b/frontend/src/components/panels/LayerTree.vue index 8f6c6acb..08d0c391 100644 --- a/frontend/src/components/panels/LayerTree.vue +++ b/frontend/src/components/panels/LayerTree.vue @@ -32,7 +32,7 @@ - + @@ -74,8 +74,9 @@ :title="`${listing.entry.name}\n${devMode ? 'Layer Path: ' + listing.entry.path.join(' / ') : ''}`" > - - + + + .icon-label:first-of-type { + border-radius: 2px; + background: var(--color-node-background); + fill: var(--color-node-icon); + } } .sections { flex: 1 1 100%; + + .widget-section + .widget-section { + margin-top: 1px; + } } } diff --git a/frontend/src/components/widgets/inputs/ColorInput.vue b/frontend/src/components/widgets/inputs/ColorInput.vue index ab4ef92b..c94782fe 100644 --- a/frontend/src/components/widgets/inputs/ColorInput.vue +++ b/frontend/src/components/widgets/inputs/ColorInput.vue @@ -1,9 +1,9 @@