diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.scss b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.scss index 4e418aa7b..43478ba62 100644 --- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.scss +++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.scss @@ -1,5 +1,13 @@ app-actions-element { + display: block; + + aside { + pointer-events: none; + } + button { + pointer-events: all; + &.hidden { display: none; } diff --git a/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.tsx b/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.tsx index d322bfd3a..be974de21 100644 --- a/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.tsx +++ b/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.tsx @@ -161,6 +161,16 @@ export class AppActionsEditor { } } + private async selectDeckOnClick($event: MouseEvent | TouchEvent) { + const src: HTMLElement = $event.composedPath()[0] as HTMLElement; + + if (!this.actionsElementRef.isEqualNode(src)) { + return; + } + + await this.selectDeck(); + } + render() { return ( this.selectDeckOnClick($event)} ref={(el) => (this.actionsElementRef = el as HTMLAppActionsElementElement)} class={editorStore.state.step === BreadcrumbsStep.DECK ? 'hidden' : undefined} slideCopy={this.slideCopy} diff --git a/studio/src/app/pages/editor/app-editor/app-editor.tsx b/studio/src/app/pages/editor/app-editor/app-editor.tsx index f32e3b4ef..8319ad6e1 100644 --- a/studio/src/app/pages/editor/app-editor/app-editor.tsx +++ b/studio/src/app/pages/editor/app-editor/app-editor.tsx @@ -118,6 +118,7 @@ export class AppEditor { private actionsEditorRef!: HTMLAppActionsEditorElement; private contentRef!: HTMLElement; private mainRef!: HTMLElement; + private breadCrumbsRef!: HTMLAppBreadcrumbsElement; private mainResizeObserver: ResizeObserver; private slideResizeObserver: ResizeObserver; @@ -516,6 +517,16 @@ export class AppEditor { await this.actionsEditorRef.touch(element); } + private async selectDeck($event: MouseEvent | TouchEvent) { + const src: HTMLElement = $event.composedPath()[0] as HTMLElement; + + if (!this.contentRef.isEqualNode(src) && !this.breadCrumbsRef.isEqualNode(src)) { + return; + } + + await this.actionsEditorRef.selectDeck(); + } + @Listen('toggleFullScreen', {target: 'window'}) async onToggleFullScreen() { if (!this.deckRef) { @@ -737,7 +748,7 @@ export class AppEditor { return [ , - + this.selectDeck($event)}>
(this.contentRef = el as HTMLElement)}>
- ) => this.selectStep($event)}> + (this.breadCrumbsRef = el as HTMLAppBreadcrumbsElement)} + slideNumber={this.activeIndex} + onStepTo={($event: CustomEvent) => this.selectStep($event)}> (this.actionsEditorRef = el as HTMLAppActionsEditorElement)}