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.

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

feat(dev-overlay): Hide plugins into a separate menu when there's too many enabled #9102

Merged
merged 5 commits into from
Nov 15, 2023

Conversation

Princesseuh
Copy link
Member

Changes

Add a new little guy menu when the user has too many plugins in order to not overcrowd the bar
image

When any of the plugins in it have a notification, it'll show on the three dots, like so:
image

Testing

Tested manually for now, will be tested in a different PR

Docs

N/A, plugins don't have anything to do, all the APIs work the same.

Copy link

changeset-bot bot commented Nov 14, 2023

🦋 Changeset detected

Latest commit: 6878f89

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Nov 14, 2023
Copy link
Contributor

github-actions bot commented Nov 14, 2023

⚖️ Bundle Size Check

Latest commit: 6878f89

File Old Size New Size Change
dev-overlay/entrypoint 52.81 KB 52.81 KB 0 B
dev-overlay/overlay 25.88 KB 25.88 KB 0 B
dev-overlay/plugins/settings 2.74 KB 2.74 KB 0 B
dev-overlay/settings 328 B 328 B 0 B
dev-overlay/ui-library/icons 15.05 KB 15.05 KB 0 B
dev-overlay/ui-library/toggle 1.28 KB 1.28 KB 0 B

@@ -20,6 +23,7 @@ export class AstroDevOverlay extends HTMLElement {
plugins: DevOverlayPlugin[] = [];
HOVER_DELAY = 750;
hasBeenInitialized = false;
customPluginsToShow = 3;
Copy link
Member Author

Choose a reason for hiding this comment

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

Currently, this is hardcoded. In the future, we plan to make it so it depends on the width of your screen. Unfortunately, this requires quite some refactoring in how the dev overlay UI is built to ensure compatibility with view transitions and stuff, so will tackle it later.

@github-actions github-actions bot added the pr: docs A PR that includes documentation for review label Nov 14, 2023
@Princesseuh Princesseuh merged commit 60e8210 into main Nov 15, 2023
2 checks passed
@Princesseuh Princesseuh deleted the feat/hide-too-many-plugins branch November 15, 2023 15:50
This was referenced Nov 15, 2023
peng added a commit to peng/astro that referenced this pull request Nov 17, 2023
* main:
  feat(i18n): add `Astro.currentLocale` (withastro#9101)
  [ci] release (withastro#9107)
  Add compatibility with cloudflare node (withastro#8925)
  [ci] format
  Cancel response stream when connection closes (withastro#9071)
  [ci] format
  feat(i18n): apply specific routing logic only to pages (withastro#9091)
  feat(dev-overlay): Hide plugins into a separate menu when there's too many enabled (withastro#9102)
  [ci] format
  Support Svelte 5 (experimental) (withastro#9098)
  [ci] release (withastro#9078)
  [ci] format
  Refactor shikiji syntax highlighting code (withastro#9083)
  [ci] format
  fix: Query params trigger the trailingSlash error in preview mode (withastro#9045)
  fix(assets): bundling regression for specific config on non-Node runtimes (withastro#9087)
natemoo-re pushed a commit that referenced this pull request Nov 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg: astro Related to the core `astro` package (scope) pr: docs A PR that includes documentation for review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants