Changed search button and search box visibility behavior for a more modern and user friendly mechanism

This commit is contained in:
BONNEVILLE Geoffroy
2018-07-20 17:24:02 +02:00
parent 8f1f80ae38
commit 6f161e8699
3 changed files with 39 additions and 28 deletions

View File

@@ -210,9 +210,6 @@
<data name="GroupCreateEntry.Text" xml:space="preserve"> <data name="GroupCreateEntry.Text" xml:space="preserve">
<value>Create new entry</value> <value>Create new entry</value>
</data> </data>
<data name="GroupFilter.PlaceholderText" xml:space="preserve">
<value>Filter...</value>
</data>
<data name="GroupSearch.PlaceholderText" xml:space="preserve"> <data name="GroupSearch.PlaceholderText" xml:space="preserve">
<value>Search...</value> <value>Search...</value>
</data> </data>
@@ -465,4 +462,10 @@
<data name="EntryTitle.PlaceholderText" xml:space="preserve"> <data name="EntryTitle.PlaceholderText" xml:space="preserve">
<value>New entry name...</value> <value>New entry name...</value>
</data> </data>
<data name="SearchButtonLabel.Text" xml:space="preserve">
<value>Search</value>
</data>
<data name="SearchButtonTooltip.Content" xml:space="preserve">
<value>Search</value>
</data>
</root> </root>

View File

@@ -210,9 +210,6 @@
<data name="GroupCreateEntry.Text" xml:space="preserve"> <data name="GroupCreateEntry.Text" xml:space="preserve">
<value>Créer une nouvelle entrée</value> <value>Créer une nouvelle entrée</value>
</data> </data>
<data name="GroupFilter.PlaceholderText" xml:space="preserve">
<value>Filtrer...</value>
</data>
<data name="GroupSearch.PlaceholderText" xml:space="preserve"> <data name="GroupSearch.PlaceholderText" xml:space="preserve">
<value>Rechercher...</value> <value>Rechercher...</value>
</data> </data>
@@ -465,4 +462,10 @@
<data name="EntryTitle.PlaceholderText" xml:space="preserve"> <data name="EntryTitle.PlaceholderText" xml:space="preserve">
<value>Nom de la nouvelle entrée...</value> <value>Nom de la nouvelle entrée...</value>
</data> </data>
<data name="SearchButtonLabel.Text" xml:space="preserve">
<value>Recherche</value>
</data>
<data name="SearchButtonTooltip.Content" xml:space="preserve">
<value>Rechercher</value>
</data>
</root> </root>

View File

@@ -254,19 +254,30 @@
</interactivity:Interaction.Behaviors> </interactivity:Interaction.Behaviors>
</userControls:TopMenuUserControl> </userControls:TopMenuUserControl>
<Button Grid.Column="3" x:Name="SearchButton" Style="{StaticResource NoBorderButtonStyle}" Background="{ThemeResource ToggleButtonBackgroundThemeBrush}" Height="{StaticResource MenuSize}" Padding="25,0,25,0"> <Button Grid.Column="3" x:Name="SearchButton" Style="{StaticResource NoBorderButtonStyle}" Background="{ThemeResource ToggleButtonBackgroundThemeBrush}" Height="{StaticResource MenuSize}" Padding="25,0,25,0">
<StackPanel Orientation="Horizontal">
<SymbolIcon Symbol="Find" /> <SymbolIcon Symbol="Find" />
<Button.Flyout> <TextBlock x:Uid="SearchButtonLabel" x:Name="SearchButtonLabel" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="10,0,0,0" />
<Flyout> </StackPanel>
<Flyout.FlyoutPresenterStyle> <ToolTipService.ToolTip>
<Style TargetType="FlyoutPresenter"> <ToolTip x:Uid="SearchButtonTooltip" />
<Setter Property="Padding" Value="0" /> </ToolTipService.ToolTip>
</Style> <interactivity:Interaction.Behaviors>
</Flyout.FlyoutPresenterStyle> <core:EventTriggerBehavior EventName="Click">
<SearchBox x:Uid="GroupSearch" Width="350" Padding="12" Background="{ThemeResource TextBoxDisabledBackgroundThemeBrush}" BorderThickness="0" FontSize="18" SuggestionsRequested="SearchBox_OnSuggestionsRequested" SearchHistoryEnabled="False" ResultSuggestionChosen="SearchBox_OnResultSuggestionChosen" Style="{StaticResource MainColorSearchBox}" /> <core:ChangePropertyAction TargetObject="{Binding ElementName=SearchBox}" PropertyName="Visibility" Value="Visible" />
</Flyout> <core:ChangePropertyAction TargetObject="{Binding ElementName=SearchButton}" PropertyName="Visibility" Value="Collapsed" />
</Button.Flyout> <!-- TODO: make this work -->
<actions:SetupFocusAction TargetObject="{Binding ElementName=SearchBox}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Button> </Button>
<SearchBox Grid.Column="3" x:Uid="GroupSearch" x:Name="SearchBox" Padding="12" Width="350" Background="{ThemeResource TextBoxDisabledBackgroundThemeBrush}" BorderThickness="0" Margin="0,5,0,5" FontSize="15" SuggestionsRequested="SearchBox_OnSuggestionsRequested" SearchHistoryEnabled="False" ResultSuggestionChosen="SearchBox_OnResultSuggestionChosen" Style="{StaticResource MainColorSearchBox}" /> <SearchBox Grid.Column="3" x:Uid="GroupSearch" x:Name="SearchBox" Padding="12" Width="350" Visibility="Collapsed" Background="{ThemeResource TextBoxDisabledBackgroundThemeBrush}" BorderThickness="0" Margin="0,5,0,5" FontSize="15" SuggestionsRequested="SearchBox_OnSuggestionsRequested" SearchHistoryEnabled="False" ResultSuggestionChosen="SearchBox_OnResultSuggestionChosen" Style="{StaticResource MainColorSearchBox}">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="LostFocus">
<core:ChangePropertyAction TargetObject="{Binding ElementName=SearchBox}" PropertyName="Visibility" Value="Collapsed" />
<core:ChangePropertyAction TargetObject="{Binding ElementName=SearchButton}" PropertyName="Visibility" Value="Visible" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</SearchBox>
</Grid> </Grid>
<VisualStateManager.VisualStateGroups> <VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DragDropGroup"> <VisualStateGroup x:Name="DragDropGroup">
@@ -294,13 +305,10 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopMenu" Storyboard.TargetProperty="MoreButtonVisibility"> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopMenu" Storyboard.TargetProperty="MoreButtonVisibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames> </ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButton" Storyboard.TargetProperty="Visibility"> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AddEntryTextBlock" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchBox" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames> </ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="AddEntryTextBlock" Storyboard.TargetProperty="Visibility"> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButtonLabel" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames> </ObjectAnimationUsingKeyFrames>
</Storyboard> </Storyboard>
@@ -313,13 +321,10 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopMenu" Storyboard.TargetProperty="MoreButtonVisibility"> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopMenu" Storyboard.TargetProperty="MoreButtonVisibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames> </ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButton" Storyboard.TargetProperty="Visibility"> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AddEntryTextBlock" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchBox" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames> </ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="AddEntryTextBlock" Storyboard.TargetProperty="Visibility"> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButtonLabel" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames> </ObjectAnimationUsingKeyFrames>
</Storyboard> </Storyboard>