nodes/DemonGatanjieu-Anomalous_Model_Browser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ui): redesign toolbox into spacious 3-column grid with moderate icons and 9-item capacity

Browse Source
This commit is contained in:
DemonGatanjieu
2026-09-16 18:44:24 +08:00
parent 0d8d163081
commit cd1ea0ee2e
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ARCHITECTURE.md
+1 -1
View File
@@ -86,7 +86,7 @@ DOM or live LiteGraph state.
- `sidebar_actions.js` owns the sidebar bottom action hover-reveal short labels (100ms), singleton dynamic DOM tooltip bubbles (`#anomalous-sidebar-tooltip-bubble`, 600ms), and anti-flicker pointer stability guards (opacity-based icon transitions, pointer-events isolation, fixed box model).
- `tool_registry.js` centralizes metadata, SVG icons, and stable IDs for the 8 catalog tools and 2 fixed anchors (Toolbox and Settings).
- `shortcut_layout.js` provides tool layout utilities and fallbacks. The bottom shortcut bar maintains the clean fixed 4-tool setup (`scan`, `doctor`, `assistant`, `materials`) plus two anchors (`toolbox`, `settings`), directly executable via click without drag complexity.
- `ui_sidebar.js`'s Toolbox modal strictly filters out all tools already present on the bottom bar, presenting a dedicated spacious 2x2 utility catalog (`workflow-transfer`, `prompt-studio`, `prompt-translator`, `model-sources`) with recognizable color emoji icons and direct execution.
- `ui_sidebar.js`'s Toolbox modal strictly filters out all tools already present on the bottom bar, presenting a spacious 3-column utility catalog with 9-item capacity (currently holding 4: `workflow-transfer`, `prompt-studio`, `prompt-translator`, `model-sources`) with moderate recognizable color emoji icons and direct execution.
- `ui_grid.js` and model-detail modules own model presentation; `ui_gallery.js`
and `ui_gallery_detail.js` own generated-image browsing and inspection.
- `ui_recipes.js` / `ui_recipe_detail.js`, `ui_notebooks.js`, and `ui_materials.js`
web/styles.css
+12 -12
View File
@@ -1036,15 +1036,15 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
position: absolute;
bottom: 50px;
left: 10px;
width: 248px;
min-height: auto;
width: 256px;
min-height: 280px;
box-sizing: border-box;
background: rgba(22, 22, 26, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 12px 12px 10px;
padding: 12px 10px 10px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05);
z-index: 999999 !important;
transition: left 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), bottom 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -1069,8 +1069,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
.anomalous-toolbox-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 4px 0 6px;
align-content: start;
flex: 1;
@@ -1082,12 +1082,12 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
align-items: center;
justify-content: center;
text-align: center;
padding: 14px 6px 12px;
min-height: 72px;
padding: 10px 4px 8px;
min-height: 62px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 10px;
border-radius: 8px;
cursor: pointer;
position: relative;
user-select: none;
@@ -1106,9 +1106,9 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
}
.anomalous-toolbox-tile-icon {
font-size: 26px;
font-size: 20px;
line-height: 1;
margin-bottom: 7px;
margin-bottom: 5px;
display: flex;
align-items: center;
justify-content: center;
@@ -1116,7 +1116,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
}
.anomalous-toolbox-tile-label {
font-size: 11.5px;
font-size: 11px;
font-weight: 500;
color: #e2e8f0;
white-space: nowrap;
@@ -1147,7 +1147,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
align-items: center;
justify-content: space-between;
padding: 6px 4px 2px;
margin-top: 4px;
margin-top: auto;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}