ladle icon indicating copy to clipboard operation
ladle copied to clipboard

[PROPOSAL]: New layout

Open vinpac opened this issue 3 years ago • 6 comments

Hey 👋

I love Ladle already. Its focus on performance is something I always wanted to see in Storybook. So, I wanna help it give a step forward to have a UI that matches its awesome engineering layers.

Here's is the design I made:

Light Light

Dark Dark

Here are the steps I imagined for this project:

  • [x] Design the new UI
  • [x] Collect feedbacks
  • [x] Implement changes on the design after feedback
  • [x] Start PR with the new layout
  • [ ] Finish first version of PR
  • [ ] Get the PR Reviewed
  • [ ] Implement requested changes
  • [ ] Get the PR merged

If this layout is not what you expect, please, feel free to express your feelings. Thanks for the attetion.

UPDATE The PR is now open #101 as a draft

vinpac avatar Mar 27 '22 23:03 vinpac

I think I've seen this somewhere 😂 Love it!

wojtekmaj avatar Mar 28 '22 12:03 wojtekmaj

Love it, can we add a place for brand, and layout for mobile/tablet

nihgwu avatar Mar 28 '22 14:03 nihgwu

Seeing @wojtekmaj, I think Ladle deserves a more original look. It's not much, but I did a little tweak. Here's my take on mobile view too:

  • I'm doing it all grey so I make sure the contrast is good for colorblindness. My plan is to make it easy to control colors. Probably through css variables.

Light

13 Pro - 1

13 Pro - 2

vinpac avatar Mar 28 '22 15:03 vinpac

Looks nice! I like the second version more since there is a more straightforward connection between the addon button and addon panel itself. Also, I would make the elements and text a bit bigger.

Some other notes:

  1. It would be nice if the theme could be just an alternate swappable CSS (configurable through the config). So we can have multiple options, including the current one. We can reorganize the current layout's HTML if needed.
  2. It needs to be responsive. So any theme should capture mobile, desktop, light and dark versions.

tajo avatar Mar 28 '22 18:03 tajo

Sure @tajo. Thanks for the feedback. I will draft the PR implementing it

vinpac avatar Mar 28 '22 18:03 vinpac

I also like the second one with the status bar, I think that's really great.

Can we take this top-level section heading UI from storybook? Looking at the designs in this thread it seems like the intent and a popular organizational approach is to have meta sections like "atoms" "molecules", etc. Having those as folders (especially that are collapsed by default) makes it hard to locate and discover components.

image

hennessyevan avatar Apr 12 '22 14:04 hennessyevan