Skip to content

feat: add tab overflow menu (#1592) #1682

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.

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

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

Conversation

Tamriel
Copy link

@Tamriel Tamriel commented May 12, 2025

closes #1592

@Tamriel Tamriel marked this pull request as ready for review May 13, 2025 08:13
Copy link
Member

@trusz trusz left a comment

Choose a reason for hiding this comment

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

Thank you for your contribution!

The solution looks nice and I would like to ask for a few changes to finalize the solution. You can of course let us know if we should take over from here.

  1. I have small code change request about adding and removing event listeners.
  2. Also, I was wondering if you could place the overflow menu at the and of the row and not at the beginning. I think they are usually there.
  3. The style of the selected tabs have changed a bit. Would it be possible to revert them how they've looked like?
  4. I think it would be nice somehow to display the currently active plugin even if it in the overflow menu, but currently I do not have an idea how. I am open to suggestions.

}

disconnectedCallback() {
window.removeEventListener('resize', () => this.#calculateVisibleTabs());
Copy link
Member

Choose a reason for hiding this comment

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

I think this won't remove the original one.
I would recommend creating a function that we can reference.
something along these lines:

private calculateVisibleTabs = () => {
...
}

By using an arrow function we make sure that we have the correct context (this) without binding the function.
With that you can add and remove listeners:

window.addEventListener('resize', this.calculateVisibleTabs)
window.RemoveEventListener('resize', this.calculateVisibleTabs)

Copy link
Author

Choose a reason for hiding this comment

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

  1. Thanks for the hint that removing the resize listener did not work. I fixed it now.
  2. The overflow menu is now placed at the end of the row - I like this solution better as well.
  3. I find styling Material Web Components quite painful, because there are many fixed/internal styles. I've adjusted the buttons to look more like mwc-tab-bar, but I couldn’t increase the icon size or vertical padding. Any ideas?
  4. My idea for improving the UI: If the active plugin is hidden in the overflow menu, move its button to the right-most visible position, and move the button currently there into the menu instead. This could be repeated if needed (e.g. if the active button is wider).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tab Overflow
3 participants