UniGetUI/src/UniGetUI.Avalonia/Views/Controls/UserAvatarControl.axaml at 79f2904ebee49577279a8eb525d8dfcefdb08b64 · Devolutions/UniGetUI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<UserControl x:Class="UniGetUI.Avalonia.Views.Controls.UserAvatarControl"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:automation="clr-namespace:Avalonia.Automation;assembly=Avalonia.Controls"
             xmlns:vm="using:UniGetUI.Avalonia.ViewModels.Controls"
             xmlns:t="using:UniGetUI.Avalonia.MarkupExtensions"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:DataType="vm:UserAvatarViewModel">

    <Button Width="32" Height="32"
            Padding="0"
            CornerRadius="100"
            Background="Transparent"
            BorderThickness="0"
            Cursor="Hand"
            ToolTip.Tip="{t:Translate GitHub account}"
            automation:AutomationProperties.Name="{t:Translate GitHub account}">

        <Button.Flyout>
            <Flyout Placement="BottomEdgeAlignedRight">
                <Flyout.FlyoutPresenterTheme>
                    <ControlTheme TargetType="FlyoutPresenter">
                        <Setter Property="Background" Value="{DynamicResource AppWindowBackground}"/>
                        <Setter Property="BorderThickness" Value="1"/>
                        <Setter Property="BorderBrush" Value="{DynamicResource AppBorderBrush}"/>
                        <Setter Property="CornerRadius" Value="6"/>
                        <Setter Property="Padding" Value="12"/>
                    </ControlTheme>
                </Flyout.FlyoutPresenterTheme>
                <StackPanel Width="230" Spacing="8">

                    <!-- Not logged in -->
                    <StackPanel IsVisible="{Binding !IsAuthenticated}" Spacing="8">
                        <TextBlock Text="{t:Translate Log in with GitHub to enable cloud package backup.}"
                                   TextWrapping="Wrap"
                                   FontSize="12"/>
                        <Button Content="{t:Translate Text='More details'}"
                                Command="{Binding MoreDetailsCommand}"
                                HorizontalAlignment="Center"
                                Padding="0"
                                Background="Transparent"
                                BorderThickness="0"
                                Foreground="{DynamicResource SystemAccentColor}"
                                FontSize="11"
                                Cursor="Hand"
                                automation:AutomationProperties.Name="{t:Translate More details}"/>
                        <Button Content="{t:Translate Log in}"
                                Command="{Binding LoginCommand}"
                                HorizontalAlignment="Stretch"
                                HorizontalContentAlignment="Center"
                                automation:AutomationProperties.Name="{t:Translate Log in}"/>
                    </StackPanel>

                    <!-- Logged in -->
                    <StackPanel IsVisible="{Binding IsAuthenticated}" Spacing="8">
                        <TextBlock Text="{Binding UserDisplayName}"
                                   TextWrapping="Wrap"
                                   FontSize="12"
                                   FontWeight="SemiBold"/>
                        <TextBlock Text="{t:Translate Text='If you have cloud backup enabled, it will be saved as a GitHub Gist on this account'}"
                                   TextWrapping="Wrap"
                                   FontSize="11"
                                   Opacity="0.7"/>
                        <Button Content="{t:Translate Log out}"
                                Command="{Binding LogoutCommand}"
                                HorizontalAlignment="Stretch"
                                HorizontalContentAlignment="Center"
                                Background="#CC2222"
                                Foreground="White"
                                BorderThickness="0"
                                automation:AutomationProperties.Name="{t:Translate Log out}"/>
                        <Button Content="{t:Translate Text='More details'}"
                                Command="{Binding MoreDetailsCommand}"
                                HorizontalAlignment="Left"
                                Padding="0"
                                Background="Transparent"
                                BorderThickness="0"
                                Foreground="{DynamicResource SystemAccentColor}"
                                FontSize="11"
                                Cursor="Hand"
                                automation:AutomationProperties.Name="{t:Translate More details}"/>
                    </StackPanel>

                </StackPanel>
            </Flyout>
        </Button.Flyout>

        <!-- Avatar / placeholder -->
        <Panel Width="32" Height="32" ClipToBounds="True" x:DataType="vm:UserAvatarViewModel">
            <Ellipse Fill="{DynamicResource SettingsCardBackground}"
                     Width="32" Height="32"/>

            <!-- Placeholder person icon (shown when not logged in) -->
            <Panel IsVisible="{Binding IsAuthenticated, Converter={x:Static BoolConverters.Not}}"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center">
                <PathIcon Width="18" Height="18"
                          Data="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z"
                          Foreground="{DynamicResource SystemBaseHighColor}"/>
            </Panel>

            <!-- Avatar image (shown when logged in) -->
            <Border IsVisible="{Binding IsAuthenticated}"
                    Width="32" Height="32"
                    CornerRadius="100"
                    ClipToBounds="True">
                <Image Source="{Binding AvatarBitmap}"
                       Width="32" Height="32"
                       Stretch="UniformToFill"/>
            </Border>
        </Panel>

    </Button>

</UserControl>