tools
tools copied to clipboard
📎 Tiling Views
Description
There are some views I'd like to see at the same time, such as Rome IR and Prettier IR. Currently we're using tabs as our abstraction for navigating views, but it might be better to use tiles. Tiles allow multiple views to be available at once, and allows us to resize views that may not need to take up a lot of space.
Hello! I have a proposal how to implement this feature. I created several drafts. If you have any suggestions how to improve this mockups please let me know. If everything is okay I will take this issue and send PR.
I suppose for mobile devices this solution is not suitable. We can create <MobileSettingsMenu> and <DesktopSettingsMenu> components. Does it sound good?
Thanks!
![Screenshot 2022-06-03 at 10 44 12 AM](https://user-images.githubusercontent.com/36608344/171812644-6d6e987b-51f9-4c30-99bd-b7a0224c47c9.png)
![Screenshot 2022-06-03 at 10 48 08 AM](https://user-images.githubusercontent.com/36608344/171812679-a4a554c7-7fbb-4ea0-865c-0e3eee7b2a77.png)
![Screenshot 2022-06-03 at 10 41 42 AM](https://user-images.githubusercontent.com/36608344/171812714-5d9406cf-86dc-434f-b2f3-206f28c089ce.png)
Hello! I have a proposal how to implement this feature. I created several drafts. If you have any suggestions how to improve this mockups please let me know. If everything is okay I will take this issue and send PR.
I suppose for mobile devices this solution is not suitable. We can create and components. Does it sound good?
Thanks!
![]()
![]()
![]()
Probably, we might want some view to be fixed, like Rome output for example (same as prettier's playground). How would that appear on mobile?
Updated drafts and mobile layout:
1. Desktop appearance
By default Input
, Rome output
and Prettier output
tiles are enabled.
2. Middle appearance (responsive layout from desktop to mobile resolution) If element doesn't have enough space it will breaks to the next line.
3. Mobile appearance Settings panel extended with checkboxes.
Default state (Input
tile is enabled):
If press Settings button It will open settings panel.
Select checkboxes with tiles and press Settings
button again.
Choosed tiles will be added to playground.
@andreyvolfman that looks awesome!
Great, thanks! @MichaReiser can I solve this issue?:)
Great, thanks!
@MichaReiser can I solve this issue?:)
Sure! I'll assign the issue to you
I like this idea! Some feedback:
- I don't think we need a toggle for input.
- To reduce visual clutter, we could group the Rome outputs and Prettier outputs
- Instead of check boxes we could try using buttons that you can click and highlight
I did a quick mockup in Figma:
This issue is stale because it has been open 14 days with no activity.
@andreyvolfman this issue was assigned to you but it seems there haven't been progresses. Are you still interested?
This issue is stale because it has been open 14 days with no activity.
This issue is stale because it has been open 14 days with no activity.
Hi, @MichaReiser if nobody is working on this can I work on this? I've created some layouts on figma https://www.figma.com/file/ZMJ4mENMTr3ISy6Y9F9GgP/Rome?node-id=0%3A1
Rome IR and Prettier IR grouped
Resizable Playground with Settings
Resizable Playground (Settings hidden)
Resizable Playground mob (Only Settting)
Resizable Playground mob (Settings hidden)
@DhrjArun sure. These look great!