Update settings window

PixiEditor/Helpers/Converters/EqualityBoolToVisibilityConverter.cs

@@ -9,7 +9,9 @@ namespace PixiEditor.Helpers.Converters
     {
         public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
         {
+            if (value == null)
+                return false;
             return value.Equals(parameter) ? Visibility.Visible : Visibility.Collapsed;
         }
     }
-}
+}

PixiEditor/Styles/LabelStyles.xaml

@@ -5,7 +5,20 @@
     <Style TargetType="Label" x:Key="BaseLabel">
         <Setter Property="Foreground" Value="White"/>
     </Style>
-    
+
+    <Style x:Key="SettingsHeader" TargetType="Label" BasedOn="{StaticResource BaseLabel}">
+        <Setter Property="FontSize" Value="15"/>
+        <Setter Property="Padding" Value="0"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
+        <Setter Property="FontWeight" Value="DemiBold"/>
+    </Style>
+
+    <Style x:Key="SettingsText" TargetType="Label" BasedOn="{StaticResource BaseLabel}">
+        <Setter Property="FontSize" Value="12"/>
+        <Setter Property="Padding" Value="0"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
+    </Style>
+
     <Style x:Key="Header1" TargetType="Label" BasedOn="{StaticResource BaseLabel}">
         <Setter Property="FontSize" Value="36"/>
         <Setter Property="Margin" Value="20"/>
@@ -19,4 +32,4 @@
     <Style x:Key="Paragraph" TargetType="Label" BasedOn="{StaticResource BaseLabel}">
         <Setter Property="Margin" Value="0 10 0 10"/>
     </Style>
-</ResourceDictionary>
+</ResourceDictionary>

PixiEditor/Views/Dialogs/SettingsWindow.xaml

@@ -3,12 +3,21 @@
         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:local="clr-namespace:PixiEditor.Views.Dialogs" xmlns:viewmodels="clr-namespace:PixiEditor.ViewModels" xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters" xmlns:views="clr-namespace:PixiEditor.Views" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" xmlns:usercontrols="clr-namespace:PixiEditor.Views.UserControls"
+        xmlns:local="clr-namespace:PixiEditor.Views.Dialogs" 
+        xmlns:sys="clr-namespace:System;assembly=System.Runtime"
+        xmlns:viewmodels="clr-namespace:PixiEditor.ViewModels" 
+        xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters" 
+        xmlns:views="clr-namespace:PixiEditor.Views" 
+        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
+        xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" 
+        xmlns:usercontrols="clr-namespace:PixiEditor.Views.UserControls"
+        xmlns:dial="clr-namespace:PixiEditor.Views.Dialogs"
         mc:Ignorable="d"
         Title="Settings" Name="window" 
-        Height="600" Width="800"
-        MinHeight="350" MinWidth="600"
+        Height="500" Width="640"
+        MinHeight="500" MinWidth="640"
         WindowStyle="None" DataContext="{DynamicResource SettingsWindowViewModel}"
+        WindowStartupLocation="CenterScreen"
         BorderBrush="Black" BorderThickness="1">
     <Window.Resources>
         <viewmodels:SettingsWindowViewModel x:Key="SettingsWindowViewModel"/>
@@ -24,88 +33,131 @@
                         Executed="CommandBinding_Executed_Close" />
     </Window.CommandBindings>
 
-    <Grid Background="{StaticResource MainColor}" Focusable="True">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="200"/>
-            <ColumnDefinition Width="147*"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="35" />
-            <RowDefinition />
-        </Grid.RowDefinitions>
+    <DockPanel Background="{StaticResource MainColor}" Focusable="True">
         <i:Interaction.Behaviors>
             <behaviours:ClearFocusOnClickBehavior/>
         </i:Interaction.Behaviors>
-        
-        <DockPanel Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Background="{StaticResource MainColor}">
-            <Label Foreground="White" FontSize="16">Settings</Label>
-            <Button DockPanel.Dock="Right" HorizontalAlignment="Right" Style="{StaticResource CloseButtonStyle}"
-                    WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
-                    Command="{x:Static SystemCommands.CloseWindowCommand}" />
-        </DockPanel>
-        <StackPanel Grid.Row="1" Grid.Column="0">
-            <Button Style="{StaticResource AccentDarkRoundButton}" Margin="10 5 10 5"
-                    Command="{Binding SelectCategoryCommand}" CommandParameter="General">General</Button>
-            <Button Style="{StaticResource AccentDarkRoundButton}" Margin="10 5 10 5" 
-                    Command="{Binding SelectCategoryCommand}" CommandParameter="Updates"
-                    Visibility="{Binding ShowUpdateTab, Converter={StaticResource BoolToVisibilityConverter}}">Updates</Button>
-            <Button Style="{StaticResource AccentDarkRoundButton}" Margin="10 5 10 5" 
-                    Command="{Binding SelectCategoryCommand}" CommandParameter="Discord">Discord</Button>
-        </StackPanel>
+
+        <dial:DialogTitleBar DockPanel.Dock="Top"
+            TitleText="Settings" CloseCommand="{x:Static SystemCommands.CloseWindowCommand}"/>
+
+        <ListBox DockPanel.Dock="Left" SelectedIndex="0" x:Name="pages" 
+                 Background="Transparent" BorderThickness="0" Width="150">
+            <ListBox.ItemContainerStyle>
+                <Style TargetType="ListBoxItem">
+                    <Setter Property="BorderThickness" Value="0"/>
+                </Style>
+            </ListBox.ItemContainerStyle>
+            <ListBox.ItemTemplate>
+                <DataTemplate>
+                    <TextBlock Margin="10 5 10 5" FontSize="15" Foreground="White" Text="{Binding}"/>
+                </DataTemplate>
+            </ListBox.ItemTemplate>
+            <ListBox.ItemsSource>
+                <x:Array Type="{x:Type sys:String}">
+                    <sys:String>General</sys:String>
+                    <sys:String>Discord</sys:String>
+                </x:Array>
+            </ListBox.ItemsSource>
+        </ListBox>
+
         <Grid Grid.Row="1" Grid.Column="1" Background="{StaticResource AccentColor}">
-            <Grid Visibility="{Binding SelectedCategory, Converter={converters:EqualityBoolToVisibilityConverter},
-            ConverterParameter='General'}">
-                <StackPanel Orientation="Vertical">
-                    <CheckBox Content="Show Document Preview in Taskbar" Margin="25,30,0,0"
-                                  IsChecked="{Binding SettingsSubViewModel.General.ImagePreviewInTaskbar}"/>
-                    <Label Content="File" Style="{StaticResource Header1}"/>
-                    <StackPanel Orientation="Vertical" Margin="50 0 50 0">
-                        <CheckBox Content="Show Startup Window" 
-                                  IsChecked="{Binding SettingsSubViewModel.File.ShowStartupWindow}"/>
-                        <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
-                            <Label Content="Max Saved Opened Recently:" ToolTip="How many documents are shown under File > Recent. Default: 8" Style="{StaticResource BaseLabel}"/>
-                            <views:NumberInput Min="0" FontSize="16" Value="{Binding SettingsSubViewModel.File.MaxOpenedRecently, Mode=TwoWay}" Width="40"/>
-                        </StackPanel>
-                        <Label Content="Default new file size:" Style="{StaticResource Header2}" Margin="0 20 0 20"/>
-                        <StackPanel Orientation="Horizontal" Margin="40,0,0,0">
-                            <Label Content="Width:" Style="{StaticResource BaseLabel}"/>
-                            <views:SizeInput FontSize="16" Size="{Binding SettingsSubViewModel.File.DefaultNewFileWidth, Mode=TwoWay}" 
-                                             Width="70" Height="25" MaxSize="9999"/>
-                            <Label Content="Height:" Style="{StaticResource BaseLabel}"/>
-                            <views:SizeInput FontSize="16" Size="{Binding SettingsSubViewModel.File.DefaultNewFileHeight, Mode=TwoWay}" 
-                                             Width="70" Height="25" MaxSize="9999"/>
-                        </StackPanel>
-                    </StackPanel>
-                </StackPanel>
-            </Grid>
-            <Grid Visibility="{Binding SelectedCategory, Converter={converters:EqualityBoolToVisibilityConverter},
-            ConverterParameter='Updates'}">
-                <StackPanel Orientation="Vertical">
-                    <Label Style="{StaticResource Header1}" Content="Auto-updates"/>
-                    <StackPanel Orientation="Vertical" Margin="50 0 50 0">
-                        <CheckBox IsChecked="{Binding SettingsSubViewModel.Update.CheckUpdatesOnStartup}" Content="Check updates on startup"/>
-                        <StackPanel Orientation="Horizontal">
-                        <Label VerticalAlignment="Center" Content="Update source" Style="{StaticResource BaseLabel}"/>
-                            <ComboBox Width="110" Margin="0 10 0 10" HorizontalAlignment="Left" 
-                                      ItemsSource="{Binding SettingsSubViewModel.Update.UpdateChannels}"
-                                      SelectedValue="{Binding SettingsSubViewModel.Update.UpdateChannelName}"/>
-                        </StackPanel>
-                    </StackPanel>
-                </StackPanel>
-            </Grid>
-            <Grid Visibility="{Binding SelectedCategory, Converter={converters:EqualityBoolToVisibilityConverter},
-            ConverterParameter='Discord'}">
-                <StackPanel Orientation="Vertical">
-                    <Label Style="{StaticResource Header1}" Content="Rich Presence"/>
-                    <StackPanel Orientation="Vertical" Margin="50 0 50 0">
-                        <CheckBox Margin="5" IsChecked="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" Content="Enabled"/>
-                        <CheckBox Margin="5" IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" IsChecked="{Binding SettingsSubViewModel.Discord.ShowDocumentName}" Content="Show Document Name"/>
-                        <CheckBox Margin="5" IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" IsChecked="{Binding SettingsSubViewModel.Discord.ShowDocumentSize}" Content="Show Document Size"/>
-                        <CheckBox Margin="5" IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" IsChecked="{Binding SettingsSubViewModel.Discord.ShowLayerCount}" Content="Show Layer Count"/>
-                        <usercontrols:DiscordRPPreview Margin="5" State="{Binding SettingsSubViewModel.Discord.StatePreview}" Detail="{Binding SettingsSubViewModel.Discord.DetailPreview}" Width="280" IsPlaying="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"/>
-                    </StackPanel>
-                </StackPanel>
+            <Grid Visibility="{Binding SelectedItem, ElementName=pages, Converter={converters:EqualityBoolToVisibilityConverter},
+            ConverterParameter='General'}" Margin="15,10" Tag="27">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="15"/>
+                    <ColumnDefinition Width="230"/>
+                    <ColumnDefinition/>
+                </Grid.ColumnDefinitions>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                </Grid.RowDefinitions>
+
+                <Label Grid.Row="0" Grid.ColumnSpan="2" Style="{StaticResource SettingsHeader}">Misc</Label>
+
+                <CheckBox Grid.Row="1" Grid.Column="1"
+                          VerticalAlignment="Center"
+                          IsChecked="{Binding SettingsSubViewModel.File.ShowStartupWindow}">Show startup window</CheckBox>
+
+                <CheckBox Grid.Row="2" Grid.Column="1"
+                          VerticalAlignment="Center"
+                          IsChecked="{Binding SettingsSubViewModel.General.ImagePreviewInTaskbar}">Show image preview in taskbar</CheckBox>
+
+                <Label Grid.Row="3" Grid.Column="1" Style="{StaticResource SettingsText}"
+                       ToolTip="How many documents are shown under File > Recent. Default: 8">Recent file list length</Label>
+                <views:NumberInput Grid.Row="3" Grid.Column="2" 
+                                   Min="0" FontSize="12" HorizontalAlignment="Left"
+                                   Value="{Binding SettingsSubViewModel.File.MaxOpenedRecently, Mode=TwoWay}" Height="19" Width="40"/>
+
+                <Label Grid.Row="4" Grid.ColumnSpan="2"  Style="{StaticResource SettingsHeader}">Default new file size</Label>
+
+                <Label Grid.Row="5" Grid.Column="1" Style="{StaticResource SettingsText}">Width</Label>
+                <views:SizeInput Grid.Row="5" Grid.Column="2" 
+                                 Size="{Binding SettingsSubViewModel.File.DefaultNewFileWidth, Mode=TwoWay}" 
+                                 Width="70" Height="21" MaxSize="9999" HorizontalAlignment="Left"/>
+
+                <Label Grid.Row="6" Grid.Column="1" Style="{StaticResource SettingsText}">Height</Label>
+                <views:SizeInput Grid.Row="6" Grid.Column="2" 
+                                 Size="{Binding SettingsSubViewModel.File.DefaultNewFileHeight, Mode=TwoWay}" 
+                                 Width="70" Height="21" MaxSize="9999" HorizontalAlignment="Left"/>
+
+                <Label Grid.Row="7" Grid.ColumnSpan="2" Style="{StaticResource SettingsHeader}">Automatic updates</Label>
+
+                <CheckBox Grid.Row="8" Grid.Column="1" VerticalAlignment="Center"
+                    IsChecked="{Binding SettingsSubViewModel.Update.CheckUpdatesOnStartup}">Check updates on startup</CheckBox>
+
+                <Label Grid.Row="9" Grid.Column="1" Style="{StaticResource SettingsText}">Update stream</Label>
+                <ComboBox Grid.Row="9" Grid.Column="2" VerticalAlignment="Center"
+                    Width="110" Height="22" HorizontalAlignment="Left"
+                    ItemsSource="{Binding SettingsSubViewModel.Update.UpdateChannels}"
+                    SelectedValue="{Binding SettingsSubViewModel.Update.UpdateChannelName}"/>
             </Grid>
+
+            <StackPanel Visibility="{Binding SelectedItem, ElementName=pages, Converter={converters:EqualityBoolToVisibilityConverter},
+            ConverterParameter='Discord'}" Margin="15,10">
+                <Grid Tag="27">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="15"/>
+                    <ColumnDefinition/>
+                </Grid.ColumnDefinitions>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                </Grid.RowDefinitions>
+
+                <Label Grid.Row="0" Grid.ColumnSpan="2" Style="{StaticResource SettingsHeader}">Rich Presence</Label>
+
+                <CheckBox Grid.Row="1" Grid.Column="1" VerticalAlignment="Center"
+                    IsChecked="{Binding SettingsSubViewModel.Discord.EnableRichPresence}">Enabled</CheckBox>
+                <CheckBox Grid.Row="2" Grid.Column="1" VerticalAlignment="Center"
+                    IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" 
+                    IsChecked="{Binding SettingsSubViewModel.Discord.ShowDocumentName}">Show image name</CheckBox>
+                <CheckBox Grid.Row="3" Grid.Column="1" VerticalAlignment="Center"
+                    IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" 
+                    IsChecked="{Binding SettingsSubViewModel.Discord.ShowDocumentSize}">Show image size</CheckBox>
+                <CheckBox Grid.Row="4" Grid.Column="1" VerticalAlignment="Center"
+                    IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" 
+                    IsChecked="{Binding SettingsSubViewModel.Discord.ShowLayerCount}">Show layer count</CheckBox>
+                </Grid>
+                <usercontrols:DiscordRPPreview 
+                    Margin="15"
+                    Width="280"
+                    State="{Binding SettingsSubViewModel.Discord.StatePreview}" 
+                    Detail="{Binding SettingsSubViewModel.Discord.DetailPreview}" 
+                    IsPlaying="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"/>
+            </StackPanel>
         </Grid>
-    </Grid>
+    </DockPanel>
 </Window>

PixiEditor/Views/MainWindow.xaml

@@ -12,8 +12,13 @@
         xmlns:ui="clr-namespace:PixiEditor.Helpers.UI"
         xmlns:cmd="http://www.galasoft.ch/mvvmlight" 
         xmlns:avalondock="https://github.com/Dirkster99/AvalonDock"
-        xmlns:colorpicker="clr-namespace:ColorPicker;assembly=ColorPicker" xmlns:usercontrols="clr-namespace:PixiEditor.Views.UserControls" xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" 
-        xmlns:avalonDockTheme="clr-namespace:PixiEditor.Styles.AvalonDock" xmlns:layerUserControls="clr-namespace:PixiEditor.Views.UserControls.Layers" xmlns:sys="clr-namespace:System;assembly=System.Runtime" d:DataContext="{d:DesignInstance Type=vm:ViewModelMain}"
+        xmlns:colorpicker="clr-namespace:ColorPicker;assembly=ColorPicker" 
+        xmlns:usercontrols="clr-namespace:PixiEditor.Views.UserControls" 
+        xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" 
+        xmlns:avalonDockTheme="clr-namespace:PixiEditor.Styles.AvalonDock" 
+        xmlns:layerUserControls="clr-namespace:PixiEditor.Views.UserControls.Layers" 
+        xmlns:sys="clr-namespace:System;assembly=System.Runtime" 
+        d:DataContext="{d:DesignInstance Type=vm:ViewModelMain}"
         mc:Ignorable="d" WindowStyle="None" Initialized="MainWindow_Initialized"
         Title="PixiEditor" Name="mainWindow" Height="1000" Width="1600" Background="{StaticResource MainColor}"
         WindowStartupLocation="CenterScreen" WindowState="Maximized">

PixiEditor/Views/UserControls/NumberInput.xaml

@@ -9,7 +9,7 @@
              d:DesignHeight="20" d:DesignWidth="40" x:Name="numberInput">
     <TextBox TextAlignment="Center" Style="{StaticResource DarkTextBoxStyle}" Focusable="True"
              InputScope="Number" MouseWheel="TextBox_MouseWheel"
-             PreviewTextInput="TextBox_PreviewTextInput" Text="{Binding ElementName=numberInput, Path=Value}">
+             PreviewTextInput="TextBox_PreviewTextInput" Text="{Binding ElementName=numberInput, Path=Value}" Padding="0" VerticalContentAlignment="Center">
         <i:Interaction.Behaviors>
             <behaviours:TextBoxFocusBehavior SelectOnMouseClick="True" ConfirmOnEnter="True"/>
             <behaviours:GlobalShortcutFocusBehavior/>