Keep parser actions always visible

This commit is contained in:
2026-08-05 17:57:39 +02:00
parent e9aa381f45
commit 588c0bd9cc
4 changed files with 1 additions and 25 deletions
+1
View File
@@ -53,6 +53,7 @@ This project replaces the Excel/VBA workflow named `Catalog maker - 20` with a N
- Before finishing any UI change, inspect the rendered page with Playwright and verify that icons are visible, precede their labels, remain centered, and do not overlap or drift between controls. Update this file when a new reusable visual rule is discovered. - Before finishing any UI change, inspect the rendered page with Playwright and verify that icons are visible, precede their labels, remain centered, and do not overlap or drift between controls. Update this file when a new reusable visual rule is discovered.
- Custom select controls may use a native select as an interaction layer, but the native label must be visually transparent when a separate display label is rendered; never show the same control text twice. - Custom select controls may use a native select as an interaction layer, but the native label must be visually transparent when a separate display label is rendered; never show the same control text twice.
- Runtime button labels must update the existing direct child label span instead of replacing `button.textContent`; state changes must never remove the button icon. - Runtime button labels must update the existing direct child label span instead of replacing `button.textContent`; state changes must never remove the button icon.
- Parser tools are always visible in the left panel. Do not hide, collapse or replace the parser action buttons with a toggle; the user must see the complete parser action set at all times.
## TypeScript workflow ## TypeScript workflow
-9
View File
@@ -26,8 +26,6 @@ const mappingList = document.querySelector("#mappingList");
const mappingDetails = document.querySelector("#mappingDetails"); const mappingDetails = document.querySelector("#mappingDetails");
const findSourcesButton = document.querySelector("#findSourcesButton"); const findSourcesButton = document.querySelector("#findSourcesButton");
const getPicturesButton = document.querySelector("#getPicturesButton"); const getPicturesButton = document.querySelector("#getPicturesButton");
const parserDrawerToggle = document.querySelector("#parserDrawerToggle");
const parserDrawer = document.querySelector("#parserDrawer");
const sidebarDrawer = document.querySelector("#sidebarDrawer"); const sidebarDrawer = document.querySelector("#sidebarDrawer");
const sidebarOpenButton = document.querySelector("#sidebarOpenButton"); const sidebarOpenButton = document.querySelector("#sidebarOpenButton");
const sidebarCloseButton = document.querySelector("#sidebarCloseButton"); const sidebarCloseButton = document.querySelector("#sidebarCloseButton");
@@ -172,7 +170,6 @@ loadProductButton.title = "Load existing product attribute info.";
loadProductButton.addEventListener("click", loadProductInfoForCurrentProduct); loadProductButton.addEventListener("click", loadProductInfoForCurrentProduct);
findSourcesButton.addEventListener("click", findSourcesForCurrentProduct); findSourcesButton.addEventListener("click", findSourcesForCurrentProduct);
getPicturesButton.addEventListener("click", getPicturesForCurrentProduct); getPicturesButton.addEventListener("click", getPicturesForCurrentProduct);
parserDrawerToggle.addEventListener("click", toggleParserDrawer);
secondaryPanelToggle.addEventListener("click", toggleSecondaryPanel); secondaryPanelToggle.addEventListener("click", toggleSecondaryPanel);
mainWorkspaceToggle.addEventListener("click", toggleMainWorkspace); mainWorkspaceToggle.addEventListener("click", toggleMainWorkspace);
sidebarOpenButton.addEventListener("click", openSidebar); sidebarOpenButton.addEventListener("click", openSidebar);
@@ -861,12 +858,6 @@ function closeSourceCandidates() {
function openSettings() { function openSettings() {
settingsModal.hidden = false; settingsModal.hidden = false;
} }
function toggleParserDrawer() {
const isOpen = !parserDrawer.hidden;
parserDrawer.hidden = isOpen;
parserDrawerToggle.setAttribute("aria-expanded", String(!isOpen));
parserDrawerToggle.querySelector(".drawer-chevron").textContent = isOpen ? "⌄" : "⌃";
}
function syncSidebarForViewport() { function syncSidebarForViewport() {
if (window.matchMedia("(min-width: 981px)").matches && !sidebarUserClosed) if (window.matchMedia("(min-width: 981px)").matches && !sidebarUserClosed)
openSidebar(); openSidebar();
-10
View File
@@ -26,8 +26,6 @@ const mappingList = document.querySelector("#mappingList");
const mappingDetails = document.querySelector("#mappingDetails"); const mappingDetails = document.querySelector("#mappingDetails");
const findSourcesButton = document.querySelector("#findSourcesButton"); const findSourcesButton = document.querySelector("#findSourcesButton");
const getPicturesButton = document.querySelector("#getPicturesButton"); const getPicturesButton = document.querySelector("#getPicturesButton");
const parserDrawerToggle = document.querySelector("#parserDrawerToggle");
const parserDrawer = document.querySelector("#parserDrawer");
const sidebarDrawer = document.querySelector("#sidebarDrawer"); const sidebarDrawer = document.querySelector("#sidebarDrawer");
const sidebarOpenButton = document.querySelector("#sidebarOpenButton"); const sidebarOpenButton = document.querySelector("#sidebarOpenButton");
const sidebarCloseButton = document.querySelector("#sidebarCloseButton"); const sidebarCloseButton = document.querySelector("#sidebarCloseButton");
@@ -178,7 +176,6 @@ loadProductButton.title = "Load existing product attribute info.";
loadProductButton.addEventListener("click", loadProductInfoForCurrentProduct); loadProductButton.addEventListener("click", loadProductInfoForCurrentProduct);
findSourcesButton.addEventListener("click", findSourcesForCurrentProduct); findSourcesButton.addEventListener("click", findSourcesForCurrentProduct);
getPicturesButton.addEventListener("click", getPicturesForCurrentProduct); getPicturesButton.addEventListener("click", getPicturesForCurrentProduct);
parserDrawerToggle.addEventListener("click", toggleParserDrawer);
secondaryPanelToggle.addEventListener("click", toggleSecondaryPanel); secondaryPanelToggle.addEventListener("click", toggleSecondaryPanel);
mainWorkspaceToggle.addEventListener("click", toggleMainWorkspace); mainWorkspaceToggle.addEventListener("click", toggleMainWorkspace);
sidebarOpenButton.addEventListener("click", openSidebar); sidebarOpenButton.addEventListener("click", openSidebar);
@@ -949,13 +946,6 @@ function openSettings() {
settingsModal.hidden = false; settingsModal.hidden = false;
} }
function toggleParserDrawer() {
const isOpen = !parserDrawer.hidden;
parserDrawer.hidden = isOpen;
parserDrawerToggle.setAttribute("aria-expanded", String(!isOpen));
parserDrawerToggle.querySelector(".drawer-chevron").textContent = isOpen ? "⌄" : "⌃";
}
function syncSidebarForViewport() { function syncSidebarForViewport() {
if (window.matchMedia("(min-width: 981px)").matches && !sidebarUserClosed) openSidebar(); if (window.matchMedia("(min-width: 981px)").matches && !sidebarUserClosed) openSidebar();
else closeSidebar(); else closeSidebar();
-6
View File
@@ -30,12 +30,6 @@
<button class="arrow-button arrow-button-next" id="nextProductButton" type="button" title="Next product" aria-label="Next product"></button> <button class="arrow-button arrow-button-next" id="nextProductButton" type="button" title="Next product" aria-label="Next product"></button>
</div> </div>
<button class="drawer-trigger" id="parserDrawerToggle" type="button" aria-expanded="true" aria-controls="parserDrawer">
<svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#sliders"></use></svg>
<span>Parser tools</span>
<span class="drawer-chevron" aria-hidden="true"></span>
</button>
<div class="sidebar-section parser-drawer" id="parserDrawer"> <div class="sidebar-section parser-drawer" id="parserDrawer">
<div class="parser-actions" aria-label="Parser actions"> <div class="parser-actions" aria-label="Parser actions">
<button class="action-button" id="findSourcesButton" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#search"></use></svg><span>Find sources</span></button> <button class="action-button" id="findSourcesButton" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#search"></use></svg><span>Find sources</span></button>