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: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:Class="ModernKeePass.Views.GroupDetailPage"
    mc:Ignorable="d"
    SizeChanged="GroupDetailPage_OnSizeChanged"
    DataContext="{Binding Source={StaticResource Locator}, Path=Group}">
    <Page.Resources>
        <converters:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
        <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
        <converters:InverseBooleanToVisibilityConverter x:Key="InverseBooleanToVisibilityConverter"/>
        <converters:IconToSymbolConverter x:Key="IconToSymbolConverter"/>
    </Page.Resources>
    <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 ExpandedMenuGridLength}" x:Name="LeftListViewColumn" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <userControls:HamburgerMenuUserControl 
                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>
                    <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" Command="{Binding CreateEntryCommand}"  HorizontalAlignment="Right">
                    <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 MainColorBrush}, Converter={StaticResource ColorToBrushConverter}}">
                                            <Viewbox MaxHeight="50" Width="100">
                                                <SymbolIcon Symbol="{Binding Icon, Converter={StaticResource IconToSymbolConverter}}" Foreground="{StaticResource TextColorLightBrush}" />
                                            </Viewbox>
                                        </Border>
                                        <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,10,0,0" >
                                            <TextBlock x:Name="NameTextBlock" Text="{Binding Title}" 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" Foreground="{StaticResource TextColorDarkBrush}">
                                            <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 Title}" />
                                                            </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 Title}" />
                                                            </core:EventTriggerBehavior>
                                                        </interactivity:Interaction.Behaviors>
                                                    </MenuFlyoutItem>
                                                    <MenuFlyoutItem x:Uid="EntryItemCopyUrl" IsEnabled="{Binding HasUrl}">
                                                        <interactivity:Interaction.Behaviors>
                                                            <core:EventTriggerBehavior EventName="Click">
                                                                <actions:NavigateToUrlAction Url="{Binding Url}" />
                                                            </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 Title}" 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="50" Margin="30" Foreground="{StaticResource MainColorBrush}" 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 GoBackCommand}"
                    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="200" Width="200" Grid.Column="0" Grid.Row="0" 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}}">
                    <SymbolIcon Symbol="{Binding Icon}" Width="100" Height="70"  />
                </Viewbox>
                <TextBox Grid.Column="1" Grid.Row="0" 
                    x:Uid="GroupTitle"
                    x:Name="TitleTextBox"
                    Text="{Binding Title, Mode=TwoWay}" 
                    Background="Transparent"
                    IsHitTestVisible="{Binding IsEditMode}"
                    FontSize="20"
                    FontWeight="Light"
                    TextWrapping="NoWrap" 
                    VerticalAlignment="Center">
                    <interactivity:Interaction.Behaviors>
                        <core:DataTriggerBehavior Binding="{Binding IsEditMode}" Value="True">
                            <actions:SetupFocusAction TargetObject="{Binding ElementName=TitleTextBox}" />
                            <core:ChangePropertyAction TargetObject="{Binding ElementName=TitleTextBox}" PropertyName="BorderThickness" Value="2" />
                        </core:DataTriggerBehavior>
                        <core:DataTriggerBehavior Binding="{Binding IsEditMode}" Value="False">
                            <core:ChangePropertyAction TargetObject="{Binding ElementName=TitleTextBox}" PropertyName="BorderThickness" Value="0" />
                        </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>
            <userControls:TopMenuUserControl x:Name="TopMenu" Grid.Column="2"
                SortButtonVisibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}"
                IsEditButtonChecked="{Binding IsEditMode, Mode=TwoWay}"
                SaveCommand="{Binding SaveCommand}"
                MoveCommand="{Binding MoveCommand}"
                SortEntriesCommand="{Binding SortEntriesCommand}"
                SortGroupsCommand="{Binding SortGroupsCommand}"
                DeleteCommand="{Binding DeleteCommand}">
                <interactivity:Interaction.Behaviors>
                    <core:EventTriggerBehavior EventName="EditButtonClick">
                        <actions:SetupFocusAction TargetObject="{Binding ElementName=TitleTextBox}"  />
                    </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">
                <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="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">
                    <Storyboard>
                        <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>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>