onlook icon indicating copy to clipboard operation
onlook copied to clipboard

feat: adds window toolbarfor a selected window/modifying a window

Open Rudra-Sankha-Sinhamahapatra opened this issue 5 months ago • 4 comments

Description

Consolidated the Window controls into a toolbar that is visibile when a window is selected (outlined in Teal).

This means...

  1. Taking the left Window sidebar and turning it into a panel
  2. Removing the window controls from the panel (duplicate and delete) and putting them in the toolbar. Make sure to have tooltips!
  3. Activating the left sidepanel when the user clicks the "dimension" in the toolbar.
  4. Mapping the names to icons that make sense (iPhone / Phone sizes have a Mobile icon, Custom has an orientation (landscape / portrait) based on the orientation, etc.)

Related Issues

fixes #2128

Type of Change

  • [ ] Bug fix
  • [x] New feature
  • [ ] Documentation update
  • [ ] Release
  • [ ] Refactor
  • [ ] Other (please describe):

Testing

Screenshots (if applicable)

https://github.com/user-attachments/assets/aac8a915-3dbb-428a-b479-0d8e197d71a0

Additional Notes

I tried to make first 4 points happen ,and i made it.

also tried a lot to make the bonus points happen but unfortunately failed @drfarrell


[!IMPORTANT] Adds a new WindowToolbar for managing selected windows, consolidating controls and enhancing UI/UX in the editor.

  • Behavior:
    • Adds WindowToolbar to EditorBar for selected windows, consolidating window controls like duplicate and delete.
    • Updates Height and Width dropdowns to activate left panel on open.
    • Introduces WindowSelected component for detailed window actions and device selection.
  • Components:
    • Adds WindowToolbar in window-toolbar.tsx for window actions.
    • Adds WindowSelected in window-selected.tsx for device and theme selection.
    • Updates LeftPanel to handle new window tab behavior.
  • UI/UX:
    • Maps device names to icons in window-selected.tsx and frame-dimensions.tsx.
    • Adjusts styles in height.tsx and width.tsx for consistency.
  • Misc:
    • Fixes fill color in Tablet icon in icons/index.tsx.

This description was created by Ellipsis for 00c2ad47138fc837b18734ef047a2ded08b91444. You can customize this summary. It will automatically update as commits are pushed.

@Rudra-Sankha-Sinhamahapatra is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Jun 11 '25 05:06 vercel[bot]

@drfarrell I know you had designs for this. Can you add design feedback here?

Kitenite avatar Jun 11 '25 19:06 Kitenite

This is a partially implemented solution –

  1. The copy & delete functionality works well, thanks for that.
  2. This must be a standalone toolbar NOT attached to the original toolbar. This requires some better logic for handling when the window is selected vs. an element on the page. Screenshot 2025-06-11 at 3 57 58 PM
  3. This is missing the option to open up the window panel on the left side like the mockup requires: image
  4. The tooltips need to not have the arrows attached to them just like the other tooltips for toolbar elements.

Still needs quite a bit of work to call this a complete solution.

drfarrell avatar Jun 11 '25 22:06 drfarrell

Hii @drfarrell Thanks for the suggestion. I have pushed it. Can you check it once plaese cc: @Kitenite Screenshot 2025-06-12 at 8 01 55 AM Screenshot 2025-06-12 at 8 01 28 AM Screenshot 2025-06-12 at 8 01 10 AM