Support placeholder text

Author: Jack251970

Flow.Launcher.Infrastructure/UserSettings/Settings.cs

@@ -113,6 +113,17 @@ public string Theme
         public double? SettingWindowLeft { get; set; } = null;
         public System.Windows.WindowState SettingWindowState { get; set; } = WindowState.Normal;
 
+        bool _showPlaceholder { get; set; } = true;
+        public bool ShowPlaceholder
+        {
+            get => _showPlaceholder;
+            set
+            {
+                _showPlaceholder = value;
+                OnPropertyChanged();
+            }
+        }
+
         public int CustomExplorerIndex { get; set; } = 0;
 
         [JsonIgnore]

Flow.Launcher/Languages/en.xaml

@@ -39,7 +39,7 @@
     <system:String x:Key="GameMode">Game Mode</system:String>
     <system:String x:Key="GameModeToolTip">Suspend the use of Hotkeys.</system:String>
     <system:String x:Key="PositionReset">Position Reset</system:String>
-    <system:String x:Key="PositionResetToolTip">Reset search window position</system:String>
+    <system:String x:Key="queryTextBoxSuggestion">Type here to search</system:String>
 
     <!--  Setting General  -->
     <system:String x:Key="flowlauncher_settings">Settings</system:String>
@@ -202,6 +202,8 @@
     <system:String x:Key="Date">Date</system:String>
     <system:String x:Key="TypeIsDarkToolTip">This theme supports two(light/dark) modes.</system:String>
     <system:String x:Key="TypeHasBlurToolTip">This theme supports Blur Transparent Background.</system:String>
+    <system:String x:Key="PlaceholderText">Placeholder Text</system:String>
+    <system:String x:Key="PlaceholderTextTip">Display placeholder text when query is empty</system:String>
 
     <!--  Setting Hotkey  -->
     <system:String x:Key="hotkey">Hotkey</system:String>

Flow.Launcher/MainWindow.xaml

@@ -218,6 +218,14 @@
             <Grid x:Name="QueryBoxArea">
                 <Border MinHeight="30" Style="{DynamicResource QueryBoxBgStyle}">
                     <Grid>
+                        <TextBox
+                            x:Name="QueryTextPlaceholderBox"
+                            Height="{Binding MainWindowHeight, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
+                            FontSize="{Binding QueryBoxFontSize, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
+                            IsEnabled="False"
+                            Style="{DynamicResource QuerySuggestionBoxStyle}"
+                            Text="{DynamicResource queryTextBoxSuggestion}"
+                            Visibility="Collapsed" />
                         <TextBox
                             x:Name="QueryTextSuggestionBox"
                             Height="{Binding MainWindowHeight, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

Flow.Launcher/MainWindow.xaml.cs

@@ -115,6 +115,9 @@ private async void OnLoaded(object sender, RoutedEventArgs _)
                 welcomeWindow.Show();
             }
 
+            // Initialize place holder
+            SetupPlaceholderText();
+
             // Hide window if need
             UpdatePosition();
             if (_settings.HideOnStartup)
@@ -237,6 +240,9 @@ private async void OnLoaded(object sender, RoutedEventArgs _)
                     case nameof(Settings.WindowTop):
                         Top = _settings.WindowTop;
                         break;
+                    case nameof(Settings.ShowPlaceholder):
+                        SetupPlaceholderText();
+                        break;
                 }
             };
 
@@ -1028,6 +1034,43 @@ private void QueryTextBox_OnPreviewDragOver(object sender, DragEventArgs e)
 
         #endregion
 
+        #region Placeholder
+
+        private void SetupPlaceholderText()
+        {
+            if (_settings.ShowPlaceholder)
+            {
+                QueryTextBox.TextChanged += QueryTextBox_TextChanged;
+                QueryTextSuggestionBox.TextChanged += QueryTextSuggestionBox_TextChanged;
+                SetPlaceholderText();
+            }
+            else
+            {
+                QueryTextBox.TextChanged -= QueryTextBox_TextChanged;
+                QueryTextSuggestionBox.TextChanged -= QueryTextSuggestionBox_TextChanged;
+                QueryTextPlaceholderBox.Visibility = Visibility.Collapsed;
+            }
+        }
+
+        private void QueryTextBox_TextChanged(object sender, TextChangedEventArgs e)
+        {
+            SetPlaceholderText();
+        }
+
+        private void QueryTextSuggestionBox_TextChanged(object sender, TextChangedEventArgs e)
+        {
+            SetPlaceholderText();
+        }
+
+        private void SetPlaceholderText()
+        {
+            var queryText = QueryTextBox.Text;
+            var suggestionText = QueryTextSuggestionBox.Text;
+            QueryTextPlaceholderBox.Visibility = string.IsNullOrEmpty(queryText) && string.IsNullOrEmpty(suggestionText) ? Visibility.Visible : Visibility.Collapsed;
+        }
+
+        #endregion
+
         #region IDisposable
 
         protected virtual void Dispose(bool disposing)

Flow.Launcher/SettingPages/ViewModels/SettingsPaneThemeViewModel.cs

@@ -259,6 +259,12 @@ public double SoundEffectVolume
         set => Settings.SoundVolume = value;
     }
 
+    public bool ShowPlaceholder
+    {
+        get => Settings.ShowPlaceholder;
+        set => Settings.ShowPlaceholder = value;
+    }
+
     public bool UseClock
     {
         get => Settings.UseClock;

Flow.Launcher/SettingPages/Views/SettingsPaneTheme.xaml

@@ -477,7 +477,6 @@
                     <!--  ✅ 추가  -->
                 </cc:Card>
 
-
                 <!--  Drop shadow effect  -->
                 <cc:Card
                     Title="{DynamicResource queryWindowShadowEffect}"
@@ -496,8 +495,6 @@
                 Text="{DynamicResource browserMoreThemes}"
                 Uri="{Binding LinkThemeGallery}" />
 
-
-
             <!--  Fixed Height  -->
             <cc:CardGroup Margin="0 20 0 0">
                 <cc:Card
@@ -529,6 +526,18 @@
                     OnContent="{DynamicResource enable}" />
             </cc:Card>
 
+            <!--  Placeholder text  -->
+            <cc:Card
+                Title="{DynamicResource PlaceholderText}"
+                Margin="0 14 0 0"
+                Icon="&#xE82F;"
+                Sub="{DynamicResource PlaceholderTextTip}">
+                <ui:ToggleSwitch
+                    IsOn="{Binding ShowPlaceholder}"
+                    OffContent="{DynamicResource disable}"
+                    OnContent="{DynamicResource enable}" />
+            </cc:Card>
+
             <!--  Time and date  -->
             <cc:CardGroup Margin="0 14 0 0">
                 <cc:Card Title="{DynamicResource Clock}" Icon="&#xec92;">