Merge pull request #960 from adnan-bhaldar/ui/color-picker-card-pastel-columns-toggle-hover

feat(ui): color picker card, pastel preset columns and Material You toggle hover

Author: KnifeLemon

src/Filee.App/App.axaml

@@ -19,6 +19,11 @@
       <!-- The Theme page's colour picker shows only the spectrum: no empty tab strip above it. Set here because its
            flyout looks resources up outside the page. -->
       <x:Double x:Key="ColorViewTabStripHeight">0</x:Double>
+      <!-- The picker's own panels draw their background and borders from these: clear, so the card (the
+           FlyoutPresenter.nopadding style below) is the only surface and no stray lines show. -->
+      <SolidColorBrush x:Key="ColorViewContentBackgroundBrush" Color="Transparent" />
+      <SolidColorBrush x:Key="ColorViewContentBorderBrush" Color="Transparent" />
+      <SolidColorBrush x:Key="ColorViewTabBorderBrush" Color="Transparent" />
     </ResourceDictionary>
   </Application.Resources>
 
@@ -36,6 +41,34 @@
     <Style Selector="FlyoutPresenter.nopadding Border#ContentBackgroundBorder">
       <Setter Property="Margin" Value="0" />
     </Style>
+    <!-- The tab strip is hidden, but its selected tab still drew an accent line along the top of the card. -->
+    <Style Selector="FlyoutPresenter.nopadding TabItem /template/ Border#PART_SelectedPipe">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="FlyoutPresenter.nopadding TabItem:selected /template/ Border#PART_SelectedPipe">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <!-- The picker's card: the page's surface with the theme's soft corners and a faint outline. -->
+    <Style Selector="FlyoutPresenter.nopadding">
+      <Setter Property="Background" Value="{DynamicResource SurfaceBrush}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource SubtleBorderBrush}" />
+      <Setter Property="BorderThickness" Value="1" />
+      <Setter Property="CornerRadius" Value="{DynamicResource SoftRadius}" />
+    </Style>
+    <!-- The spectrum square follows the theme's softness too. -->
+    <Style Selector="FlyoutPresenter.nopadding ColorSpectrum">
+      <Setter Property="CornerRadius" Value="{DynamicResource SoftRadiusSmall}" />
+    </Style>
+    <!-- The swatch button on the pages: soft corners, a quiet outline, and a card colour around the swatch so a white
+         one still shows. -->
+    <Style Selector="ColorPicker">
+      <Setter Property="CornerRadius" Value="{DynamicResource SoftRadiusSmall}" />
+    </Style>
+    <Style Selector="ColorPicker /template/ DropDownButton">
+      <Setter Property="Background" Value="{DynamicResource SurfaceAltBrush}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource SubtleBorderBrush}" />
+      <Setter Property="BorderThickness" Value="1.5" />
+    </Style>
     <StyleInclude Source="avares://Filee/Styles/Soft.axaml" />
     <StyleInclude Source="avares://Filee/Styles/Controls.axaml" />
     <StyleInclude Source="avares://Filee/Styles/TagEditor.axaml" />

src/Filee.App/Styles/Soft.axaml

@@ -455,9 +455,11 @@
     <Setter Property="Background" Value="{DynamicResource AccentBrush}" />
     <Setter Property="BorderBrush" Value="{DynamicResource AccentBrush}" />
   </Style>
+  <!-- On + hover: the same accent as the Save button's hover (the accent, a little darker), not AccentStrong, which is
+       the dark navy / pale lavender "on container" colour of the palette. -->
   <Style Selector="Window.material-you ToggleSwitch:checked:pointerover /template/ Border#SwitchKnobBounds">
-    <Setter Property="Background" Value="{DynamicResource AccentStrongBrush}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource AccentStrongBrush}" />
+    <Setter Property="Background" Value="{DynamicResource AccentButtonBackgroundPointerOver}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource AccentButtonBackgroundPointerOver}" />
   </Style>
   <Style Selector="Window.material-you ToggleSwitch:checked /template/ Ellipse#SwitchKnob">
     <Setter Property="Fill" Value="{DynamicResource OnAccentBrush}" />

src/Filee.App/Views/Pages/ThemePage.axaml

@@ -1,11 +1,19 @@
 <UserControl xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:vm="using:Filee.App.ViewModels.Pages"
+             xmlns:vmw="using:Filee.App.ViewModels"
              xmlns:c="using:Filee.App.Controls"
              xmlns:settings="using:Filee.Core.Settings"
              x:Class="Filee.App.Views.Pages.ThemePage"
              x:DataType="vm:ThemePageViewModel">
   <UserControl.Styles>
+    <!-- Pastel presets: 2 columns, 3 with the navigation collapsed (see the grid below). -->
+    <Style Selector="UniformGrid.presets">
+      <Setter Property="Columns" Value="2" />
+    </Style>
+    <Style Selector="UniformGrid.presets.wide">
+      <Setter Property="Columns" Value="3" />
+    </Style>
     <Style Selector="Button.choice-card">
       <Setter Property="CornerRadius" Value="{DynamicResource SoftRadius}" />
       <Setter Property="Padding" Value="14,10" />
@@ -205,7 +213,10 @@
             <ItemsControl ItemsSource="{Binding PastelPresets}">
               <ItemsControl.ItemsPanel>
                 <ItemsPanelTemplate>
-                  <UniformGrid Columns="2" />
+                  <!-- Two columns; three while the navigation is collapsed to icons (the page is wider then). The
+                       "wide" class follows the main window's collapsed state, and the styles above set the columns. -->
+                  <UniformGrid Classes="presets"
+                               Classes.wide="{Binding $parent[Window].((vmw:MainWindowViewModel)DataContext).IsNavCollapsed}" />
                 </ItemsPanelTemplate>
               </ItemsControl.ItemsPanel>
               <ItemsControl.ItemTemplate>