📎 Tiling Views

[NicholasLYang]

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.

[andreyvolfman]

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!

[ematipico]

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?

[andreyvolfman]

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.

[MichaReiser]

@andreyvolfman that looks awesome!

[andreyvolfman]

Great, thanks!
@MichaReiser can I solve this issue?:)

[MichaReiser]

Great, thanks!

@MichaReiser can I solve this issue?:)

Sure! I'll assign the issue to you

[NicholasLYang]

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:

[github-actions]

This issue is stale because it has been open 14 days with no activity.

[ematipico]

@andreyvolfman this issue was assigned to you but it seems there haven't been progresses. Are you still interested?

[github-actions]

This issue is stale because it has been open 14 days with no activity.

[github-actions]

This issue is stale because it has been open 14 days with no activity.

[dhrjarun]

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)

[MichaReiser]

@dhrjarun sure. These look great!