Changed the Base64 Image tool to use the Code editor instead of a Text box (#532)

* Changed the Base64 Image tool to use the Code editor instead of a Text box

* Fixed keyboard navigation

Author: veler

src/dev/impl/DevToys/DevToys.csproj

@@ -98,6 +98,7 @@
     <Compile Include="ViewModels\Tools\Converters\Timestamp\TimestampToolViewModel.cs" />
     <Compile Include="ViewModels\Tools\EncodersDecoders\Base64ImageEncoderDecoder\Base64ImageEncoderDecoderToolProvider.cs" />
     <Compile Include="ViewModels\Tools\EncodersDecoders\Base64ImageEncoderDecoder\Base64ImageEncoderDecoderToolViewModel.cs" />
+    <Compile Include="ViewModels\Tools\EncodersDecoders\Base64ImageEncoderDecoder\MockSettingsProvider.cs" />
     <Compile Include="ViewModels\Tools\EncodersDecoders\GZipEncoderDecoder\GZipEncoderDecoderToolProvider.cs" />
     <Compile Include="ViewModels\Tools\EncodersDecoders\GZipEncoderDecoder\GZipEncoderDecoderToolViewModel.cs" />
     <Compile Include="Helpers\JsonYaml\Core\DecimalJsonConverter.cs" />

src/dev/impl/DevToys/UI/Controls/CodeEditor.xaml

@@ -17,6 +17,7 @@
         <converters:NullToVisibilityConverter x:Key="InvertedNullToVisibilityConverter" IsInverted="True"/>
         <converters:InvertedBooleanConverter x:Key="InvertedBooleanConverter"/>
         <converters:BooleanToTextWrappingConverter x:Key="BooleanToTextWrappingConverter" TextWrappingOnTrue="Wrap" TextWrappingOnFalse="NoWrap"/>
+        <converters:BooleanToIntegerConverter x:Key="ReadOnlyToClearButtonTabIndexConverter" ValueOnTrue="3" ValueOnFalse="0"/>
     </UserControl.Resources>
 
     <Grid>
@@ -46,7 +47,6 @@
             Grid.Column="1"
             Orientation="Horizontal"
             HorizontalAlignment="Right"
-            Spacing="8"
             Margin="0,0,0,8"
             AutomationProperties.LabeledBy="{x:Bind HeaderTextBlock}">
             <Button
@@ -66,25 +66,17 @@
                 x:DeferLoadStrategy="Lazy"
                 Visibility="Collapsed"
                 TabIndex="0"
+                Margin="8,0,0,0"
                 ToolTipService.ToolTip="{Binding Instance.Common.OpenFile, Mode=OneTime, Source={StaticResource LanguageManager}}"
                 AutomationProperties.Name="{Binding Instance.Common.OpenFile, Mode=OneTime, Source={StaticResource LanguageManager}}"
                 Click="OpenFileButton_Click">
                 <FontIcon Glyph="&#xF378;"/>
             </Button>
-            <Button
-                x:Name="ClearButton"
-                x:DeferLoadStrategy="Lazy"
-                Visibility="Collapsed"
-                TabIndex="0"
-                ToolTipService.ToolTip="{Binding Instance.Common.Clear, Mode=OneTime, Source={StaticResource LanguageManager}}"
-                AutomationProperties.Name="{Binding Instance.Common.Clear, Mode=OneTime, Source={StaticResource LanguageManager}}"
-                Click="ClearButton_Click">
-                <FontIcon Glyph="&#xF369;"/>
-            </Button>
             <Button
                 x:Name="CopyButton"
                 x:DeferLoadStrategy="Lazy"
-                TabIndex="2"
+                TabIndex="{x:Bind IsReadOnly, Mode=OneWay, Converter={StaticResource ReadOnlyToClearButtonTabIndexConverter}}"
+                Margin="8,0,0,0"
                 Visibility="Collapsed"
                 AutomationProperties.Name="{Binding Instance.Common.Copy, Mode=OneTime, Source={StaticResource LanguageManager}}"
                 Click="CopyButton_Click">
@@ -93,6 +85,17 @@
                     <TextBlock VerticalAlignment="Center" Text="{Binding Instance.Common.Copy, Mode=OneTime, Source={StaticResource LanguageManager}}"/>
                 </StackPanel>
             </Button>
+            <Button
+                x:Name="ClearButton"
+                x:DeferLoadStrategy="Lazy"
+                Visibility="Collapsed"
+                TabIndex="{x:Bind IsReadOnly, Mode=OneWay, Converter={StaticResource ReadOnlyToClearButtonTabIndexConverter}}"
+                Margin="8,0,0,0"
+                ToolTipService.ToolTip="{Binding Instance.Common.Clear, Mode=OneTime, Source={StaticResource LanguageManager}}"
+                AutomationProperties.Name="{Binding Instance.Common.Clear, Mode=OneTime, Source={StaticResource LanguageManager}}"
+                Click="ClearButton_Click">
+                <FontIcon Glyph="&#xF369;"/>
+            </Button>
         </StackPanel>
         <Grid
             x:Name="CodeEditorCoreContainer"

src/dev/impl/DevToys/UI/Controls/CodeEditor.xaml.cs

@@ -85,6 +85,19 @@ public bool IsReadOnly
             set => SetValue(IsReadOnlyProperty, value);
         }
 
+        public static readonly DependencyProperty CanCopyWhenNotReadOnlyProperty
+            = DependencyProperty.Register(
+                nameof(CanCopyWhenNotReadOnly),
+                typeof(bool),
+                typeof(CodeEditor),
+                new PropertyMetadata(false, OnIsReadOnlyPropertyChangedCalled));
+
+        public bool CanCopyWhenNotReadOnly
+        {
+            get => (bool)GetValue(CanCopyWhenNotReadOnlyProperty);
+            set => SetValue(CanCopyWhenNotReadOnlyProperty, value);
+        }
+
         public static DependencyProperty CodeLanguageProperty { get; }
             = DependencyProperty.Register(
                 nameof(CodeLanguage),
@@ -301,6 +314,7 @@ private CodeEditorCore ReloadCodeEditorCore()
                 _codeEditorCore = new CodeEditorCore();
                 _codeEditorCore.EditorLoading += CodeEditorCore_Loading;
                 _codeEditorCore.InternalException += CodeEditorCore_InternalException;
+                _codeEditorCore.TabIndex = 0;
 
                 _codeEditorCore.SetBinding(
                     CodeEditorCore.CodeLanguageProperty,
@@ -406,14 +420,19 @@ private void UpdateUI()
             }
             else
             {
-                if (CopyButton is not null)
+                if (CanCopyWhenNotReadOnly)
+                {
+                    GetCopyButton().Visibility = Visibility.Visible;
+                }
+                else if (CopyButton is not null)
                 {
                     CopyButton.Visibility = Visibility.Collapsed;
                 }
 
                 GetPasteButton().Visibility = Visibility.Visible;
                 GetOpenFileButton().Visibility = Visibility.Visible;
                 GetClearButton().Visibility = Visibility.Visible;
+                GetPasteButton().Visibility = Visibility.Visible;
             }
 
             if (IsDiffViewMode)

src/dev/impl/DevToys/UI/Controls/CustomTextBox.xaml

@@ -86,7 +86,7 @@
             <Button
                 x:Name="CopyButton"
                 x:DeferLoadStrategy="Lazy"
-                TabIndex="2"
+                TabIndex="{x:Bind IsReadOnly, Mode=OneWay, Converter={StaticResource ReadOnlyToClearButtonTabIndexConverter}}"
                 Visibility="Collapsed"
                 AutomationProperties.Name="{Binding Instance.Common.Copy, Mode=OneTime, Source={StaticResource LanguageManager}}"
                 Click="CopyButton_Click">

src/dev/impl/DevToys/ViewModels/Tools/EncodersDecoders/Base64ImageEncoderDecoder/Base64ImageEncoderDecoderToolViewModel.cs

@@ -5,9 +5,7 @@
 using System.Composition;
 using System.Diagnostics;
 using System.IO;
-using System.Linq;
 using System.Runtime.InteropServices.WindowsRuntime;
-using System.Text;
 using System.Threading;
 using System.Threading.Tasks;
 using DevToys.Api.Core;
@@ -19,11 +17,8 @@
 using DevToys.Views.Tools.Base64ImageEncoderDecoder;
 using Microsoft.Toolkit.Mvvm.ComponentModel;
 using Microsoft.Toolkit.Mvvm.Input;
-using Windows.Graphics.Imaging;
 using Windows.Storage;
 using Windows.Storage.Streams;
-using Windows.UI.Xaml.Media;
-using Windows.UI.Xaml.Media.Imaging;
 
 namespace DevToys.ViewModels.Tools.Base64ImageEncoderDecoder
 {
@@ -44,7 +39,6 @@ private static readonly SettingDefinition<string> Encoder
         private readonly object _lockObject = new();
         private readonly List<string> _tempFileNames = new();
         private readonly IMarketingService _marketingService;
-        private readonly ISettingsProvider _settingsProvider;
 
         private CancellationTokenSource? _cancellationTokenSource;
         private string? _base64Data;
@@ -55,6 +49,8 @@ private static readonly SettingDefinition<string> Encoder
 
         internal Base64ImageEncoderDecoderStrings Strings => LanguageManager.Instance.Base64ImageEncoderDecoder;
 
+        internal MockSettingsProvider MockSettingsProvider { get; }
+
         internal string? Base64Data
         {
             get => _base64Data;
@@ -88,7 +84,7 @@ internal StorageFile? ImageFile
         [ImportingConstructor]
         public Base64ImageEncoderDecoderToolViewModel(ISettingsProvider settingsProvider, IMarketingService marketingService)
         {
-            _settingsProvider = settingsProvider;
+            MockSettingsProvider = new MockSettingsProvider(settingsProvider);
             _marketingService = marketingService;
 
             FilesSelectedCommand = new RelayCommand<StorageFile[]>(ExecuteFilesSelectedCommand);

src/dev/impl/DevToys/ViewModels/Tools/EncodersDecoders/Base64ImageEncoderDecoder/MockSettingsProvider.cs

@@ -0,0 +1,49 @@
+#nullable enable
+
+using System;
+using System.Diagnostics;
+using DevToys.Api.Core.Settings;
+using DevToys.Core.Settings;
+
+namespace DevToys.ViewModels.Tools.Base64ImageEncoderDecoder
+{
+    internal class MockSettingsProvider : ISettingsProvider
+    {
+        private readonly ISettingsProvider _realSettingsProvider;
+
+        public event EventHandler<SettingChangedEventArgs>? SettingChanged;
+
+        public MockSettingsProvider(ISettingsProvider realSettingsProvider)
+        {
+            _realSettingsProvider = realSettingsProvider;
+        }
+
+        public T GetSetting<T>(SettingDefinition<T> settingDefinition)
+        {
+            if (settingDefinition.Name == PredefinedSettings.TextEditorTextWrapping.Name)
+            {
+                // Force to wrap the text of the code editor.
+                Debug.Assert(typeof(T) == typeof(bool));
+                return (T)(object)true;
+            }
+            else if (settingDefinition.Name == PredefinedSettings.TextEditorLineNumbers.Name)
+            {
+                // Force to hide the line numbers of the code editor.
+                Debug.Assert(typeof(T) == typeof(bool));
+                return (T)(object)false;
+            }
+
+            return _realSettingsProvider.GetSetting(settingDefinition);
+        }
+
+        public void ResetSetting<T>(SettingDefinition<T> settingDefinition)
+        {
+            throw new NotImplementedException();
+        }
+
+        public void SetSetting<T>(SettingDefinition<T> settingDefinition, T value)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

src/dev/impl/DevToys/Views/Tools/EncodersDecoders/Base64ImageEncoderDecoder/Base64ImageEncoderDecoderToolPage.xaml

@@ -8,7 +8,7 @@
     xmlns:ex="using:DevToys.UI.Extensions"
     xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
     mc:Ignorable="d"
-    NavigationCacheMode="Disabled">
+    NavigationCacheMode="Required">
 
     <Grid x:Name="RootGrid" RowSpacing="12" Margin="0,0,0,16">
         <VisualStateManager.VisualStateGroups>
@@ -61,17 +61,17 @@
             <RowDefinition MinHeight="100"/>
         </Grid.RowDefinitions>
 
-        <controls:CustomTextBox
+        <controls:CodeEditor
             x:Name="Base64TextEditor"
             Grid.Column="0"
             Grid.Row="0"
             Grid.RowSpan="3"
             MinHeight="150"
-            AcceptsReturn="True"
-            IsRichTextEdit="True"
             CanCopyWhenNotReadOnly="True"
             Header="{x:Bind ViewModel.Strings.Base64InputTitle}"
-            Text="{x:Bind ViewModel.Base64Data, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
+            SettingsProvider="{x:Bind ViewModel.MockSettingsProvider}"
+            Text="{x:Bind ViewModel.Base64Data, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
+            CodeLanguage="text"/>
 
         <toolkit:GridSplitter
             x:Name="VerticalGridSplitter"

src/dev/impl/DevToys/Views/Tools/Text/StringUtilities/StringUtilitiesToolPage.xaml

@@ -57,6 +57,7 @@
             Header="{x:Bind ViewModel.Strings.String}"
             AcceptsReturn="True"
             IsRichTextEdit="False"
+            CanCopyWhenNotReadOnly="True"
             Text="{x:Bind ViewModel.Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
             SelectionStart="{x:Bind ViewModel.SelectionStart, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>