Distingui visivamente la gerarchia dei layer

LMEMappeCatastaliApp.csproj

@@ -28,8 +28,8 @@
         <ApplicationId>com.companyname.lmemappecatastaliapp</ApplicationId>
 
         <!-- Versions -->
-        <ApplicationDisplayVersion>0.2.25</ApplicationDisplayVersion>
+        <ApplicationDisplayVersion>0.2.27</ApplicationDisplayVersion>
-        <ApplicationVersion>29</ApplicationVersion>
+        <ApplicationVersion>31</ApplicationVersion>
 
         <!-- To develop, package, and publish an app to the Microsoft Store, see: https://aka.ms/MauiTemplateUnpackaged -->
         <WindowsPackageType>None</WindowsPackageType>

wwwroot/css/app.css

@@ -176,10 +176,11 @@ input[type="checkbox"] {
     position: absolute;
     top: 72px;
     right: 12px;
+    bottom: calc(var(--nav-height) + 8px);
     z-index: 940;
     display: grid;
-    width: min(760px, 62vw, calc(100% - 24px));
+    box-sizing: border-box;
-    max-height: calc(100% - 152px);
+    width: min(480px, 50vw);
     overflow-y: auto;
     border: 1px solid var(--line);
     border-radius: 8px;
@@ -265,17 +266,30 @@ input[type="checkbox"] {
 .layer-manager-group,
 .layer-manager-block,
 .layer-manager-object {
-    border: 1px solid #dce3e6;
+    border: 1px solid var(--layer-group-border, #dce3e6);
     border-radius: 6px;
-    background: #fff;
+    background: var(--layer-group-surface, #fff);
+}
+
+.layer-manager-group > summary,
+.layer-manager-block > summary {
+    background: var(--layer-group-parent, #f6f8f9);
+}
+
+.layer-manager-object > summary {
+    background: var(--layer-group-surface, #fff);
 }
 
 .layer-manager-group > summary,
 .layer-manager-block > summary,
 .layer-manager-object > summary {
     display: grid;
-    grid-template-columns: 28px 20px minmax(0, 1fr) auto auto;
+    grid-template-columns: 28px minmax(0, 1fr) 50px;
-    align-items: center;
+    grid-template-areas:
+        "handle title count"
+        ". visibility moves"
+        ". actions moves";
+    align-items: start;
     gap: 6px;
     min-height: 38px;
     padding: 4px 6px;
@@ -283,10 +297,6 @@ input[type="checkbox"] {
     list-style: none;
 }
 
-.layer-manager-with-actions > summary {
-    grid-template-columns: 28px 20px minmax(0, 1fr) auto auto auto;
-}
-
 .layer-manager-group > summary::-webkit-details-marker,
 .layer-manager-block > summary::-webkit-details-marker,
 .layer-manager-object > summary::-webkit-details-marker {
@@ -294,6 +304,7 @@ input[type="checkbox"] {
 }
 
 .layer-drag-handle {
+    grid-area: handle;
     width: 28px;
     height: 28px;
     border: 0;
@@ -307,22 +318,37 @@ input[type="checkbox"] {
 }
 
 .layer-row-actions {
-    display: flex;
+    grid-area: actions;
-    flex-wrap: wrap;
+    display: grid;
-    justify-content: flex-end;
+    grid-template-columns: minmax(0, 1fr);
+    width: min(130px, 100%);
     gap: 4px;
 }
 
+.layer-manager-group > summary > input,
+.layer-manager-block > summary > input,
+.layer-manager-object > summary > input {
+    grid-area: visibility;
+    justify-self: start;
+    width: 20px;
+    height: 20px;
+    margin: 1px 0;
+}
+
 .layer-rename-button,
 .layer-remove-button {
+    width: 100%;
     min-height: 28px;
-    padding: 0 8px;
+    min-width: 0;
+    padding: 4px;
     border: 1px solid #bfd4cd;
     border-radius: 4px;
     background: #eef8f5;
     color: var(--accent-strong);
     font-size: 10px;
     font-weight: 800;
+    line-height: 1.15;
+    overflow-wrap: anywhere;
 }
 
 .layer-rename-button:active {
@@ -340,6 +366,7 @@ input[type="checkbox"] {
 }
 
 .layer-move-buttons {
+    grid-area: moves;
     display: inline-grid;
     grid-template-columns: 24px 24px;
     gap: 2px;
@@ -363,25 +390,83 @@ input[type="checkbox"] {
 }
 
 .layer-manager-title {
+    grid-area: title;
     min-width: 0;
     overflow-wrap: anywhere;
+    color: var(--layer-group-accent, var(--ink));
     font-size: 12px;
-    font-weight: 700;
+}
+
+.layer-manager-group > summary > .layer-manager-title {
+    font-size: 13px;
+    font-weight: 800;
+}
+
+.layer-manager-block > summary > .layer-manager-title {
+    font-size: 12px;
+    font-weight: 800;
+}
+
+.layer-manager-object > summary > .layer-manager-title {
+    font-size: 11px;
+    font-style: italic;
+    font-weight: 400;
 }
 
 .layer-manager-count {
+    grid-area: count;
+    justify-self: end;
     color: var(--muted);
     font-size: 10px;
 }
 
 .layer-manager-children {
-    padding: 0 5px 5px 18px;
+    margin-left: 4px;
+    padding: 4px 3px 5px 6px;
+    border-left: 2px solid var(--layer-group-border, #dce3e6);
+}
+
+.layer-manager-block > .layer-manager-children {
+    margin-left: 5px;
+    padding-left: 5px;
+}
+
+.layer-manager-object {
+    margin-left: 3px;
+    border-radius: 4px;
+}
+
+.layer-manager-object > summary {
+    grid-template-columns: 24px minmax(0, 1fr) 46px;
+    gap: 4px;
+    padding: 3px 4px;
+}
+
+.layer-manager-object > summary > .layer-drag-handle {
+    width: 24px;
+    height: 24px;
+    font-size: 15px;
+}
+
+.layer-manager-object > summary > .layer-move-buttons {
+    grid-template-columns: 22px 22px;
+}
+
+.layer-manager-object > summary > .layer-move-buttons button {
+    width: 22px;
+    height: 24px;
+}
+
+.layer-manager-object > summary .layer-rename-button,
+.layer-manager-object > summary .layer-remove-button {
+    min-height: 24px;
+    font-size: 9px;
 }
 
 .layer-manager-details {
     display: grid;
     gap: 2px;
-    padding: 0 8px 7px 40px;
+    padding: 0 6px 7px 12px;
     color: var(--muted);
     font-size: 10px;
 }
@@ -932,29 +1017,8 @@ footer {
     .map-layer-panel {
         top: 68px;
         right: 8px;
-        width: calc(100% - 16px);
+        bottom: calc(var(--nav-height) + 8px);
-        max-height: calc(100% - 144px);
+        width: 50vw;
-    }
-
-    .layer-manager-with-actions > summary {
-        grid-template-columns: 28px 20px minmax(0, 1fr) auto;
-    }
-
-    .layer-manager-with-actions > summary > .layer-row-actions {
-        grid-row: 2;
-        grid-column: 3;
-        justify-content: flex-start;
-    }
-
-    .layer-manager-with-actions > summary > .layer-move-buttons {
-        grid-row: 1;
-        grid-column: 4;
-    }
-
-    .layer-manager-with-actions > summary > .layer-manager-count {
-        grid-row: 2;
-        grid-column: 4;
-        justify-self: end;
     }
 
     .tool-sheet {
@@ -1015,12 +1079,6 @@ footer {
     }
 }
 
-@media (min-width: 701px) and (max-width: 1100px) {
-    .map-layer-panel {
-        width: min(680px, calc(100% - 24px));
-    }
-}
-
 @media (max-width: 380px) {
     .app-identity span {
         display: none;

wwwroot/js/lme-map.js

@@ -1268,6 +1268,26 @@ function layerManagerRowActions(renameButton, removeButton) {
     return `<span class="layer-row-actions">${renameButton}${removeButton}</span>`;
 }
 
+const layerManagerPalettes = [
+    { surface: "#f0fdf4", parent: "#dcfce7", border: "#86efac", accent: "#166534" },
+    { surface: "#eff6ff", parent: "#dbeafe", border: "#93c5fd", accent: "#1d4ed8" },
+    { surface: "#fffbeb", parent: "#fef3c7", border: "#fcd34d", accent: "#92400e" },
+    { surface: "#fff1f2", parent: "#ffe4e6", border: "#fda4af", accent: "#be123c" },
+    { surface: "#f5f3ff", parent: "#ede9fe", border: "#c4b5fd", accent: "#6d28d9" },
+    { surface: "#ecfeff", parent: "#cffafe", border: "#67e8f9", accent: "#0e7490" },
+    { surface: "#f7fee7", parent: "#ecfccb", border: "#bef264", accent: "#3f6212" }
+];
+
+function applyLayerManagerPalette(row, key) {
+    const hash = [...String(key)].reduce((value, character) =>
+        ((value * 31) + character.charCodeAt(0)) >>> 0, 0);
+    const palette = layerManagerPalettes[hash % layerManagerPalettes.length];
+    row.style.setProperty("--layer-group-surface", palette.surface);
+    row.style.setProperty("--layer-group-parent", palette.parent);
+    row.style.setProperty("--layer-group-border", palette.border);
+    row.style.setProperty("--layer-group-accent", palette.accent);
+}
+
 function removeManagedRecords(records, subject) {
     if (!records.length) {
         return;
@@ -1388,7 +1408,9 @@ function renderLayerManagerCategory(category, records) {
     const group = document.createElement("details");
     group.className = "layer-manager-group";
     group.dataset.dragType = "category";
+    group.dataset.layerDepth = "0";
     group.dataset.categoryKey = category.key;
+    applyLayerManagerPalette(group, `category:${category.key}`);
     bindLayerManagerExpansion(group, `category:${category.key}`);
     const categoryName = managedCategoryName(category, records);
     const renameButton = managedCategoryCanRename(category)
@@ -1438,8 +1460,10 @@ function renderLayerManagerBlock(category, source, records) {
     const block = document.createElement("details");
     block.className = "layer-manager-block";
     block.dataset.dragType = "block";
+    block.dataset.layerDepth = "1";
     block.dataset.categoryKey = category.key;
     block.dataset.blockKey = source;
+    applyLayerManagerPalette(block, `block:${category.key}:${source}`);
     bindLayerManagerExpansion(block, `block:${category.key}:${source}`);
     const visibleCount = records.filter(record => !lmeState.managerHiddenObjectIds.has(record.id)).length;
     const visible = visibleCount === records.length;
@@ -1479,6 +1503,7 @@ function renderLayerManagerObject(record, index) {
         object.classList.add("layer-manager-object-selected");
     }
     object.dataset.dragType = "object";
+    object.dataset.layerDepth = "2";
     object.dataset.objectId = record.id;
     bindLayerManagerExpansion(object, `object:${record.id}`);
     const visible = !lmeState.managerHiddenObjectIds.has(record.id);