onlook
onlook copied to clipboard
feat: adds window toolbarfor a selected window/modifying a window
Description
Consolidated the Window controls into a toolbar that is visibile when a window is selected (outlined in Teal).
This means...
- Taking the left Window sidebar and turning it into a panel
- Removing the window controls from the panel (duplicate and delete) and putting them in the toolbar. Make sure to have tooltips!
- Activating the left sidepanel when the user clicks the "dimension" in the toolbar.
- 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
WindowToolbarfor managing selected windows, consolidating controls and enhancing UI/UX in the editor.
- Behavior:
- Adds
WindowToolbartoEditorBarfor selected windows, consolidating window controls like duplicate and delete.- Updates
HeightandWidthdropdowns to activate left panel on open.- Introduces
WindowSelectedcomponent for detailed window actions and device selection.- Components:
- Adds
WindowToolbarinwindow-toolbar.tsxfor window actions.- Adds
WindowSelectedinwindow-selected.tsxfor device and theme selection.- Updates
LeftPanelto handle new window tab behavior.- UI/UX:
- Maps device names to icons in
window-selected.tsxandframe-dimensions.tsx.- Adjusts styles in
height.tsxandwidth.tsxfor consistency.- Misc:
- Fixes fill color in
Tableticon inicons/index.tsx.This description was created by
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.
@drfarrell I know you had designs for this. Can you add design feedback here?
This is a partially implemented solution –
- The copy & delete functionality works well, thanks for that.
- 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.
- This is missing the option to open up the window panel on the left side like the mockup requires:
- 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.
Hii @drfarrell Thanks for the suggestion. I have pushed it. Can you check it once plaese
cc: @Kitenite