wismna/modernkeepass
1
0
Fork 0
mirror of https://github.com/wismna/ModernKeePass.git synced 2025-10-03 15:40:18 -04:00
Code Issues Packages Projects Releases Wiki Activity

Big redesign (closer to Win10 UWP)

Browse Source 
Replaced breadcrumb with Up button
Search button now integrated in top menu
Hamburger menu make better use of visual states
Better visual states changes when size changes
This commit is contained in:
Geoffroy BONNEVILLE
2020-05-04 20:56:19 +02:00
parent b3c7683c12
commit 2f30389f6c
15 changed files with 378 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
ModernKeePass/Views/EntryDetailPage.xaml
View File

@@ -365,19 +365,20 @@
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="{StaticResource MenuGridLength}"/>
<RowDefinition Height="{StaticResource MenuHeightGridLength}"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{StaticResource MenuGridLength}" x:Name="LeftListViewColumn" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<userControls:HamburgerMenuUserControl x:Uid="HistoryLeftListView"
ItemsSource="{Binding History}"
ResizeTarget="{Binding ElementName=LeftListViewColumn}"
SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}" />
<userControls:HamburgerMenuUserControl
x:Name="HamburgerMenu"
x:Uid="HistoryLeftListView"
ItemsSource="{Binding History}"
SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}" />
<Grid Grid.Column="1">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Margin="20,0,0,20">
@@ -456,36 +457,38 @@
<!-- Bouton Précédent et titre de la page -->
<Grid Grid.Row="0" Background="{ThemeResource AppBarBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{StaticResource MenuGridLength}"/>
<ColumnDefinition Width="{StaticResource MenuWidthGridLength}"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Command="{Binding GoBackCommand}"
Height="{StaticResource MenuSize}"
Width="{StaticResource MenuSize}"
Height="{StaticResource MenuHeight}"
Width="{StaticResource MenuWidth}"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"
Style="{StaticResource NoBorderButtonStyle}">
<SymbolIcon Symbol="Back" />
</Button>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Viewbox MaxHeight="200" Width="200" Grid.Column="0" Grid.Row="0" Visibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}">
<StackPanel Grid.Column="1" Orientation="Horizontal">
<Button
Height="{StaticResource MenuHeight}"
Width="{StaticResource MenuWidth}"
Command="{Binding GoToParentCommand}"
Style="{StaticResource NoBorderButtonStyle}">
<SymbolIcon Symbol="Up" />
<ToolTipService.ToolTip>
<ToolTip Content="{Binding ParentGroupName}" />
</ToolTipService.ToolTip>
</Button>
<Viewbox MaxHeight="200" Visibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}">
<userControls:SymbolPickerUserControl Width="100" Height="70" SelectedSymbol="{Binding Icon, Mode=TwoWay}" />
</Viewbox>
<Viewbox MaxHeight="200" Width="200" Grid.Column="0" Grid.Row="0" Visibility="{Binding IsEditMode, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
<Viewbox MaxHeight="200" Visibility="{Binding IsEditMode, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
<SymbolIcon Symbol="{Binding Icon}" Width="100" Height="70" />
</Viewbox>
<TextBox Grid.Column="1" Grid.Row="0"
<TextBox
x:Uid="EntryTitle"
x:Name="TitleTextBox"
Text="{Binding Title, Mode=TwoWay}"
@@ -494,6 +497,7 @@
FontSize="20"
FontWeight="Light"
TextWrapping="NoWrap"
MinWidth="360"
VerticalAlignment="Center">
<interactivity:Interaction.Behaviors>
<core:DataTriggerBehavior Binding="{Binding IsEditMode}" Value="True">
@@ -505,11 +509,7 @@
</core:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>
</TextBox>
<HyperlinkButton Grid.Column="1" Grid.Row="1"
FontWeight="Light" FontSize="12" Padding="0" Margin="5,-5,0,0"
Content="{Binding ParentGroupName}"
Command="{Binding GoToParentCommand}"/>
</Grid>
</StackPanel>
<userControls:TopMenuUserControl
x:Name="TopMenu" Grid.Column="2"
IsEditButtonChecked="{Binding IsEditMode, Mode=TwoWay}"

20
ModernKeePass/Views/EntryDetailPage.xaml.cs
View File

@@ -42,8 +42,24 @@ namespace ModernKeePass.Views
private void EntryDetailPage_OnSizeChanged(object sender, SizeChangedEventArgs e)
{
VisualStateManager.GoToState(this, e.NewSize.Width < 700 ? "Small" : "Large", true);
VisualStateManager.GoToState(TopMenu, e.NewSize.Width < 800 ? "Collapsed" : "Overflowed", true);
if (e.NewSize.Width <= 640)
{
VisualStateManager.GoToState(this, "Small", true);
VisualStateManager.GoToState(TopMenu, "Collapsed", true);
VisualStateManager.GoToState(HamburgerMenu, "Hidden", true);
}
else if (e.NewSize.Width > 640 && e.NewSize.Width <= 1008)
{
VisualStateManager.GoToState(this, "Medium", true);
VisualStateManager.GoToState(TopMenu, "Overflowed", true);
VisualStateManager.GoToState(HamburgerMenu, "Collapsed", true);
}
else
{
VisualStateManager.GoToState(this, "Large", true);
VisualStateManager.GoToState(TopMenu, "Overflowed", true);
VisualStateManager.GoToState(HamburgerMenu, "Collapsed", true);
}
}
}
}

81
ModernKeePass/Views/GroupDetailPage.xaml
View File

@@ -36,21 +36,20 @@
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="{StaticResource MenuGridLength}"/>
<RowDefinition Height="{StaticResource MenuHeightGridLength}"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{StaticResource ExpandedMenuGridLength}" x:Name="LeftListViewColumn" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<userControls:HamburgerMenuUserControl
x:Name="HamburgerMenu"
x:Uid="GroupsLeftListView"
ItemsSource="{Binding Groups}"
SelectionChanged="groups_SelectionChanged"
ActionButtonCommand="{Binding CreateGroupCommand}"
ResizeTarget="{Binding ElementName=LeftListViewColumn}"
IsOpen="True"
IsButtonVisible="Visible" />
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
@@ -116,7 +115,7 @@
<TextBlock Text="{Binding Username}" Style="{StaticResource BodyTextBlockStyle}" Foreground="{Binding ForegroundColor, ConverterParameter={StaticResource TextBoxForegroundThemeBrush}, Converter={StaticResource ColorToBrushConverter}}" MaxHeight="60" />
<TextBlock Text="{Binding Url}" Style="{StaticResource BodyTextBlockStyle}" Foreground="{Binding ForegroundColor, ConverterParameter={StaticResource TextBoxForegroundThemeBrush}, Converter={StaticResource ColorToBrushConverter}}" MaxHeight="60" />
</StackPanel>
<Button Grid.Column="2" Style="{StaticResource NoBorderButtonStyle}" Background="{StaticResource AppBarBackgroundThemeBrush}" VerticalAlignment="Bottom" Foreground="{StaticResource TextColorDarkBrush}">
<Button Grid.Column="2" Style="{StaticResource NoBorderButtonStyle}" Background="{StaticResource AppBarBackgroundThemeBrush}" VerticalAlignment="Bottom">
<SymbolIcon Symbol="More" />
<Button.Flyout>
<MenuFlyout>
@@ -183,37 +182,38 @@
<!-- Back button and page title -->
<Grid Grid.Row="0" Background="{ThemeResource AppBarBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{StaticResource MenuGridLength}"/>
<ColumnDefinition Width="{StaticResource MenuWidthGridLength}"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Command="{Binding GoBackCommand}"
Height="{StaticResource MenuSize}"
Width="{StaticResource MenuSize}"
Height="{StaticResource MenuHeight}"
Width="{StaticResource MenuWidth}"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"
Style="{StaticResource NoBorderButtonStyle}">
<SymbolIcon Symbol="Back" />
</Button>
<Grid Grid.Column="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Viewbox MaxHeight="200" Width="200" Grid.Column="0" Grid.Row="0" Visibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}">
<StackPanel Grid.Column="1" Orientation="Horizontal">
<Button
Height="{StaticResource MenuHeight}"
Width="{StaticResource MenuWidth}"
Command="{Binding GoToParentCommand}"
Style="{StaticResource NoBorderButtonStyle}">
<SymbolIcon Symbol="Up" />
<ToolTipService.ToolTip>
<ToolTip Content="{Binding ParentGroupName}" />
</ToolTipService.ToolTip>
</Button>
<Viewbox MaxHeight="200" Visibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}">
<userControls:SymbolPickerUserControl Width="100" Height="70" SelectedSymbol="{Binding Icon, Mode=TwoWay}" />
</Viewbox>
<Viewbox MaxHeight="200" Width="200" Grid.Column="0" Grid.Row="0" Visibility="{Binding IsEditMode, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
<Viewbox MaxHeight="200" Visibility="{Binding IsEditMode, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
<SymbolIcon Symbol="{Binding Icon}" Width="100" Height="70" />
</Viewbox>
<TextBox Grid.Column="1" Grid.Row="0"
<TextBox
x:Uid="GroupTitle"
x:Name="TitleTextBox"
Text="{Binding Title, Mode=TwoWay}"
@@ -222,6 +222,7 @@
FontSize="20"
FontWeight="Light"
TextWrapping="NoWrap"
MinWidth="360"
VerticalAlignment="Center">
<interactivity:Interaction.Behaviors>
<core:DataTriggerBehavior Binding="{Binding IsEditMode}" Value="True">
@@ -233,11 +234,7 @@
</core:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>
</TextBox>
<HyperlinkButton Grid.Column="1" Grid.Row="1"
FontWeight="Light" FontSize="12" Padding="0" Margin="5,-5,0,0"
Content="{Binding ParentGroupName}"
Command="{Binding GoToParentCommand}" />
</Grid>
</StackPanel>
<userControls:TopMenuUserControl x:Name="TopMenu" Grid.Column="2"
SortButtonVisibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}"
IsEditButtonChecked="{Binding IsEditMode, Mode=TwoWay}"
@@ -252,31 +249,7 @@
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</userControls:TopMenuUserControl>
<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" />
<TextBlock x:Uid="SearchButtonLabel" x:Name="SearchButtonLabel" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="10,0,0,0" />
</StackPanel>
<ToolTipService.ToolTip>
<ToolTip x:Uid="SearchButtonTooltip" />
</ToolTipService.ToolTip>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Click">
<core:ChangePropertyAction TargetObject="{Binding ElementName=SearchBox}" PropertyName="Visibility" Value="Visible" />
<core:ChangePropertyAction TargetObject="{Binding ElementName=SearchButton}" PropertyName="Visibility" Value="Collapsed" />
<!-- TODO: make this work -->
<actions:SetupFocusAction TargetObject="{Binding ElementName=SearchBox}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Button>
<SearchBox Grid.Column="3" x:Uid="EntriesSearch" x:Name="SearchBox" Padding="12" Width="350" Visibility="Collapsed" Margin="0,5,0,5" FontSize="15" SuggestionsRequested="SearchBox_OnSuggestionsRequested" SearchHistoryEnabled="False" ResultSuggestionChosen="SearchBox_OnResultSuggestionChosen">
<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>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DragDropGroup">
@@ -301,9 +274,6 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="AddEntryTextBlock" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButtonLabel" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Large">
@@ -311,9 +281,6 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="AddEntryTextBlock" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButtonLabel" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>

37
ModernKeePass/Views/GroupDetailPage.xaml.cs
View File

@@ -83,26 +83,27 @@ namespace ModernKeePass.Views
e.Cancel = !Model.IsEditMode;
e.Data.RequestedOperation = DataPackageOperation.Move;
}
private async void SearchBox_OnSuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args)
{
var imageUri = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appdata://Assets/ModernKeePass-SmallLogo.scale-80.png"));
var results = (await Model.Search(args.QueryText)).Take(5);
foreach (var result in results)
{
args.Request.SearchSuggestionCollection.AppendResultSuggestion(result.Title, result.ParentGroupName, result.Id, imageUri, string.Empty);
}
}
private void SearchBox_OnResultSuggestionChosen(SearchBox sender, SearchBoxResultSuggestionChosenEventArgs args)
{
Model.GoToEntry(args.Tag);
}
private void GroupDetailPage_OnSizeChanged(object sender, SizeChangedEventArgs e)
{
VisualStateManager.GoToState(this, e.NewSize.Width < 800 ? "Small" : "Large", true);
VisualStateManager.GoToState(TopMenu, e.NewSize.Width < 800 ? "Collapsed" : "Overflowed", true);
if (e.NewSize.Width <= 640)
{
VisualStateManager.GoToState(this, "Small", true);
VisualStateManager.GoToState(TopMenu, "Collapsed", true);
VisualStateManager.GoToState(HamburgerMenu, "Hidden", true);
}
else if (e.NewSize.Width > 640 && e.NewSize.Width <= 1008)
{
VisualStateManager.GoToState(this, "Medium", true);
VisualStateManager.GoToState(TopMenu, "Overflowed", true);
VisualStateManager.GoToState(HamburgerMenu, "Collapsed", true);
}
else
{
VisualStateManager.GoToState(this, "Large", true);
VisualStateManager.GoToState(TopMenu, "Overflowed", true);
VisualStateManager.GoToState(HamburgerMenu, "Expanded", true);
}
}
#endregion

4
ModernKeePass/Views/MainPage.xaml
View File

@@ -27,7 +27,7 @@
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="{StaticResource MenuGridLength}"/>
<RowDefinition Height="{StaticResource MenuHeightGridLength}"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
@@ -44,7 +44,7 @@
<Button x:Name="BackButton"
Command="{Binding NavigationHelper.GoBackCommand, ElementName=PageRoot}"
Visibility="Collapsed"
Height="{StaticResource MenuSize}"
Height="{StaticResource MenuWidth}"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"

2
ModernKeePass/Views/SettingsPageFrames/SettingsNewDatabasePage.xaml
View File

@@ -22,7 +22,7 @@
</Grid.ColumnDefinitions>
<ComboBox Grid.Column="1" ItemsSource="{Binding Source={StaticResource KeyDerivations}}" SelectedItem="{Binding DatabaseFormatVersion, Mode=TwoWay}" DisplayMemberPath="DisplayText" />
<Button Grid.Column="2" Style="{StaticResource TextBlockButtonStyle}">
<SymbolIcon Symbol="Help" RenderTransformOrigin="0.5,0.5" >
<SymbolIcon Symbol="Help" RenderTransformOrigin="0.5,0.5">
<SymbolIcon.RenderTransform>
<CompositeTransform ScaleX="0.7" ScaleY="0.7"/>
</SymbolIcon.RenderTransform>

287
ModernKeePass/Views/UserControls/HamburgerMenuUserControl.xaml
View File

@@ -12,132 +12,173 @@
<UserControl.Resources>
<converters:IconToSymbolConverter x:Key="IconToSymbolConverter"/>
</UserControl.Resources>
<ListView
ItemsSource="{Binding ItemsSource, ElementName=UserControl}"
SelectionChanged="Selector_OnSelectionChanged"
SelectedItem="{Binding SelectedItem, ElementName=UserControl, Mode=TwoWay}"
SelectedIndex="{Binding SelectedIndex, ElementName=UserControl, Mode=TwoWay}"
IsSwipeEnabled="false"
IsSynchronizedWithCurrentItem="False"
RequestedTheme="Dark"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
Foreground="{ThemeResource TextColorLightBrush}"
ItemContainerStyle="{StaticResource ListViewLeftIndicatorItemExpanded}">
<ListView.Resources>
<DataTemplate x:Name="IsSpecial">
<StackPanel Orientation="Horizontal">
<SymbolIcon Symbol="{Binding Icon, Converter={StaticResource IconToSymbolConverter}, ConverterParameter=48}" Margin="7,15,0,15">
<ToolTipService.ToolTip>
<ToolTip Content="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" />
</ToolTipService.ToolTip>
</SymbolIcon>
<TextBlock Text="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" x:Name="GroupTextBlock" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" FontStyle="Italic" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Name="IsNormal">
<StackPanel Orientation="Horizontal">
<SymbolIcon Symbol="{Binding Icon, Converter={StaticResource IconToSymbolConverter}, ConverterParameter=48}" Margin="7,15,0,15">
<ToolTipService.ToolTip>
<ToolTip Content="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" />
</ToolTipService.ToolTip>
</SymbolIcon>
<TextBlock Text="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" x:Name="GroupTextBlock" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" />
</StackPanel>
</DataTemplate>
</ListView.Resources>
<ListView.ItemTemplateSelector>
<templateSelectors:SelectableDataTemplateSelector FalseItem="{StaticResource IsNormal}" TrueItem="{StaticResource IsSpecial}" />
</ListView.ItemTemplateSelector>
<ListView.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ToggleButton Style="{StaticResource HamburgerToggleButton}" IsChecked="{Binding IsOpen, ElementName=UserControl}">
<ToolTipService.ToolTip>
<ToolTip Content="{Binding HeaderLabel, ElementName=UserControl}" />
</ToolTipService.ToolTip>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Checked">
<core:ChangePropertyAction PropertyName="Width" Value="{StaticResource ExpandedMenuSize}" TargetObject="{Binding ResizeTarget, ElementName=UserControl}"/>
</core:EventTriggerBehavior>
<core:EventTriggerBehavior EventName="Unchecked">
<core:ChangePropertyAction PropertyName="Width" Value="{StaticResource MenuSize}" TargetObject="{Binding ResizeTarget, ElementName=UserControl}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</ToggleButton>
<TextBlock Text="{Binding HeaderLabel, ElementName=UserControl}" FontWeight="Bold" FontSize="18" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.FooterTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Border BorderBrush="White" BorderThickness="0,0,0,1" />
<Button Padding="0" Margin="0"
Height="{StaticResource MenuSize}"
Visibility="{Binding IsButtonVisible, ElementName=UserControl}"
<Grid HorizontalAlignment="Left">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisibilityStates">
<VisualState x:Name="Hidden">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderTextBlock" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MenuWidth}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderTextBlock" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ExpandedMenuSize}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderTextBlock" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="{StaticResource MenuHeightGridLength}" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<ToggleButton Style="{StaticResource HamburgerToggleButton}" Unchecked="ToggleButton_OnUnchecked">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Checked">
<core:GoToStateAction StateName="Expanded" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</ToggleButton>
<TextBlock
x:Name="HeaderTextBlock"
Text="{Binding HeaderLabel, ElementName=UserControl}"
FontWeight="Bold"
FontSize="18"
TextWrapping="NoWrap"
VerticalAlignment="Center"
Margin="30,0,20,0"
HorizontalAlignment="Center" />
</StackPanel>
<ListView
x:Name="ListView"
Grid.Row="1"
ItemsSource="{Binding ItemsSource, ElementName=UserControl}"
SelectionChanged="Selector_OnSelectionChanged"
SelectedItem="{Binding SelectedItem, ElementName=UserControl, Mode=TwoWay}"
SelectedIndex="{Binding SelectedIndex, ElementName=UserControl, Mode=TwoWay}"
IsSwipeEnabled="false"
IsSynchronizedWithCurrentItem="False"
Background="{ThemeResource AppBarBackgroundThemeBrush}"
ItemContainerStyle="{StaticResource ListViewLeftIndicatorItemExpanded}">
<ListView.Resources>
<DataTemplate x:Name="IsSpecial">
<StackPanel Orientation="Horizontal">
<SymbolIcon Symbol="{Binding Icon, Converter={StaticResource IconToSymbolConverter}, ConverterParameter=48}" Margin="7,15,0,15">
<ToolTipService.ToolTip>
<ToolTip Content="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" />
</ToolTipService.ToolTip>
</SymbolIcon>
<TextBlock Text="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" x:Name="GroupTextBlock" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" FontStyle="Italic" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Name="IsNormal">
<StackPanel Orientation="Horizontal">
<SymbolIcon Symbol="{Binding Icon, Converter={StaticResource IconToSymbolConverter}, ConverterParameter=48}" Margin="7,15,0,15">
<ToolTipService.ToolTip>
<ToolTip Content="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" />
</ToolTipService.ToolTip>
</SymbolIcon>
<TextBlock Text="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" x:Name="GroupTextBlock" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" />
</StackPanel>
</DataTemplate>
</ListView.Resources>
<ListView.ItemTemplateSelector>
<templateSelectors:SelectableDataTemplateSelector FalseItem="{StaticResource IsNormal}" TrueItem="{StaticResource IsSpecial}" />
</ListView.ItemTemplateSelector>
<ListView.FooterTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Border BorderBrush="DarkGray" BorderThickness="0,0,0,1" />
<Button Padding="0" Margin="0"
Height="{StaticResource MenuWidth}"
Visibility="{Binding IsButtonVisible, ElementName=UserControl}"
Style="{StaticResource NoBorderButtonStyle}"
Background="Transparent"
BorderThickness="0"
Width="{StaticResource ExpandedMenuSize}"
HorizontalContentAlignment="Left"
Command="{Binding ActionButtonCommand, ElementName=UserControl}">
<StackPanel Orientation="Horizontal" Margin="17,0,5,0">
<SymbolIcon Symbol="Add">
<ToolTipService.ToolTip>
<ToolTip Content="{Binding ButtonLabel, ElementName=UserControl}" />
</ToolTipService.ToolTip>
</SymbolIcon>
<TextBlock Text="{Binding ButtonLabel, ElementName=UserControl}" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
</StackPanel>
</Button>
<Button Padding="0" Margin="0"
Height="{StaticResource MenuWidth}"
Style="{StaticResource NoBorderButtonStyle}"
Background="Transparent"
BorderThickness="0"
Width="{StaticResource ExpandedMenuSize}"
HorizontalContentAlignment="Left">
<StackPanel Orientation="Horizontal" Margin="17,0,5,0">
<SymbolIcon Symbol="Home">
<ToolTipService.ToolTip>
<ToolTip x:Uid="HamburgerMenuHomeTooltip" />
</ToolTipService.ToolTip>
</SymbolIcon>
<TextBlock x:Uid="HamburgerMenuHomeLabel" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
</StackPanel>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Click">
<core:NavigateToPageAction TargetPage="ModernKeePass.Views.MainPage" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Button>
<Button
Padding="0" Margin="0"
Height="{StaticResource MenuWidth}"
Style="{StaticResource NoBorderButtonStyle}"
Background="Transparent"
Foreground="{ThemeResource TextColorLightBrush}"
BorderThickness="0"
Width="{StaticResource ExpandedMenuSize}"
HorizontalContentAlignment="Left"
Command="{Binding ActionButtonCommand, ElementName=UserControl}">
<StackPanel Orientation="Horizontal" Margin="17,0,5,0">
<SymbolIcon Symbol="Add">
<ToolTipService.ToolTip>
<ToolTip Content="{Binding ButtonLabel, ElementName=UserControl}" />
</ToolTipService.ToolTip>
</SymbolIcon>
<TextBlock Text="{Binding ButtonLabel, ElementName=UserControl}" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
</StackPanel>
</Button>
<Button Padding="0" Margin="0"
Height="{StaticResource MenuSize}"
Style="{StaticResource NoBorderButtonStyle}"
Foreground="{ThemeResource TextColorLightBrush}"
Background="Transparent"
BorderThickness="0"
Width="{StaticResource ExpandedMenuSize}"
HorizontalContentAlignment="Left">
<StackPanel Orientation="Horizontal" Margin="17,0,5,0">
<SymbolIcon Symbol="Home">
<ToolTipService.ToolTip>
<ToolTip x:Uid="HamburgerMenuHomeTooltip" />
</ToolTipService.ToolTip>
</SymbolIcon>
<TextBlock x:Uid="HamburgerMenuHomeLabel" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
</StackPanel>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Click">
<core:NavigateToPageAction TargetPage="ModernKeePass.Views.MainPage" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Button>
<Button
Padding="0" Margin="0"
Height="{StaticResource MenuSize}"
Style="{StaticResource NoBorderButtonStyle}"
Foreground="{ThemeResource TextColorLightBrush}"
Background="Transparent"
BorderThickness="0"
Width="{StaticResource ExpandedMenuSize}"
HorizontalContentAlignment="Left">
<StackPanel Orientation="Horizontal" Margin="17,0,5,0">
<SymbolIcon Symbol="Setting">
<ToolTipService.ToolTip>
<ToolTip x:Uid="HamburgerMenuSettingsTooltip" />
</ToolTipService.ToolTip>
</SymbolIcon>
<TextBlock x:Uid="HamburgerMenuSettingsLabel" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
</StackPanel>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Click">
<core:NavigateToPageAction TargetPage="ModernKeePass.Views.SettingsPage" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Button>
</StackPanel>
</DataTemplate>
</ListView.FooterTemplate>
</ListView>
<StackPanel Orientation="Horizontal" Margin="17,0,5,0">
<SymbolIcon Symbol="Setting">
<ToolTipService.ToolTip>
<ToolTip x:Uid="HamburgerMenuSettingsTooltip" />
</ToolTipService.ToolTip>
</SymbolIcon>
<TextBlock x:Uid="HamburgerMenuSettingsLabel" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
</StackPanel>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Click">
<core:NavigateToPageAction TargetPage="ModernKeePass.Views.SettingsPage" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Button>
</StackPanel>
</DataTemplate>
</ListView.FooterTemplate>
</ListView>
</Grid>
</UserControl>

35
ModernKeePass/Views/UserControls/HamburgerMenuUserControl.xaml.cs
View File

@@ -51,19 +51,7 @@ namespace ModernKeePass.Views.UserControls
typeof(string),
typeof(HamburgerMenuUserControl),
new PropertyMetadata("Title", (o, args) => { }));
public object ResizeTarget
{
get { return GetValue(ResizeTargetProperty); }
set { SetValue(ResizeTargetProperty, value); }
}
public static readonly DependencyProperty ResizeTargetProperty =
DependencyProperty.Register(
nameof(ResizeTarget),
typeof(object),
typeof(HamburgerMenuUserControl),
new PropertyMetadata(null, (o, args) => { }));
public Visibility IsButtonVisible
{
get { return (Visibility)GetValue(IsButtonVisibleProperty); }
@@ -112,19 +100,7 @@ namespace ModernKeePass.Views.UserControls
typeof(int),
typeof(HamburgerMenuUserControl),
new PropertyMetadata(-1, (o, args) => { }));
public bool IsOpen
{
get { return (bool)GetValue(IsOpenProperty); }
set { SetValue(IsOpenProperty, value); }
}
public static readonly DependencyProperty IsOpenProperty =
DependencyProperty.Register(
nameof(IsOpen),
typeof(bool),
typeof(HamburgerMenuUserControl),
new PropertyMetadata(false, (o, args) => { }));
public ICommand ActionButtonCommand
{
get { return (ICommand)GetValue(ActionButtonCommandProperty); }
@@ -143,5 +119,12 @@ namespace ModernKeePass.Views.UserControls
{
SelectionChanged?.Invoke(sender, e);
}
private void ToggleButton_OnUnchecked(object sender, RoutedEventArgs e)
{
var parent = Parent as FrameworkElement;
if (parent == null) return;
VisualStateManager.GoToState(this, parent.ActualWidth <= 640 ? "Hidden" : "Collapsed", true);
}
}
}

57
ModernKeePass/Views/UserControls/TopMenuUserControl.xaml
View File

@@ -4,15 +4,18 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:actions="using:ModernKeePass.Actions"
mc:Ignorable="d">
<UserControl.Resources>
<Style BasedOn="{StaticResource NoBorderButtonStyle}" TargetType="Button" x:Key="MenuButtonStyle" >
<Setter Property="Padding" Value="25,0,25,0" />
<Setter Property="Height" Value="{StaticResource MenuSize}" />
<Setter Property="Height" Value="{StaticResource MenuHeight}" />
</Style>
<Style BasedOn="{StaticResource NoBorderToggleButtonStyle}" TargetType="ToggleButton" x:Key="MenuToggleButtonStyle" >
<Setter Property="Padding" Value="25,0,25,0" />
<Setter Property="Height" Value="{StaticResource MenuSize}" />
<Setter Property="Height" Value="{StaticResource MenuHeight}" />
</Style>
</UserControl.Resources>
<StackPanel x:Name="StackPanel" Orientation="Horizontal" DataContext="{Binding Source={StaticResource Locator}, Path=TopMenu}">
@@ -26,6 +29,9 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MoreButton" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButtonLabel" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
@@ -36,6 +42,9 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MoreButton" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButtonLabel" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
@@ -56,13 +65,12 @@
</SymbolIcon>
<Button.Flyout>
<Flyout Opening="MoveButtonFlyout_OnOpening">
<StackPanel>
<StackPanel Background="Transparent">
<SearchBox x:Uid="GroupsSearch"
Padding="12" Width="350"
Margin="0,5,0,5"
FontSize="15"
SuggestionsRequested="SearchBox_OnSuggestionsRequested"
ResultSuggestionChosen="SearchBox_OnResultSuggestionChosen"
Width="250"
Margin="0,5,0,5"
SuggestionsRequested="GroupSearchBox_OnSuggestionsRequested"
ResultSuggestionChosen="GroupSearchBox_OnResultSuggestionChosen"
SearchHistoryEnabled="False">
</SearchBox>
<Button x:Name="MoveButton" x:Uid="MoveButton" />
@@ -104,6 +112,39 @@
</ToolTipService.ToolTip>
</SymbolIcon>
</Button>
<Button x:Name="SearchButton" Style="{StaticResource NoBorderButtonStyle}" Height="{StaticResource MenuHeight}" Padding="25,0,25,0">
<StackPanel Orientation="Horizontal">
<SymbolIcon Symbol="Find" />
<TextBlock x:Uid="SearchButtonLabel" x:Name="SearchButtonLabel" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="10,0,0,0" />
</StackPanel>
<ToolTipService.ToolTip>
<ToolTip x:Uid="SearchButtonTooltip" />
</ToolTipService.ToolTip>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Click">
<core:ChangePropertyAction TargetObject="{Binding ElementName=SearchBox}" PropertyName="Visibility" Value="Visible" />
<core:ChangePropertyAction TargetObject="{Binding ElementName=SearchButton}" PropertyName="Visibility" Value="Collapsed" />
<!-- TODO: make this work -->
<actions:SetupFocusAction TargetObject="{Binding ElementName=SearchBox}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Button>
<SearchBox
x:Uid="EntriesSearch"
x:Name="SearchBox"
Margin="0,5,0,5"
Width="350"
Visibility="Collapsed"
SuggestionsRequested="EntrySearchBox_OnSuggestionsRequested"
SearchHistoryEnabled="False"
ResultSuggestionChosen="EntrySearchBox_OnResultSuggestionChosen">
<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>
</StackPanel>
<Button x:Name="MoreButton" Style="{StaticResource MenuButtonStyle}">
<SymbolIcon Symbol="More" />

20
ModernKeePass/Views/UserControls/TopMenuUserControl.xaml.cs
View File

@@ -194,7 +194,7 @@ namespace ModernKeePass.Views.UserControls
SortGroupsButtonFlyout.Command = SortGroupsCommand;
}
private void SearchBox_OnSuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args)
private void GroupSearchBox_OnSuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args)
{
var imageUri = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appdata://Assets/ModernKeePass-SmallLogo.scale-80.png"));
var groups = Model.Groups.Where(g => g.Title.IndexOf(args.QueryText, StringComparison.OrdinalIgnoreCase) >= 0).Take(5);
@@ -209,10 +209,26 @@ namespace ModernKeePass.Views.UserControls
}
}
private void SearchBox_OnResultSuggestionChosen(SearchBox sender, SearchBoxResultSuggestionChosenEventArgs args)
private void GroupSearchBox_OnResultSuggestionChosen(SearchBox sender, SearchBoxResultSuggestionChosenEventArgs args)
{
MoveButton.CommandParameter = args.Tag;
MoveCommand.RaiseCanExecuteChanged();
}
private async void EntrySearchBox_OnSuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args)
{
var imageUri = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appdata://Assets/ModernKeePass-SmallLogo.scale-80.png"));
var results = (await Model.Search(args.QueryText)).Take(5);
foreach (var result in results)
{
args.Request.SearchSuggestionCollection.AppendResultSuggestion(result.Title, result.ParentGroupName, result.Id, imageUri, string.Empty);
}
}
private void EntrySearchBox_OnResultSuggestionChosen(SearchBox sender, SearchBoxResultSuggestionChosenEventArgs args)
{
Model.GoToEntry(args.Tag);
}
}
}