fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-23 17:18:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add recursive folder expand/collapse to the Layers panel (#2419)

Browse Source 
* added_recursion_fix

* Add tooltip and tidy up color visibility

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0SlowPoke0
2025-03-10 21:01:00 +00:00
committed by GitHub
co-authored by Keavon Chambers
parent 7a3bb999a9
commit d2fc919ba6
5 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Layers.svelte
+11 -6
View File
@@ -135,8 +135,11 @@
editor.handle.toggleLayerLock(id);
}
function handleExpandArrowClick(id: bigint) {
editor.handle.toggleLayerExpansion(id);
function handleExpandArrowClickWithModifiers(e: MouseEvent, id: bigint) {
const accel = platformIsMac() ? e.metaKey : e.ctrlKey;
const collapseRecursive = e.altKey || accel;
editor.handle.toggleLayerExpansion(id, collapseRecursive);
e.stopPropagation();
}
async function onEditLayerName(listing: LayerListingInfo) {
@@ -432,8 +435,10 @@
class="expand-arrow"
class:expanded={listing.entry.expanded}
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)}
title={listing.entry.expanded
? "Collapse (Click) / Collapse All (Alt Click)"
: `Expand (Click) / Expand All (Alt Click)${listing.entry.ancestorOfSelected ? "\n(A selected layer is contained within)" : ""}`}
on:click={(e) => handleExpandArrowClickWithModifiers(e, listing.entry.id)}
tabindex="0"
></button>
{/if}
@@ -545,11 +550,11 @@
}
&.ancestor-of-selected .expand-arrow:not(.expanded) {
background-image: var(--inheritance-stripes-background);
background-image: var(--inheritance-dots-background-6-lowergray);
}
&.descendant-of-selected {
background-image: var(--inheritance-dots-background);
background-image: var(--inheritance-dots-background-4-dimgray);
}
&.selected-but-not-in-selected-network {