Skip to content

Instantly share code, notes, and snippets.

@kusma

kusma/BasicStyle.ux

Last active August 19, 2020 11:36
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kusma/f6094c3d55127c07fec2 to your computer and use it in GitHub Desktop.
Save kusma/f6094c3d55127c07fec2 to your computer and use it in GitHub Desktop.
Download ZIP
Fuse.BasicTheme
Raw
BasicStyle.ux
<Fuse.Style ux:Class="Fuse.BasicTheme.BasicStyle" xmlns:b="Fuse.BasicTheme" ux:AutoCtor="false">
<Font ux:Global="RobotoThin" File="Fonts/Roboto-Thin.ttf" />
<Font ux:Global="RobotoCondensedBold" File="Fonts/RobotoCondensed-Bold.ttf" />
<Font ux:Global="RobotoCondensedBoldItalic" File="Fonts/RobotoCondensed-BoldItalic.ttf" />
<Font ux:Global="RobotoCondensedItalic" File="Fonts/RobotoCondensed-Italic.ttf" />
<Font ux:Global="RobotoCondensedLight" File="Fonts/RobotoCondensed-Light.ttf" />
<Font ux:Global="RobotoCondensedLightItalic" File="Fonts/RobotoCondensed-LightItalic.ttf" />
<Font ux:Global="RobotoCondensedRegular" File="Fonts/RobotoCondensed-Regular.ttf" />
<Font ux:Global="RobotoItalic" File="Fonts/Roboto-Italic.ttf" />
<Font ux:Global="RobotoLight" File="Fonts/Roboto-Light.ttf" />
<Font ux:Global="RobotoLightItalic" File="Fonts/Roboto-LightItalic.ttf" />
<Font ux:Global="RobotoMedium" File="Fonts/Roboto-Medium.ttf" />
<Font ux:Global="RobotoMediumItalic" File="Fonts/Roboto-MediumItalic.ttf" />
<Font ux:Global="RobotoRegular" File="Fonts/Roboto-Regular.ttf" />
<Font ux:Global="RobotoThinItalic" File="Fonts/Roboto-ThinItalic.ttf" />
<Font ux:Global="RobotoBlack" File="Fonts/Roboto-Black.ttf" />
<Font ux:Global="RobotoBlackItalic" File="Fonts/Roboto-BlackItalic.ttf" />
<Font ux:Global="RobotoBold" File="Fonts/Roboto-Bold.ttf" />
<Font ux:Global="RobotoBoldItalic" File="Fonts/Roboto-BoldItalic.ttf" />
<float4 ux:Key="CLine" ux:Value="#ccc"/>
<float4 ux:Key="CFillFore" ux:Value="#fff"/>
<float4 ux:Key="CEmptyFore" ux:Value="#000"/>
<float4 ux:Key="CShadow" ux:Value="#0003"/>
<BackButton
ux:Cascade="false"
MinWidth="88"
MinHeight="36"
Margin="4,4,4,4"
Padding="8,0,8,0"
Focus.IsFocusable="true">
<Style>
<Text ux:Cascade="false" TextColor="{Resource CFillFore}"
TextAlignment="Center" Font="RobotoLight"/>
</Style>
<DockPanel
Alignment="CenterLeft"
DockPanel.Dock="Left">
<Path
Data="m 0 10 l 10 10 m 0 -20 l -10 10"
FillRule="NonZero"
Width="10"
Height="20"
Margin="5, 0, 2, 0"
DockPanel.Dock="Left">
<Stroke Width="1">
<SolidColor Color="{Resource CFillFore}" />
</Stroke>
</Path>
<Text
Value="BACK"
Alignment="CenterLeft"
Margin="5, 0, 5, 0"
FontSize="18"
TextAlignment="Center">
</Text>
</DockPanel>
</BackButton>
<NavigationBar
Height="48">
<Rectangle Layer="Background">
<SolidColor ux:Name="_navigationBarFill" />
</Rectangle>
<ResourceBinding Target="_navigationBarFill.Color" Key="C500" />
</NavigationBar>
<Switch
Focus.IsFocusable="true"
Width="60"
Height="34"
HitTestMode="LocalBounds"
Margin="4">
<Panel Margin="17,2,17,2" ux:Name="_switchBounds" SnapToPixels="false">
<Circle Width="26" Height="26" ux:Name="_switchThumb"
Anchor="50%,50%" Offset="0%,50%" SnapToPixels="false" Alignment="TopLeft">
<Stroke Width="30" ux:Name="_switchThumbStroke">
<SolidColor Color="{Resource C500}" ux:Name="_switchThumbColor"/>
</Stroke>
<DropShadow ux:Name="switchShadow" Color="{Resource CShadow}" />
</Circle>
</Panel>
<Rectangle CornerRadius="17">
<Stroke Width="2" Offset="0.5" ux:Name="_switchStroke">
<SolidColor Color="{Resource CLine}" ux:Name="_switchStrokeColor"/>
</Stroke>
</Rectangle>
<WhileDisabled>
<Change Target="_switchThumbStroke.Width" Value="2" Duration="0.25"/>
</WhileDisabled>
<Fuse.Controls.DefaultSwitchBehavior Bounds="_switchBounds">
<Move Target="_switchThumb" X="1" RelativeTo="ParentSize" Duration="0.25"
Easing="QuadraticInOut" />
<Change _switchStroke.Width="30" Duration="0.25" Easing="QuadraticInOut"/>
<Change Target="_switchStrokeColor.Color" Value="{Resource C500}" Duration="0.05"
Easing="QuadraticInOut"/>
<Change Target="_switchThumbColor.Color" Value="{Resource CFillFore}" Duration="0.25"
Easing="QuadraticInOut"/>
</Fuse.Controls.DefaultSwitchBehavior>
<!--<WhileFocused>
<Change Target="_switchThumb2.Opacity" Value="0.30" Easing="QuinticOut" EasingBack="QuinticIn" Duration="0.25" />
</WhileFocused>-->
</Switch>
<Slider
Focus.IsFocusable="true"
MinHeight="36"
Margin="22,4,22,4"
HitTestMode="LocalBounds">
<Fuse.Controls.Graphics.LinearSliderBehavior/>
<Panel Width="36" Height="36" Alignment="Left"
Anchor="50%,50%" LayoutRole="Inert" HitTestMode="LocalBounds" ux:Name="_sliderThumb">
<Circle Alignment="VerticalCenter" Width="32" Height="32"
Opacity="0.0" ux:Name="_focusedThumbRing" SnapToPixels="false">
<Stroke Width="2">
<SolidColor Color="{Resource C500}" />
</Stroke>
</Circle>
<Circle ux:Name="_thumbDot" Alignment="VerticalCenter"
Width="12" Height="12" SnapToPixels="false">
<SolidColor Color="{Resource C500}"/>
</Circle>
<Circle Alignment="VerticalCenter" Width="32" Height="32"
Opacity="0.0" ux:Name="_focusedThumbDot" SnapToPixels="false">
<SolidColor Color="{Resource C500}" />
</Circle>
<Translation RelativeTo="ParentSize" ux:Name="_sliderPos"/>
</Panel>
<Panel Layer="Background" HitTestMode="LocalBounds">
<Rectangle Alignment="CenterLeft" Height="2" Width="0%" ux:Name="_progressTrack">
<SolidColor Color="{Resource C500}"/>
</Rectangle>
<Rectangle Alignment="VerticalCenter" Height="2">
<SolidColor Color="{Resource CLine}" />
</Rectangle>
</Panel>
<ProgressAnimation>
<Change Target="_progressTrack.Width" Value="100" />
<Change Target="_sliderPos.X" Value="1"/>
</ProgressAnimation>
<WhileFocused>
<Change Target="_focusedThumbDot.Opacity" Value="0.30" Duration="0.25"
Easing="ExponentialOut" EasingBack="ExponentialIn" />
</WhileFocused>
<WhileInteracting>
<Scale Target="_thumbDot" Factor="1.5" Duration="0.25"
Easing="ExponentialOut" EasingBack="ExponentialIn" />
<Change Target="_focusedThumbRing.Opacity" Value="0.30" Duration="0.25"
Easing="ExponentialOut" EasingBack="ExponentialIn" />
</WhileInteracting>
</Slider>
<!-- TODO: {Resource CFillFore} does not work here -->
<TextBlock ux:Class="Fuse.BasicTheme.ButtonText" Alignment="Center" Font="RobotoMedium"
TextColor="#fff" TextWrapping="Wrap" TextAlignment="Center"/>
<Button Name="_buttonSelf" Focus.IsFocusable="true"
MinWidth="88" MinHeight="38" Margin="6" Padding="9,4,9,4">
<Fuse.BasicTheme.ButtonText Value="{Property _buttonSelf.Text}"/>
<DropShadow Angle="90" Distance="2" Size="0.1" Color="{Resource C700}" />
<Rectangle Layer="Background" CornerRadius="4">
<SolidColor Color="{Resource C600}" ux:Name="_buttonBackground"/>
</Rectangle>
<WhilePressed>
<Change
Target="_buttonBackground.Color"
Value="{Resource C700}"
Duration="0"
DurationBack="0.15" />
</WhilePressed>
<WhileDisabled>
<Change
Target="_buttonBackground.Color"
Value="{Resource CFillFore}"
Duration="0.25"/>
<Change
Target="_buttonSelf.Opacity"
Value="0.52"
Duration="0.25" />
</WhileDisabled>
</Button>
<TextEdit
ux:Name="_textEdit"
HitTestMode="LocalBoundsAndChildren"
Focus.IsFocusable="true"
Focus.Delegate="_textEditCore"
>
<PlainTextEdit ux:Name="_textEditCore" ClipToBounds="true"/>
<Tapped>
<GiveFocus Target="_textEditCore" IsActive="{Property _textEdit.IsFocusable}"/>
</Tapped>
</TextEdit>
<!-- https://github.com/fusetools/fuselibs/issues/759 {Resource CEmptyFore} -->
<TextInput
ux:Name="_textInput"
TextColor="0,0,0,1"
Padding="0,0,0,16"
Margin="8,8,8,8"
FontSize="16"
Font="RobotoRegular"
>
<Panel Layer="Background">
<Rectangle Alignment="Bottom" Height="1" Margin="0,8,0,8" ux:Name="_dividerRect">
<SolidColor ux:Name="_textInputDivider" Color="{Resource CLine}" />
</Rectangle>
</Panel>
<ResourceBinding Target="_changeTextInputDividerFill1.Value" Key="C700" />
<ResourceBinding Target="_changeTextInputDividerFill2.Value" Key="C700" />
<WhileDisabled>
<Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInput.TextColor" Value="{Resource CLine}" />
<Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInputDivider.Color" Value="{Resource CLine}" />
</WhileDisabled>
<WhileFocusWithin>
<Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInputDivider.Color" Value="{Resource CFillFore}" ux:Name="_changeTextInputDividerFill1" />
<Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_dividerRect.Height" Value="2" />
</WhileFocusWithin>
<!-- do we really need this bit? -->
<WhilePressed>
<Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInputDivider.Color" Value="{Resource CFillFore}" ux:Name="_changeTextInputDividerFill2" />
<Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_dividerRect.Height" Value="2" />
</WhilePressed>
<WhileFalse ux:Name="_placeholderText">
<Text Width="100%" Height="100%"
TextAlignment="{Property _textInput.TextAlignment}" TextWrapping="{Property _textInput.TextWrapping}"
LineSpacing="{Property _textInput.LineSpacing}"
Font="{Property _textInput.Font}" FontSize="{Property _textInput.FontSize}"
Value="{Property _textInput.PlaceholderText}" TextColor="{Property _textInput.PlaceholderColor}" />
</WhileFalse>
<WhileContainsText>
<Change _placeholderText.Value="true" />
<Nothing Duration="0.05" />
</WhileContainsText>
</TextInput>
</Fuse.Style>
Raw
BasicStyle.ux.uno
using Uno;
using Uno.UX;
using Uno.Collections;
using Fuse.Elements;
using Fuse.Triggers;
using Fuse.Controls;
namespace Fuse.BasicTheme
{
public class BasicTheme : GraphicsTheme
{
static Theme _singleton;
[UXGlobalResource("Basic")]
public static Theme Singleton
{
get
{
if (_singleton == null) _singleton = new BasicTheme();
return _singleton;
}
}
public BasicTheme()
{
Templates.Add( new BasicStyle() );
}
}
extern(MOBILE) static class DefaultBasicTheme { }
extern(!MOBILE) static class DefaultBasicTheme
{
static DefaultBasicTheme()
{
NativeWithFallbackTheme.ThemeFactory = CreateTheme;
}
static Theme CreateTheme()
{
return BasicTheme.Singleton;
}
}
public enum ColorScheme
{
LightBlue,
BlueGrey,
Blue,
Brown,
Cyan,
Amber,
DeepOrange,
DeepPurple,
Green,
Grey,
Indigo,
LightGreen,
Lime,
Orange,
Pink,
Purple,
Red,
Teal,
Yellow,
}
public partial class BasicStyle
{
ColorScheme _colorScheme;
public ColorScheme ColorScheme
{
get { return _colorScheme; }
set
{
if (_colorScheme != value)
{
_colorScheme = value;
SetColorScheme();
}
}
}
public BasicStyle()
{
SetColorScheme();
InitializeUX();
}
void SetColorScheme()
{
switch (ColorScheme)
{
case ColorScheme.Amber: UpdateColorCodes(Amber); break;
case ColorScheme.BlueGrey: UpdateColorCodes(BlueGrey); break;
case ColorScheme.Blue: UpdateColorCodes(Blue); break;
case ColorScheme.Brown: UpdateColorCodes(Brown); break;
case ColorScheme.Cyan: UpdateColorCodes(Cyan); break;
case ColorScheme.DeepOrange: UpdateColorCodes(DeepOrange); break;
case ColorScheme.DeepPurple: UpdateColorCodes(DeepPurple); break;
case ColorScheme.Green: UpdateColorCodes(Green); break;
case ColorScheme.Grey: UpdateColorCodes(Grey); break;
case ColorScheme.Indigo: UpdateColorCodes(Indigo); break;
case ColorScheme.LightBlue: UpdateColorCodes(LightBlue); break;
case ColorScheme.LightGreen: UpdateColorCodes(LightGreen); break;
case ColorScheme.Lime: UpdateColorCodes(Lime); break;
case ColorScheme.Orange: UpdateColorCodes(Orange); break;
case ColorScheme.Pink: UpdateColorCodes(Pink); break;
case ColorScheme.Purple: UpdateColorCodes(Purple); break;
case ColorScheme.Red: UpdateColorCodes(Red); break;
case ColorScheme.Teal: UpdateColorCodes(Teal); break;
case ColorScheme.Yellow: UpdateColorCodes(Yellow); break;
}
}
void UpdateColorCodes(string[] hexValues)
{
if (Resources.Count > 0)
for (int i = 0; i < ColorCodes.Length; i++)
for (int j = Resources.Count - 1; j != 0; j--)
if (Resources[j].Key == ColorCodes[i])
Resources.RemoveAt(j);
for (int i = 0; i < ColorCodes.Length; i++)
Resources.Add(new Uno.UX.Resource(ColorCodes[i], Uno.Color.FromHex(hexValues[i])));
}
static string[] ColorCodes = new [] { "C50", "C100", "C200", "C300", "C400", "C500", "C600", "C700", "C800", "C900" };
static string[] Red = new [] { "#FFEBEE", "#FFCDD2", "#EF9A9A", "#E57373", "#EF5350", "#F44336", "#E53935", "#D32F2F", "#C62828", "#B71C1C" };
static string[] Pink = new [] { "#FCE4EC", "#F8BBD0", "#F48FB1", "#F06292", "#EC407A", "#E91E63", "#D81B60", "#C2185B", "#AD1457", "#880E4F" };
static string[] Purple = new [] { "#F3E5F5", "#E1BEE7", "#CE93D8", "#BA68C8", "#AB47BC", "#9C27B0", "#8E24AA", "#7B1FA2", "#6A1B9A", "#4A148C" };
static string[] DeepPurple = new [] { "#EDE7F6", "#D1C4E9", "#B39DDB", "#9575CD", "#7E57C2", "#673AB7", "#5E35B1", "#512DA8", "#4527A0", "#311B92" };
static string[] Indigo = new [] { "#E8EAF6", "#C5CAE9", "#9FA8DA", "#7986CB", "#5C6BC0", "#3F51B5", "#3949AB", "#303F9F", "#283593", "#1A237E" };
static string[] Blue = new [] { "#E3F2FD", "#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5", "#2196F3", "#1E88E5", "#1976D2", "#1565C0", "#0D47A1" };
static string[] LightBlue = new [] { "#E1F5FE", "#B3E5FC", "#81D4FA", "#4FC3F7", "#29B6F6", "#03A9F4", "#039BE5", "#0288D1", "#0277BD", "#01579B" };
static string[] Cyan = new [] { "#E0F7FA", "#B2EBF2", "#80DEEA", "#4DD0E1", "#26C6DA", "#00BCD4", "#00ACC1", "#0097A7", "#00838F", "#006064" };
static string[] Teal = new [] { "#E0F2F1", "#B2DFDB", "#80CBC4", "#4DB6AC", "#26A69A", "#009688", "#00897B", "#00796B", "#00695C", "#004D40" };
static string[] Green = new [] { "#E8F5E9", "#C8E6C9", "#A5D6A7", "#81C784", "#66BB6A", "#4CAF50", "#43A047", "#388E3C", "#2E7D32", "#1B5E20" };
static string[] LightGreen = new [] { "#F1F8E9", "#DCEDC8", "#C5E1A5", "#AED581", "#9CCC65", "#8BC34A", "#7CB342", "#689F38", "#558B2F", "#33691E" };
static string[] Lime = new [] { "#F9FBE7", "#F0F4C3", "#E6EE9C", "#DCE775", "#D4E157", "#CDDC39", "#C0CA33", "#AFB42B", "#9E9D24", "#827717" };
static string[] Yellow = new [] { "#FFFDE7", "#FFF9C4", "#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B", "#FDD835", "#FBC02D", "#F9A825", "#F57F17" };
static string[] Amber = new [] { "#FFF8E1", "#FFECB3", "#FFE082", "#FFD54F", "#FFCA28", "#FFC107", "#FFB300", "#FFA000", "#FF8F00", "#FF6F00" };
static string[] Orange = new [] { "#FFF3E0", "#FFE0B2", "#FFCC80", "#FFB74D", "#FFA726", "#FF9800", "#FB8C00", "#F57C00", "#EF6C00", "#E65100" };
static string[] DeepOrange = new [] { "#FBE9E7", "#FFCCBC", "#FFAB91", "#FF8A65", "#FF7043", "#FF5722", "#F4511E", "#E64A19", "#D84315", "#BF360C" };
static string[] Brown = new [] { "#EFEBE9", "#D7CCC8", "#BCAAA4", "#A1887F", "#8D6E63", "#795548", "#6D4C41", "#5D4037", "#4E342E", "#3E2723" };
static string[] Grey = new [] { "#FAFAFA", "#F5F5F5", "#EEEEEE", "#E0E0E0", "#BDBDBD", "#9E9E9E", "#757575", "#616161", "#424242", "#212121" };
static string[] BlueGrey = new [] { "#ECEFF1", "#CFD8DC", "#B0BEC5", "#90A4AE", "#78909C", "#607D8B", "#546E7A", "#455A64", "#37474F", "#263238" };
}
}
Raw
Fuse.BasicTheme.unoproj
{
"RootNamespace": "Fuse.BasicTheme",
"Version": "0.18.0",
"InternalsVisibleTo": [],
"Packages": [
"Uno.Collections",
"Uno.Geometry"
],
"Projects": [
"../Fuse.Animations/Fuse.Animations.unoproj",
"../Fuse.Controls/Fuse.Controls.unoproj",
"../FuseCore/FuseCore.unoproj",
"../Fuse.Drawing/Fuse.Drawing.unoproj",
"../Fuse.Effects/Fuse.Effects.unoproj",
"../Fuse.Elements/Fuse.Elements.unoproj",
"../Fuse.Gestures/Fuse.Gestures.unoproj",
"../Fuse.Physics/Fuse.Physics.unoproj",
"../Fuse.Triggers/Fuse.Triggers.unoproj",
],
"Includes": [
"Fonts/Roboto-Black.ttf:File",
"Fonts/Roboto-BlackItalic.ttf:File",
"Fonts/Roboto-Bold.ttf:File",
"Fonts/Roboto-BoldItalic.ttf:File",
"Fonts/Roboto-Italic.ttf:File",
"Fonts/Roboto-Light.ttf:File",
"Fonts/Roboto-LightItalic.ttf:File",
"Fonts/Roboto-Medium.ttf:File",
"Fonts/Roboto-MediumItalic.ttf:File",
"Fonts/Roboto-Regular.ttf:File",
"Fonts/Roboto-Thin.ttf:File",
"Fonts/Roboto-ThinItalic.ttf:File",
"Fonts/RobotoCondensed-Bold.ttf:File",
"Fonts/RobotoCondensed-BoldItalic.ttf:File",
"Fonts/RobotoCondensed-Italic.ttf:File",
"Fonts/RobotoCondensed-Light.ttf:File",
"Fonts/RobotoCondensed-LightItalic.ttf:File",
"Fonts/RobotoCondensed-Regular.ttf:File",
"BasicStyle.ux:UXFile",
"BasicStyle.ux.uno:SourceFile",
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment