Artemis/src/Artemis.UI/Screens/Module/ProfileEditor/DisplayConditions/DisplayConditionPredicateView.xaml

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions"
    xmlns:s="https://github.com/canton7/Stylet"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:converters="clr-namespace:Artemis.UI.Converters"
    xmlns:utilities="clr-namespace:Artemis.UI.Utilities"
    x:Class="Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions.DisplayConditionPredicateView"
    mc:Ignorable="d"
    d:DesignHeight="450" d:DesignWidth="800"
    d:DataContext="{d:DesignInstance IsDesignTimeCreatable=False, Type={x:Type local:DisplayConditionPredicateViewModel}}"
    x:Name="DisplayConditionPredicateRoot">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Artemis.UI;component/ResourceDictionaries/DisplayConditions.xaml" />
                <ResourceDictionary>
                    <converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
                    <utilities:BindingProxy x:Key="DataContextProxy" Data="{Binding}" />
                    <Style TargetType="Grid" x:Key="InitializingFade">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsInitialized}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.25" BeginTime="0:0:0.1">
                                                <DoubleAnimation.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseInOut" />
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid Margin="0 3" Style="{StaticResource InitializingFade}" Opacity="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0"
                Grid.Column="0"
                Style="{StaticResource MaterialDesignIconForegroundButton}"
                HorizontalAlignment="Left"
                Foreground="#E74C4C"
                Width="25"
                Height="25"
                Command="{s:Action Delete}">
            <materialDesign:PackIcon Kind="Close" Width="18" Height="18" />
        </Button>

        <!-- Left side, always a property -->
        <Button Grid.Row="0"
                Grid.Column="1"
                Background="#ab47bc"
                BorderBrush="#ab47bc"
                Style="{StaticResource DisplayConditionButton}"
                ToolTip="{Binding SelectedLeftSideProperty.DisplayPropertyPath}"
                Click="PropertyButton_OnClick">
            <Button.ContextMenu>
                <ContextMenu ItemsSource="{Binding LeftSideDataModel.Children}">
                    <ContextMenu.ItemContainerStyle>
                        <Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MaterialDesignMenuItem}">
                            <Setter Property="ItemsSource" Value="{Binding Children}" />
                            <Setter Property="Header" Value="{Binding PropertyDescription.Name}" />
                            <Setter Property="ToolTip" Value="{Binding PropertyDescription.Description}" />
                            <Setter Property="Command" Value="{Binding Data.SelectLeftPropertyCommand, Source={StaticResource DataContextProxy}}" />
                            <Setter Property="CommandParameter" Value="{Binding}" />
                            <Setter Property="CommandTarget" Value="{Binding}" />
                            <Setter Property="IsEnabled" Value="{Binding IsMatchingFilteredTypes}" />
                            <Setter Property="IsSubmenuOpen" Value="{Binding IsVisualizationExpanded, Mode=TwoWay}" />
                        </Style>
                    </ContextMenu.ItemContainerStyle>
                </ContextMenu>
            </Button.ContextMenu>
            <Grid>
                <TextBlock Text="{Binding SelectedLeftSideProperty.PropertyDescription.Name}"
                           Visibility="{Binding SelectedLeftSideProperty, Converter={StaticResource NullToVisibilityConverter}}" />
                <TextBlock Text="« Select a property »"
                           FontStyle="Italic"
                           Visibility="{Binding SelectedLeftSideProperty, Converter={StaticResource NullToVisibilityConverter}, ConverterParameter=Inverted}" />
            </Grid>
        </Button>

        <!-- Operator -->
        <Button Grid.Row="0"
                Grid.Column="2"
                Style="{StaticResource DisplayConditionButtonLeftClickMenu}"
                Background="#7B7B7B"
                BorderBrush="#7B7B7B"
                Content="{Binding SelectedOperator.Description}"
                Click="PropertyButton_OnClick">
            <Button.ContextMenu>
                <ContextMenu ItemsSource="{Binding Operators}">
                    <ContextMenu.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <materialDesign:PackIcon Kind="{Binding Icon}" VerticalAlignment="Center" Margin="0 0 15 0" />
                                <TextBlock Text="{Binding Description}" VerticalAlignment="Center" />
                            </StackPanel>
                        </DataTemplate>
                    </ContextMenu.ItemTemplate>
                    <ContextMenu.ItemContainerStyle>
                        <Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MaterialDesignMenuItem}">
                            <Setter Property="Command" Value="{Binding Data.SelectOperatorCommand, Source={StaticResource DataContextProxy}}" />
                            <Setter Property="CommandParameter" Value="{Binding}" />
                            <Setter Property="CommandTarget" Value="{Binding}" />
                        </Style>
                    </ContextMenu.ItemContainerStyle>
                </ContextMenu>
            </Button.ContextMenu>
        </Button>

        <!-- Right side property if type is dynamic -->
        <Button Grid.Row="0"
                Grid.Column="3"
                Background="{DynamicResource PrimaryHueMidBrush}"
                BorderBrush="{DynamicResource PrimaryHueMidBrush}"
                Style="{StaticResource DisplayConditionButton}"
                ToolTip="{Binding SelectedRightSideProperty.DisplayPropertyPath}"
                Click="PropertyButton_OnClick"
                Visibility="{Binding ShowRightSidePropertySelection, Converter={x:Static s:BoolToVisibilityConverter.Instance}, Mode=OneWay}">
            <Button.ContextMenu>
                <ContextMenu ItemsSource="{Binding RightSideDataModel.Children}">
                    <ContextMenu.ItemContainerStyle>
                        <Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MaterialDesignMenuItem}">
                            <Setter Property="ItemsSource" Value="{Binding Children}" />
                            <Setter Property="Header" Value="{Binding PropertyDescription.Name}" />
                            <Setter Property="ToolTip" Value="{Binding PropertyDescription.Description}" />
                            <Setter Property="Command" Value="{Binding Data.SelectRightPropertyCommand, Source={StaticResource DataContextProxy}}" />
                            <Setter Property="CommandParameter" Value="{Binding}" />
                            <Setter Property="CommandTarget" Value="{Binding}" />
                            <Setter Property="IsEnabled" Value="{Binding IsMatchingFilteredTypes}" />
                        </Style>
                    </ContextMenu.ItemContainerStyle>
                </ContextMenu>
            </Button.ContextMenu>
            <Grid>
                <TextBlock Text="{Binding SelectedRightSideProperty.PropertyDescription.Name}"
                           Visibility="{Binding SelectedRightSideProperty, Converter={StaticResource NullToVisibilityConverter}}" />
                <TextBlock Text="« Select a property »"
                           FontStyle="Italic"
                           Visibility="{Binding SelectedRightSideProperty, Converter={StaticResource NullToVisibilityConverter}, ConverterParameter=Inverted}" />
            </Grid>
        </Button>

        <Grid Grid.Row="0"
              Grid.Column="3"
              Visibility="{Binding ShowRightSidePropertySelection, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}, Mode=OneWay}">
            <materialDesign:Transitioner SelectedIndex="{Binding RightSideTransitionIndex}" DefaultTransitionOrigin="0.5, 0.5" Margin="3 -4">
                <Button Style="{StaticResource DisplayConditionButton}"
                        Background="{DynamicResource PrimaryHueMidBrush}"
                        BorderBrush="{DynamicResource PrimaryHueMidBrush}"
                        Margin="0 4"
                        Command="{s:Action ActivateRightSideInputViewModel}"
                        HorizontalAlignment="Left">
                    <Grid>
                        <StackPanel Visibility="{Binding RightStaticValue, Converter={StaticResource NullToVisibilityConverter}}" Orientation="Horizontal">
                            <TextBlock FontWeight="Light"
                                       Text="{Binding SelectedLeftSideProperty.PropertyDescription.Prefix}"
                                       Visibility="{Binding SelectedLeftSideProperty.PropertyDescription.Prefix, Converter={StaticResource NullToVisibilityConverter}}"/>
                            <TextBlock Text="{Binding RightStaticValue}"/>
                            <TextBlock FontWeight="Light"
                                       Text="{Binding SelectedLeftSideProperty.PropertyDescription.Affix}"
                                       Visibility="{Binding SelectedLeftSideProperty.PropertyDescription.Affix, Converter={StaticResource NullToVisibilityConverter}}" />
                        </StackPanel>

                        <TextBlock Text="« Enter a value »"
                                   FontStyle="Italic"
                                   Visibility="{Binding RightStaticValue, Converter={StaticResource NullToVisibilityConverter}, ConverterParameter=Inverted}" />
                    </Grid>
                </Button>
                <Border BorderBrush="{DynamicResource PrimaryHueMidBrush}"
                        Background="{DynamicResource MaterialDesignPaper}"
                        CornerRadius="3"
                        Padding="3"
                        Width="140"
                        HorizontalAlignment="Left">
                    <ContentControl s:View.Model="{Binding RightSideInputViewModel}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
                </Border>
            </materialDesign:Transitioner>
        </Grid>
    </Grid>
</UserControl>