Major redesign in the Group Detail page:

- groups and entries are inverted
- groups are in a collapsable menu (to be improved!)
This commit is contained in:
2017-10-03 18:38:31 +02:00
committed by BONNEVILLE Geoffroy
parent 616d922145
commit 013108f2ec
5 changed files with 138 additions and 117 deletions

View File

@@ -41,9 +41,7 @@ namespace ModernKeePass.Pages
/// <see cref="Frame.Navigate(Type, object)"/> lors de la requête initiale de cette page et /// <see cref="Frame.Navigate(Type, object)"/> lors de la requête initiale de cette page et
/// un dictionnaire d'état conservé par cette page durant une session /// un dictionnaire d'état conservé par cette page durant une session
/// antérieure. L'état n'aura pas la valeur Null lors de la première visite de la page.</param> /// antérieure. L'état n'aura pas la valeur Null lors de la première visite de la page.</param>
private void navigationHelper_LoadState(object sender, LoadStateEventArgs e) private void navigationHelper_LoadState(object sender, LoadStateEventArgs e) {}
{
}
#region Inscription de NavigationHelper #region Inscription de NavigationHelper

View File

@@ -14,47 +14,11 @@
<SolidColorBrush x:Key="White" Color="White"/> <SolidColorBrush x:Key="White" Color="White"/>
<converters:ColorToBrushConverter x:Key="ColorToBrushConverter"/> <converters:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
<converters:PluralizationConverter x:Key="PluralizationConverter"/> <converters:PluralizationConverter x:Key="PluralizationConverter"/>
<DataTemplate x:Name="GroupFirstItem">
<Border
BorderThickness="2"
BorderBrush="DimGray"
Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
Margin="0,10,0,0" >
<Grid Height="110" Width="480" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<SymbolIcon Grid.Column="0" Symbol="{Binding IconSymbol}" Width="100" Height="100" />
<TextBlock Grid.Column="1" Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="13,0,0,5"/>
</Grid>
</Border>
</DataTemplate>
<DataTemplate x:Name="GroupOtherItem">
<Border
BorderThickness="2"
BorderBrush="DimGray"
Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
Margin="0,10,0,0" >
<Grid Height="110" Width="480" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<SymbolIcon Grid.Column="0" Symbol="{Binding IconSymbol}" Width="100" Height="100" />
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0" >
<TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding EntryCount, ConverterParameter=entry\,entries, Converter={StaticResource PluralizationConverter}}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" />
<TextBlock Text="{Binding GroupCount, ConverterParameter=group\,groups, Converter={StaticResource PluralizationConverter}}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" />
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</Page.Resources> </Page.Resources>
<Page.DataContext> <Page.DataContext>
<viewModels:GroupVm /> <viewModels:GroupVm />
</Page.DataContext> </Page.DataContext>
<Grid> <Grid>
<Grid.Resources> <Grid.Resources>
<CollectionViewSource <CollectionViewSource
@@ -64,65 +28,120 @@
x:Name="EntriesViewSource" x:Name="EntriesViewSource"
Source="{Binding Entries}"/> Source="{Binding Entries}"/>
</Grid.Resources> </Grid.Resources>
<Grid.ChildrenTransitions> <!--<Grid.ChildrenTransitions>
<TransitionCollection> <TransitionCollection>
<EntranceThemeTransition/> <EntranceThemeTransition/>
</TransitionCollection> </TransitionCollection>
</Grid.ChildrenTransitions> </Grid.ChildrenTransitions>-->
<Grid.RowDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="140"/> <RowDefinition Height="140"/>
<RowDefinition Height="*"/> <RowDefinition Height="*"/>
</Grid.RowDefinitions> </Grid.RowDefinitions>
<!-- Horizontal scrolling grid --> <!-- Horizontal scrolling grid -->
<SemanticZoom <SemanticZoom Grid.RowSpan="2" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="0,140,0,0">
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
Grid.RowSpan="2"
Padding="20,126,20,50">
<SemanticZoom.ZoomedInView> <SemanticZoom.ZoomedInView>
<GridView <GridView
x:Name="GridView"
AutomationProperties.AutomationId="ItemGridView" AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Groups" AutomationProperties.Name="Entries"
TabIndex="1" TabIndex="1"
ItemsSource="{Binding Source={StaticResource GroupsViewSource}}" ItemsSource="{Binding Source={StaticResource EntriesViewSource}}"
IsSwipeEnabled="false" IsSwipeEnabled="false"
SelectionChanged="groups_SelectionChanged" SelectionChanged="entries_SelectionChanged"
IsSynchronizedWithCurrentItem="False" > IsSynchronizedWithCurrentItem="False" >
<GridView.DataContext>
<viewModels:EntryVm></viewModels:EntryVm>
</GridView.DataContext>
<GridView.Resources>
<DataTemplate x:Name="GroupFirstItem">
<Border
BorderThickness="2"
BorderBrush="DimGray"
Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
Margin="0,10,0,0" >
<Grid Height="110" Width="480" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<SymbolIcon Grid.Column="0" Symbol="{Binding IconSymbol}" Width="100" Height="100" />
<TextBlock Grid.Column="1" Text="{Binding Title}" FontWeight="{Binding FontWeight}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="13,0,0,5"/>
</Grid>
</Border>
</DataTemplate>
<DataTemplate x:Name="GroupOtherItem">
<Border
BorderThickness="2"
BorderBrush="DimGray"
Background="{Binding BackgroundColor, ConverterParameter={StaticResource Transparent}, Converter={StaticResource ColorToBrushConverter}}"
Margin="0,10,0,0" >
<Grid Height="110" Width="480" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<SymbolIcon Grid.Column="0" Symbol="{Binding IconSymbol}" Width="100" Height="100" />
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0" >
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" Foreground="{Binding ForegroundColor, ConverterParameter={StaticResource White}, Converter={StaticResource ColorToBrushConverter}}"/>
<TextBlock Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
<!--<TextBlock Text="{Binding EntryCount, ConverterParameter=entry\,entries, Converter={StaticResource PluralizationConverter}}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" />
<TextBlock Text="{Binding GroupCount, ConverterParameter=group\,groups, Converter={StaticResource PluralizationConverter}}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" />-->
<TextBlock Text="{Binding UserName}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" />
<TextBlock Text="{Binding Url}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" />
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</GridView.Resources>
<GridView.ItemTemplateSelector> <GridView.ItemTemplateSelector>
<local:FirstItemDataTemplateSelector <local:FirstItemDataTemplateSelector
FirstItem="{StaticResource GroupFirstItem}" FirstItem="{StaticResource GroupFirstItem}"
OtherItem="{StaticResource GroupOtherItem}" /> OtherItem="{StaticResource GroupOtherItem}" />
</GridView.ItemTemplateSelector> </GridView.ItemTemplateSelector>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="52,0,0,2"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.Header> <GridView.Header>
<ListView <ListView
x:Name="LeftListView"
Height="auto" Height="auto"
Width="480" Width="auto"
ItemsSource="{Binding Source={StaticResource EntriesViewSource}}" Background="LightGray"
Margin="10,0,0,0" Foreground="DarkSlateGray"
SelectionChanged="entriesListView_SelectionChanged" ItemsSource="{Binding Source={StaticResource GroupsViewSource}}"
SelectionChanged="groups_SelectionChanged"
IsSwipeEnabled="false" IsSwipeEnabled="false"
IsSynchronizedWithCurrentItem="False" > IsSynchronizedWithCurrentItem="False"
<ListView.ItemTemplate> DataContext="{Binding DataContext, ElementName=PageRoot}">
<DataTemplate> <ListView.Resources>
<DataTemplate x:Name="Collapsed">
<StackPanel <StackPanel
Orientation="Horizontal" Margin="10,0,0,0"
Background="{Binding BackgroundColor, ConverterParameter={StaticResource Transparent}, Converter={StaticResource ColorToBrushConverter}}"> Width="30"
Orientation="Horizontal" >
<SymbolIcon Symbol="{Binding IconSymbol}" /> <SymbolIcon Symbol="{Binding IconSymbol}" />
<TextBlock
Text="{Binding Title}"
FontWeight="{Binding FontWeight}"
TextWrapping="NoWrap"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="30,0,0,0"
Foreground="{Binding ForegroundColor, ConverterParameter={StaticResource White}, Converter={StaticResource ColorToBrushConverter}}"/>
</StackPanel> </StackPanel>
</DataTemplate> </DataTemplate>
</ListView.ItemTemplate> <DataTemplate x:Name="Expanded">
<ListView.HeaderTemplate> <StackPanel Margin="10,0,0,0" Width="200" Orientation="Horizontal" >
<DataTemplate> <SymbolIcon Symbol="{Binding IconSymbol}" />
<TextBlock Text="{Binding EntryCount, ConverterParameter=entry\,entries, Converter={StaticResource PluralizationConverter}}" FontSize="20" Margin="0,20,0,20" /> <TextBlock Text="{Binding Name}" FontWeight="{Binding FontWeight}" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,0,0" />
<!--<TextBlock Text="{Binding EntryCount}" HorizontalAlignment="Right" VerticalAlignment="Center" />-->
</StackPanel>
</DataTemplate> </DataTemplate>
</ListView.HeaderTemplate> <DataTemplate x:Name="Forward">
<Button x:Name="ForwardButton" Click="Button_Click" BorderBrush="LightGray" HorizontalAlignment="Right">
<SymbolIcon Symbol="Forward" Foreground="DimGray" />
</Button>
</DataTemplate>
<DataTemplate x:Name="Back">
<Button x:Name="BackButton" Click="Button_Click" BorderBrush="LightGray" HorizontalAlignment="Right">
<SymbolIcon Symbol="Back" Foreground="DimGray" />
</Button>
</DataTemplate>
</ListView.Resources>
<ListView.ItemContainerStyle> <ListView.ItemContainerStyle>
<Style TargetType="ListViewItem"> <Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" />
@@ -131,26 +150,19 @@
</ListView.ItemContainerStyle> </ListView.ItemContainerStyle>
</ListView> </ListView>
</GridView.Header> </GridView.Header>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="52,0,0,2"/>
</Style>
</GridView.ItemContainerStyle>
</GridView> </GridView>
</SemanticZoom.ZoomedInView> </SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView> <SemanticZoom.ZoomedOutView>
<ListView <ListView
ItemsSource="{Binding Source={StaticResource GroupsViewSource}}" x:Name="SemanticListView"
ItemsSource="{Binding Source={StaticResource EntriesViewSource}}"
IsSwipeEnabled="false" IsSwipeEnabled="false"
SelectionChanged="groups_SelectionChanged" SelectionChanged="groups_SelectionChanged"
IsSynchronizedWithCurrentItem="False" > IsSynchronizedWithCurrentItem="False" >
<ListView.ItemTemplate> <ListView.ItemTemplate>
<DataTemplate> <DataTemplate>
<TextBlock <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
Text="{Binding Name}"
Style="{StaticResource TitleTextBlockStyle}"
TextWrapping="NoWrap"/>
</DataTemplate> </DataTemplate>
</ListView.ItemTemplate> </ListView.ItemTemplate>
</ListView> </ListView>

View File

@@ -1,4 +1,5 @@
using System; using System;
using Windows.UI.Xaml;
using ModernKeePass.Common; using ModernKeePass.Common;
using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation; using Windows.UI.Xaml.Navigation;
@@ -20,12 +21,13 @@ namespace ModernKeePass.Pages
/// </summary> /// </summary>
public NavigationHelper NavigationHelper { get; } public NavigationHelper NavigationHelper { get; }
public GroupDetailPage() public GroupDetailPage()
{ {
InitializeComponent(); InitializeComponent();
NavigationHelper = new NavigationHelper(this); NavigationHelper = new NavigationHelper(this);
NavigationHelper.LoadState += navigationHelper_LoadState; NavigationHelper.LoadState += navigationHelper_LoadState;
LeftListView.ItemTemplate = (DataTemplate)LeftListView.Resources["Collapsed"];
LeftListView.HeaderTemplate = (DataTemplate)LeftListView.Resources["Forward"];
} }
/// <summary> /// <summary>
@@ -39,9 +41,7 @@ namespace ModernKeePass.Pages
/// <see cref="Frame.Navigate(Type, object)"/> when this page was initially requested and /// <see cref="Frame.Navigate(Type, object)"/> when this page was initially requested and
/// a dictionary of state preserved by this page during an earlier /// a dictionary of state preserved by this page during an earlier
/// session. The state will be null the first time a page is visited.</param> /// session. The state will be null the first time a page is visited.</param>
private void navigationHelper_LoadState(object sender, LoadStateEventArgs e) private void navigationHelper_LoadState(object sender, LoadStateEventArgs e) {}
{
}
#region NavigationHelper registration #region NavigationHelper registration
@@ -71,39 +71,33 @@ namespace ModernKeePass.Pages
private void groups_SelectionChanged(object sender, SelectionChangedEventArgs e) private void groups_SelectionChanged(object sender, SelectionChangedEventArgs e)
{ {
GroupVm selectedItem = null; if (LeftListView.SelectedIndex == 0)
if (sender is GridView)
{ {
var gridView = (GridView) sender; var currentGroup = DataContext as GroupVm;
if (gridView.SelectedIndex == 0) currentGroup?.CreateNewGroup();
{ LeftListView.SelectedIndex = -1;
var currentGroup = DataContext as GroupVm; // TODO: Navigate to new group?
currentGroup?.CreateNewGroup(); return;
gridView.SelectedIndex = -1;
// TODO: Navigate to new group?
return;
}
selectedItem = gridView.SelectedItem as GroupVm;
} }
if (sender is ListView) selectedItem = ((ListView) sender).SelectedItem as GroupVm; var selectedItem = LeftListView.SelectedItem as GroupVm;
if (selectedItem == null) return; if (selectedItem == null) return;
Frame.Navigate(typeof(GroupDetailPage), selectedItem); Frame.Navigate(typeof(GroupDetailPage), selectedItem);
} }
private void entries_SelectionChanged(object sender, SelectionChangedEventArgs e)
private void entriesListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{ {
var listView = sender as ListView; switch (GridView.SelectedIndex)
if (listView != null && listView.SelectedIndex == -1) return;
if (listView.SelectedIndex == 0)
{ {
var currentGroup = DataContext as GroupVm; case -1:
currentGroup?.CreateNewEntry(); return;
listView.SelectedIndex = -1; case 0:
// TODO: Navigate to new entry? var currentGroup = DataContext as GroupVm;
return; currentGroup?.CreateNewEntry();
GridView.SelectedIndex = -1;
// TODO: Navigate to new entry?
return;
} }
Frame.Navigate(typeof(EntryDetailPage), listView?.SelectedItem as EntryVm); Frame.Navigate(typeof(EntryDetailPage), GridView.SelectedItem as EntryVm);
} }
private void AppBarButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e) private void AppBarButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
@@ -112,5 +106,22 @@ namespace ModernKeePass.Pages
group?.RemoveGroup(); group?.RemoveGroup();
if (Frame.CanGoBack) Frame.GoBack(); if (Frame.CanGoBack) Frame.GoBack();
} }
private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
var button = sender as Button;
if (button == null) return;
switch (button.Name)
{
case "ForwardButton":
LeftListView.ItemTemplate = (DataTemplate) LeftListView.Resources["Expanded"];
LeftListView.HeaderTemplate = (DataTemplate) LeftListView.Resources["Back"];
break;
case "BackButton":
LeftListView.ItemTemplate = (DataTemplate)LeftListView.Resources["Collapsed"];
LeftListView.HeaderTemplate = (DataTemplate)LeftListView.Resources["Forward"];
break;
}
}
} }
} }

View File

@@ -46,8 +46,6 @@ namespace ModernKeePass.ViewModels
public System.Drawing.Color? ForegroundColor => _pwEntry?.ForegroundColor; public System.Drawing.Color? ForegroundColor => _pwEntry?.ForegroundColor;
public FontWeight FontWeight => _pwEntry == null ? FontWeights.Bold : FontWeights.Normal;
public Symbol IconSymbol public Symbol IconSymbol
{ {
get get

View File

@@ -1,5 +1,6 @@
using System.Collections.ObjectModel; using System.Collections.ObjectModel;
using System.Linq; using System.Linq;
using Windows.UI.Text;
using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls;
using ModernKeePass.Common; using ModernKeePass.Common;
using ModernKeePass.Mappings; using ModernKeePass.Mappings;
@@ -29,6 +30,7 @@ namespace ModernKeePass.ViewModels
} }
public bool IsNotRoot => ParentGroup != null; public bool IsNotRoot => ParentGroup != null;
public FontWeight FontWeight => _pwGroup == null ? FontWeights.Bold : FontWeights.Normal;
private readonly PwGroup _pwGroup; private readonly PwGroup _pwGroup;
public GroupVm() {} public GroupVm() {}