-
Notifications
You must be signed in to change notification settings - Fork 473
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #880 from abhiroopc84/feat/window-settings
Feat/window settings
- Loading branch information
Showing
9 changed files
with
312 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
68 changes: 68 additions & 0 deletions
68
apps/studio/src/routes/editor/EditPanel/WindowSettings/DeviceSettings.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { Button } from '@onlook/ui/button'; | ||
| import { Icons } from '@onlook/ui/icons/index'; | ||
| import { useState } from 'react'; | ||
|
|
||
| enum DeviceTheme { | ||
| Device = 'Device', | ||
| Dark = 'Dark', | ||
| Light = 'Light', | ||
| } | ||
|
|
||
| const DeviceSettings = () => { | ||
| const [deviceTheme, setDeviceTheme] = useState(DeviceTheme.Device); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-2"> | ||
| <p className="text-smallPlus text-foreground-primary">Device Settings</p> | ||
| <div className="flex flex-row justify-between items-center"> | ||
| <span className="text-xs text-foreground-secondary">Theme</span> | ||
| <div className="flex flex-row p-0.5 w-3/5 bg-background-secondary rounded"> | ||
| <Button | ||
| size={'icon'} | ||
| className={`h-full w-full px-0.5 py-1.5 bg-background-secondary rounded-sm ${ | ||
| deviceTheme === DeviceTheme.Device | ||
| ? 'bg-background-tertiary hover:bg-background-tertiary' | ||
| : 'hover:bg-background-tertiary/50 text-foreground-onlook' | ||
| }`} | ||
| variant={'ghost'} | ||
| onClick={() => | ||
| deviceTheme !== DeviceTheme.Device && setDeviceTheme(DeviceTheme.Device) | ||
| } | ||
| > | ||
| <Icons.Laptop /> | ||
| </Button> | ||
| <Button | ||
| size={'icon'} | ||
| className={`h-full w-full px-0.5 py-1.5 bg-background-secondary rounded-sm ${ | ||
| deviceTheme === DeviceTheme.Dark | ||
| ? 'bg-background-tertiary hover:bg-background-tertiary' | ||
| : 'hover:bg-background-tertiary/50 text-foreground-onlook' | ||
| }`} | ||
| variant={'ghost'} | ||
| onClick={() => | ||
| deviceTheme !== DeviceTheme.Dark && setDeviceTheme(DeviceTheme.Dark) | ||
| } | ||
| > | ||
| <Icons.Moon /> | ||
| </Button> | ||
| <Button | ||
| size={'icon'} | ||
| className={`h-full w-full px-0.5 py-1.5 bg-background-secondary rounded-sm ${ | ||
| deviceTheme === DeviceTheme.Light | ||
| ? 'bg-background-tertiary hover:bg-background-tertiary' | ||
| : 'hover:bg-background-tertiary/50 text-foreground-onlook' | ||
| }`} | ||
| variant={'ghost'} | ||
| onClick={() => | ||
| deviceTheme !== DeviceTheme.Light && setDeviceTheme(DeviceTheme.Light) | ||
| } | ||
| > | ||
| <Icons.Sun /> | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default DeviceSettings; |
145 changes: 145 additions & 0 deletions
145
apps/studio/src/routes/editor/EditPanel/WindowSettings/FrameDimensions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,145 @@ | ||
| import { Button } from '@onlook/ui/button'; | ||
| import { Icons } from '@onlook/ui/icons/index'; | ||
| import { Input } from '@onlook/ui/input'; | ||
| import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@onlook/ui/select'; | ||
| import { useState } from 'react'; | ||
|
|
||
| const deviceOptions = [ | ||
| 'iPhone SE', | ||
| 'iPhone 12', | ||
| 'iPhone 12 Pro', | ||
| 'iPhone 12 Pro Max', | ||
| 'iPhone 11', | ||
| 'iPhone 11 Pro', | ||
| 'iPhone 11 Pro Max', | ||
| 'Google Pixel 5', | ||
| 'Google Pixel 4a', | ||
| 'Samsung Galaxy S21', | ||
| 'Samsung Galaxy S21+', | ||
| 'Samsung Galaxy S21 Ultra', | ||
| 'Samsung Galaxy Note 20', | ||
| 'Samsung Galaxy Note 20 Ultra', | ||
| 'OnePlus 9', | ||
| 'OnePlus 9 Pro', | ||
| ]; | ||
|
|
||
| enum Orientation { | ||
| Potrait = 'Potrait', | ||
| Landscape = 'Landscape', | ||
| } | ||
|
|
||
| const FrameDimensions = () => { | ||
| const [device, setDevice] = useState('iPhone SE'); | ||
| const [orientation, setOrientation] = useState(Orientation.Potrait); | ||
| const [width, setWidth] = useState('375px'); | ||
| const [height, setHeight] = useState('667px'); | ||
| const [responsive, setResponsive] = useState('Closest Size'); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-2"> | ||
| <p className="text-smallPlus text-foreground-primary">Frame Dimensions</p> | ||
| <div className="flex flex-row justify-between items-center"> | ||
| <span className="text-xs text-foreground-secondary">Device</span> | ||
| <Select value={device} onValueChange={setDevice}> | ||
| <SelectTrigger className="w-3/5 bg-background-secondary border-background-secondary py-1.5 px-2 h-fit text-xs rounded focus:outline-none focus:ring-0"> | ||
| <SelectValue placeholder="Select device" /> | ||
| </SelectTrigger> | ||
| <SelectContent className="rounded-md bg-background-secondary"> | ||
| {deviceOptions.map((deviceName) => ( | ||
| <SelectItem | ||
| key={deviceName} | ||
| value={deviceName} | ||
| className="focus:bg-background-tertiary rounded-md text-xs cursor-pointer" | ||
| > | ||
| {deviceName} | ||
| </SelectItem> | ||
| ))} | ||
| </SelectContent> | ||
| </Select> | ||
| </div> | ||
| <div className="flex flex-row justify-between items-center"> | ||
| <span className="text-xs text-foreground-secondary">Orientation</span> | ||
| <div className="flex flex-row p-0.5 w-3/5 bg-background-secondary rounded"> | ||
| <Button | ||
| size={'icon'} | ||
| className={`h-full w-full px-0.5 py-1.5 bg-background-secondary rounded-sm ${orientation === Orientation.Potrait ? 'bg-background-tertiary hover:bg-background-tertiary' : 'hover:bg-background-tertiary/50'}`} | ||
| variant={'ghost'} | ||
| onClick={() => | ||
| orientation === Orientation.Landscape && | ||
| setOrientation(Orientation.Potrait) | ||
| } | ||
| > | ||
| <Icons.Potrait | ||
| className={`h-4 w-4 ${orientation !== Orientation.Potrait ? 'text-foreground-secondary hover:text-foreground-onlook' : ''}`} | ||
| /> | ||
| </Button> | ||
| <Button | ||
| size={'icon'} | ||
| className={`h-full w-full px-0.5 py-1.5 bg-background-secondary rounded-sm ${orientation === 'Landscape' ? 'bg-background-tertiary hover:bg-background-tertiary' : 'hover:bg-background-tertiary/50'}`} | ||
| variant={'ghost'} | ||
| onClick={() => | ||
| orientation === Orientation.Potrait && | ||
| setOrientation(Orientation.Landscape) | ||
| } | ||
| > | ||
| <Icons.Landscape | ||
| className={`h-4 w-4 ${orientation !== Orientation.Landscape ? 'text-foreground-secondary hover:text-foreground-onlook' : ''}`} | ||
| /> | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-row justify-between items-center"> | ||
| <span className="text-xs text-foreground-secondary">Width</span> | ||
| <div className="relative w-3/5"> | ||
| <Input | ||
| className="w-full px-2 h-8 text-xs rounded border-none text-foreground-active bg-background-secondary text-start focus:outline-none focus:ring-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" | ||
| value={width} | ||
| onChange={(event) => setWidth(event.target.value)} | ||
| /> | ||
| <Button | ||
| size={'icon'} | ||
| className="p-0 h-fit w-fit absolute right-2 top-1/2 transform -translate-y-1/2" | ||
| variant={'ghost'} | ||
| > | ||
| <Icons.Link className="text-foreground-secondary" /> | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-row justify-between items-center"> | ||
| <span className="text-xs text-foreground-secondary">Height</span> | ||
| <div className="relative w-3/5"> | ||
| <Input | ||
| className="w-full px-2 h-8 text-xs rounded border-none text-foreground-active bg-background-secondary text-start focus:outline-none focus:ring-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" | ||
| value={height} | ||
| onChange={(event) => setHeight(event.target.value)} | ||
| /> | ||
| <Button | ||
| size={'icon'} | ||
| className="p-0 h-fit w-fit absolute right-2 top-1/2 transform -translate-y-1/2" | ||
| variant={'ghost'} | ||
| > | ||
| <Icons.Link className="text-foreground-secondary" /> | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-row justify-between items-center"> | ||
| <span className="text-xs text-foreground-secondary">Responsive</span> | ||
| <Select value={responsive} onValueChange={setResponsive}> | ||
| <SelectTrigger className="w-3/5 rounded bg-background-secondary border-background-secondary px-2 h-8 text-xs"> | ||
| <SelectValue placeholder="Select size" defaultValue={'Closest Size'} /> | ||
| </SelectTrigger> | ||
| <SelectContent className="rounded-md bg-background-secondary"> | ||
| <SelectItem | ||
| value="Closest Size" | ||
| className="focus:bg-background-tertiary rounded-md text-xs cursor-pointer" | ||
| > | ||
| Closest Size | ||
| </SelectItem> | ||
| </SelectContent> | ||
| </Select> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default FrameDimensions; |
49 changes: 49 additions & 0 deletions
49
apps/studio/src/routes/editor/EditPanel/WindowSettings/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { Button } from '@onlook/ui/button'; | ||
| import { Icons } from '@onlook/ui/icons/index'; | ||
| import { Separator } from '@onlook/ui/separator'; | ||
| import FrameDimensions from './FrameDimensions'; | ||
| import DeviceSettings from './DeviceSettings'; | ||
|
|
||
| const WindowSettings = ({ setIsOpen }: { setIsOpen: (isOpen: boolean) => void }) => { | ||
| return ( | ||
| <div className="flex flex-col"> | ||
| <div className="rounded-lg p-1 text-muted-foreground bg-transparent w-full gap-2 select-none justify-between items-center h-full px-2"> | ||
| <div className="flex flex-row items-center gap-2"> | ||
| <button | ||
| className="text-default rounded-lg p-2 bg-transparent hover:text-foreground-hover" | ||
| onClick={() => setIsOpen(false)} | ||
| > | ||
| <Icons.PinRight /> | ||
| </button> | ||
| <div className="bg-transparent py-2 px-1 text-xs text-foreground-primary"> | ||
| Window | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <Separator /> | ||
| <div className="flex flex-col gap-3 px-3 py-2"> | ||
| <div className="flex flex-row gap-1"> | ||
| <Button | ||
| variant={'outline'} | ||
| className="h-fit py-1.5 px-2.5 text-foreground-tertiary w-full items-center" | ||
| > | ||
| <Icons.Copy className="mr-2" /> | ||
| <span className="text-xs">Duplicate</span> | ||
| </Button> | ||
| <Button | ||
| variant={'outline'} | ||
| className="h-fit py-1.5 px-2.5 text-foreground-tertiary w-full items-center" | ||
| > | ||
| <Icons.Trash className="mr-2" /> | ||
| <span className="text-xs">Delete</span> | ||
| </Button> | ||
| </div> | ||
| <FrameDimensions /> | ||
| <Separator /> | ||
| <DeviceSettings /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default WindowSettings; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters