Skip to content

Button component added #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
igorls wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Button component added #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a73dddf
Adding Roboto default font
igorls Jun 27, 2017
58ae445
Added Material.Button (work in progress)
igorls Jun 27, 2017
b51569c
fix
igorls Jun 27, 2017
92dd446
small adjustments according to requested changes
igorls Jun 28, 2017
926f564
Reverting to default fonts as requested
igorls Jun 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 84 additions & 0 deletions Components/Button.ux
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<Panel ux:Class="Material.Button" Alignment="Center" Enabled="true" Raised="true" Height="48" MinWidth="88" Padding="8,0" HitTestMode="LocalBounds" BackgroundColor="White" InkColor="#ccc">

<string ux:Property="Text" />
<bool ux:Property="Enabled" />
<bool ux:Property="Raised" />
<float4 ux:Property="BackgroundColor"/>
<float4 ux:Property="InkColor"/>

<WhileFalse Value="{ReadProperty Enabled}">
<Change text.Opacity="0.26"/>
<Change text.TextColor="#000000"/>
</WhileFalse>

<!-- button body with shadow (layer 1)-->
<Rectangle ux:Name="raisedButtonBody" ZOffset="1" Height="36" Padding="8,0" CornerRadius="2">
<SolidColor Color="{ReadProperty BackgroundColor}" />
<WhileTrue Value="{ReadProperty Raised}">
<Shadow ux:Name="raisedShadow" Distance="2" Size="3" />
</WhileTrue>
</Rectangle>

<WhileTrue Value="{ReadProperty Enabled}">

<!-- ink ripple effect panel (layer 2) -->
<Rectangle ux:Name="inkPanel" ZOffset="2" Height="{ReadProperty raisedButtonBody.Height}" Padding="{ReadProperty raisedButtonBody.Padding}" CornerRadius="{ReadProperty raisedButtonBody.CornerRadius}" ClipToBounds="true">

<WhileTrue ux:Name="showInk">
<Circle ux:Name="ink" Anchor="50%,50%" LayoutMaster="this" Layer="Background" LayoutRole="Standard" Alignment="TopLeft" Offset="{ReadProperty touch.PressedPosition}" Width="width(this)*2" Height="width(this)*2" Color="{ReadProperty InkColor}" Opacity="1">

<AddingAnimation>
<Change ux:Name="opacityAnimator" Target="ink.Opacity" Value="0" DurationBack="0.1" />
<Scale ux:Name="scaleAnimator" Factor="0" MixOp="Add" Duration="0.6" Easing="Material.StandardCurve" />
</AddingAnimation>

<RemovingAnimation>
<Change Target="ink.Opacity" Value="0" Duration="0.1" />
</RemovingAnimation>

</Circle>

</WhileTrue>

<Timeline ux:Name="singleRipple" PlayMode="Once">

<Change Target="ink.Opacity" Easing="Material.StandardCurve">
<Keyframe Value="0" Time="0" />
<Keyframe Value="1" Time="0.3" />
</Change>

<!-- progress = 0 -->
<Set opacityAnimator.Duration="0.05" AtProgress="0" />
<Set scaleAnimator.Duration="0.3" AtProgress="0" />
<Set showInk.Value="true" AtProgress="0" />

<!-- progress = 1 -->
<Set opacityAnimator.Duration="0.2" AtProgress="1" />
<Set showInk.Value="false" AtProgress="1" />
<Set scaleAnimator.Duration="0.6" AtProgress="1" />

</Timeline>

</Rectangle>

<WhilePressed ux:Name="touch">
<Change showInk.Value="true" />
</WhilePressed>

<WhilePressed>
<Change raisedShadow.Distance="4" Duration="0.25" Easing="Material.DecelerationCurve" />
<Change raisedShadow.Size="4" Duration="0.25" Easing="Material.DecelerationCurve" />
</WhilePressed>

<Tapped>
<TimelineAction Target="singleRipple" How="PulseForward" When="Forward" />
</Tapped>

</WhileTrue>

<!-- content panel (layer 3) -->
<Rectangle ux:Name="innerPanel" ZOffset="3" Height="{ReadProperty raisedButtonBody.Height}" Padding="{ReadProperty raisedButtonBody.Padding}" CornerRadius="{ReadProperty raisedButtonBody.CornerRadius}" ClipToBounds="true">
<Text ux:Name="text" Value="{ReadProperty Text}" Alignment="Center" FontSize="14"/>
</Rectangle>

</Panel>
17 changes: 15 additions & 2 deletions MainView.ux
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,27 @@
<Material.Drawer ux:Binding="Drawer" Edge="Left">
<Text Alignment="Center">Hello!</Text>
</Material.Drawer>

<DockPanel>

<DockPanel>
<Material.AppBar Dock="Top">
<Material.AppBarIcon Dock="Left" Icon="Menu" Clicked="{openDrawerPanel}" />
<Material.AppBarIcon Dock="Right" Icon="DotsVertical" Clicked="{toggleMenu}" />
<Material.AppBarIcon Dock="Right" Icon="AccountPlus" />
</Material.AppBar>

<Rectangle Dock="Top" Margin="5" CornerRadius="5">
<StackLayout/>
<Stroke Width="1" Color="#aaa"/>
<Material.Text Alignment="Center" Margin="10" Value="Material.Button"/>
<StackPanel Orientation="Horizontal">
<Material.Button Text="Button - Enabled" Raised="true" Enabled="true" BackgroundColor="Material.Blue200" InkColor="Material.Blue300"/>
<Material.Button Text="Button - Disabled" Raised="true" Enabled="false" BackgroundColor="Material.Blue200"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Material.Button Text="Flat Button - Enabled" Raised="false" Enabled="true" BackgroundColor="#FFFFFF00" InkColor="Material.Blue300"/>
<Material.Button Text="Flat Button - Disabled" Raised="false" Enabled="false" BackgroundColor="#FFFFFF00"/>
</StackPanel>
</Rectangle>

<StackPanel Alignment="BottomRight">
<Material.MiniActionButton Icon="Plus" />
Expand Down