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

Implement new main menu and responsivity logic #985

Conversation

ArturoManzoli
Copy link
Contributor

@ArturoManzoli ArturoManzoli commented Jun 4, 2024

  • Main menu, glass version - already with the modifications from cockpit meeting in 06/03/24;
  • Responsivity logic using Tailwind breakpoints and Pinia store;
  • Configuration menu items added;

Running on different device screen resolutions:
image
image

image
image

Closes #968

@rafaellehmkuhl
Copy link
Member

This looks nice! Will start the reviewing right up on!

@ArturoManzoli ArturoManzoli force-pushed the 968-Implement-new-UI-Main-Menu branch from 093455d to f0d50be Compare June 5, 2024 13:22
src/App.vue Outdated Show resolved Hide resolved
Copy link
Member

@rafaellehmkuhl rafaellehmkuhl left a comment

Choose a reason for hiding this comment

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

When clicking the button with the menu open, it's reopening, instead of closing:

Kapture.2024-06-05.at.14.33.15.mp4

The configuration menus are not opening:

Kapture.2024-06-05.at.14.35.16.mp4

I also feel like there should be some transition in the opening/closing of this side menu. It's just appearing and disappearing as of now.

@ArturoManzoli ArturoManzoli force-pushed the 968-Implement-new-UI-Main-Menu branch 2 times, most recently from 393f33c to eb7dd93 Compare June 6, 2024 12:57
Copy link
Member

@rafaellehmkuhl rafaellehmkuhl left a comment

Choose a reason for hiding this comment

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

The toggling and the transition are now working perfectly! And this new menu is beautiful!

The problem of not being able to click on the configuration submenus persist, thought, and I noticed the menu buttons are not aligned with their circle:

image

@ArturoManzoli ArturoManzoli force-pushed the 968-Implement-new-UI-Main-Menu branch from eb7dd93 to ed196e4 Compare June 7, 2024 17:42
@ArturoManzoli
Copy link
Contributor Author

The misalignment of the icons wasn't present on the browser used during development. It is probably Mac-related. Anyway, I refactored the centering logic, and it should now be centered on all Chrome browsers. Please retest it.

Regarding the configuration menu items not being clickable, this is normal for now. Only the menu has been implemented so far. The configuration screens are being implemented in different tasks.

@rafaellehmkuhl
Copy link
Member

Regarding the configuration menu items not being clickable, this is normal for now. Only the menu has been implemented so far. The configuration screens are being implemented in different tasks.

Got it!
In this case, can you open a new branch (e.g.: "interface-rework"), and configure those interface pull requests to be merged to this branch, and not to master? This way we don't have to hold the approval/merge of the PRs because of this type of situation. Otherwise we will get to a situation close to the one we had during the video-recorder/video-lib-modal implementation, were we couldn't release new beta versions of Cockpit till everything was merged, because we merged a pull request that left some things open for the next one.

@ArturoManzoli ArturoManzoli changed the base branch from master to interface-rework June 7, 2024 19:43
@ArturoManzoli ArturoManzoli merged commit 6ac3058 into bluerobotics:interface-rework Jun 7, 2024
8 checks passed
@ArturoManzoli ArturoManzoli deleted the 968-Implement-new-UI-Main-Menu branch July 10, 2024 12:17
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.

Implement new UI from mockups: Main Menu
2 participants