chore(website): create new playground layout #1628
Conversation
devilkiller-ag
requested review from
magicmatatjahu,
jonaslagoni,
kennethaasan and
asyncapi-bot-eve
as code owners
✅ Deploy Preview for modelina ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
|
Hi @jonaslagoni @codingmickey, I was trying to use React Split Pane for the section which will show input, output, and the output navigation. But it seems that it haven't been updated since last three years and doesn't support React v18. I found this new react-split-pane implementation by Jeremy Grieshop which supports React v17 and above. It's also been used in the AsyncAPI Studio. Can I use this instead? The problem is that it isn't available as package so I will have to copy paste whole repo as a component as also done in the studio. |
|
@devilkiller-ag I would say no, dont use a tool that has no users 🙂 Then its better to have no split pane functionality. |
|
Hi @jonaslagoni, I agree with you. For now I have used the code for the split pane from Async API Studio Codebase. But if you want I can try to implement it from scratch for our playground. What's your opinion? |
You can select the direction you want to take, there is no requirement here 🙂 We don't have split panel right now anyway, so it can be added later if desired 👌 Then all you need to focus on is the basic layout, making it easier to achieve. |
Okay Sure, I will go with the basic layout for now 🙂 |
|
I have added the mobile responsive layout without split-pane. Now I will add the Editor, Options, and Output UI. |
|
@jonaslagoni The work is complete! Kindly check it out. |
Pull Request Test Coverage Report for Build 7161607198
💛 - Coveralls |
There was a problem hiding this comment.
Looking great! Got some minor comments 🔥
Here is what I see and what I base the comments on:
- All the views need to be aligned in height
- The
?symbol would look better if it blends better with the black background - I would add more margins to the menu item, as they are too close to the panel to the right.
- The view with the
generator codeand generated models, it's hard to see thatgenerator codecan be clicked - We should make it more easier to see which output model is being selected.
- In the generator options view, for example if you select
kotlinthe panel gets scrollable 🤔 Is there a better way to show long options?
|
Hi @jonaslagoni, I have incorporated all the suggestions. Kindly check it out. |
There was a problem hiding this comment.
You are fast @devilkiller-ag, only got very few remarks. I think this is the final changes needed, checked all the code and it looks great, only got those small points 💪 Cant wait to merge this 🔥
Think we can change the width of the sidebar menu to 50:
modelina-website/src/components/playground/options/GeneralOptions.tsx
Outdated
Show resolved
Hide resolved
|
Once we merge this I would love to offer you code ownership of the Let me know if you have any questions about it 👍 |
jonaslagoni
changed the title
|
Hi @jonaslagoni, I have made all the changes you suggested, additionally, I have changed the Tooltip color and padding to make it visible. Thanks for offering me the code ownership of the |
|
Kudos, SonarCloud Quality Gate passed!
|
Perfect 👍
Sounds good, feel free to create an issue for it to track it 🙂 |
|
/rtm |
|
@all-contributors please add @devilkiller-ag for code, design |
|
I've put up a pull request to add @devilkiller-ag! 🎉 |
|
🎉 This PR is included in version 2.0.10 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 3.0.0-next.8 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Description
This is a draft PR for building a new layout of Modelina Playground. The new layout will be similar to the layout of Async API Studio. The first step will be to create a new layout and then I will be working on the logic. I have created a temporary component file
NewPlayground.tsxto build the new layout. We will replace the old components with the new ones once the layout is ready.Related issue(s)
Resolves #1346