- Add Magnifier in Win 11 Light/Dark Theme

onesounds · onesounds · commit bb7b0cdd5073 · 2021-09-30T18:45:55.000+09:00
- Remove Scrollbar Reserve Space
- Now scrollbar front, selected item background is behind. When I first fix the code, it has design issue some case.
- Adjust Setting Window
- Adjust Metro Server Theme
- Fix Darker Selected Background
- Fix Win10light Seprator
diff --git a/Flow.Launcher/MainWindow.xaml b/Flow.Launcher/MainWindow.xaml
@@ -69,7 +69,7 @@
                     <TextBox x:Name="QueryTextSuggestionBox"
                          Style="{DynamicResource QuerySuggestionBoxStyle}"
                          IsEnabled="False"
-                         Margin="16,0,56,0">
+                         Margin="16,0,66,0">
                         <TextBox.Text>
                             <MultiBinding Converter="{StaticResource QuerySuggestionBoxConverter}">
                                 <Binding ElementName="QueryTextBox" Path="Text"/>
@@ -84,7 +84,7 @@
                      AllowDrop="True"
                      Visibility="Visible"
                     Background="Transparent"
-                    Margin="16,0,56,0">
+                    Margin="16,0,66,0">
                         <TextBox.ContextMenu>
                             <ContextMenu>
                                 <MenuItem Command="ApplicationCommands.Cut"/>
diff --git a/Flow.Launcher/ResultListBox.xaml b/Flow.Launcher/ResultListBox.xaml
@@ -30,7 +30,7 @@
                     </ControlTemplate>
                 </Button.Template>
                 <Button.Content>
-                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0"
+                    <Grid HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="0"
                           Cursor="Hand" UseLayoutRounding="False">
                         <Grid.Resources>
                             <converter:HighlightTextConverter x:Key="HighlightTextConverter"/>
@@ -59,9 +59,9 @@
                             <Image x:Name="ImageIcon" Width="32" Height="32" HorizontalAlignment="Center" Source="{Binding Image}" Visibility="{Binding ShowIcon}"  Margin="0 0 0 0"/>
                         </Border>
                         <Border BorderThickness="0" BorderBrush="Transparent" Margin="14 0 0 0">
-                            <TextBlock Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding Glyph.Glyph}" FontFamily="{Binding Glyph.FontFamily}" FontSize="24" Visibility="{Binding ShowGlyph}"  Margin="12 0 0 0" />
+                            <TextBlock Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding Glyph.Glyph}" FontFamily="{Binding Glyph.FontFamily}" FontSize="24" Visibility="{Binding ShowGlyph}"  Margin="12 0 0 0" Padding="0 0 12 0"/>
                         </Border>
-                        <Grid Margin="6 0 6 0" Grid.Column="1" HorizontalAlignment="Stretch">
+                        <Grid Margin="6 0 10 0" Grid.Column="1" HorizontalAlignment="Stretch">
                             <Grid.RowDefinitions>
                                 <RowDefinition />
                                 <RowDefinition Height="Auto" x:Name="SubTitleRowDefinition" />
@@ -86,11 +86,13 @@
                                     </MultiBinding>
                                 </vm:ResultsViewModel.FormattedText>
                             </TextBlock>
+
                         </Grid>
+
                     </Grid>
                 </Button.Content>
             </Button>
-            <!-- a result item height is 50 including margin -->
+            <!-- a result item height is 52 including margin -->
             <DataTemplate.Triggers>
                 <DataTrigger
                     Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}, Path=IsSelected}"
diff --git a/Flow.Launcher/SettingWindow.xaml b/Flow.Launcher/SettingWindow.xaml
@@ -268,7 +268,7 @@
                                     <Canvas Style="{DynamicResource SearchIconPosition}">
                                         <Path Data="{DynamicResource SearchIconImg}" Style="{DynamicResource SearchIconStyle}" Margin="0"  Stretch="Fill"/>
                                     </Canvas>
-                                    <Grid Height="58" Margin="0 30 0 0">
+                                    <Grid Height="58" Margin="0 28 0 0">
                                         <Rectangle Width="Auto" HorizontalAlignment="Stretch" Style="{DynamicResource SeparatorStyle}" Visibility="visible"/>
                                     </Grid>
                                     <ContentControl Grid.Row="1">
diff --git a/Flow.Launcher/Themes/Base.xaml b/Flow.Launcher/Themes/Base.xaml
@@ -90,8 +90,6 @@
         <Setter Property="FontSize" Value="13" />
         <Setter Property="RenderOptions.ClearTypeHint" Value="Enabled"/>
     </Style>
-
-
     <Style x:Key="BaseItemImageSelectedStyle" TargetType="{x:Type Image}" >
     </Style>
 
@@ -100,11 +98,26 @@
         <Setter Property="Background" Value="Transparent"/>
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
+        <Setter Property="Margin" Value="0 0 0 0" />
+        <Setter Property="Padding" Value="0 0 0 0" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="ListBox">
-                    <!--                    <ScrollViewer Focusable="false" Template="{DynamicResource ScrollViewerControlTemplate}">-->
                     <ScrollViewer Focusable="false" Template="{DynamicResource ScrollViewerControlTemplate}">
+                        <ScrollViewer.Style>
+                            <Style TargetType="ScrollViewer">
+                                <Style.Triggers>
+                                    <Trigger Property="ComputedVerticalScrollBarVisibility" Value="Visible">
+                                        <Setter Property="Margin" Value="0 0 0 0" />
+                                        <Setter Property="Padding" Value="0 0 0 0" />
+                                    </Trigger>
+                                    <Trigger Property="ComputedVerticalScrollBarVisibility" Value="Collapsed">
+                                        <Setter Property="Margin" Value="0 0 0 0" />
+                                        <Setter Property="Padding" Value="0 0 0 0" />
+                                    </Trigger>
+                                </Style.Triggers>
+                            </Style>
+                        </ScrollViewer.Style>
                         <VirtualizingStackPanel IsItemsHost="True" />
                     </ScrollViewer>
                 </ControlTemplate>
@@ -135,7 +148,8 @@
             <ScrollBar x:Name="PART_VerticalScrollBar"
                            AutomationProperties.AutomationId="VerticalScrollBar"
                            Cursor="Arrow"
-                           Grid.Column="1"
+                           Grid.Column="0"
+                           HorizontalAlignment="Right"
                            Margin="0 0 0 0"
                            Maximum="{TemplateBinding ScrollableHeight}"
                            Minimum="0"
@@ -144,7 +158,6 @@
                            Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                            ViewportSize="{TemplateBinding ViewportHeight}"
                            Style="{DynamicResource ScrollBarStyle}" />
-
         </Grid>
     </ControlTemplate>
 
diff --git a/Flow.Launcher/Themes/Metro Server.xaml b/Flow.Launcher/Themes/Metro Server.xaml
@@ -4,10 +4,13 @@
     </ResourceDictionary.MergedDictionaries>
     <Style x:Key="QueryBoxStyle" BasedOn="{StaticResource BaseQueryBoxStyle}" TargetType="{x:Type TextBox}">
         <Setter Property="Foreground" Value="#FFFFFF" />
+        <Setter Property="Background" Value="#001e4e"></Setter>
     </Style>
 
     <Style x:Key="QuerySuggestionBoxStyle" BasedOn="{StaticResource BaseQuerySuggestionBoxStyle}" TargetType="{x:Type TextBox}">
         <Setter Property="Foreground" Value="#FFFFFF" />
+        <Setter Property="Background" Value="#001e4e"></Setter>
+        <Setter Property="Opacity" Value="0.4"></Setter>
     </Style>
 
     <Style x:Key="WindowBorderStyle" BasedOn="{StaticResource BaseWindowBorderStyle}" TargetType="{x:Type Border}">
@@ -22,16 +25,20 @@
     </Style>
     <Style x:Key="ItemSubTitleStyle" BasedOn="{StaticResource BaseItemSubTitleStyle}" TargetType="{x:Type TextBlock}" >
         <Setter Property="Foreground" Value="#c2c2c2"></Setter>
+        <Setter Property="FontSize" Value="12" />
     </Style>
     <Style x:Key="ItemTitleSelectedStyle" BasedOn="{StaticResource BaseItemTitleSelectedStyle}" TargetType="{x:Type TextBlock}">
         <Setter Property="Foreground" Value="#f5f5f5" />
     </Style>
     <Style x:Key="ItemSubTitleSelectedStyle" BasedOn="{StaticResource BaseItemSubTitleSelectedStyle}" TargetType="{x:Type TextBlock}">
         <Setter Property="Foreground" Value="#c2c2c2" />
+        <Setter Property="FontSize" Value="12" />
     </Style>
     <SolidColorBrush x:Key="ItemSelectedBackgroundColor">#006ac1</SolidColorBrush>
     <Style x:Key="ThumbStyle" BasedOn="{StaticResource BaseThumbStyle}" TargetType="{x:Type Thumb}">
     </Style>
     <Style x:Key="ScrollBarStyle" BasedOn="{StaticResource BaseScrollBarStyle}" TargetType="{x:Type ScrollBar}">
     </Style>
+    <Style x:Key="SearchIconStyle" TargetType="{x:Type Path}">
+    </Style>
 </ResourceDictionary>
diff --git a/Flow.Launcher/Themes/Pink.xaml b/Flow.Launcher/Themes/Pink.xaml
@@ -5,11 +5,12 @@
     <Style x:Key="QueryBoxStyle" BasedOn="{StaticResource BaseQueryBoxStyle}" TargetType="{x:Type TextBox}">
         <Setter Property="Background" Value="#1f1d1f"/>
         <Setter Property="Foreground" Value="#cc1081" />
+        <Setter Property="CaretBrush" Value="#cc1081" />
     </Style>
 
     <Style x:Key="QuerySuggestionBoxStyle" BasedOn="{StaticResource BaseQuerySuggestionBoxStyle}" TargetType="{x:Type TextBox}">
         <Setter Property="Background" Value="#1f1d1f"/>
-        <Setter Property="Foreground" Value="#cc1081" />
+        <Setter Property="Foreground" Value="#71114b" />
     </Style>
 
     <Style x:Key="WindowBorderStyle" BasedOn="{StaticResource BaseWindowBorderStyle}" TargetType="{x:Type Border}">
@@ -23,24 +24,26 @@
     </Style>
     <Style x:Key="ItemSubTitleStyle" BasedOn="{StaticResource BaseItemSubTitleStyle}" TargetType="{x:Type TextBlock}" >
         <Setter Property="Foreground"  Value="#c2c2c2"></Setter>
+        <Setter Property="Opacity"  Value="0.5"></Setter>
     </Style>
     <Style x:Key="ItemTitleSelectedStyle" BasedOn="{StaticResource BaseItemTitleSelectedStyle}" TargetType="{x:Type TextBlock}">
         <Setter Property="Foreground" Value="#f5f5f5" />
     </Style>
     <Style x:Key="ItemSubTitleSelectedStyle" BasedOn="{StaticResource BaseItemSubTitleSelectedStyle}" TargetType="{x:Type TextBlock}">
-        <Setter Property="Foreground" Value="#c2c2c2" />
+        <Setter Property="Foreground" Value="#ed92c9" />
     </Style>
     <SolidColorBrush x:Key="ItemSelectedBackgroundColor">#cc1081</SolidColorBrush>
     <Style x:Key="ThumbStyle" BasedOn="{StaticResource BaseThumbStyle}" TargetType="{x:Type Thumb}">
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type Thumb}">
-                    <Border CornerRadius="2" DockPanel.Dock="Right" Background="#cc1081" BorderBrush="Transparent" BorderThickness="0" />
+                    <Border CornerRadius="2" DockPanel.Dock="Right" Background="#e564b1" BorderBrush="Transparent" BorderThickness="0" />
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
-    <Style x:Key="ScrollBarStyle" BasedOn="{StaticResource BaseScrollBarStyle}" TargetType="{x:Type ScrollBar}"></Style>
+    <Style x:Key="ScrollBarStyle" BasedOn="{StaticResource BaseScrollBarStyle}" TargetType="{x:Type ScrollBar}">
+    </Style>
     <Geometry x:Key="SearchIconImg">F1 M20,20z M0,0z M14.75,1A5.24,5.24,0,0,0,10,4A5.24,5.24,0,0,0,0,6.25C0,11.75 10,19 10,19 10,19 20,11.75 20,6.25A5.25,5.25,0,0,0,14.75,1z</Geometry>
 
     <Style x:Key="SearchIconPosition" TargetType="{x:Type Canvas}">
@@ -55,5 +58,8 @@
         <Setter Property="Width" Value="28" />
         <Setter Property="Height" Value="28" />
     </Style>
-
+    <Style x:Key="ItemHotkeyStyle" TargetType="{x:Type TextBlock}">
+        <Setter Property="FontSize" Value="14" />
+        <Setter Property="Foreground" Value="#ed92c9" />
+    </Style>
 </ResourceDictionary>
diff --git a/Flow.Launcher/Themes/Win10Light.xaml b/Flow.Launcher/Themes/Win10Light.xaml
@@ -126,7 +126,8 @@
             <ScrollBar x:Name="PART_VerticalScrollBar"
                            AutomationProperties.AutomationId="VerticalScrollBar"
                            Cursor="Arrow"
-                           Grid.Column="1"
+                           Grid.Column="0"
+                           HorizontalAlignment="Right"
                            Margin="0 0 0 0"
                            Maximum="{TemplateBinding ScrollableHeight}"
                            Minimum="0"
@@ -172,16 +173,7 @@
             </Setter.Value>
         </Setter>
     </Style>
-    <Style x:Key="BaseSeparatorStyle" TargetType="Rectangle">
-        <Setter Property="Visibility" Value="Collapsed" />
-        <Style.Triggers>
-                 <DataTrigger Binding="{Binding ElementName=ResultListBox, Path=Visibility}" Value="Visible">
-                    <Setter Property="Visibility" Value="Visible" />
-                    <!-- Top Margin for When Open List, -->     
-                    <Setter Property="Margin" Value="0 0 0 8" /> 
-            </DataTrigger>
-             </Style.Triggers>
-     </Style>
+
                             
 <!-- Edited Base.xaml -->
 <!-- Theme Custom -->
@@ -191,7 +183,7 @@
         <Setter Property="Foreground" Value="#000000" />
         <Setter Property="CaretBrush" Value="#000000" />
         <Setter Property="FontSize" Value="26" />
-	<Setter Property="Padding" Value="0 4 0 0" />
+	    <Setter Property="Padding" Value="0 4 0 0" />
     </Style>
 
     <Style x:Key="QuerySuggestionBoxStyle" BasedOn="{StaticResource BaseQuerySuggestionBoxStyle}" TargetType="{x:Type TextBox}">
@@ -249,7 +241,7 @@
     <Style x:Key="SeparatorStyle" BasedOn="{StaticResource BaseSeparatorStyle}" TargetType="{x:Type Rectangle}">
         <Setter Property="Fill" Value="#c6c6c6"/>
         <Setter Property="Height" Value="1"/>
-        <Setter Property="Margin" Value="12 0 12 0"/>
+        <Setter Property="Margin" Value="12 0 12 8"/>
     </Style>
     <Style x:Key="HighlightStyle">
         <Setter Property="Inline.Foreground" Value="#0078d7" />
diff --git a/Flow.Launcher/Themes/Win11Dark.xaml b/Flow.Launcher/Themes/Win11Dark.xaml
@@ -5,7 +5,7 @@
     <!-- Further font customisations are dynamically loaded in Theme.cs -->
     <Style x:Key="BaseQueryBoxStyle" TargetType="{x:Type TextBox}">
         <Setter Property="BorderThickness" Value="0" />
-        <Setter Property="FontSize" Value="28" />
+        <Setter Property="FontSize" Value="22" />
         <Setter Property="FontWeight" Value="Normal" />
         <Setter Property="Height" Value="54" />
         <Setter Property="Background" Value="#2F2F2F" />
@@ -129,7 +129,8 @@
             <ScrollBar x:Name="PART_VerticalScrollBar"
                            AutomationProperties.AutomationId="VerticalScrollBar"
                            Cursor="Arrow"
-                           Grid.Column="1"
+                           Grid.Column="0"
+                           HorizontalAlignment="Right"
                            Margin="0 0 0 0"
                            Maximum="{TemplateBinding ScrollableHeight}"
                            Minimum="0"
@@ -248,14 +249,26 @@
         </Style.Triggers>
     </Style>
     <Style x:Key="SeparatorStyle" BasedOn="{StaticResource BaseSeparatorStyle}" TargetType="{x:Type Rectangle}">
-        <Setter Property="Fill" Value="#9a9a9a"/>
+        <Setter Property="Fill" Value="#4d4d4d"/>
         <Setter Property="Height" Value="1"/>
         <Setter Property="Margin" Value="12 0 12 8"/>
     </Style>
     <Style x:Key="ItemHotkeyStyle" TargetType="{x:Type TextBlock}">
         <Setter Property="FontSize" Value="13" />
         <Setter Property="Foreground" Value="#7b7b7b" />
     </Style>
-    
+    <Geometry x:Key="SearchIconImg">F1 M12000,12000z M0,0z M10354,10962C10326,10951 10279,10927 10249,10907 10216,10886 9476,10153 8370,9046 7366,8042 6541,7220 6536,7220 6532,7220 6498,7242 6461,7268 6213,7447 5883,7619 5592,7721 5194,7860 4802,7919 4360,7906 3612,7886 2953,7647 2340,7174 2131,7013 1832,6699 1664,6465 1394,6088 1188,5618 1097,5170 1044,4909 1030,4764 1030,4470 1030,4130 1056,3914 1135,3609 1263,3110 1511,2633 1850,2235 1936,2134 2162,1911 2260,1829 2781,1395 3422,1120 4090,1045 4271,1025 4667,1025 4848,1045 5505,1120 6100,1368 6630,1789 6774,1903 7081,2215 7186,2355 7362,2588 7467,2759 7579,2990 7802,3455 7911,3937 7911,4460 7911,4854 7861,5165 7737,5542 7684,5702 7675,5724 7602,5885 7517,6071 7390,6292 7270,6460 7242,6499 7220,6533 7220,6538 7220,6542 8046,7371 9055,8380 10441,9766 10898,10229 10924,10274 10945,10308 10966,10364 10976,10408 10990,10472 10991,10493 10980,10554 10952,10717 10840,10865 10690,10937 10621,10971 10607,10974 10510,10977 10425,10980 10395,10977 10354,10962z M4685,7050C5214,7001 5694,6809 6100,6484 6209,6396 6396,6209 6484,6100 7151,5267 7246,4110 6721,3190 6369,2571 5798,2137 5100,1956 4706,1855 4222,1855 3830,1957 3448,2056 3140,2210 2838,2453 2337,2855 2010,3427 1908,4080 1877,4274 1877,4656 1908,4850 1948,5105 2028,5370 2133,5590 2459,6272 3077,6782 3810,6973 3967,7014 4085,7034 4290,7053 4371,7061 4583,7059 4685,7050z</Geometry>
+    <Style x:Key="SearchIconPosition" TargetType="{x:Type Canvas}">
+        <Setter Property="Width" Value="32" />
+        <Setter Property="Height" Value="32" />
+        <Setter Property="Margin" Value="0 2 18 0" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="HorizontalAlignment" Value="Right" />
+    </Style>
+    <Style x:Key="SearchIconStyle" TargetType="{x:Type Path}">
+        <Setter Property="Fill" Value="#4d4d4d" />
+        <Setter Property="Width" Value="32" />
+        <Setter Property="Height" Value="32" />
+    </Style>
 </ResourceDictionary>
 
diff --git a/Flow.Launcher/Themes/Win11Light.xaml b/Flow.Launcher/Themes/Win11Light.xaml
