ShortcutsPopup done

src/PixiEditor.AvaloniaUI/Helpers/UI/Hyperlink.cs

@@ -1,4 +1,5 @@
-using Avalonia;
+using System.Windows.Input;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Input;
 using PixiEditor.OperatingSystem;
@@ -11,6 +12,18 @@ public class Hyperlink : AvaloniaObject
         = AvaloniaProperty.RegisterAttached<Hyperlink, TextBlock, string>(
             "Url");
 
+    public static readonly AttachedProperty<ICommand> CommandProperty =
+        AvaloniaProperty.RegisterAttached<Hyperlink, TextBlock, ICommand>("Command");
+
+    public static readonly AttachedProperty<object> CommandParameterProperty =
+        AvaloniaProperty.RegisterAttached<Hyperlink, TextBlock, object>("CommandParameter");
+
+    public static void SetCommandParameter(TextBlock obj, object value) => obj.SetValue(CommandParameterProperty, value);
+    public static object GetCommandParameter(TextBlock obj) => obj.GetValue(CommandParameterProperty);
+
+    public static void SetCommand(TextBlock obj, ICommand value) => obj.SetValue(CommandProperty, value);
+    public static ICommand GetCommand(TextBlock obj) => obj.GetValue(CommandProperty);
+
     public static string GetUrl(TextBlock element)
     {
         return element.GetValue(UrlProperty);
@@ -24,6 +37,7 @@ public class Hyperlink : AvaloniaObject
     static Hyperlink()
     {
         UrlProperty.Changed.Subscribe(OnUrlSet);
+        CommandProperty.Changed.Subscribe(OnCommandSet);
     }
 
     private static void OnUrlSet(AvaloniaPropertyChangedEventArgs e)
@@ -44,4 +58,24 @@ public class Hyperlink : AvaloniaObject
             };
         }
     }
+
+    private static void OnCommandSet(AvaloniaPropertyChangedEventArgs e)
+    {
+        if (e.Sender is TextBlock tb)
+        {
+            tb.Classes.Add("hyperlink");
+            tb.Cursor = new Cursor(StandardCursorType.Hand);
+            tb.PointerPressed += (sender, args) =>
+            {
+                if (sender is TextBlock tb)
+                {
+                    if (tb.GetValue(CommandProperty) is ICommand command)
+                    {
+                        object? parameter = tb.GetValue(CommandParameterProperty);
+                        command.Execute(parameter);
+                    }
+                }
+            };
+        }
+    }
 }

src/PixiEditor.AvaloniaUI/Styles/PixiEditorPopupTemplate.axaml

@@ -23,6 +23,7 @@
                     <DockPanel>
                         <controls:DialogTitleBar
                             DockPanel.Dock="Top"
+                            CloseCommand="{TemplateBinding CloseCommand}"
                             CanMinimize="{TemplateBinding CanMinimize}"
                             CanFullscreen="{TemplateBinding CanResize}"
                             TitleKey="{TemplateBinding Title}"/>

src/PixiEditor.AvaloniaUI/Styles/PortingWipStyles.axaml

@@ -119,4 +119,17 @@
     <Style Selector="ToggleButton.AnchorPointToggleButtonStyle:checked">
         <Setter Property="BorderBrush" Value="{DynamicResource ThemeHighlightForegroundBrush}" />
     </Style>
+    
+    <Style Selector="Border.KeyBorder">
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
+        <Setter Property="Background" Value="{DynamicResource ThemeControlMidBrush}"/>
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
+        <Setter Property="Padding" Value="7, 0"/>
+        <Setter Property="Margin" Value="0,3,5,3"/>
+    </Style>
+
+    <Style Selector="Border.KeyBorderLast">
+        <Setter Property="Margin" Value="0, 3"/>
+    </Style>
 </Styles>

src/PixiEditor.AvaloniaUI/Views/Dialogs/PixiEditorPopup.cs

@@ -1,4 +1,5 @@
-using Avalonia;
+using System.Windows.Input;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Styling;
@@ -12,6 +13,24 @@ public partial class PixiEditorPopup : Window, IStyleable
     public static readonly StyledProperty<bool> CanMinimizeProperty = AvaloniaProperty.Register<PixiEditorPopup, bool>(
         nameof(CanMinimize), defaultValue: true);
 
+    public static readonly StyledProperty<bool> CloseIsHideProperty = AvaloniaProperty.Register<PixiEditorPopup, bool>(
+        nameof(CloseIsHide), defaultValue: false);
+
+    public static readonly StyledProperty<ICommand> CloseCommandProperty = AvaloniaProperty.Register<PixiEditorPopup, ICommand>(
+        nameof(CloseCommand));
+
+    public ICommand CloseCommand
+    {
+        get => GetValue(CloseCommandProperty);
+        set => SetValue(CloseCommandProperty, value);
+    }
+
+    public bool CloseIsHide
+    {
+        get => GetValue(CloseIsHideProperty);
+        set => SetValue(CloseIsHideProperty, value);
+    }
+
     public bool CanMinimize
     {
         get => GetValue(CanMinimizeProperty);
@@ -20,6 +39,11 @@ public partial class PixiEditorPopup : Window, IStyleable
 
     Type IStyleable.StyleKey => typeof(PixiEditorPopup);
 
+    public PixiEditorPopup()
+    {
+        CloseCommand = new RelayCommand(ClosePopup);
+    }
+
     public override void Show()
     {
         Show(MainWindow.Current);
@@ -28,12 +52,17 @@ public partial class PixiEditorPopup : Window, IStyleable
     [RelayCommand]
     public void SetResultAndCloseCommand()
     {
-        Close(true);
+        if(CloseIsHide)
+            Hide();
+        else
+            Close(true);
     }
 
-    [RelayCommand]
-    public void CloseCommand()
+    public void ClosePopup()
     {
-        Close(false);
+        if(CloseIsHide)
+            Hide();
+        else
+            Close(false);
     }
 }

src/PixiEditor.AvaloniaUI/Views/Dialogs/ShortcutsPopup.axaml

@@ -1,65 +1,84 @@
 <dialogs:PixiEditorPopup xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-        xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
-        xmlns:dialogs="clr-namespace:PixiEditor.AvaloniaUI.Views.Dialogs"
-        xmlns:commands="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands"
-        xmlns:commands1="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.XAML"
-        xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
-        xmlns:commands2="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.Commands"
-        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-        x:Class="PixiEditor.AvaloniaUI.Views.Dialogs.ShortcutsPopup"
-        x:ClassModifier="internal"
-        Title="ShortcutsPopup">
+                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+                         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+                         xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
+                         xmlns:dialogs="clr-namespace:PixiEditor.AvaloniaUI.Views.Dialogs"
+                         xmlns:commands="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands"
+                         xmlns:commands1="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.XAML"
+                         xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
+                         xmlns:commands2="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.Commands"
+                         xmlns:panels="clr-namespace:PixiEditor.AvaloniaUI.Views.Panels"
+                         xmlns:ui1="clr-namespace:PixiEditor.AvaloniaUI.Helpers.UI"
+                         xmlns:system="clr-namespace:System;assembly=System.Runtime"
+                         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+                         x:Class="PixiEditor.AvaloniaUI.Views.Dialogs.ShortcutsPopup"
+                         CloseIsHide="True"
+                         x:ClassModifier="internal"
+                         Title="SHORTCUTS_TITLE">
     <Grid>
-        <TextBlock Grid.Row="0" FontSize="15" VerticalAlignment="Center" HorizontalAlignment="Center" ui:Translator.Key="SHORTCUTS_TITLE"/>
+        <Grid.Styles>
+            <Style Selector="ItemsControl">
+                <Setter Property="Background" Value="Transparent"/>
+                <Setter Property="BorderThickness" Value="0"/>
+            </Style>
 
-        <DockPanel Grid.Row="3">
-            <TextBlock FontSize="14" Margin="10" Foreground="LightGray" HorizontalAlignment="Left" DockPanel.Dock="Bottom">
-                <!--TODO: Add this-->
-                <!--<Hyperlink Style="{StaticResource SettingsLink}"
-                            Command="{cmds:Command PixiEditor.Window.OpenSettingsWindow, UseProvided=True}">
-                    <Hyperlink.CommandParameter>
-                        <s:Int32>2</s:Int32>
-                    </Hyperlink.CommandParameter>
+            <Style Selector="TextBlock">
+                <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
+                <Setter Property="FontSize" Value="14"/>
+            </Style>
+        </Grid.Styles>
+
+        <DockPanel>
+            <TextBlock Margin="10"
+                       HorizontalAlignment="Left" DockPanel.Dock="Bottom"
+                       ui1:Hyperlink.Command="{commands1:Command PixiEditor.Window.OpenSettingsWindow, UseProvided=True}">
+                <ui1:Hyperlink.CommandParameter>
+                        <system:Int32>2</system:Int32>
+                    </ui1:Hyperlink.CommandParameter>
                     <Run ui:Translator.Key="EDIT"/>
-                    <Run Text="" FontFamily="{StaticResource Feather}"/>
-                </Hyperlink>-->
+                    <Run Text="" FontFamily="{DynamicResource Feather}"/>
             </TextBlock>
             <ScrollViewer Grid.Row="3" VerticalScrollBarVisibility="Auto">
-                <WrapPanel HorizontalAlignment="Center" Margin="2">
+                <DockPanel HorizontalAlignment="Center" Margin="2">
                     <ItemsControl ItemsSource="{Binding Controller.CommandGroups}" Background="Transparent">
                         <ItemsControl.ItemTemplate>
                             <DataTemplate DataType="{x:Type commands:CommandGroup}">
                                 <StackPanel IsVisible="{Binding HasAssignedShortcuts}">
-                                    <TextBlock Text="{Binding DisplayName}" Foreground="White" FontSize="15" FontWeight="Medium" Margin="10,8,0,5"/>
+                                    <TextBlock Text="{Binding DisplayName}" Classes="h5" Foreground="{DynamicResource ThemeForegroundSecondaryBrush}"
+                                               Margin="10,8,0,5" />
                                     <ItemsControl ItemsSource="{Binding VisibleCommands}">
                                         <ItemsControl.ItemTemplate>
                                             <DataTemplate DataType="{x:Type commands2:Command}">
-                                                <StackPanel Orientation="Horizontal" Margin="20,0,0,0" IsVisible="{Binding Shortcut.Key, ConverterParameter=None, Converter={converters:EqualityBoolToIsVisibleConverter Invert=True}}"
+                                                <StackPanel Orientation="Horizontal" Margin="20,0,0,0"
+                                                            IsVisible="{Binding Shortcut.Key, ConverterParameter=None, Converter={converters:EqualityBoolToIsVisibleConverter Invert=True}}"
                                                             ToolTip.Tip="{Binding Description}">
-                                                    <ItemsControl ItemsSource="{Binding Shortcut.Modifiers, Converter={converters:ModifierFlagToModifiersConverter}}">
+                                                    <ItemsControl
+                                                        ItemsSource="{Binding Shortcut.Modifiers, Converter={converters:ModifierFlagToModifiersConverter}}">
                                                         <ItemsControl.ItemTemplate>
                                                             <DataTemplate DataType="{x:Type KeyModifiers}">
                                                                 <Border Classes="KeyBorder">
-                                                                    <!--TODO: BindsDirectlyToSource=True was here-->
-                                                                    <TextBlock ui:Translator.LocalizedString="{Binding Converter={converters:KeyToStringConverter}}"
-                                                                               Classes="KeyBorderText"/>
+                                                                    <TextBlock
+                                                                        ui:Translator.LocalizedString="{Binding Converter={converters:KeyToStringConverter}}"
+                                                                        Classes="KeyBorderText" />
                                                                 </Border>
                                                             </DataTemplate>
                                                         </ItemsControl.ItemTemplate>
                                                         <ItemsControl.ItemsPanel>
                                                             <ItemsPanelTemplate>
-                                                                <StackPanel Orientation="Horizontal"/>
+                                                                <StackPanel Orientation="Horizontal" />
                                                             </ItemsPanelTemplate>
                                                         </ItemsControl.ItemsPanel>
                                                     </ItemsControl>
-                                                    <Border Classes="KeyBorderLast">
-                                                        <TextBlock Text="{Binding Shortcut.Key, Converter={converters:KeyToStringConverter}}" Classes="KeyBorderText"/>
+                                                    <Border Classes="KeyBorder KeyBorderLast">
+                                                        <TextBlock
+                                                            Text="{Binding Shortcut.Key, Converter={converters:KeyToStringConverter}}"
+                                                            Classes="KeyBorderText" />
                                                     </Border>
 
-                                                    <TextBlock Text="{Binding DisplayName}" Foreground="#FFEEEEEE" VerticalAlignment="Center" FontSize="14" Margin="8,0,0,0"/>
+                                                    <TextBlock Text="{Binding DisplayName}"
+                                                               VerticalAlignment="Center"
+                                                               Margin="8,0,0,0" />
                                                 </StackPanel>
                                             </DataTemplate>
                                         </ItemsControl.ItemTemplate>
@@ -69,12 +88,12 @@
                         </ItemsControl.ItemTemplate>
                         <ItemsControl.ItemsPanel>
                             <ItemsPanelTemplate>
-                                <WrapPanel ItemWidth="300"/>
+                                <panels:AlignableWrapPanel />
                             </ItemsPanelTemplate>
                         </ItemsControl.ItemsPanel>
                     </ItemsControl>
-                </WrapPanel>
+                </DockPanel>
             </ScrollViewer>
         </DockPanel>
     </Grid>
-</dialogs:PixiEditorPopup>
+</dialogs:PixiEditorPopup>