jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tidy up the UI with clearer Layers panel selection marks and removal of most "coming soon" UI elements

This commit is contained in:
Keavon Chambers 2024-12-14 20:49:21 -08:00
parent 287ef26f64
commit 1264ea8246
11 changed files with 143 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
editor/src/messages/portfolio/document/document_message_handler.rs
View File

@ -1699,25 +1699,25 @@ impl DocumentMessageHandler {
let document_mode_layout = WidgetLayout::new(vec![LayoutGroup::Row { let document_mode_layout = WidgetLayout::new(vec![LayoutGroup::Row {
widgets: vec![ widgets: vec![
DropdownInput::new( // DropdownInput::new(
vec![vec![ // vec![vec![
MenuListEntry::new(format!("{:?}", DocumentMode::DesignMode)) // MenuListEntry::new(format!("{:?}", DocumentMode::DesignMode))
.label(DocumentMode::DesignMode.to_string()) // .label(DocumentMode::DesignMode.to_string())
.icon(DocumentMode::DesignMode.icon_name()), // .icon(DocumentMode::DesignMode.icon_name()),
MenuListEntry::new(format!("{:?}", DocumentMode::SelectMode)) // MenuListEntry::new(format!("{:?}", DocumentMode::SelectMode))
.label(DocumentMode::SelectMode.to_string()) // .label(DocumentMode::SelectMode.to_string())
.icon(DocumentMode::SelectMode.icon_name()) // .icon(DocumentMode::SelectMode.icon_name())
.on_commit(|_| DialogMessage::RequestComingSoonDialog { issue: Some(330) }.into()), // .on_commit(|_| DialogMessage::RequestComingSoonDialog { issue: Some(330) }.into()),
MenuListEntry::new(format!("{:?}", DocumentMode::GuideMode)) // MenuListEntry::new(format!("{:?}", DocumentMode::GuideMode))
.label(DocumentMode::GuideMode.to_string()) // .label(DocumentMode::GuideMode.to_string())
.icon(DocumentMode::GuideMode.icon_name()) // .icon(DocumentMode::GuideMode.icon_name())
.on_commit(|_| DialogMessage::RequestComingSoonDialog { issue: Some(331) }.into()), // .on_commit(|_| DialogMessage::RequestComingSoonDialog { issue: Some(331) }.into()),
]]) // ]])
.selected_index(Some(self.document_mode as u32)) // .selected_index(Some(self.document_mode as u32))
.draw_icon(true) // .draw_icon(true)
.interactive(false) // TODO: set to true when dialogs are not spawned // .interactive(false) // TODO: set to true when dialogs are not spawned
.widget_holder(), // .widget_holder(),
Separator::new(SeparatorType::Section).widget_holder(), // Separator::new(SeparatorType::Section).widget_holder(),
], ],
}]); }]);
@ -1744,7 +1744,7 @@ impl DocumentMessageHandler {
widgets: vec![TextLabel::new("Overlays").bold(true).widget_holder()], widgets: vec![TextLabel::new("Overlays").bold(true).widget_holder()],
}, },
LayoutGroup::Row { LayoutGroup::Row {
widgets: vec![TextLabel::new("Coming soon").widget_holder()], widgets: vec![TextLabel::new("Granular settings in this menu are coming soon").widget_holder()],
}, },
]) ])
.widget_holder(), .widget_holder(),
@ -1828,16 +1828,16 @@ impl DocumentMessageHandler {
_ => Some(1), _ => Some(1),
}) })
.widget_holder(), .widget_holder(),
PopoverButton::new() // PopoverButton::new()
.popover_layout(vec![ // .popover_layout(vec![
LayoutGroup::Row { // LayoutGroup::Row {
widgets: vec![TextLabel::new("View Mode").bold(true).widget_holder()], // widgets: vec![TextLabel::new("View Mode").bold(true).widget_holder()],
}, // },
LayoutGroup::Row { // LayoutGroup::Row {
widgets: vec![TextLabel::new("Coming soon").widget_holder()], // widgets: vec![TextLabel::new("Coming soon").widget_holder()],
}, // },
]) // ])
.widget_holder(), // .widget_holder(),
Separator::new(SeparatorType::Unrelated).widget_holder(), Separator::new(SeparatorType::Unrelated).widget_holder(),
]; ];
@ -2191,7 +2191,7 @@ impl<'a> ClickXRayIter<'a> {
} }
} }
pub fn navigation_controls(ptz: &PTZ, navigation_handler: &NavigationMessageHandler, tooltip_name: &str) -> [WidgetHolder; 6] { pub fn navigation_controls(ptz: &PTZ, navigation_handler: &NavigationMessageHandler, tooltip_name: &str) -> [WidgetHolder; 5] {
[ [
IconButton::new("ZoomIn", 24) IconButton::new("ZoomIn", 24)
.tooltip("Zoom In") .tooltip("Zoom In")
@ -2209,34 +2209,34 @@ pub fn navigation_controls(ptz: &PTZ, navigation_handler: &NavigationMessageHand
.on_update(|_| NavigationMessage::CanvasTiltResetAndZoomTo100Percent.into()) .on_update(|_| NavigationMessage::CanvasTiltResetAndZoomTo100Percent.into())
.disabled(ptz.tilt().abs() < 1e-4 && (ptz.zoom() - 1.).abs() < 1e-4) .disabled(ptz.tilt().abs() < 1e-4 && (ptz.zoom() - 1.).abs() < 1e-4)
.widget_holder(), .widget_holder(),
PopoverButton::new() // PopoverButton::new()
.popover_layout(vec![ // .popover_layout(vec![
LayoutGroup::Row { // LayoutGroup::Row {
widgets: vec![TextLabel::new(format!("{tooltip_name} Navigation")).bold(true).widget_holder()], // widgets: vec![TextLabel::new(format!("{tooltip_name} Navigation")).bold(true).widget_holder()],
}, // },
LayoutGroup::Row { // LayoutGroup::Row {
widgets: vec![TextLabel::new({ // widgets: vec![TextLabel::new({
let tilt = if tooltip_name == "Canvas" { "Tilt:\n• Alt + Middle Click Drag\n\n" } else { "" }; // let tilt = if tooltip_name == "Canvas" { "Tilt:\n• Alt + Middle Click Drag\n\n" } else { "" };
format!( // format!(
" // "
Interactive controls in this\n\ // Interactive controls in this\n\
menu are coming soon.\n\ // menu are coming soon.\n\
\n\ // \n\
Pan:\n\ // Pan:\n\
• Middle Click Drag\n\ // • Middle Click Drag\n\
\n\ // \n\
{tilt}Zoom:\n\ // {tilt}Zoom:\n\
• Shift + Middle Click Drag\n\ // • Shift + Middle Click Drag\n\
• Ctrl + Scroll Wheel Roll // • Ctrl + Scroll Wheel Roll
" // "
) // )
.trim() // .trim()
}) // })
.multiline(true) // .multiline(true)
.widget_holder()], // .widget_holder()],
}, // },
]) // ])
.widget_holder(), // .widget_holder(),
Separator::new(SeparatorType::Related).widget_holder(), Separator::new(SeparatorType::Related).widget_holder(),
NumberInput::new(Some(navigation_handler.snapped_zoom(ptz.zoom()) * 100.)) NumberInput::new(Some(navigation_handler.snapped_zoom(ptz.zoom()) * 100.))
.unit("%") .unit("%")

29
editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs
View File

@ -2250,13 +2250,17 @@ impl NodeGraphMessageHandler {
.map(|layer| layer.to_node()) .map(|layer| layer.to_node())
.collect::<HashSet<_>>(); .collect::<HashSet<_>>();
let mut selected_parents = HashSet::new(); let mut ancestors_of_selected = HashSet::new();
let mut descendants_of_selected = HashSet::new();
for selected_layer in &selected_layers { for selected_layer in &selected_layers {
for ancestor in LayerNodeIdentifier::new(*selected_layer, network_interface, &[]).ancestors(network_interface.document_metadata()) { for ancestor in LayerNodeIdentifier::new(*selected_layer, network_interface, &[]).ancestors(network_interface.document_metadata()) {
if ancestor != LayerNodeIdentifier::ROOT_PARENT && !selected_layers.contains(&ancestor.to_node()) { if ancestor != LayerNodeIdentifier::ROOT_PARENT && ancestor.to_node() != *selected_layer {
selected_parents.insert(ancestor.to_node()); ancestors_of_selected.insert(ancestor.to_node());
} }
} }
for descendant in LayerNodeIdentifier::new(*selected_layer, network_interface, &[]).descendants(network_interface.document_metadata()) {
descendants_of_selected.insert(descendant.to_node());
}
} }
for (&node_id, node_metadata) in &network_interface.network_metadata(&[]).unwrap().persistent_metadata.node_metadata { for (&node_id, node_metadata) in &network_interface.network_metadata(&[]).unwrap().persistent_metadata.node_metadata {
@ -2294,26 +2298,25 @@ impl NodeGraphMessageHandler {
} }
}); });
let is_selected_parent = selected_parents.contains(&node_id);
let data = LayerPanelEntry { let data = LayerPanelEntry {
id: node_id, id: node_id,
alias: network_interface.frontend_display_name(&node_id, &[]),
tooltip: if cfg!(debug_assertions) { format!("Layer ID: {node_id}") } else { "".into() },
in_selected_network: selection_network_path.is_empty(),
children_allowed, children_allowed,
children_present: layer.has_children(network_interface.document_metadata()), children_present: layer.has_children(network_interface.document_metadata()),
expanded: layer.has_children(network_interface.document_metadata()) && !collapsed.0.contains(&layer), expanded: layer.has_children(network_interface.document_metadata()) && !collapsed.0.contains(&layer),
depth: layer.ancestors(network_interface.document_metadata()).count() - 1, depth: layer.ancestors(network_interface.document_metadata()).count() - 1,
parent_id: layer
.parent(network_interface.document_metadata())
.and_then(|parent| if parent != LayerNodeIdentifier::ROOT_PARENT { Some(parent.to_node()) } else { None }),
alias: network_interface.frontend_display_name(&node_id, &[]),
tooltip: if cfg!(debug_assertions) { format!("Layer ID: {node_id}") } else { "".into() },
visible: network_interface.is_visible(&node_id, &[]), visible: network_interface.is_visible(&node_id, &[]),
parents_visible, parents_visible,
unlocked: !network_interface.is_locked(&node_id, &[]), unlocked: !network_interface.is_locked(&node_id, &[]),
parents_unlocked, parents_unlocked,
selected: selected_layers.contains(&node_id) || is_selected_parent, parent_id: layer
in_selected_network: selection_network_path.is_empty(), .parent(network_interface.document_metadata())
selected_parent: is_selected_parent, .and_then(|parent| if parent != LayerNodeIdentifier::ROOT_PARENT { Some(parent.to_node()) } else { None }),
selected: selected_layers.contains(&node_id),
ancestor_of_selected: ancestors_of_selected.contains(&node_id),
descendant_of_selected: descendants_of_selected.contains(&node_id),
}; };
responses.add(FrontendMessage::UpdateDocumentLayerDetails { data }); responses.add(FrontendMessage::UpdateDocumentLayerDetails { data });
} }

10
editor/src/messages/portfolio/document/utility_types/nodes.rs
View File

@ -36,6 +36,8 @@ pub struct LayerPanelEntry {
pub id: NodeId, pub id: NodeId,
pub alias: String, pub alias: String,
pub tooltip: String, pub tooltip: String,
#[serde(rename = "inSelectedNetwork")]
pub in_selected_network: bool,
#[serde(rename = "childrenAllowed")] #[serde(rename = "childrenAllowed")]
pub children_allowed: bool, pub children_allowed: bool,
#[serde(rename = "childrenPresent")] #[serde(rename = "childrenPresent")]
@ -51,10 +53,10 @@ pub struct LayerPanelEntry {
#[serde(rename = "parentId")] #[serde(rename = "parentId")]
pub parent_id: Option<NodeId>, pub parent_id: Option<NodeId>,
pub selected: bool, pub selected: bool,
#[serde(rename = "inSelectedNetwork")] #[serde(rename = "ancestorOfSelected")]
pub in_selected_network: bool, pub ancestor_of_selected: bool,
#[serde(rename = "selectedParent")] #[serde(rename = "descendantOfSelected")]
pub selected_parent: bool, pub descendant_of_selected: bool,
} }
#[derive(Debug, Clone, Default, serde::Serialize, serde::Deserialize, PartialEq, Eq, specta::Type)] #[derive(Debug, Clone, Default, serde::Serialize, serde::Deserialize, PartialEq, Eq, specta::Type)]

26
editor/src/messages/tool/tool_messages/select_tool.rs
View File

@ -176,19 +176,19 @@ impl LayoutHolder for SelectTool {
let disabled = self.tool_data.selected_layers_count < 2; let disabled = self.tool_data.selected_layers_count < 2;
widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder()); widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder());
widgets.extend(self.alignment_widgets(disabled)); widgets.extend(self.alignment_widgets(disabled));
widgets.push( // widgets.push(
PopoverButton::new() // PopoverButton::new()
.popover_layout(vec![ // .popover_layout(vec![
LayoutGroup::Row { // LayoutGroup::Row {
widgets: vec![TextLabel::new("Align").bold(true).widget_holder()], // widgets: vec![TextLabel::new("Align").bold(true).widget_holder()],
}, // },
LayoutGroup::Row { // LayoutGroup::Row {
widgets: vec![TextLabel::new("Coming soon").widget_holder()], // widgets: vec![TextLabel::new("Coming soon").widget_holder()],
}, // },
]) // ])
.disabled(disabled) // .disabled(disabled)
.widget_holder(), // .widget_holder(),
); // );
// Flip // Flip
let disabled = self.tool_data.selected_layers_count == 0; let disabled = self.tool_data.selected_layers_count == 0;

17
editor/src/messages/tool/utility_types.rs
View File

@ -250,14 +250,13 @@ impl LayoutHolder for ToolData {
.iter() .iter()
.map(|tool_group| tool_group.iter().map(|tool_availability| { .map(|tool_group| tool_group.iter().map(|tool_availability| {
match tool_availability { match tool_availability {
ToolAvailability::Available(tool) => ToolEntry::new( tool.tool_type(), tool.icon_name()) ToolAvailability::Available(tool) => ToolEntry::new(tool.tool_type(), tool.icon_name())
.tooltip( tool.tooltip()) .tooltip(tool.tooltip())
.tooltip_shortcut(action_keys!(tool_type_to_activate_tool_message(tool.tool_type()))) .tooltip_shortcut(action_keys!(tool_type_to_activate_tool_message(tool.tool_type()))),
,
ToolAvailability::ComingSoon(tool) => tool.clone(), ToolAvailability::ComingSoon(tool) => tool.clone(),
} }
}).collect::<Vec<_>>()) })
.collect::<Vec<_>>())
.flat_map(|group| { .flat_map(|group| {
let separator = std::iter::once(Separator::new(SeparatorType::Section).direction(SeparatorDirection::Vertical).widget_holder()); let separator = std::iter::once(Separator::new(SeparatorType::Section).direction(SeparatorDirection::Vertical).widget_holder());
let buttons = group.into_iter().map(|ToolEntry { tooltip, tooltip_shortcut, tool_type, icon_name }| { let buttons = group.into_iter().map(|ToolEntry { tooltip, tooltip_shortcut, tool_type, icon_name }| {
@ -397,16 +396,14 @@ fn list_tools_in_groups() -> Vec<Vec<ToolAvailability>> {
], ],
vec![ vec![
// Raster tool group // Raster tool group
// ToolAvailability::Available(Box::<imaginate_tool::ImaginateTool>::default()), // TODO: Fix and reenable ASAP
ToolAvailability::ComingSoon(
ToolEntry::new(ToolType::Heal, "RasterImaginateTool").tooltip("Coming Soon: Imaginate Tool - Temporarily disabled, please use Imaginate node directly from graph"),
),
ToolAvailability::Available(Box::<brush_tool::BrushTool>::default()), ToolAvailability::Available(Box::<brush_tool::BrushTool>::default()),
ToolAvailability::ComingSoon(ToolEntry::new(ToolType::Heal, "RasterHealTool").tooltip("Coming Soon: Heal Tool (J)")), ToolAvailability::ComingSoon(ToolEntry::new(ToolType::Heal, "RasterHealTool").tooltip("Coming Soon: Heal Tool (J)")),
ToolAvailability::ComingSoon(ToolEntry::new(ToolType::Clone, "RasterCloneTool").tooltip("Coming Soon: Clone Tool (C)")), ToolAvailability::ComingSoon(ToolEntry::new(ToolType::Clone, "RasterCloneTool").tooltip("Coming Soon: Clone Tool (C)")),
ToolAvailability::ComingSoon(ToolEntry::new(ToolType::Patch, "RasterPatchTool").tooltip("Coming Soon: Patch Tool")), ToolAvailability::ComingSoon(ToolEntry::new(ToolType::Patch, "RasterPatchTool").tooltip("Coming Soon: Patch Tool")),
ToolAvailability::ComingSoon(ToolEntry::new(ToolType::Detail, "RasterDetailTool").tooltip("Coming Soon: Detail Tool (D)")), ToolAvailability::ComingSoon(ToolEntry::new(ToolType::Detail, "RasterDetailTool").tooltip("Coming Soon: Detail Tool (D)")),
ToolAvailability::ComingSoon(ToolEntry::new(ToolType::Relight, "RasterRelightTool").tooltip("Coming Soon: Relight Tool (O)")), ToolAvailability::ComingSoon(ToolEntry::new(ToolType::Relight, "RasterRelightTool").tooltip("Coming Soon: Relight Tool (O)")),
// ToolAvailability::Available(Box::<imaginate_tool::ImaginateTool>::default()), // TODO: Fix and reenable
ToolAvailability::ComingSoon(ToolEntry::new(ToolType::Heal, "RasterImaginateTool").tooltip("Coming Soon: Imaginate Tool")),
], ],
] ]
} }

5
frontend/src/components/Editor.svelte
View File

@ -152,7 +152,7 @@
--color-transparent-checkered-background-position-mini: 0 0, 4px 4px, 4px 4px; --color-transparent-checkered-background-position-mini: 0 0, 4px 4px, 4px 4px;
--color-transparent-checkered-background-repeat: repeat, repeat, repeat; --color-transparent-checkered-background-repeat: repeat, repeat, repeat;
--background-inactive-stripes: repeating-linear-gradient( --inheritance-stripes-background: repeating-linear-gradient(
-45deg, -45deg,
transparent 0px, transparent 0px,
transparent calc((3px * sqrt(2) / 2) - 0.5px), transparent calc((3px * sqrt(2) / 2) - 0.5px),
@ -161,6 +161,9 @@
transparent calc((3px * sqrt(2) / 2) + 0.5px), transparent calc((3px * sqrt(2) / 2) + 0.5px),
transparent calc(6px * sqrt(2) / 2) transparent calc(6px * sqrt(2) / 2)
); );
--inheritance-dots-background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6" width="6px" height="6px" fill="%23444"><rect width="1" height="1" /><rect x="3" y="3" width="1" height="1" /></svg>\
');
// Array of 2x3 dots (fill: --color-e-nearwhite) // Array of 2x3 dots (fill: --color-e-nearwhite)
--icon-drag-grip: url('data:image/svg+xml;utf8,\ --icon-drag-grip: url('data:image/svg+xml;utf8,\

2
frontend/src/components/layout/FloatingMenu.svelte
View File

@ -473,7 +473,7 @@
.floating-menu-content { .floating-menu-content {
background: var(--color-2-mildblack); background: var(--color-2-mildblack);
box-shadow: rgba(var(--color-0-black-rgb), 50%) 0 2px 4px; box-shadow: rgba(var(--color-0-black-rgb), 0.5) 0 2px 4px;
border-radius: 4px; border-radius: 4px;
color: var(--color-e-nearwhite); color: var(--color-e-nearwhite);
font-size: inherit; font-size: inherit;

44
frontend/src/components/panels/Layers.svelte
View File

@ -43,7 +43,7 @@
// Interactive dragging // Interactive dragging
let draggable = true; let draggable = true;
let draggingData: undefined | DraggingData = undefined; let draggingData: undefined | DraggingData = undefined;
let fakeHighlight: undefined | bigint = undefined; let fakeHighlightOfNotYetSelectedLayerBeingDragged: undefined | bigint = undefined;
let dragInPanel = false; let dragInPanel = false;
// Layouts // Layouts
@ -285,7 +285,7 @@
const layer = listing.entry; const layer = listing.entry;
dragInPanel = true; dragInPanel = true;
if (!$nodeGraph.selected.includes(layer.id)) { if (!$nodeGraph.selected.includes(layer.id)) {
fakeHighlight = layer.id; fakeHighlightOfNotYetSelectedLayerBeingDragged = layer.id;
} }
const select = () => { const select = () => {
if (!$nodeGraph.selected.includes(layer.id)) selectLayer(listing, false, false); if (!$nodeGraph.selected.includes(layer.id)) selectLayer(listing, false, false);
@ -358,7 +358,7 @@
} }
draggingData = undefined; draggingData = undefined;
fakeHighlight = undefined; fakeHighlightOfNotYetSelectedLayerBeingDragged = undefined;
dragInPanel = false; dragInPanel = false;
} }
@ -409,11 +409,14 @@
<LayoutRow class="list-area" scrollableY={true}> <LayoutRow class="list-area" scrollableY={true}>
<LayoutCol class="list" data-layer-panel bind:this={list} on:click={() => deselectAllLayers()} on:dragover={updateInsertLine} on:dragend={drop} on:drop={drop}> <LayoutCol class="list" data-layer-panel bind:this={list} on:click={() => deselectAllLayers()} on:dragover={updateInsertLine} on:dragend={drop} on:drop={drop}>
{#each layers as listing, index} {#each layers as listing, index}
{@const selected = fakeHighlightOfNotYetSelectedLayerBeingDragged !== undefined ? fakeHighlightOfNotYetSelectedLayerBeingDragged === listing.entry.id : listing.entry.selected}
<LayoutRow <LayoutRow
class="layer" class="layer"
classes={{ classes={{
selected: fakeHighlight !== undefined ? fakeHighlight === listing.entry.id : listing.entry.selected, selected,
"full-highlight": listing.entry.inSelectedNetwork && !listing.entry.selectedParent, "ancestor-of-selected": listing.entry.ancestorOfSelected,
"descendant-of-selected": listing.entry.descendantOfSelected,
"selected-but-not-in-selected-network": selected && !listing.entry.inSelectedNetwork,
"insert-folder": (draggingData?.highlightFolder || false) && draggingData?.insertParentId === listing.entry.id, "insert-folder": (draggingData?.highlightFolder || false) && draggingData?.insertParentId === listing.entry.id,
}} }}
styles={{ "--layer-indent-levels": `${listing.entry.depth - 1}` }} styles={{ "--layer-indent-levels": `${listing.entry.depth - 1}` }}
@ -429,6 +432,7 @@
class="expand-arrow" class="expand-arrow"
class:expanded={listing.entry.expanded} class:expanded={listing.entry.expanded}
disabled={!listing.entry.childrenPresent} disabled={!listing.entry.childrenPresent}
title={listing.entry.expanded ? "Collapse" : `Expand${listing.entry.ancestorOfSelected ? "\n(A selected layer is contained within)" : ""}`}
on:click|stopPropagation={() => handleExpandArrowClick(listing.entry.id)} on:click|stopPropagation={() => handleExpandArrowClick(listing.entry.id)}
tabindex="0" tabindex="0"
/> />
@ -457,22 +461,22 @@
{#if !listing.entry.unlocked || !listing.entry.parentsUnlocked} {#if !listing.entry.unlocked || !listing.entry.parentsUnlocked}
<IconButton <IconButton
class={"status-toggle"} class={"status-toggle"}
classes={{ inactive: !listing.entry.parentsUnlocked }} classes={{ inherited: !listing.entry.parentsUnlocked }}
action={(e) => (toggleLayerLock(listing.entry.id), e?.stopPropagation())} action={(e) => (toggleLayerLock(listing.entry.id), e?.stopPropagation())}
size={24} size={24}
icon={listing.entry.unlocked ? "PadlockUnlocked" : "PadlockLocked"} icon={listing.entry.unlocked ? "PadlockUnlocked" : "PadlockLocked"}
hoverIcon={listing.entry.unlocked ? "PadlockLocked" : "PadlockUnlocked"} hoverIcon={listing.entry.unlocked ? "PadlockLocked" : "PadlockUnlocked"}
tooltip={listing.entry.unlocked ? "Lock" : "Unlock"} tooltip={(listing.entry.unlocked ? "Lock" : "Unlock") + (!listing.entry.parentsUnlocked ? "\n(A parent of this layer is locked and that status is being inherited)" : "")}
/> />
{/if} {/if}
<IconButton <IconButton
class={"status-toggle"} class={"status-toggle"}
classes={{ inactive: !listing.entry.parentsVisible }} classes={{ inherited: !listing.entry.parentsVisible }}
action={(e) => (toggleNodeVisibilityLayerPanel(listing.entry.id), e?.stopPropagation())} action={(e) => (toggleNodeVisibilityLayerPanel(listing.entry.id), e?.stopPropagation())}
size={24} size={24}
icon={listing.entry.visible ? "EyeVisible" : "EyeHidden"} icon={listing.entry.visible ? "EyeVisible" : "EyeHidden"}
hoverIcon={listing.entry.visible ? "EyeHide" : "EyeShow"} hoverIcon={listing.entry.visible ? "EyeHide" : "EyeShow"}
tooltip={listing.entry.visible ? "Hide" : "Show"} tooltip={(listing.entry.visible ? "Hide" : "Show") + (!listing.entry.parentsVisible ? "\n(A parent of this layer is hidden and that status is being inherited)" : "")}
/> />
</LayoutRow> </LayoutRow>
{/each} {/each}
@ -537,13 +541,19 @@
// Dimming // Dimming
&.selected { &.selected {
// 1/3 between 3-darkgray and 4-dimgray (this interpolation approach only works on grayscale values) background: var(--color-4-dimgray);
--component: calc((Max(var(--color-3-darkgray-rgb)) * 2 + Max(var(--color-4-dimgray-rgb))) / 3); }
background: rgb(var(--component), var(--component), var(--component));
&.full-highlight { &.ancestor-of-selected .expand-arrow:not(.expanded) {
background: var(--color-4-dimgray); background-image: var(--inheritance-stripes-background);
} }
&.descendant-of-selected {
background-image: var(--inheritance-dots-background);
}
&.selected-but-not-in-selected-network {
background: rgba(var(--color-4-dimgray-rgb), 0.5);
} }
&.insert-folder { &.insert-folder {
@ -664,8 +674,8 @@
align-items: center; align-items: center;
height: 100%; height: 100%;
&.inactive { &.inherited {
background-image: var(--background-inactive-stripes); background-image: var(--inheritance-stripes-background);
} }
.icon-button { .icon-button {

6
frontend/src/components/widgets/buttons/ColorButton.svelte
View File

@ -54,7 +54,7 @@
&.open { &.open {
&, &,
> .text-label { > .text-label {
background: rgba(var(--color-6-lowergray-rgb), 50%); background: rgba(var(--color-6-lowergray-rgb), 0.5);
} }
} }
@ -101,13 +101,13 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background: rgba(var(--color-4-dimgray-rgb), 50%); background: rgba(var(--color-4-dimgray-rgb), 0.5);
} }
} }
} }
> .text-label { > .text-label {
background: rgba(var(--color-5-dullgray-rgb), 50%); background: rgba(var(--color-5-dullgray-rgb), 0.5);
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
height: 12px; height: 12px;

6
frontend/src/components/widgets/inputs/NumberInput.svelte
View File

@ -651,12 +651,12 @@
&.increment { &.increment {
// Widen the label and input margins from the edges by an extra 8px to make room for the increment arrows // Widen the label and input margins from the edges by an extra 8px to make room for the increment arrows
label { label {
margin-left: 16px; margin-left: 8px;
} }
// Keep the right-aligned input element from overlapping the increment arrow on the right // Keep the right-aligned input element from overlapping the increment arrow on the right
input[type="text"]:not(:focus).has-label { input[type="text"]:not(:focus).has-label {
margin-right: 16px; margin-right: 8px;
} }
// Hide the increment arrows when entering text, disabled, or not hovered // Hide the increment arrows when entering text, disabled, or not hovered
@ -680,7 +680,7 @@
padding: 9px 0; padding: 9px 0;
border: none; border: none;
border-radius: 2px; border-radius: 2px;
background: none; background: rgba(var(--color-1-nearblack-rgb), 0.5);
&:hover { &:hover {
background: var(--color-4-dimgray); background: var(--color-4-dimgray);

6
frontend/src/wasm-communication/messages.ts
View File

@ -861,6 +861,8 @@ export class LayerPanelEntry {
@Transform(({ value }: { value: string }) => value || undefined) @Transform(({ value }: { value: string }) => value || undefined)
tooltip!: string | undefined; tooltip!: string | undefined;
inSelectedNetwork!: boolean;
childrenAllowed!: boolean; childrenAllowed!: boolean;
childrenPresent!: boolean; childrenPresent!: boolean;
@ -882,9 +884,9 @@ export class LayerPanelEntry {
selected!: boolean; selected!: boolean;
inSelectedNetwork!: boolean; ancestorOfSelected!: boolean;
selectedParent!: boolean; descendantOfSelected!: boolean;
} }
export class DisplayDialogDismiss extends JsMessage {} export class DisplayDialogDismiss extends JsMessage {}