tools icon indicating copy to clipboard operation
tools copied to clipboard

📎 Tiling Views

Open NicholasLYang opened this issue 2 years ago • 10 comments

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.

NicholasLYang avatar May 26 '22 00:05 NicholasLYang

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 Screenshot 2022-06-03 at 10 48 08 AM Screenshot 2022-06-03 at 10 41 42 AM

andreyvolfman avatar Jun 03 '22 07:06 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!

Screenshot 2022-06-03 at 10 44 12 AM Screenshot 2022-06-03 at 10 48 08 AM Screenshot 2022-06-03 at 10 41 42 AM

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?

ematipico avatar Jun 03 '22 17:06 ematipico

Updated drafts and mobile layout:

1. Desktop appearance By default Input, Rome output and Prettier output tiles are enabled.

Desktop

2. Middle appearance (responsive layout from desktop to mobile resolution) If element doesn't have enough space it will breaks to the next line.

Tablet

3. Mobile appearance Settings panel extended with checkboxes.

Default state (Input tile is enabled):

Mobile_1

If press Settings button It will open settings panel.

Mobile_2

Select checkboxes with tiles and press Settings button again.

Mobile_3

Choosed tiles will be added to playground.

Mobile_4

andreyvolfman avatar Jun 03 '22 20:06 andreyvolfman

@andreyvolfman that looks awesome!

MichaReiser avatar Jun 06 '22 12:06 MichaReiser

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

andreyvolfman avatar Jun 06 '22 13:06 andreyvolfman

Great, thanks!

@MichaReiser can I solve this issue?:)

Sure! I'll assign the issue to you

MichaReiser avatar Jun 06 '22 14:06 MichaReiser

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: Screen Shot 2022-06-06 at 7 40 52 PM

NicholasLYang avatar Jun 06 '22 23:06 NicholasLYang

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

github-actions[bot] avatar Sep 16 '22 12:09 github-actions[bot]

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

ematipico avatar Sep 16 '22 13:09 ematipico

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

github-actions[bot] avatar Oct 06 '22 12:10 github-actions[bot]

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

github-actions[bot] avatar Oct 21 '22 12:10 github-actions[bot]

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

Image

Resizable Playground with Settings

Image

Resizable Playground (Settings hidden)

Image

Resizable Playground mob (Only Settting)

Image

Resizable Playground mob (Settings hidden)

Image

dhrjarun avatar Nov 02 '22 08:11 dhrjarun

@DhrjArun sure. These look great!

MichaReiser avatar Nov 02 '22 08:11 MichaReiser