DEV: Remove 'widget-button' from glimmer-topic-timeline (#20155)

# Context
The class of `widget-button` was kept in the upgraded version of the topic timeline to keep the preexisting logic of how we open / close child and parent modals.

# Problem
<img width="1242" alt="Screenshot 2023-02-02 at 3 45 53 PM" src="https://user-images.githubusercontent.com/50783505/216456778-11a3d0ce-5e33-4b85-89af-a2a32e39a1f6.png">

With the `widget-button` class removed from the topic timeline, clicking the button (highlighted in the image above) would close itself when populating the `jumpToPostPrompt` modal. This is not the behavior we want so class was kept on the button. The upgrade to ember octane entails moving away from widgets and all of its functionality... so we don't want to carry the debt of utilizing the `widget-button` class.

# Solution
Create a new class `.timeline-open-jump-to-post-prompt-btn` to be added to the `_expanded` function. When this class is present on a child or a parent of the button clicked, we do not collapse the modal. This gives us the expected behavior of maintaining both modals open at the same time.

<img width="1176" alt="Screenshot 2023-02-02 at 3 50 59 PM" src="https://user-images.githubusercontent.com/50783505/216457612-ab313758-bfa9-4913-bd29-d5224faf5187.png">

# Other 
Obviously adding this as jquery is not ideal, but to prevent scope creep we will need to refactor this in a separate PR.
This commit is contained in:
Isaac Janzen 2023-02-03 07:47:41 -06:00 committed by GitHub
parent e17c145e8d
commit 66b015b472
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 3 deletions

View File

@ -93,7 +93,9 @@ export default Component.extend(PanEvents, {
!$target.is("#discourse-modal") && !$target.is("#discourse-modal") &&
!$parents.is(".modal-footer") && !$parents.is(".modal-footer") &&
($target.is(".topic-timeline") || ($target.is(".topic-timeline") ||
!$parents.is("#topic-progress-wrapper")) !$parents.is("#topic-progress-wrapper")) &&
!$parents.is(".timeline-open-jump-to-post-prompt-btn") &&
!$target.is(".timeline-open-jump-to-post-prompt-btn")
) { ) {
this._collapseFullscreen(); this._collapseFullscreen();
} }

View File

@ -146,8 +146,7 @@
{{#if @fullscreen}} {{#if @fullscreen}}
<button <button
type="button" type="button"
{{! we need to keep this a widget-button to not close the modal when opening form }} class="timeline-open-jump-to-post-prompt-btn btn btn-text jump-to-post"
class="widget-button btn btn-text jump-to-post"
title={{i18n "topic.progress.jump_prompt_long"}} title={{i18n "topic.progress.jump_prompt_long"}}
{{on "click" @jumpToPostPrompt}} {{on "click" @jumpToPostPrompt}}
> >