끄적.log/〰️

[Fuse X] Componets

_2J 2020. 6. 18. 21:45

Addpage.ux

<Panel ux:Class="AddPage" >
	<Router ux:Dependency="router" />
	<Panel Width="42" Height="42" Alignment="TopLeft" Margin="15" Clicked="{gotoSelect}">
		<DockPanel>
			<StackPanel Margin="0,9,0,0">
			    <Rectangle Width="2" Height="15" Color="#fff" X="18" >
			        <Rotation Degrees="45"/>
			    </Rectangle>
			    <Rectangle Width="2" Height="15" Color="#fff" X="18" Y="-5" >
			        <Rotation Degrees="135"/>
			    </Rectangle>
			</StackPanel>
			<Circle Color="main" />
		</DockPanel>			
	</Panel>
	<StackPanel Orientation="Horizontal" >
		<Rectangle Color="Black" Width="150" Height="100" X="10" Y="550" Opacity="0" Clicked="{gotoSelect}"/>
		<Rectangle Color="Black" Width="150" Height="100" X="50" Y="550" Opacity="0" Clicked="{gotoGameSelect}"/>
	</StackPanel>
	<Image File="../Assets/screen1.png" Y="-1"/>
</Panel>

 

 

 

 

CookMenu.ux

<Panel ux:Class="CookMenu">

	<DockPanel Background="#fff" Height="50">
		<StackPanel Orientation="Horizontal" Margin="45,0,0,0" ItemSpacing="65">
			<Icon.Home Width="20" Height="20" Color="#fff" IconColor="sub" Clicked="{gotoLogin}" /> 
			<Icon.Map Width="20" Height="20" Color="#fff" IconColor="sub" Clicked="{gotoMap}"/>
			<Icon.COOKEATList Width="20" Height="20" Color="#fff" IconColor="main" Clicked="{gotoList}"/>
			<Icon.User Width="20" Height="20" Color="#fff" IconColor="sub" Clicked="{gotoUser}"/>
		</StackPanel>
	</DockPanel>
</Panel>

 

 

 

 

 

Direction.ux

<Panel ux:Class="Direction">
    <Rectangle Width="2" Height="10" Color="color3" X="120" Y="94" >
        <Rotation Degrees="35"/>
    </Rectangle>
    <Rectangle Width="2" Height="10" Color="color3" X="120" Y="102" >
        <Rotation Degrees="145"/>
    </Rectangle>

    <Rectangle Width="2" Height="13" Color="color2" X="114" Y="91" >
        <Rotation Degrees="35"/>
    </Rectangle>
    <Rectangle Width="2" Height="13" Color="color2" X="114" Y="101" >
        <Rotation Degrees="145"/>
    </Rectangle>

    <Rectangle Width="2" Height="15" Color="color1" X="108" Y="89" >
        <Rotation Degrees="35"/>
    </Rectangle>
    <Rectangle Width="2" Height="15" Color="color1" X="108" Y="101">
        <Rotation Degrees="145"/>
    </Rectangle>


    <Rectangle Width="2" Height="10" Color="color3" X="226" Y="94">
        <Rotation Degrees="145"/>
    </Rectangle>
    <Rectangle Width="2" Height="10" Color="color3" X="226" Y="102">
        <Rotation Degrees="35"/>
    </Rectangle>

    <Rectangle Width="2" Height="13" Color="color2" X="232" Y="91">
        <Rotation Degrees="145"/>
    </Rectangle>
    <Rectangle Width="2" Height="13" Color="color2" X="232" Y="101">
        <Rotation Degrees="35"/>
    </Rectangle>

    <Rectangle Width="2" Height="15" Color="color1" X="238" Y="89">
        <Rotation Degrees="145"/>
    </Rectangle>
    <Rectangle Width="2" Height="15" Color="color1" X="238" Y="101">
        <Rotation Degrees="35"/>
    </Rectangle>
</Panel>

 

 

 

 

 

DragToggle.ux

<Panel ux:Class="DragToggle">
    <JavaScript>
        var isPressed = false;
        
        exports.onPressed = function ()
        {
            isPressed = true;
        }
        exports.onMoved = function ()
        {
            isPressed = false;
        }
        exports.onReleased = function ()
        {
            if(isPressed)
            {
                debug_log("Clicked");
                isPressed = false;
            }
        }
    </JavaScript>
	
	
	<Rectangle Width="100" Color="#000" Alignment="Left" Clicked="{gotoSelect}" Opacity="0" />

	<Rectangle Width="100" Color="#000" Alignment="Right" Clicked="{gotoQuestion}" Opacity="0" />

    

    

    <Button Physics.IsPhysicsWorld="True" >
        <Circle Width="70" Color="main" >
            <Draggable Axis="X" />
        </Circle>
        <PointAttractor Radius="300" Strength="250" Exclusive="True" Offset="0,0,0"/>
        <PointAttractor Radius="300" Strength="250" Exclusive="True" Offset="-120,0,0"/>
        <PointAttractor Radius="300" Strength="250" Exclusive="True" Offset="120,0,0"/>
    </Button>
    <Circle Width="80" Color="#fff">
        <DropShadow Distance="1" Spread="0.3" Size="15" Color="#00000018" Angle="90" />
    </Circle>
    <Direction />
    <Image File="../Assets/left.png" Alignment="Left" Width="50" Height="50" Margin="25,0,0,0" Opacity="0.15"/>
    <Image File="../Assets/right.png" Alignment="Right" Width="50" Height="50" Margin="0,0,25,0" Opacity="0.1"/>
    <Image File="../Assets/right.png" Alignment="Right" Width="51" Height="51" Margin="0,0,25,0" Opacity="0.1"/>
    <Image File="../Assets/right.png" Alignment="Right" Width="49" Height="49" Margin="0,0,26,0" Opacity="0.1"/>
</Panel>

 

 

 

 

 

FooterMenu.ux

<Panel ux:Class="FooterMenu">

	<DockPanel Background="#fff" Height="50">
		<StackPanel Orientation="Horizontal" Margin="45,0,0,0" ItemSpacing="65">
			<Icon.Home Width="20" Height="20" Color="#fff" IconColor="main" Clicked="{gotoLogin}" /> 
			<Icon.Map Width="20" Height="20" Color="#fff" IconColor="sub" Clicked="{gotoMap}" />
			<Icon.COOKEATList Width="20" Height="20" Color="#fff" IconColor="sub" Clicked="{gotoList}"/>
			<Icon.User Width="20" Height="20" Color="#fff" IconColor="sub" Clicked="{gotoUser}"/>
		</StackPanel>
	</DockPanel>
</Panel>

 

 

 

 

 

GooeySlider.ux

<DockPanel ux:Class="GooeySlider">
    <float ux:Property="SliderHeight" />
    <string ux:Property="Label" />
    <float ux:Property="Min" />
    <float ux:Property="Max" />
    <float4 ux:Property="TintColor" />
    <float4 ux:Property="FaceColor" />
    <object ux:Property="Val" />

    <DockPanel Dock="Bottom" Height="{ReadProperty SliderHeight}">
        <Panel Dock="Left" Width="60">
            <Text Value="{ReadProperty Min}" Alignment="Center" TextColor="{ReadProperty FaceColor}" />
            <Rectangle Width="1" Color="{ReadProperty FaceColor}" Alignment="Right" Margin="0,8" />
        </Panel>
        <Panel Dock="Right" Width="60">
            <Text Value="{ReadProperty Max}" Alignment="Center" TextColor="{ReadProperty FaceColor}" />
            <Rectangle Width="1" Color="{ReadProperty FaceColor}" Alignment="Left" Margin="0,8" />
        </Panel>

        <RangeControl ux:Name="range" Value="{Property Val}" Minimum="{ReadProperty Min}" Maximum="{ReadProperty Max}" UserStep="10" Margin="{ReadProperty SliderHeight}/2,0">
            <LinearRangeBehavior />

            <Circle ux:Name="handle" Width="{ReadProperty SliderHeight}" Alignment="Left" Anchor="50%,50%" X="attract({Property range.RelativeValue}, RangeSnap) * 100%">
                <Text Value="{= round({ReadProperty range.Value})}" FontSize="13" Alignment="Center" TextColor="{ReadProperty TintColor}" />
                <Circle Margin="8" Color="{ReadProperty FaceColor}" />
                <Circle Margin="4" Color="{ReadProperty TintColor}" />
                <Curve Color="{ReadProperty TintColor}" Close="Auto">
                    <CurvePoint ux:Name="t1" At="-0.5,1" TangentIn="0,0" TangentOut="1,0" />
                    <CurvePoint ux:Name="t2" At="0.1,0.5" TangentIn="0,-0.5" TangentOut="0,0" />
                    <CurvePoint ux:Name="t3" At="0.9,0.5" TangentIn="0,0" TangentOut="0,0.5" />
                    <CurvePoint ux:Name="t4" At="1.5,1" TangentIn="1,0" TangentOut="0,0" />
                </Curve>
            </Circle>

            <WhilePressed>
                <Move Target="handle" Y="-1" RelativeTo="ParentSize"
                    Duration="0.24" Easing="CircularOut"
                    DelayBack="0" EasingBack="ExponentialOut" />
                <Change t2.TangentIn="-1,-2"
                    Duration="0.92" Delay="0.16" Easing="ElasticOut"
                    DurationBack="0.24" EasingBack="Linear" />
                <Change t3.TangentOut="-1,2"
                    Duration="0.92" Delay="0.16" Easing="ElasticOut"
                    DurationBack="0.24" EasingBack="Linear" />
                <Change label.Opacity="0" Duration="0.16" DelayBack="0.16" />
            </WhilePressed>

        </RangeControl>

        <Rectangle Layer="Background" CornerRadius="4" Color="{ReadProperty TintColor}" />
    </DockPanel>

    <Text ux:Name="label" Value="{ReadProperty Label}" Color="{ReadProperty TintColor}" Width="width(this)"
        TextWrapping="Wrap" Alignment="Center" TextAlignment="Center" Margin="8" />

</DockPanel>

 

 

 

 

 

Hamburger.ux

<Panel ux:Class="Hamburger" Width="42" Height="42" Alignment="TopLeft" Margin="15" IsEnabled="false">
	<DockPanel>
		<StackPanel Margin="0,9,0,0">
			<Rectangle Width="30%" Height="1" Color="#fff" Margin="0,5,0,0"/>
			<Rectangle Width="50%" Height="1" Color="#fff" Margin="0,5,0,0"/>
			<Rectangle Width="30%" Height="1" Color="#fff" Margin="0,5,0,0"/>
		</StackPanel>
		<Circle Color="main" />
	</DockPanel>			
</Panel>

 

 

 

 

 

PopularBox.ux

<Panel ux:Class="PopularBox" >

	<Rectangle ux:Class="Box" Width="370" Height="50" Color="#000"/>
	<Rectangle ux:Class="Line" Width="370" Height="1" Color="color4"/>
	
	<StackPanel >
		<Image File="../Assets/1.png" Width="400" Height="160" />
		<Image File="../Assets/2.png" Width="400" Height="160" Y="-45"/>
		<Image File="../Assets/3.png" Width="400" Height="160" Y="-90"/>
		<Image File="../Assets/4.png" Width="400" Height="160" Y="-135"/>
		<Image File="../Assets/5.png" Width="400" Height="160" Y="-180"/>
		<Image File="../Assets/6.png" Width="400" Height="160" Y="-225"/>
	</StackPanel>
</Panel>

 

 

 

 

 

Question2.ux

<Panel ux:Class="Question2">
	<Router ux:Dependency="router" />
	<Panel Width="42" Height="42" Alignment="TopLeft" Margin="15" Clicked="{gotoQuestion}">
		<DockPanel>
			<StackPanel Margin="0,9,0,0">
			    <Rectangle Width="2" Height="15" Color="main" X="18" >
			        <Rotation Degrees="45"/>
			    </Rectangle>
			    <Rectangle Width="2" Height="15" Color="main" X="18" Y="-5" >
			        <Rotation Degrees="135"/>
			    </Rectangle>
			</StackPanel>
			<Circle Color="#fff" />
		</DockPanel>			
	</Panel>

	<AttractorConfig ux:Global="RangeSnap" Unit="Normalized" Type="SmoothSnap" />
	<ClientPanel>
        <GooeySlider Val="50" Min="0" Max="100" SliderHeight="48"
            TintColor="main" FaceColor="#fff" Alignment="Center" Margin="24,0"
            Label="오늘의 기분은 몇점인지 알려주세요!
            														점수가 높을수록 기분이 좋아요!" />
    </ClientPanel>

    <StackPanel Orientation="Horizontal" ItemSpacing="40" Alignment="Center" Y="150">
    	<Panel Clicked="{gotoQuestion}">
			<SemiBold Value="취소" Alignment="Center" FontSize="19" TextColor="main" />
			<Rectangle Width="130" Height="58" Color="#fff" CornerRadius="30" />
			<Rectangle Width="132" Height="60" Color="main" CornerRadius="30" >
				<DropShadow Distance="1" Spread="0.3" Size="15" Color="#00000018" Angle="90" />
			</Rectangle>
		</Panel>

    	<Panel Clicked="{gotoShow}">
			<SemiBold Value="알려주기" Alignment="Center" FontSize="19" TextColor="#fff" />
			<Rectangle Width="132" Height="60" Color="main" CornerRadius="30" >
				<DropShadow Distance="1" Spread="0.3" Size="15" Color="#00000018" Angle="90" />
			</Rectangle>
		</Panel>
</StackPanel>
</Panel>

 

 

 

 

 

TopCategories.ux

<Panel ux:Class="TopCategories">
	<Rectangle ux:Class="Clayer" Width="80" Height="80" Color="#fff" CornerRadius="10" Clicked="{gotoList}">
		<DropShadow Distance="1" Spread="0.3" Size="15" Color="#00000018" Angle="90" />
	</Rectangle>

	<StackPanel Background="#fff">
		<StackPanel Orientation="Horizontal">
			<Regular Value="Top categories" Margin="20,23,0,0" />
			<Light Value="Show all &gt;" Margin="135,23,0,0" Clicked="{gotoList}"/>
		</StackPanel>
		
		<ScrollView AllowedScrollDirections="Horizontal">
			<StackPanel>
				<StackPanel Orientation="Horizontal" Margin="20,28,0,0" ItemSpacing="15">
					<Icon.Pizza> <Clayer /> </Icon.Pizza>
					<Icon.Burger> <Clayer /> </Icon.Burger>
					<Icon.Steak> <Clayer /> </Icon.Steak>
					<Icon.Pasta> <Clayer /> </Icon.Pasta>
					<Clayer Clicked="{gotoPlus}">
						<Rectangle Width="2" Height="20" Color="color3"/>
						<Rectangle Width="20" Height="2" Color="color3"/>
					</Clayer>
				</StackPanel>

				<StackPanel  Orientation="Horizontal" Margin="20,8,0,0">
					<Light Value="Pizza" />
					<Light Value="Burggers" Margin="60,0,0,0" />
					<Light Value="Steak " Margin="35,0,0,0" />
					<Light Value="Pasta " Margin="55,0,0,0" />
				</StackPanel>
			</StackPanel>
		</ScrollView>
	</StackPanel>
</Panel>

 

 

 

 

 

UserMenu.ux

<Panel ux:Class="UserMenu">

	<DockPanel Background="#fff" Height="50">
		<StackPanel Orientation="Horizontal" Margin="45,0,0,0" ItemSpacing="65">
			<Icon.Home Width="20" Height="20" Color="#fff" IconColor="sub" Clicked="{gotoLogin}" /> 
			<Icon.Map Width="20" Height="20" Color="#fff" IconColor="sub" Clicked="{gotoMap}"/>
			<Icon.COOKEATList Width="20" Height="20" Color="#fff" IconColor="sub" Clicked="{gotoList}"/>
			<Icon.User Width="20" Height="20" Color="#fff" IconColor="main" Clicked="{gotoUser}"/>
		</StackPanel>
	</DockPanel>
</Panel>

 

 

 

 

Card.ux

<DockPanel ux:Class="Card">
	<string ux:Property="Name" />
	<string ux:Property="NamePic" />
	<string ux:Property="Cover" />
	<string ux:Property="Reviews" />

	<DockPanel>
		<DockPanel Dock="Top" Width="250" Height="250" >
			<DockPanel Alignment="Bottom" >
				<Rectangle Layer="Background" Color="#fff"  CornerRadius="14" />
				<StackPanel Height="60" Margin="10" >
					<Bold Value="{ReadProperty Name}" Alignment="CenterLeft" Color="#000a" FontSize="18" MaxWidth="200" TextWrapping="Wrap" />
					<Rectangle Width="70" Height="20" Alignment="Left" X="-3" >
						<ImageFill File="{ReadProperty NamePic}" />
					</Rectangle>
					<StackPanel Alignment="VerticalCenter" Orientation="Horizontal">
						<Regular Value="{ReadProperty Reviews} Reviews" Color="#000c" FontSize="15" />
					</StackPanel>
				</StackPanel>
				<Panel Width="70" Height="85" Alignment="CenterRight" >
					<Light Value="Go >" Alignment="Center" FontSize="15" Color="#fff" />
					<Rectangle Color="#ff2929" CornerRadius="0,14,14,0" />
				</Panel>
			</DockPanel>	
			<Panel>
				<Rectangle ux:Name="folder" CornerRadius="14" Alignment="HorizontalCenter" Width="300">
					<LayoutAnimation>
						<Move Vector="1" RelativeTo="PositionChange" DurationBack="0.4" Easing="QuarticOut" EasingBack="QuarticIn" />
					</LayoutAnimation>
					<ImageFill File="{ReadProperty Cover}" StretchMode="UniformToFill" WrapMode="ClampToEdge" />
					<Stroke Width="1" Color="#FFF3" />
					<Shadow />
				</Rectangle>
			</Panel>
		</DockPanel>
	</DockPanel>

	<BottomBarBackground Dock="Bottom" />
	<Panel Height="300" Dock="Bottom" />

</DockPanel>