Sticky the crawl config progress indicator position (#445)
* fix tabs on scroll * adjust for smaller creen size * scroll to top of section on change * only scroll if needed
This commit is contained in:
parent
2dcf5cb36b
commit
303df2869c
@ -140,6 +140,14 @@ export class TabList extends LitElement {
|
||||
|
||||
.navWrapper {
|
||||
grid-area: menu;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: ${SCREEN_LG}px) {
|
||||
.navWrapper {
|
||||
overflow: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
@ -155,6 +163,9 @@ export class TabList extends LitElement {
|
||||
|
||||
.nav {
|
||||
position: relative;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: var(--sl-spacing-medium);
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -331,8 +342,10 @@ export class TabList extends LitElement {
|
||||
panel.active = panel.name === this.activePanel;
|
||||
if (panel.active) {
|
||||
panel.style.display = "flex";
|
||||
panel.setAttribute("aria-hidden", "false");
|
||||
} else {
|
||||
panel.style.display = "none";
|
||||
panel.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -8,7 +8,7 @@ import type {
|
||||
SlSelect,
|
||||
SlTextarea,
|
||||
} from "@shoelace-style/shoelace";
|
||||
import { state, property, query } from "lit/decorators.js";
|
||||
import { state, property, query, queryAsync } from "lit/decorators.js";
|
||||
import { when } from "lit/directives/when.js";
|
||||
import { msg, localized, str } from "@lit/localize";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
@ -257,6 +257,9 @@ export class CrawlConfigEditor extends LiteElement {
|
||||
@query('form[name="newJobConfig"]')
|
||||
formElem!: HTMLFormElement;
|
||||
|
||||
@queryAsync("btrix-tab-panel[aria-hidden=false]")
|
||||
activeTabPanel!: Promise<HTMLElement | null>;
|
||||
|
||||
connectedCallback(): void {
|
||||
this.initializeEditor();
|
||||
super.connectedCallback();
|
||||
@ -269,14 +272,17 @@ export class CrawlConfigEditor extends LiteElement {
|
||||
) {
|
||||
this.initializeEditor();
|
||||
}
|
||||
if (changedProperties.get("formState") && this.formState) {
|
||||
this.handleFormStateChange();
|
||||
}
|
||||
}
|
||||
|
||||
updated(changedProperties: Map<string, any>) {
|
||||
if (changedProperties.get("progressState") && this.progressState) {
|
||||
this.handleProgressStateChange(
|
||||
changedProperties.get("progressState") as ProgressState
|
||||
);
|
||||
}
|
||||
if (changedProperties.get("formState") && this.formState) {
|
||||
this.handleFormStateChange();
|
||||
}
|
||||
}
|
||||
|
||||
private initializeEditor() {
|
||||
@ -396,7 +402,7 @@ export class CrawlConfigEditor extends LiteElement {
|
||||
this.renderNavItem(tabName, tabLabels[tabName])
|
||||
)}
|
||||
|
||||
<btrix-tab-panel name="newJobConfig-crawlSetup">
|
||||
<btrix-tab-panel name="newJobConfig-crawlSetup" class="scroll-m-3">
|
||||
${this.renderPanelContent(
|
||||
html`
|
||||
${when(this.jobType === "url-list", this.renderUrlListSetup)}
|
||||
@ -411,16 +417,28 @@ export class CrawlConfigEditor extends LiteElement {
|
||||
{ isFirst: true }
|
||||
)}
|
||||
</btrix-tab-panel>
|
||||
<btrix-tab-panel name="newJobConfig-browserSettings">
|
||||
<btrix-tab-panel
|
||||
name="newJobConfig-browserSettings"
|
||||
class="scroll-m-3"
|
||||
>
|
||||
${this.renderPanelContent(this.renderCrawlBehaviors())}
|
||||
</btrix-tab-panel>
|
||||
<btrix-tab-panel name="newJobConfig-crawlScheduling">
|
||||
<btrix-tab-panel
|
||||
name="newJobConfig-crawlScheduling"
|
||||
class="scroll-m-3"
|
||||
>
|
||||
${this.renderPanelContent(this.renderJobScheduling())}
|
||||
</btrix-tab-panel>
|
||||
<btrix-tab-panel name="newJobConfig-crawlInformation">
|
||||
<btrix-tab-panel
|
||||
name="newJobConfig-crawlInformation"
|
||||
class="scroll-m-3"
|
||||
>
|
||||
${this.renderPanelContent(this.renderJobInformation())}
|
||||
</btrix-tab-panel>
|
||||
<btrix-tab-panel name="newJobConfig-confirmSettings">
|
||||
<btrix-tab-panel
|
||||
name="newJobConfig-confirmSettings"
|
||||
class="scroll-m-3"
|
||||
>
|
||||
${this.renderPanelContent(this.renderConfirmSettings(), {
|
||||
isLast: true,
|
||||
})}
|
||||
@ -1275,10 +1293,15 @@ https://example.net`}
|
||||
}
|
||||
}
|
||||
|
||||
private handleProgressStateChange(oldState: ProgressState) {
|
||||
const { currentStep } = this.progressState;
|
||||
if (oldState.currentStep !== currentStep) {
|
||||
this.formElem?.scrollIntoView({ behavior: "smooth" });
|
||||
private async handleProgressStateChange(oldState: ProgressState) {
|
||||
const { activeTab } = this.progressState;
|
||||
if (oldState.activeTab !== activeTab) {
|
||||
const activeTabPanel = (await this.activeTabPanel) as HTMLElement;
|
||||
if (activeTabPanel && activeTabPanel.getBoundingClientRect().top < 0) {
|
||||
activeTabPanel.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user