[ColorPicker] Order colors with up/down buttons. (#10392)

src/settings-ui/Microsoft.PowerToys.Settings.UI.Library/ColorFormatModel.cs

@@ -12,6 +12,8 @@ namespace Microsoft.PowerToys.Settings.UI.Library
         private string _name;
         private string _example;
         private bool _isShown;
+        private bool _canMoveUp = true;
+        private bool _canMoveDown = true;
 
         public ColorFormatModel(string name, string example, bool isShown)
         {
@@ -62,6 +64,34 @@ namespace Microsoft.PowerToys.Settings.UI.Library
             }
         }
 
+        public bool CanMoveUp
+        {
+            get
+            {
+                return _canMoveUp;
+            }
+
+            set
+            {
+                _canMoveUp = value;
+                OnPropertyChanged();
+            }
+        }
+
+        public bool CanMoveDown
+        {
+            get
+            {
+                return _canMoveDown;
+            }
+
+            set
+            {
+                _canMoveDown = value;
+                OnPropertyChanged();
+            }
+        }
+
         public event PropertyChangedEventHandler PropertyChanged;
 
         private void OnPropertyChanged([CallerMemberName] string propertyName = null)

src/settings-ui/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs

@@ -247,11 +247,28 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
                 ColorFormats.Add(remainingColorFormat);
             }
 
+            // Reordering colors with buttons: disable first and last buttons
+            ColorFormats[0].CanMoveUp = false;
+            ColorFormats[ColorFormats.Count - 1].CanMoveDown = false;
+
             ColorFormats.CollectionChanged += ColorFormats_CollectionChanged;
         }
 
         private void ColorFormats_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
         {
+            // Reordering colors with buttons: update buttons availability depending on order
+            if (ColorFormats.Count > 0)
+            {
+                foreach (var color in ColorFormats)
+                {
+                    color.CanMoveUp = true;
+                    color.CanMoveDown = true;
+                }
+
+                ColorFormats[0].CanMoveUp = false;
+                ColorFormats[ColorFormats.Count - 1].CanMoveDown = false;
+            }
+
             UpdateColorFormats();
             ScheduleSavingOfSettings();
         }

src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw

@@ -868,7 +868,7 @@
     <value>Open directly into the editor mode</value>
   </data>
   <data name="ColorPicker_ColorFormatsDescription.Text" xml:space="preserve">
-    <value>Editor color formats (Change the order by dragging)</value>
+    <value>Editor color formats</value>
   </data>
   <data name="ColorPicker_ShowColorName.Content" xml:space="preserve">
     <value>Show color name</value>
@@ -1170,4 +1170,10 @@ Win + Shift + O to toggle your video</value>
   <data name="Run_PluginsLoading.Text" xml:space="preserve">
     <value>Plugins are loading...</value>
   </data>
+  <data name="ColorPicker_ButtonDown.AutomationProperties.Name" xml:space="preserve">
+    <value>Move the color down</value>
+  </data>
+  <data name="ColorPicker_ButtonUp.AutomationProperties.Name" xml:space="preserve">
+    <value>Move the color up</value>
+  </data>
 </root>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml

@@ -1,4 +1,4 @@
-<Page
+<Page
     x:Class="Microsoft.PowerToys.Settings.UI.Views.ColorPickerPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -147,17 +147,22 @@
                        Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"
                        Margin="{StaticResource SmallTopMargin}"/>
             
+            <!-- Disabled reordering by dragging -->
+            <!-- CanReorderItems="True" AllowDrop="True" -->
             <ListView ItemsSource="{Binding ColorFormats, Mode=TwoWay}"
-                      AllowDrop="True"
                       MaxWidth="466"
                       IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                       AutomationProperties.LabeledBy="{Binding ElementName=ColorFormatsListViewLabel}"
-                      CanReorderItems="True"
                       HorizontalAlignment="Left"
                       Margin="-12,6,0,0">
+                <ItemsControl.ItemContainerTransitions>
+                    <TransitionCollection/>
+                </ItemsControl.ItemContainerTransitions>
                 <ListView.ItemTemplate>
                     <DataTemplate>
                         <Grid Width="466" Background="Transparent">
+                            <!-- Disabled reordering by dragging
+                            
                             <Interactivity:Interaction.Behaviors>
                                 <Core:EventTriggerBehavior EventName="PointerEntered">
                                     <Core:ChangePropertyAction TargetObject="{Binding ElementName=GripperIcon}" PropertyName="Visibility" Value="Visible" />
@@ -165,7 +170,19 @@
                                 <Core:EventTriggerBehavior EventName="PointerExited">
                                     <Core:ChangePropertyAction TargetObject="{Binding ElementName=GripperIcon}" PropertyName="Visibility" Value="Collapsed" />
                                 </Core:EventTriggerBehavior>
+                            </Interactivity:Interaction.Behaviors> -->
+
+                            <Interactivity:Interaction.Behaviors>
+                                <Core:EventTriggerBehavior EventName="PointerEntered">
+                                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonUp}" PropertyName="Visibility" Value="Visible" />
+                                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonDown}" PropertyName="Visibility" Value="Visible" />
+                                </Core:EventTriggerBehavior>
+                                <Core:EventTriggerBehavior EventName="PointerExited">
+                                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonUp}" PropertyName="Visibility" Value="Collapsed" />
+                                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonDown}" PropertyName="Visibility" Value="Collapsed" />
+                                </Core:EventTriggerBehavior>
                             </Interactivity:Interaction.Behaviors>
+                            
                             <Grid.RowDefinitions>
                                 <RowDefinition/>
                                 <RowDefinition/>
@@ -179,8 +196,13 @@
                                        Grid.Row="1"
                                        Margin="0,0,0,8"/>
                             <ToggleSwitch IsOn="{Binding IsShown, Mode=TwoWay}"
+                                          OnContent=""
+                                          OffContent=""
                                           Grid.RowSpan="2"
-                                          HorizontalAlignment="Right" />
+                                          HorizontalAlignment="Right"
+                                          Margin="0,0,-36,0"/>
+                            <!-- Disabled reordering by dragging
+                            
                             <TextBlock Text="&#xE76F;"
                                        Visibility="Collapsed"
                                        x:Name="GripperIcon"
@@ -189,7 +211,44 @@
                                        FontSize="16"
                                        HorizontalAlignment="Right"
                                        Margin="0,0,36,0"
-                                       FontFamily="Segoe MDL2 Assets" />
+                                       FontFamily="Segoe MDL2 Assets" /> -->
+
+                            <Button x:Uid="ColorPicker_ButtonUp"
+                                    x:Name="ButtonUp"
+                                    Content="&#xE74A;"
+                                    IsEnabled="{Binding CanMoveUp}"
+                                    Grid.Row="0"
+                                    HorizontalAlignment="Right"
+                                    Margin="0,0,24,0"
+                                    Background="Transparent"
+                                    Visibility="Collapsed"
+                                    FontFamily="Segoe MDL2 Assets"
+                                    Click="ReorderButtonUp_Click">
+                                <Interactivity:Interaction.Behaviors>
+                                    <Core:EventTriggerBehavior EventName="Click">
+                                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonUp}" PropertyName="Visibility" Value="Collapsed" />
+                                    <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonDown}" PropertyName="Visibility" Value="Collapsed" />
+                                </Core:EventTriggerBehavior>
+                                </Interactivity:Interaction.Behaviors>
+                            </Button>
+                            <Button x:Uid="ColorPicker_ButtonDown"
+                                    x:Name="ButtonDown"
+                                    Content="&#xE74B;"
+                                    IsEnabled="{Binding CanMoveDown}"
+                                    Grid.Row="1"
+                                    HorizontalAlignment="Right"
+                                    Margin="0,0,24,0"
+                                    Background="Transparent"
+                                    Visibility="Collapsed"
+                                    FontFamily="Segoe MDL2 Assets"
+                                    Click="ReorderButtonDown_Click" >
+                                <Interactivity:Interaction.Behaviors>
+                                    <Core:EventTriggerBehavior EventName="Click">
+                                        <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonUp}" PropertyName="Visibility" Value="Collapsed" />
+                                        <Core:ChangePropertyAction TargetObject="{Binding ElementName=ButtonDown}" PropertyName="Visibility" Value="Collapsed" />
+                                    </Core:EventTriggerBehavior>
+                                </Interactivity:Interaction.Behaviors>
+                            </Button>
                         </Grid>
                     </DataTemplate>
                 </ListView.ItemTemplate>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml.cs

@@ -47,5 +47,35 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 
             ColorPicker_ComboBox.SelectedIndex = index;
         }
+
+        private void ReorderButtonUp_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            ColorFormatModel color = ((Button)sender).DataContext as ColorFormatModel;
+            if (color == null)
+            {
+                return;
+            }
+
+            var index = ViewModel.ColorFormats.IndexOf(color);
+            if (index > 0)
+            {
+                ViewModel.ColorFormats.Move(index, index - 1);
+            }
+        }
+
+        private void ReorderButtonDown_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            ColorFormatModel color = ((Button)sender).DataContext as ColorFormatModel;
+            if (color == null)
+            {
+                return;
+            }
+
+            var index = ViewModel.ColorFormats.IndexOf(color);
+            if (index < ViewModel.ColorFormats.Count - 1)
+            {
+                ViewModel.ColorFormats.Move(index, index + 1);
+            }
+        }
     }
 }