Keep parser actions always visible
This commit is contained in:
@@ -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.
|
||||
- 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.
|
||||
- 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
|
||||
|
||||
|
||||
@@ -26,8 +26,6 @@ const mappingList = document.querySelector("#mappingList");
|
||||
const mappingDetails = document.querySelector("#mappingDetails");
|
||||
const findSourcesButton = document.querySelector("#findSourcesButton");
|
||||
const getPicturesButton = document.querySelector("#getPicturesButton");
|
||||
const parserDrawerToggle = document.querySelector("#parserDrawerToggle");
|
||||
const parserDrawer = document.querySelector("#parserDrawer");
|
||||
const sidebarDrawer = document.querySelector("#sidebarDrawer");
|
||||
const sidebarOpenButton = document.querySelector("#sidebarOpenButton");
|
||||
const sidebarCloseButton = document.querySelector("#sidebarCloseButton");
|
||||
@@ -172,7 +170,6 @@ loadProductButton.title = "Load existing product attribute info.";
|
||||
loadProductButton.addEventListener("click", loadProductInfoForCurrentProduct);
|
||||
findSourcesButton.addEventListener("click", findSourcesForCurrentProduct);
|
||||
getPicturesButton.addEventListener("click", getPicturesForCurrentProduct);
|
||||
parserDrawerToggle.addEventListener("click", toggleParserDrawer);
|
||||
secondaryPanelToggle.addEventListener("click", toggleSecondaryPanel);
|
||||
mainWorkspaceToggle.addEventListener("click", toggleMainWorkspace);
|
||||
sidebarOpenButton.addEventListener("click", openSidebar);
|
||||
@@ -861,12 +858,6 @@ function closeSourceCandidates() {
|
||||
function openSettings() {
|
||||
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() {
|
||||
if (window.matchMedia("(min-width: 981px)").matches && !sidebarUserClosed)
|
||||
openSidebar();
|
||||
|
||||
@@ -26,8 +26,6 @@ const mappingList = document.querySelector("#mappingList");
|
||||
const mappingDetails = document.querySelector("#mappingDetails");
|
||||
const findSourcesButton = document.querySelector("#findSourcesButton");
|
||||
const getPicturesButton = document.querySelector("#getPicturesButton");
|
||||
const parserDrawerToggle = document.querySelector("#parserDrawerToggle");
|
||||
const parserDrawer = document.querySelector("#parserDrawer");
|
||||
const sidebarDrawer = document.querySelector("#sidebarDrawer");
|
||||
const sidebarOpenButton = document.querySelector("#sidebarOpenButton");
|
||||
const sidebarCloseButton = document.querySelector("#sidebarCloseButton");
|
||||
@@ -178,7 +176,6 @@ loadProductButton.title = "Load existing product attribute info.";
|
||||
loadProductButton.addEventListener("click", loadProductInfoForCurrentProduct);
|
||||
findSourcesButton.addEventListener("click", findSourcesForCurrentProduct);
|
||||
getPicturesButton.addEventListener("click", getPicturesForCurrentProduct);
|
||||
parserDrawerToggle.addEventListener("click", toggleParserDrawer);
|
||||
secondaryPanelToggle.addEventListener("click", toggleSecondaryPanel);
|
||||
mainWorkspaceToggle.addEventListener("click", toggleMainWorkspace);
|
||||
sidebarOpenButton.addEventListener("click", openSidebar);
|
||||
@@ -949,13 +946,6 @@ function openSettings() {
|
||||
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() {
|
||||
if (window.matchMedia("(min-width: 981px)").matches && !sidebarUserClosed) openSidebar();
|
||||
else closeSidebar();
|
||||
|
||||
@@ -30,12 +30,6 @@
|
||||
<button class="arrow-button arrow-button-next" id="nextProductButton" type="button" title="Next product" aria-label="Next product"></button>
|
||||
</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="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>
|
||||
|
||||
Reference in New Issue
Block a user