From dc26792e85575eac80d8dbe296d14a9baca60075 Mon Sep 17 00:00:00 2001
From: DB p <onesound@oooz.net>
Date: Mon, 29 Apr 2024 00:08:47 +0900
Subject: [PATCH] - Change the SettingBoxes to Card Control in General

---
 Flow.Launcher/Resources/Controls/Card.xaml    |   1 +
 .../Resources/CustomControlTemplate.xaml      |   5 +-
 .../Resources/SettingWindowStyle.xaml         |  15 -
 Flow.Launcher/SettingPages/Views/General.xaml | 363 ++++++------------
 4 files changed, 113 insertions(+), 271 deletions(-)

diff --git a/Flow.Launcher/Resources/Controls/Card.xaml b/Flow.Launcher/Resources/Controls/Card.xaml
index 24a895485..bc1c42e1f 100644
--- a/Flow.Launcher/Resources/Controls/Card.xaml
+++ b/Flow.Launcher/Resources/Controls/Card.xaml
@@ -20,6 +20,7 @@
                         <Setter Property="BorderThickness" Value="1" />
                         <Setter Property="CornerRadius" Value="5" />
                         <Setter Property="MinHeight" Value="68" />
+                        <Setter Property="Padding" Value="0,15,0,15" />
                         <Setter Property="Margin" Value="0,4,0,0" />
                         <Setter Property="SnapsToDevicePixels" Value="True" />
                         <Style.Triggers>
diff --git a/Flow.Launcher/Resources/CustomControlTemplate.xaml b/Flow.Launcher/Resources/CustomControlTemplate.xaml
index b0e88a045..0ed1d18c8 100644
--- a/Flow.Launcher/Resources/CustomControlTemplate.xaml
+++ b/Flow.Launcher/Resources/CustomControlTemplate.xaml
@@ -1487,10 +1487,11 @@
     <KeySpline x:Key="RepositionKeySpline">0.1,0.9 0.2,1.0</KeySpline>
     <Style x:Key="DefaultToggleSwitch" TargetType="ui:ToggleSwitch">
         <Setter Property="Foreground" Value="{DynamicResource ToggleSwitchContentForeground}" />
-        <Setter Property="HorizontalAlignment" Value="Right" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
         <Setter Property="VerticalAlignment" Value="Center" />
-        <Setter Property="HorizontalContentAlignment" Value="Right" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="FocusVisualMargin" Value="5" />
         <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
         <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
         <Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
diff --git a/Flow.Launcher/Resources/SettingWindowStyle.xaml b/Flow.Launcher/Resources/SettingWindowStyle.xaml
index 97671b088..0fc2c3665 100644
--- a/Flow.Launcher/Resources/SettingWindowStyle.xaml
+++ b/Flow.Launcher/Resources/SettingWindowStyle.xaml
@@ -109,21 +109,6 @@
         </Setter>
     </Style>
 
-    <Style
-        x:Key="SideToggleSwitch"
-        BasedOn="{StaticResource DefaultToggleSwitch}"
-        TargetType="{x:Type ui:ToggleSwitch}">
-        <Setter Property="Grid.Column" Value="2" />
-        <Setter Property="FocusVisualMargin" Value="5" />
-        <Setter Property="Width" Value="Auto" />
-        <Setter Property="FocusVisualStyle" Value="{DynamicResource SwitchFocusVisualStyleKey}" />
-        <Setter Property="HorizontalAlignment" Value="Right" />
-        <Setter Property="HorizontalContentAlignment" Value="Right" />
-        <Setter Property="OffContent" Value="{DynamicResource disable}" />
-        <Setter Property="OnContent" Value="{DynamicResource enable}" />
-        <Setter Property="Margin" Value="0,4,22,4" />
-    </Style>
-
     <Style x:Key="SideTextAbout" TargetType="{x:Type TextBlock}">
         <Setter Property="HorizontalAlignment" Value="Right" />
         <Setter Property="Grid.Column" Value="1" />
diff --git a/Flow.Launcher/SettingPages/Views/General.xaml b/Flow.Launcher/SettingPages/Views/General.xaml
index df22a9612..778c11876 100644
--- a/Flow.Launcher/SettingPages/Views/General.xaml
+++ b/Flow.Launcher/SettingPages/Views/General.xaml
@@ -2,6 +2,7 @@
     x:Class="Flow.Launcher.SettingPages.Views.General"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:cc="clr-namespace:Flow.Launcher.Resources.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:ui="http://schemas.modernwpf.com/2019"
@@ -26,65 +27,21 @@
                 Text="{DynamicResource general}"
                 TextAlignment="left" />
 
-            <Border Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource startFlowLauncherOnSystemStartup}" />
-                    </StackPanel>
-                    <ui:ToggleSwitch
-                        Grid.Column="2"
-                        FocusVisualMargin="5"
-                        IsOn="{Binding StartFlowLauncherOnSystemStartup}"
-                        Style="{DynamicResource SideToggleSwitch}" />
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xe8fc;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
+            <cc:Card Title="{DynamicResource startFlowLauncherOnSystemStartup}" Icon="&#xe8fc;">
+                <ui:ToggleSwitch IsOn="{Binding StartFlowLauncherOnSystemStartup}" />
+            </cc:Card>
 
-            <Border Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource hideOnStartup}" />
-                    </StackPanel>
-                    <ui:ToggleSwitch
-                        Grid.Column="2"
-                        FocusVisualMargin="5"
-                        IsOn="{Binding Settings.HideOnStartup}"
-                        Style="{DynamicResource SideToggleSwitch}" />
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xed1a;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
+            <cc:Card Title="{DynamicResource hideOnStartup}" Icon="&#xed1a;">
+                <ui:ToggleSwitch IsOn="{Binding Settings.HideOnStartup}" />
+            </cc:Card>
 
-            <Border Margin="0,30,0,0" Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource hideFlowLauncherWhenLoseFocus}" />
-                    </StackPanel>
-                    <ui:ToggleSwitch
-                        Grid.Column="2"
-                        FocusVisualMargin="5"
-                        IsOn="{Binding Settings.HideWhenDeactivated}"
-                        Style="{DynamicResource SideToggleSwitch}" />
-                </ItemsControl>
-            </Border>
+            <cc:Card Title="{DynamicResource hideFlowLauncherWhenLoseFocus}" Margin="0,30,0,0">
+                <ui:ToggleSwitch IsOn="{Binding Settings.HideWhenDeactivated}" />
+            </cc:Card>
 
-
-            <Border Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource hideNotifyIcon}" />
-                        <TextBlock Style="{DynamicResource SettingSubTitleLabel}" Text="{DynamicResource hideNotifyIconToolTip}" />
-                    </StackPanel>
-                    <ui:ToggleSwitch
-                        Grid.Column="2"
-                        FocusVisualMargin="5"
-                        IsOn="{Binding Settings.HideNotifyIcon}"
-                        Style="{DynamicResource SideToggleSwitch}" />
-                </ItemsControl>
-            </Border>
+            <cc:Card Title="{DynamicResource hideNotifyIcon}" Sub="{DynamicResource hideNotifyIconToolTip}">
+                <ui:ToggleSwitch IsOn="{Binding Settings.HideNotifyIcon}" />
+            </cc:Card>
 
             <Border
                 Margin="0,30,0,0"
@@ -212,73 +169,35 @@
                 </StackPanel>
             </Border>
 
-            <Border Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource ignoreHotkeysOnFullscreen}" />
-                        <TextBlock Style="{DynamicResource SettingSubTitleLabel}" Text="{DynamicResource ignoreHotkeysOnFullscreenToolTip}" />
-                    </StackPanel>
-                    <ui:ToggleSwitch
-                        Grid.Column="2"
-                        FocusVisualMargin="5"
-                        IsOn="{Binding Settings.IgnoreHotkeysOnFullscreen}"
-                        Style="{DynamicResource SideToggleSwitch}" />
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xe7fc;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
 
-            <Border Margin="0,30,0,0" Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource AlwaysPreview}" />
-                        <TextBlock Style="{DynamicResource SettingSubTitleLabel}" Text="{Binding AlwaysPreviewToolTip}" />
-                    </StackPanel>
-                    <ui:ToggleSwitch
-                        Grid.Column="2"
-                        FocusVisualMargin="5"
-                        IsOn="{Binding Settings.AlwaysPreview}"
-                        Style="{DynamicResource SideToggleSwitch}"
-                        ToolTip="{Binding AlwaysPreviewToolTip}" />
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xe8a1;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
+            <cc:Card
+                Title="{DynamicResource ignoreHotkeysOnFullscreen}"
+                Icon="&#xe7fc;"
+                Sub="{DynamicResource ignoreHotkeysOnFullscreenToolTip}">
+                <ui:ToggleSwitch IsOn="{Binding Settings.IgnoreHotkeysOnFullscreen}" />
+            </cc:Card>
 
-            <Border Margin="0,30,0,0" Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource autoUpdates}" />
-                    </StackPanel>
-                    <ui:ToggleSwitch
-                        Grid.Column="2"
-                        FocusVisualMargin="5"
-                        IsOn="{Binding AutoUpdates}"
-                        Style="{DynamicResource SideToggleSwitch}" />
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xecc5;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
+            <cc:Card
+                Title="{DynamicResource AlwaysPreview}"
+                Margin="0,30,0,0"
+                Icon="&#xe8a1;"
+                Sub="{DynamicResource AlwaysPreviewToolTip}">
+                <ui:ToggleSwitch IsOn="{Binding Settings.AlwaysPreview}" ToolTip="{Binding AlwaysPreviewToolTip}" />
+            </cc:Card>
 
-            <Border Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource portableMode}" />
-                        <TextBlock Style="{DynamicResource SettingSubTitleLabel}" Text="{DynamicResource portableModeToolTIp}" />
-                    </StackPanel>
-                    <ui:ToggleSwitch
-                        Grid.Column="2"
-                        FocusVisualMargin="5"
-                        IsOn="{Binding PortableMode}"
-                        Style="{DynamicResource SideToggleSwitch}" />
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xe88e;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
+            <cc:Card
+                Title="{DynamicResource autoUpdates}"
+                Margin="0,30,0,0"
+                Icon="&#xecc5;">
+                <ui:ToggleSwitch IsOn="{Binding AutoUpdates}" />
+            </cc:Card>
+
+            <cc:Card
+                Title="{DynamicResource portableMode}"
+                Icon="&#xe88e;"
+                Sub="{DynamicResource portableModeToolTIp}">
+                <ui:ToggleSwitch IsOn="{Binding PortableMode}" />
+            </cc:Card>
 
             <Border
                 Margin="0,30,0,0"
@@ -364,146 +283,82 @@
                 </StackPanel>
             </Border>
 
-            <Border Margin="0,30,0,0" Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock
-                            Grid.Column="1"
-                            VerticalAlignment="Center"
-                            Style="{DynamicResource SettingTitleLabel}"
-                            Text="{DynamicResource defaultFileManager}" />
-                        <TextBlock Style="{DynamicResource SettingSubTitleLabel}" Text="{DynamicResource defaultFileManagerToolTip}" />
-                    </StackPanel>
-                    <StackPanel Grid.Column="2" Orientation="Horizontal">
-                        <Button
-                            Width="160"
-                            MaxWidth="250"
-                            Margin="10,0,18,0"
-                            Content="{Binding Settings.CustomExplorer.Name}" />
-                    </StackPanel>
+            <cc:Card
+                Title="{DynamicResource defaultFileManager}"
+                Margin="0,30,0,0"
+                Icon="&#xe838;"
+                Sub="{DynamicResource defaultFileManagerToolTip}">
+                <Button
+                    Width="160"
+                    MaxWidth="250"
+                    Margin="10,0,0,0"
+                    Content="{Binding Settings.CustomExplorer.Name}" />
+            </cc:Card>
 
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xe838;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
+            <cc:Card
+                Title="{DynamicResource defaultBrowser}"
+                Icon="&#xf6fa;"
+                Sub="{DynamicResource defaultBrowserToolTip}">
+                <Button
+                    Width="160"
+                    MaxWidth="250"
+                    Margin="10,0,0,0"
+                    Content="{Binding Settings.CustomBrowser.Name}" />
+            </cc:Card>
 
-            <Border Margin="0,4,0,0" Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock
-                            Grid.Column="1"
-                            VerticalAlignment="Center"
-                            Style="{DynamicResource SettingTitleLabel}"
-                            Text="{DynamicResource defaultBrowser}" />
-                        <TextBlock Style="{DynamicResource SettingSubTitleLabel}" Text="{DynamicResource defaultBrowserToolTip}" />
-                    </StackPanel>
-                    <StackPanel Grid.Column="2" Orientation="Horizontal">
-                        <Button
-                            Width="160"
-                            MaxWidth="250"
-                            Margin="10,0,18,0"
-                            Content="{Binding Settings.CustomBrowser.Name}" />
-                    </StackPanel>
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xf6fa;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
+            <cc:Card Title="{DynamicResource pythonFilePath}" Margin="0,30,0,0">
+                <StackPanel Orientation="Horizontal">
+                    <TextBox
+                        Width="300"
+                        Height="34"
+                        Text="{Binding Settings.PluginSettings.PythonExecutablePath, TargetNullValue='None'}" />
+                    <Button
+                        Height="34"
+                        Margin="10,0,0,0"
+                        Content="{DynamicResource select}" />
+                </StackPanel>
+            </cc:Card>
 
-            <Border Margin="0,30,0,0" Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource pythonFilePath}" />
-                    </StackPanel>
-                    <StackPanel Grid.Column="2" Orientation="Horizontal">
-                        <TextBox
-                            Width="300"
-                            Height="34"
-                            Text="{Binding Settings.PluginSettings.PythonExecutablePath, TargetNullValue='None'}" />
-                        <Button
-                            Height="34"
-                            Margin="10,0,18,0"
-                            Content="{DynamicResource select}" />
-                    </StackPanel>
-                </ItemsControl>
-            </Border>
+            <cc:Card Title="{DynamicResource nodeFilePath}">
+                <StackPanel Orientation="Horizontal">
+                    <TextBox
+                        Width="300"
+                        Height="34"
+                        Text="{Binding Settings.PluginSettings.NodeExecutablePath, TargetNullValue='None'}" />
+                    <Button
+                        Height="34"
+                        Margin="10,0,0,0"
+                        Content="{DynamicResource select}" />
+                </StackPanel>
+            </cc:Card>
 
-            <Border Margin="0,4,0,0" Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource nodeFilePath}" />
-                    </StackPanel>
-                    <StackPanel Grid.Column="2" Orientation="Horizontal">
-                        <TextBox
-                            Width="300"
-                            Height="34"
-                            Text="{Binding Settings.PluginSettings.NodeExecutablePath, TargetNullValue='None'}" />
-                        <Button
-                            Height="34"
-                            Margin="10,0,18,0"
-                            Content="{DynamicResource select}" />
-                    </StackPanel>
-                </ItemsControl>
-            </Border>
+            <cc:Card
+                Title="{DynamicResource typingStartEn}"
+                Margin="0,30,0,0"
+                Icon="&#xe8d3;"
+                Sub="{DynamicResource typingStartEnTooltip}">
+                <ui:ToggleSwitch IsOn="{Binding Settings.AlwaysStartEn}" />
+            </cc:Card>
 
-            <Border Margin="0,30,0,0" Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock
-                            Grid.Column="1"
-                            VerticalAlignment="Center"
-                            Style="{DynamicResource SettingTitleLabel}"
-                            Text="{DynamicResource typingStartEn}" />
-                        <TextBlock Style="{DynamicResource SettingSubTitleLabel}" Text="{DynamicResource typingStartEnTooltip}" />
-                    </StackPanel>
-                    <ui:ToggleSwitch
-                        Grid.Column="2"
-                        FocusVisualMargin="5"
-                        IsOn="{Binding Settings.AlwaysStartEn}"
-                        Style="{DynamicResource SideToggleSwitch}" />
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xe8d3;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
+            <cc:Card
+                Title="{DynamicResource ShouldUsePinyin}"
+                Icon="&#xe98a;"
+                Sub="{DynamicResource ShouldUsePinyinToolTip}">
+                <ui:ToggleSwitch IsOn="{Binding Settings.ShouldUsePinyin}" ToolTip="{DynamicResource ShouldUsePinyinToolTip}" />
+            </cc:Card>
 
-            <Border Margin="0,4,0,0" Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource ShouldUsePinyin}" />
-                        <TextBlock Style="{DynamicResource SettingSubTitleLabel}" Text="{DynamicResource ShouldUsePinyinToolTip}" />
-                    </StackPanel>
-                    <ui:ToggleSwitch
-                        Grid.Column="2"
-                        FocusVisualMargin="5"
-                        IsOn="{Binding Settings.ShouldUsePinyin}"
-                        Style="{DynamicResource SideToggleSwitch}"
-                        ToolTip="{DynamicResource ShouldUsePinyinToolTip}" />
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xe98a;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
-
-            <Border Margin="0,30,0,0" Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource language}" />
-                    </StackPanel>
-                    <ComboBox
-                        Grid.Column="2"
-                        MaxWidth="200"
-                        Margin="10,0,16,0"
-                        DisplayMemberPath="Display"
-                        ItemsSource="{Binding Languages}"
-                        SelectedValue="{Binding Language}"
-                        SelectedValuePath="LanguageCode" />
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xf2b7;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
+            <cc:Card
+                Title="{DynamicResource language}"
+                Margin="0,30,0,0"
+                Icon="&#xf2b7;">
+                <ComboBox
+                    MaxWidth="200"
+                    Margin="10,0,0,0"
+                    DisplayMemberPath="Display"
+                    ItemsSource="{Binding Languages}"
+                    SelectedValue="{Binding Language}"
+                    SelectedValuePath="LanguageCode" />
+            </cc:Card>
         </VirtualizingStackPanel>
     </ScrollViewer>
 </ui:Page>
\ No newline at end of file