modernkeepass/ModernKeePass/Views/GroupDetailPage.xaml

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    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:viewModels="using:ModernKeePass.ViewModels"
    xmlns:converters="using:ModernKeePass.Converters"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity" 
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:actions="using:ModernKeePass.Actions"
    xmlns:userControls="using:ModernKeePass.Views.UserControls"
    x:Name="PageRoot"
    x:Class="ModernKeePass.Views.GroupDetailPage"
    mc:Ignorable="d"
    SizeChanged="GroupDetailPage_OnSizeChanged">
    <Page.Resources>
        <converters:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
        <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
        <converters:InverseBooleanToVisibilityConverter x:Key="InverseBooleanToVisibilityConverter"/>
        <converters:NullToBooleanConverter x:Key="NullToBooleanConverter"/>
        <converters:IntToSymbolConverter x:Key="IntToSymbolConverter"/>
    </Page.Resources>
    <Page.DataContext>
        <viewModels:GroupVm />
    </Page.DataContext>
    <Grid>
        <Grid.Resources>
            <CollectionViewSource
                x:Name="EntriesViewSource"
                Source="{Binding Entries}" />
            <CollectionViewSource
                x:Name="EntriesZoomedOutViewSource"
                Source="{Binding EntriesZoomedOut}" IsSourceGrouped="True" />
        </Grid.Resources>
        <Grid.Background>
            <StaticResource ResourceKey="ApplicationPageBackgroundThemeBrush"/>
        </Grid.Background>
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="{StaticResource MenuGridLength}"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{StaticResource MenuGridLength}" x:Name="LeftListViewColumn" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <userControls:HamburgerMenuUserControl x:Uid="GroupsLeftListView" ItemsSource="{Binding Groups}" SelectionChanged="groups_SelectionChanged" ButtonClicked="CreateGroup_ButtonClick" ResizeTarget="{Binding ElementName=LeftListViewColumn}" IsButtonVisible="{Binding IsSelected, Converter={StaticResource InverseBooleanToVisibilityConverter}}" />
            <Grid Grid.Column="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="50" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <TextBlock Grid.Column="0" Grid.Row="0" x:Uid="ReorderEntriesLabel" Margin="10,10,0,0" Visibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}" Style="{StaticResource BodyTextBlockStyle}" />
                <!--<TextBlock Grid.Column="1" Grid.Row="0" x:Uid="EntrySymbol" Margin="40,20,0,0" Visibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}" Style="{StaticResource BodyTextBlockStyle}" />-->
                <HyperlinkButton Grid.Column="2" Grid.Row="0" VerticalAlignment="Top" Click="CreateEntry_ButtonClick" Visibility="{Binding IsSelected, Converter={StaticResource InverseBooleanToVisibilityConverter}}" HorizontalAlignment="Right" Foreground="{StaticResource MainColor}" Style="{StaticResource MainColorHyperlinkButton}">
                    <StackPanel Orientation="Horizontal">
                        <SymbolIcon Symbol="Add">
                            <ToolTipService.ToolTip>
                                <ToolTip x:Uid="AddEntryTooltip" />
                            </ToolTipService.ToolTip>
                        </SymbolIcon>
                        <TextBlock x:Name="AddEntryTextBlock" x:Uid="GroupCreateEntry" VerticalAlignment="Center" Margin="10,0,0,0" />
                    </StackPanel>
                </HyperlinkButton>
            
                <SemanticZoom Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" ViewChangeStarted="SemanticZoom_ViewChangeStarted" ScrollViewer.HorizontalScrollBarVisibility="Visible">
                    <SemanticZoom.ZoomedInView>
                        <!-- Horizontal scrolling grid -->
                        <GridView
                            x:Name="GridView"
                            ItemsSource="{Binding Source={StaticResource EntriesViewSource}}"
                            AutomationProperties.AutomationId="ItemGridView"
                            AutomationProperties.Name="Entries"
                            TabIndex="1"
                            Margin="10,0,0,0"
                            SelectionChanged="entries_SelectionChanged"
                            IsSynchronizedWithCurrentItem="False" 
                            BorderBrush="{StaticResource ListViewItemSelectedBackgroundThemeBrush}"
                            AllowDrop="True"
                            CanReorderItems="True" 
                            CanDragItems="True"
                            DragItemsStarting="GridView_DragItemsStarting">
                            <interactivity:Interaction.Behaviors>
                                <core:DataTriggerBehavior Binding="{Binding IsEditMode}" Value="False">
                                    <actions:SetupFocusAction TargetObject="{Binding ElementName=GridView}" />
                                </core:DataTriggerBehavior>
                            </interactivity:Interaction.Behaviors>
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <Grid Height="110" Width="480" x:Name="EntryGrid">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Border Grid.Column="0" Background="{Binding BackgroundColor, ConverterParameter={StaticResource MainColor}, Converter={StaticResource ColorToBrushConverter}}">
                                            <Viewbox MaxHeight="50" Width="100">
                                                <SymbolIcon Symbol="{Binding IconId, Converter={StaticResource IntToSymbolConverter}}" Foreground="{StaticResource TextColor}" />
                                            </Viewbox>
                                        </Border>
                                        <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,10,0,0" >
                                            <TextBlock x:Name="NameTextBlock" Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" Foreground="{Binding ForegroundColor, ConverterParameter={StaticResource TextBoxForegroundThemeBrush}, Converter={StaticResource ColorToBrushConverter}}"/>
                                            <TextBlock Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" />
                                            <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">
                                            <SymbolIcon Symbol="More" />
                                            <Button.Flyout>
                                                <MenuFlyout>
                                                    <MenuFlyoutItem x:Uid="EntryItemCopyLogin">
                                                        <interactivity:Interaction.Behaviors>
                                                            <core:EventTriggerBehavior EventName="Click">
                                                                <actions:ClipboardAction Text="{Binding UserName}" />
                                                                <actions:ToastAction x:Uid="ToastCopyLogin" Title="{Binding Name}" />
                                                            </core:EventTriggerBehavior>
                                                        </interactivity:Interaction.Behaviors>
                                                    </MenuFlyoutItem>
                                                    <MenuFlyoutItem x:Uid="EntryItemCopyPassword">
                                                        <interactivity:Interaction.Behaviors>
                                                            <core:EventTriggerBehavior EventName="Click">
                                                                <actions:ClipboardAction Text="{Binding Password}" />
                                                                <actions:ToastAction x:Uid="ToastCopyPassword" Title="{Binding Name}" />
                                                            </core:EventTriggerBehavior>
                                                        </interactivity:Interaction.Behaviors>
                                                    </MenuFlyoutItem>
                                                    <MenuFlyoutItem x:Uid="EntryItemCopyUrl">
                                                        <interactivity:Interaction.Behaviors>
                                                            <core:EventTriggerBehavior EventName="Click">
                                                                <actions:NavigateToUrlAction Url="{Binding Url}" />
                                                                <actions:ToastAction x:Uid="ToastCopyUrl" Title="{Binding Name}" />
                                                            </core:EventTriggerBehavior>
                                                        </interactivity:Interaction.Behaviors>
                                                    </MenuFlyoutItem>
                                                </MenuFlyout>
                                            </Button.Flyout>
                                        </Button>
                                    </Grid>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>
                    </SemanticZoom.ZoomedInView>
                    <SemanticZoom.ZoomedOutView>
                        <GridView
                            ItemsSource="{Binding Source={StaticResource EntriesZoomedOutViewSource}}"
                            SelectionChanged="groups_SelectionChanged"
                            SelectionMode="None"
                            IsSynchronizedWithCurrentItem="False">
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Vertical">
                                        <TextBlock Width="100" Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
                                    </StackPanel>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                            <GridView.GroupStyle>
                                <GroupStyle HidesIfEmpty="True">
                                    <GroupStyle.HeaderTemplate>
                                        <DataTemplate>
                                            <Grid Background="LightGray" HorizontalAlignment="Left">
                                                <TextBlock Text="{Binding Key}" Width="40" Margin="30" Foreground="Black" Style="{StaticResource HeaderTextBlockStyle}" TextAlignment="Center" />
                                            </Grid>
                                        </DataTemplate>
                                    </GroupStyle.HeaderTemplate>
                                </GroupStyle>
                            </GridView.GroupStyle>
                        </GridView>
                    </SemanticZoom.ZoomedOutView>
                </SemanticZoom>

            </Grid>
        </Grid>
        <!-- Back button and page title -->
        <Grid Grid.Row="0" Background="{ThemeResource AppBarBackgroundThemeBrush}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{StaticResource MenuGridLength}"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" 
                    Command="{Binding NavigationHelper.GoBackCommand, ElementName=PageRoot}"
                    Height="{StaticResource MenuSize}"
                    Width="{StaticResource MenuSize}"
                    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="30" Width="50" Grid.Column="0" Grid.Row="0" Visibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}">
                    <userControls:SymbolPickerUserControl Width="80" Height="40" SelectedSymbol="{Binding IconId, Converter={StaticResource IntToSymbolConverter}, Mode=TwoWay}" />
                </Viewbox>
                <Viewbox MaxHeight="30" Width="50" Grid.Column="0" Grid.Row="0" Visibility="{Binding IsEditMode, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
                    <SymbolIcon Symbol="{Binding IconId, Converter={StaticResource IntToSymbolConverter}}" Width="80" Height="40"  />
                </Viewbox>
                <TextBox Grid.Column="1" Grid.Row="0"
                    x:Name="TitleTextBox"
                    Text="{Binding Name, Mode=TwoWay}" 
                    Foreground="{ThemeResource DefaultTextForegroundThemeBrush}"
                    SelectionHighlightColor="{StaticResource MainColor}"
                    Background="Transparent"
                    IsHitTestVisible="{Binding IsEditMode}" 
                    BorderThickness="0" 
                    FontSize="20"
                    FontWeight="Light"
                    TextWrapping="NoWrap" 
                    VerticalAlignment="Center" 
                    x:Uid="GroupTitle">
                    <interactivity:Interaction.Behaviors>
                        <core:DataTriggerBehavior Binding="{Binding IsEditMode}" Value="True">
                            <actions:SetupFocusAction TargetObject="{Binding ElementName=TitleTextBox}" />
                        </core:DataTriggerBehavior>
                    </interactivity:Interaction.Behaviors>
                </TextBox>
                <userControls:BreadCrumbUserControl Grid.Column="1" Grid.Row="1" ItemsSource="{Binding BreadCrumb}" Margin="5,-5,0,0" />
            </Grid>
            <userControls:TopMenuUserControl x:Name="TopMenu" Grid.Column="2" 
                RestoreButtonVisibility="{Binding ShowRestore, Converter={StaticResource BooleanToVisibilityConverter}}" 
                DeleteButtonVisibility="{Binding IsSelected, Converter={StaticResource InverseBooleanToVisibilityConverter}}"
                SortButtonVisibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}"
                IsEditButtonChecked="{Binding IsEditMode, Mode=TwoWay}"
                IsDeleteButtonEnabled="{Binding IsNotRoot}"
                IsRestoreButtonEnabled="{Binding PreviousGroup, Converter={StaticResource NullToBooleanConverter}}"
                SaveCommand="{Binding SaveCommand}"
                RestoreCommand="{Binding UndoDeleteCommand}"
                SortEntriesCommand="{Binding SortEntriesCommand}"
                SortGroupsCommand="{Binding SortGroupsCommand}">
                <interactivity:Interaction.Behaviors>
                    <core:EventTriggerBehavior EventName="DeleteButtonClick">
                        <actions:DeleteEntityAction Entity="{Binding}" Command="{Binding NavigationHelper.GoBackCommand, ElementName=PageRoot}" />
                    </core:EventTriggerBehavior>
                    <core:EventTriggerBehavior EventName="RestoreButtonClick">
                        <actions:RestoreEntityAction Entity="{Binding}" Command="{Binding NavigationHelper.GoBackCommand, ElementName=PageRoot}" />
                    </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">
                <SymbolIcon Symbol="Find" />
                <Button.Flyout>
                    <Flyout>
                        <Flyout.FlyoutPresenterStyle>
                            <Style TargetType="FlyoutPresenter">
                                <Setter Property="Padding" Value="0" />
                            </Style>
                        </Flyout.FlyoutPresenterStyle>
                        <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}" />
                    </Flyout>
                </Button.Flyout>
            </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}" />
        </Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="DragDropGroup">
                <VisualState x:Name="Dragging">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridView" Storyboard.TargetProperty="BorderThickness">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Dropped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridView" Storyboard.TargetProperty="BorderThickness">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="TopMenuGroup">
                <VisualState x:Name="Small">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopMenu" Storyboard.TargetProperty="OverflowButtonsVisibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopMenu" Storyboard.TargetProperty="MoreButtonVisibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButton" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchBox" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AddEntryTextBlock" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Large">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopMenu" Storyboard.TargetProperty="OverflowButtonsVisibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopMenu" Storyboard.TargetProperty="MoreButtonVisibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButton" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchBox" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AddEntryTextBlock" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>