Hi David,
Thank you very much for your help, however I wasn’t able to get the code to work in my project, for reasons I cannot understand. I am running Fuse 0.24 on a brand new install of Windows 10, so it’s not a case of running uno clean (although I did).
My best guess is that this code [https://www.fusetools.com/community/forums/howto_discussions/resources_in_their_own_file_replacement_for_style?page=1&highlight=0e5894c3-ee2e-49e2-8668-25579c81e571#post-0e5894c3-ee2e-49e2-8668-25579c81e571] that allows me to list my Resources in a single file and import them into MainView is doing something to the resources and breaking it. But I haven’t had any trouble with it before, to be honest.
Here is the full code to my class as it is:
TWAndroidFloatingMenu.ux
<Panel ux:Class="TWAndroidFloatingMenu" ButtonsList="{DefaultFloatingButtonsList}" Alignment="BottomRight" Margin="24">
<object ux:Property="ButtonsList" />
<JavaScript>
var Observable = require("FuseJS/Observable");
var isOpen = Observable(false);
var itemCountDelay = Observable(0);
function increaseItemCount()
{
itemCountDelay += 0.2;
}
function toggleOpen() {
isOpen.value = !isOpen.value;
}
module.exports = {
isOpen : isOpen,
toggleOpen : toggleOpen,
itemCountDelay : itemCountDelay,
increaseItemCount : increaseItemCount
};
</JavaScript>
<Circle Width="48" Height="48" Color="{roxo00}" ux:Name="MainFloatingButton" Alignment="BottomRight">
<Icon24 Value="{CloseIcon}" Alignment="Center" Color="{branco}" ux:Name="MainIcon"/>
<Clicked>
<Callback Handler="{toggleOpen}" />
</Clicked>
</Circle>
<Panel ux:Name="Submenu" Alignment="BottomRight">
<Translation RelativeTo="Size" RelativeNode="MainFloatingButton" Y="-1" />
<Translation X="-8" />
<!-- SubMenuItem Class -->
<StackPanel ux:Class="SubMenuItem" Orientation="Horizontal" Width="100%" ItemIcon="{icon}" ItemColor="{color}" ItemLabel="{label}" IsOpen="false" ux:Name="_thisSubMenu">
<float4 ux:Property="ItemColor" />
<string ux:Property="ItemIcon" />
<string ux:Property="ItemLabel" />
<bool ux:Property="IsOpen" />
<WhileFalse Value="{Property _thisSubMenu.IsOpen}">
<Move RelativeTo="Size" Y="1" Duration="1" DurationBack="0.3" Easing="CubicOut" EasingBack="CubicIn" Delay="{itemCountDelay}"/>
</WhileFalse>
<Rectangle CornerRadius="2" Color="{branco}" Padding="4" Margin="0,0,6,0" ux:Name="Label">
<WhileFalse Value="{Property _thisSubMenu.IsOpen}">
<Move X="1" RelativeTo="Size" Duration="0.3" DurationBack="0.3" Easing="CubicOut" EasingBack="CubicInOut" />
<Change Target="Label.Opacity" Value="0" Duration="0.5" DurationBack="0.5" Easing="CubicOut" EasingBack="CubicInOut"/>
</WhileFalse>
<Text Value="{Property _thisSubMenu.ItemLabel}" Alignment="Center" Color="{preto}" FontSize="13" />
</Rectangle>
<Circle Color="{Property _thisSubMenu.ItemColor}" Width="32" Height="32">
<Icon24 Value="{Property _thisSubMenu.ItemIcon}" Color="{branco}" Alignment="Center" />
</Circle>
</StackPanel>
<StackPanel Alignment="BottomRight">
<Each Items="{Property this.ButtonsList}">
<Panel Alignment="CenterRight" Margin="0,6,0,6" MinHeight="32">
<WhileFalse Value="{isOpen}">
<Change Target="MainIcon.Value" Value="{EditIcon}"/>
<Change Target="Submenu.Opacity" Value="0" Duration="0.1" DurationBack="0.5" Easing="CubicOut" EasingBack="CubicIn"/>
</WhileFalse>
<!-- Print the Item -->
<SubMenuItem ItemIcon="{icon}" ItemColor="{color}" ItemLabel="{label}" IsOpen="{isOpen}"/>
</Panel>
</Each>
</StackPanel>
</Panel>
<DropShadow Distance="2" Spread="0.1" Color="#0004" />
</Panel>
Here’s how my Icons and Colors are defined (snippets)
ResCores.ux
<ResourceContainer ux:Class="CoresInclude">
<!-- Azuis -->
<float4 ux:Value="#0D1C2F" ux:Global="azul03" />
<float4 ux:Value="#1A385D" ux:Global="azul02" />
<float4 ux:Value="#26548B" ux:Global="azul01" />
<float4 ux:Value="#3370BA" ux:Global="azul00" />
<float4 ux:Value="#6694CB" ux:Global="azul10" />
<float4 ux:Value="#99B8DD" ux:Global="azul20" />
<float4 ux:Value="#CCDBEE" ux:Global="azul30" />
...
</ResourceContainer>
ResIcones.ux
<ResourceContainer ux:Class="IconesInclude">
<!--Icons -->
<string ux:Value="" ux:Global="AddMarkerIcon" />
<string ux:Value="" ux:Global="AnnotationsIcon" />
<string ux:Value="" ux:Global="AttachIcon" />
<string ux:Value="" ux:Global="BackIcon" />
<string ux:Value="" ux:Global="FileIcon" />
...
</ResourceContainer>
MainView.js
function FloatingButton(label, color, icon) {
this.label = label;
this.color = color;
this.icon = icon;
}
var DefaultFloatingButtonsList = Observable(
new FloatingButton("Excluir", "vermelho00", "DeleteIcon"),
new FloatingButton("Baixar", "verde00", "DownloadIcon"),
new FloatingButton("Ordenar", "dourado00", "FilterIcon")
);
module.exports = {
labelFiltro : labelFiltro,
mudarFiltro : mudarFiltro,
nomeBotao : nomeBotao,
returnEventArgs : returnEventArgs,
eventArg : eventArg,
DefaultFloatingButtonsList : DefaultFloatingButtonsList,
// vermelho00 : "vermelho00",
// verde00 : "verde00",
// dourado00 : "dourado00",
// DownloadIcon : "DownloadIcon",
// DeleteIcon : "DeleteIcon",
// EditIcon : "EditIcon",
// FilterIcon : "FilterIcon",
...
};
</JavaScript>