TogglableFlyout icons

src/PixiEditor.AvaloniaUI/Views/Main/ViewportControls/Viewport.axaml

@@ -47,11 +47,11 @@
                                         PassEventArgsToCommand="True"/>
             </EventTriggerBehavior>-->
         </Interaction.Behaviors>
-        <overlays:TogglableFlyout Margin="5" IconPath="/Images/Settings.png"
+        <overlays:TogglableFlyout Margin="5" Icon="{DynamicResource icon-tool}"
                                   ui:Translator.TooltipKey="VIEWPORT_SETTINGS"
                                   ZIndex="2" HorizontalAlignment="Right" VerticalAlignment="Top">
             <overlays:TogglableFlyout.Child>
-                <Border BorderThickness="1" CornerRadius="5" Padding="5" Background="{DynamicResource ThemeBackgroundBrush}" ZIndex="2">
+                <Border BorderThickness="1" CornerRadius="5" Padding="5" Background="{DynamicResource ThemeBackgroundTranslucentBrush}" ZIndex="2">
                     <StackPanel Orientation="Vertical">
                         <StackPanel Orientation="Horizontal">
                             <TextBlock Margin="5 0" TextAlignment="Center"
@@ -59,61 +59,40 @@
              Converter={converters:RadiansToDegreesConverter}, StringFormat={}{0}°}"
                                        Width="35" Foreground="White" VerticalAlignment="Center" FontSize="16" />
                             <Button Width="32" Height="32" ui:Translator.TooltipKey="RESET_VIEWPORT"
-                                    Classes="OverlayButton"
+                                    Classes="OverlayButton pixi-icon"
                                     Click="ResetViewportClicked"
-                                    Cursor="Hand">
-                                <Button.Content>
-                                    <Image Width="28" Height="28" Source="/Images/Layout.png" />
-                                </Button.Content>
-                            </Button>
+                                    BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                                    BorderThickness="1"
+                                    Content="{DynamicResource icon-reset}"
+                                    Cursor="Hand"/>
                         </StackPanel>
                         <Separator />
                         <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                             <ToggleButton Width="32" Height="32" ui:Translator.TooltipKey="TOGGLE_VERTICAL_SYMMETRY"
-                                          Classes="OverlayToggleButton"
+                                          Classes="OverlayToggleButton pixi-icon"
                                           IsChecked="{Binding Document.VerticalSymmetryAxisEnabledBindable, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}"
-                                          Cursor="Hand">
-                                <ToggleButton.Content>
-                                    <Image Width="28" Height="28" Source="/Images/SymmetryVertical.png" />
-                                </ToggleButton.Content>
-                            </ToggleButton>
+                                          Content="{DynamicResource icon-y-symmetry}"
+                                          Cursor="Hand"/>
                             <ToggleButton Margin="10 0 0 0" Width="32" Height="32"
                                           ui:Translator.TooltipKey="TOGGLE_HORIZONTAL_SYMMETRY"
-                                          Classes="OverlayToggleButton"
+                                          Classes="OverlayToggleButton pixi-icon"
                                           IsChecked="{Binding Document.HorizontalSymmetryAxisEnabledBindable, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}"
-                                          Cursor="Hand">
-                                <ToggleButton.Content>
-                                    <Image Width="28" Height="28" Source="/Images/SymmetryVertical.png">
-                                        <Image.RenderTransform>
-                                            <RotateTransform Angle="90" />
-                                        </Image.RenderTransform>
-                                    </Image>
-                                </ToggleButton.Content>
-                            </ToggleButton>
+                                            Content="{DynamicResource icon-x-symmetry}"
+                                          Cursor="Hand"/>
                         </StackPanel>
                         <Separator />
                         <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                             <ToggleButton Width="32" Height="32" ui:Translator.TooltipKey="FLIP_VIEWPORT_HORIZONTALLY"
-                                          Classes="OverlayToggleButton"
+                                          Classes="OverlayToggleButton pixi-icon"
                                           IsChecked="{Binding FlipX, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}"
-                                          Cursor="Hand">
-                                <ToggleButton.Content>
-                                    <Image Width="28" Height="28" Source="/Images/FlipHorizontal.png" />
-                                </ToggleButton.Content>
-                            </ToggleButton>
+                                          Content="{DynamicResource icon-x-flip}"
+                                          Cursor="Hand"/>
                             <ToggleButton Margin="10 0 0 0" Width="32" Height="32"
                                           ui:Translator.TooltipKey="FLIP_VIEWPORT_VERTICALLY"
-                                          Classes="OverlayToggleButton"
+                                          Classes="OverlayToggleButton pixi-icon"
                                           IsChecked="{Binding FlipY, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}"
-                                          Cursor="Hand">
-                                <ToggleButton.Content>
-                                    <Image Width="28" Height="28" Source="/Images/FlipHorizontal.png">
-                                        <Image.RenderTransform>
-                                            <RotateTransform Angle="90" />
-                                        </Image.RenderTransform>
-                                    </Image>
-                                </ToggleButton.Content>
-                            </ToggleButton>
+                                            Content="{DynamicResource icon-y-flip}"
+                                          Cursor="Hand"/>
                         </StackPanel>
                     </StackPanel>
                 </Border>

src/PixiEditor.AvaloniaUI/Views/Overlays/TogglableFlyout.axaml

@@ -8,31 +8,32 @@
              d:DesignHeight="380" d:DesignWidth="200" Name="togglableFlyout">
     <Border Background="Transparent">
         <StackPanel Orientation="Vertical">
-            <Border HorizontalAlignment="Right" Background="#C8202020" CornerRadius="5" Padding="5" x:Name="btnBorder">
+            <Border HorizontalAlignment="Right" Background="{DynamicResource ThemeBackgroundTranslucentBrush}" CornerRadius="5" Padding="5" x:Name="btnBorder">
                 <ToggleButton Padding="0" Margin="0"
                               x:Name="toggleButton" BorderThickness="0" Width="24" Height="24" Background="Transparent">
                     <ToggleButton.Template>
                         <ControlTemplate TargetType="{x:Type ToggleButton}">
                             <Grid>
                                 <Grid.Styles>
-                                    <Style Selector="Grid Image#btnBg">
+                                    <Style Selector="Grid TextBlock#btnBg">
                                         <Setter Property="RenderTransform" Value="rotate(0)"/>
                                     </Style>
-                                    <Style Selector="ToggleButton:checked Image#btnBg">
+                                    <Style Selector="ToggleButton:checked TextBlock#btnBg">
                                         <Setter Property="RenderTransform" Value="rotate(180deg)"/>
                                     </Style>
                                 </Grid.Styles>
-                                <Image Focusable="False" Width="24" Cursor="Hand" x:Name="btnBg"
-                                       Source="{Binding ElementName=togglableFlyout, Path=IconPath, Converter={converters:ImagePathToBitmapConverter}}">
-                                    <Image.Transitions>
+                                <TextBlock Focusable="False" FontSize="24" Width="24" Cursor="Hand" x:Name="btnBg"
+                                           Classes="pixi-icon"
+                                       Text="{Binding ElementName=togglableFlyout, Path=Icon}">
+                                    <TextBlock.Transitions>
                                         <Transitions>
                                             <TransformOperationsTransition Duration="0:0:0.15" Property="RenderTransform" />
                                         </Transitions>
-                                    </Image.Transitions>
-                                    <Image.RenderTransform>
+                                    </TextBlock.Transitions>
+                                    <TextBlock.RenderTransform>
                                         <RotateTransform Angle="0" CenterX="12" CenterY="12"/>
-                                    </Image.RenderTransform>
-                                </Image>
+                                    </TextBlock.RenderTransform>
+                                </TextBlock>
                                 <ContentPresenter/>
                             </Grid>
                             <!--<ControlTemplate.Triggers>

src/PixiEditor.AvaloniaUI/Views/Overlays/TogglableFlyout.axaml.cs

@@ -14,13 +14,13 @@ public partial class TogglableFlyout : UserControl
         set { SetValue(ChildProperty, value); }
     }
 
-    public static readonly StyledProperty<string> IconPathProperty =
-        AvaloniaProperty.Register<TogglableFlyout, string>(nameof(IconPath));
+    public static readonly StyledProperty<string> IconProperty =
+        AvaloniaProperty.Register<TogglableFlyout, string>(nameof(Icon));
 
-    public string IconPath
+    public string Icon
     {
-        get { return (string)GetValue(IconPathProperty); }
-        set { SetValue(IconPathProperty, value); }
+        get { return (string)GetValue(IconProperty); }
+        set { SetValue(IconProperty, value); }
     }
     
     public TogglableFlyout()

src/PixiEditor.UI.Common/Accents/Base.axaml

@@ -5,6 +5,7 @@
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Dark">
             <Color x:Key="ThemeBackgroundColor">#252525</Color> <!--This is the lowest elevation color-->
+            <Color x:Key="ThemeBackgroundTranslucentColor">#C8202020</Color>
             <Color x:Key="ThemeBackgroundColor1">#2D2D30</Color>
             <Color x:Key="ThemeBackgroundColor2">#3f3f46</Color>
 
@@ -39,6 +40,7 @@
             <SolidColorBrush x:Key="ThemeForegroundLowBrush" Color="gray"></SolidColorBrush>
 
             <SolidColorBrush x:Key="ThemeBackgroundBrush" Color="{StaticResource ThemeBackgroundColor}" />
+            <SolidColorBrush x:Key="ThemeBackgroundTranslucentBrush" Color="{StaticResource ThemeBackgroundTranslucentColor}"/>
             <SolidColorBrush x:Key="ThemeBackgroundBrush1" Color="{StaticResource ThemeBackgroundColor1}" />
             <SolidColorBrush x:Key="ThemeBackgroundBrush2" Color="{StaticResource ThemeBackgroundColor2}" />
             <SolidColorBrush x:Key="ThemeAccentLowBrush" Color="{StaticResource AccentLowColor}" />

src/PixiEditor.UI.Common/Fonts/PixiPerfectIcons.axaml

@@ -99,10 +99,10 @@
             <system:String x:Key="icon-trash">&#xE958;</system:String>
             <system:String x:Key="icon-undo">&#xE959;</system:String>
             <system:String x:Key="icon-unlock">&#xE95A;</system:String>
-            <system:String x:Key="icon-x-flip">&#xE95B;</system:String>
+            <system:String x:Key="icon-y-flip">&#xE95B;</system:String>
             <system:String x:Key="icon-x-selected-flip">&#xE95C;</system:String>
             <system:String x:Key="icon-x-symmetry">&#xE95D;</system:String>
-            <system:String x:Key="icon-y-flip">&#xE95E;</system:String>
+            <system:String x:Key="icon-x-flip">&#xE95E;</system:String>
             <system:String x:Key="icon-y-selected-flip">&#xE95F;</system:String>
             <system:String x:Key="icon-y-symmetry">&#xE960;</system:String>
             <system:String x:Key="icon-zoom-in">&#xE961;</system:String>