Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: Modified z-index for draggable components, navbar and tabsBar in both expanded and collapsed states of tabsBar #261

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Fix: Modified z-index for draggable components, navbar and tabsBar in both expanded and collapsed states of tabsBar #261

wants to merge 4 commits into from

Conversation

Chandrachur67
Copy link
Contributor

Fixes #260

Describe the changes you have made in this PR -

  1. Modified the z-index values to be assigned to draggable elements during the "mousedown" event (set to previous values similar to circuitverse.org/simulator)

  2. Modified code for the event listener of the tabsBar expand and collapse button

  • when expanded, added inline CSS to the navbar and tabsBar to have a higher z-index so that they appear on top of draggable panels.
  • when collapsed, removed the inline styling to revert back to original values so that draggable panels appear on top of everything.

Screenshots of the changes (If any) -

Before

Once draggable components are moved to overlap with the top section, it loses the functionality of moving further

Screenshot 2024-01-17 at 1 57 57 AM

After

tabsBar not expanded state => draggable panels on top of everything.

Screenshot 2024-01-17 at 1 49 04 AM

tabsBar expanded state => navbar and tabsBar on top of draggable components for better accessibility of tabsBar

Screenshot 2024-01-17 at 1 49 13 AM

Video demonstrating the change

pr_video.mov

Note: Please check Allow edits from maintainers. if you would like us to assist in the PR.

@netlify Netlify
Copy link

netlify bot commented Jan 16, 2024 •
edited
Loading

✅ Deploy Preview for circuitverse ready!

Name Link
🔨 Latest commit 489151e
🔍 Latest deploy log https://app.netlify.com/sites/circuitverse/deploys/65f35eff40a30700083540b3
😎 Deploy Preview https://deploy-preview-261--circuitverse.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Chandrachur67
Copy link
Contributor Author

Hey @Arnabdaz, Please take a look at this. I have fixed the z-indexes following the requirements you specified.

Arnabdaz
Arnabdaz requested changes Jan 17, 2024
View reviewed changes
Copy link
Member

@Arnabdaz Arnabdaz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
the drop-down menu is below the tabsbar & panels fix this issue

@Chandrachur67
Copy link
Contributor Author

Sure. Sorry for the glitch. I will fix this.

Clarification needed

However I need one more clarification: The z-index of dropdown menu is controlled by the z-index of the navbar. So in collapsed state, even if any a nav-dropdown item is expanded due to higher z-index of draggable components it will not come on top of draggable-component. Is this behaviour ok? if ok then I have done it and mentioned all the changes below.

But if you want me change this behaviour, then I have to modify and add event-listeners to some components of navbar and it will make the changes complex bacuase that is probably controlled by aria-expanded and data-toggle. please let me know what you want.

Propsed Solution

This is the behaviour I am trying to implement:
Changing the value of z-index of #tabsBar in TabsBar.vue to 99.

In collapsed mode

z-index : draggable-components > navbar > tabsBar

In expanded mode

z-index: navbar > tabsBar > draggable-components

The exact values I am planning to use:

tabsBar state navbar tabsBar draggable components
Expanded 103 102 <102
Collapsed 100 99 (101 for selected and 100 for others)

Images

In collapsed mode

Screenshot 2024-01-17 at 12 46 52 PM Screenshot 2024-01-17 at 12 47 13 PM

In expanded mode

Screenshot 2024-01-17 at 12 48 30 PM Screenshot 2024-01-17 at 12 48 06 PM

@Chandrachur67
Copy link
Contributor Author

Hey @Arnabdaz I have updated the code and I believe we will be getting the expected behaviour.

Video for reference

pr_2.mov

@Chandrachur67
Copy link
Contributor Author

@Arnabdaz @Prerna-0202 it would be great if you could take a look at this.

@b-harsh
Copy link

b-harsh commented Jan 21, 2024

i have got some ideas should i start working on this issue @Chandrachur67 @Arnabdaz

@Chandrachur67 Chandrachur67 mentioned this pull request Feb 28, 2024
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Arnabdaz Arnabdaz Arnabdaz requested changes

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
3 participants
@Chandrachur67 @b-harsh @Arnabdaz