@@ -10,19 +10,115 @@ import { WeaveActionPropsChangeEvent } from "@inditextech/weave-sdk";
1010import { useIsTouchDevice } from "./use-is-touch-device" ;
1111import { ToggleGroup , ToggleGroupItem } from "@/components/ui/toggle-group" ;
1212import { RectangleHorizontal , RectangleVertical } from "lucide-react" ;
13+ import {
14+ DropdownMenu ,
15+ DropdownMenuContent ,
16+ DropdownMenuTrigger ,
17+ } from "@/components/ui/dropdown-menu" ;
18+ import { WEAVE_STORE_CONNECTION_STATUS } from "@inditextech/weave-types" ;
19+ import { cn } from "@/lib/utils" ;
20+ import { ToolbarButton } from "../toolbar/toolbar-button" ;
21+ import { ColorPickerInput } from "../inputs/color-picker" ;
22+ import { Button } from "@/components/ui/button" ;
1323
1424const AddFrameToast = ( ) => {
1525 const instance = useWeave ( ( state ) => state . instance ) ;
26+ const weaveConnectionStatus = useWeave ( ( state ) => state . connection . status ) ;
27+
1628 const [ frameKind , setFrameKind ] = React . useState < "horizontal" | "vertical" > (
1729 "horizontal"
1830 ) ;
31+ const [ selectBackgroundColor , setSelectBackgroundColor ] =
32+ React . useState ( false ) ;
33+ const [ backgroundColor , setBackgroundColor ] = React . useState ( "#ffffffff" ) ;
1934
2035 const isTouchDevice = useIsTouchDevice ( ) ;
2136
2237 return (
2338 < div className = "w-full flex flex-col gap-1 justify-between items-center" >
24- < div className = "w-full" > { `Select the frame orientation and then ${ isTouchDevice ? "tap" : "click" } } </ div >
25- < div className = "w-full flex gap-1 justify-end items-center pt-2" >
39+ < div className = "w-full" > { `Select the frame background color and orientation and finally ${ isTouchDevice ? "tap" : "click" } } </ div >
40+ < div className = "w-full flex flex-col gap-1 justify-end items-end pt-2" >
41+ < div className = "flex gap-1 justify-start items-center" >
42+ < div className = "text-[10px] font-inter uppercase px-3" > Color</ div >
43+ < DropdownMenu modal = { false } open = { selectBackgroundColor } >
44+ < DropdownMenuTrigger
45+ disabled = {
46+ weaveConnectionStatus !==
47+ WEAVE_STORE_CONNECTION_STATUS . CONNECTED
48+ }
49+ className = { cn (
50+ "relative rounded-full cursor-pointer h-[40px] hover:text-[#666666] focus:outline-none" ,
51+ {
52+ [ "disabled:cursor-default disabled:opacity-50" ] :
53+ weaveConnectionStatus !==
54+ WEAVE_STORE_CONNECTION_STATUS . CONNECTED ,
55+ }
56+ ) }
57+ asChild
58+ >
59+ < ToolbarButton
60+ className = "rounded-full min-w-[32px] !w-[32px] !h-[32px]"
61+ icon = {
62+ < div
63+ className = "border border-[#c9c9c9c] w-[16px] h-[16px]"
64+ style = { {
65+ background : backgroundColor ,
66+ } }
67+ />
68+ }
69+ disabled = {
70+ weaveConnectionStatus !==
71+ WEAVE_STORE_CONNECTION_STATUS . CONNECTED
72+ }
73+ active = { selectBackgroundColor }
74+ onClick = { ( e ) => {
75+ e . preventDefault ( ) ;
76+ setSelectBackgroundColor ( ( prev ) => ! prev ) ;
77+ } }
78+ label = {
79+ < div className = "flex gap-3 justify-start items-center" >
80+ < p > Background color</ p >
81+ </ div >
82+ }
83+ tooltipSide = "right"
84+ tooltipAlign = "center"
85+ />
86+ </ DropdownMenuTrigger >
87+ < DropdownMenuContent
88+ align = "end"
89+ side = "left"
90+ alignOffset = { 0 }
91+ sideOffset = { 8 }
92+ className = "min-w-auto font-inter rounded-none shadow-none flex flex-row !z-[1000000000]"
93+ >
94+ < div
95+ className = "flex !flex-col gap-0 w-[300px] p-4"
96+ onClick = { ( e ) => e . preventDefault ( ) }
97+ >
98+ < ColorPickerInput
99+ value = { backgroundColor }
100+ onChange = { ( color : string ) => {
101+ setBackgroundColor ( color ) ;
102+
103+ if ( ! instance ) return ;
104+
105+ instance . updatePropsAction ( "frameTool" , {
106+ frameBackground : color ,
107+ } ) ;
108+ } }
109+ />
110+ < Button
111+ onClick = { ( ) => {
112+ setSelectBackgroundColor ( false ) ;
113+ } }
114+ className = "cursor-pointer font-inter font-light rounded-none w-full"
115+ >
116+ CLOSE
117+ </ Button >
118+ </ div >
119+ </ DropdownMenuContent >
120+ </ DropdownMenu >
121+ </ div >
26122 < ToggleGroup
27123 variant = "outline"
28124 type = "single"
@@ -47,14 +143,14 @@ const AddFrameToast = () => {
47143 >
48144 < ToggleGroupItem
49145 value = "horizontal"
50- className = "font-inter font-light text-xs !px-5 pointer-cursor"
146+ className = "text-[10px] font-inter uppercase !px-5 pointer-cursor"
51147 aria-label = "Frame is horizontal"
52148 >
53149 Horizontal < RectangleHorizontal size = { 32 } strokeWidth = { 1 } />
54150 </ ToggleGroupItem >
55151 < ToggleGroupItem
56152 value = "vertical"
57- className = "font-inter font-light text-xs !px-5 pointer-cursor"
153+ className = "text-[10px] font-inter uppercase !px-5 pointer-cursor"
58154 aria-label = "Frame is vertical"
59155 >
60156 Vertical < RectangleVertical size = { 32 } strokeWidth = { 1 } />
@@ -474,6 +570,7 @@ export const useToolsEvents = () => {
474570 const handleFrameAdding = ( ) => {
475571 toast ( "Add a frame" , {
476572 description : AddFrameToast ,
573+
477574 duration : Infinity ,
478575 } ) ;
479576 } ;
0 commit comments