Done settings page (*almost), fixed background on light theme

FoxTube.Core/Helpers/Inbox.cs

@@ -60,7 +60,7 @@ namespace FoxTube.Core.Helpers
             try
             {
                 // TODO: Add backend
-                HttpResponseMessage response = await client.GetAsync("https://xfox111.net/FoxTube/Changelogs?lang=" + Settings.Language);
+                HttpResponseMessage response = await client.GetAsync($"https://xfox111.net/FoxTube/Changelogs?lang={Settings.Language}&currentVersion={Metrics.CurrentVersion}");
 
                 if (response.StatusCode == System.Net.HttpStatusCode.NoContent)
                     return list;

FoxTube.Core/Models/Inbox/InboxItem.cs

@@ -13,5 +13,6 @@ namespace FoxTube.Core.Models
         public DateTime TimeStamp { get; set; }
         public abstract string Type { get; }
 
+        public string ShortTimeStamp => $"{TimeStamp.ToShortDateString()} {TimeStamp.ToShortTimeString()}";
     }
 }

FoxTube/App.xaml

@@ -10,6 +10,18 @@
             </ResourceDictionary.MergedDictionaries>
 
             <Color x:Key="SystemAccentColor">Red</Color>
+
+            <Color x:Key="RadioButtonOuterEllipseCheckedStrokePointerOver">Gray</Color>
+            <Color x:Key="RadioButtonOuterEllipseCheckedFillPointerOver">Gray</Color>
+            <Color x:Key="RadioButtonOuterEllipseCheckedStrokePressed">DarkRed</Color>
+            <Color x:Key="RadioButtonOuterEllipseCheckedFillPressed">DarkRed</Color>
+
+            <Color x:Key="ComboBoxItemRevealBackgroundSelected">Red</Color>
+            <Color x:Key="ComboBoxItemRevealBackgroundSelectedPointerOver">Gray</Color>
+            <Color x:Key="ComboBoxItemRevealBackgroundSelectedPressed">DarkRed</Color>
+
+            <Color x:Key="ToggleSwitchFillOnPointerOver">Gray</Color>
+
             <Style x:Key="HeaderButton" TargetType="Button" BasedOn="{StaticResource ButtonRevealStyle}">
                 <Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
                 <Setter Property="Background" Value="Transparent"/>

FoxTube/MainPage.xaml

@@ -9,7 +9,7 @@
     xmlns:controls="using:FoxTube.Controls"
     xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls">
     <Page.Background>
-        <AcrylicBrush BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemAltHighColor}" TintOpacity=".5"/>
+        <AcrylicBrush BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemAltHighColor}" FallbackColor="{ThemeResource SystemAltHighColor}" TintOpacity=".5"/>
     </Page.Background>
 
     <Grid>

FoxTube/Views/Settings.xaml

@@ -13,7 +13,7 @@
         </Style>
     </Page.Resources>
 
-    <Pivot SelectedIndex="0" Name="pivot" IsHeaderItemsCarouselEnabled="False" SelectionChanged="Pivot_SelectionChanged">
+    <Pivot SelectedIndex="0" Name="pivot" IsHeaderItemsCarouselEnabled="False">
         <PivotItem Name="generalTab" Header="General">
             <ScrollViewer>
                 <settingssections:General/>
@@ -24,11 +24,11 @@
                 <settingssections:About/>
             </ScrollViewer>
         </PivotItem>
-        <PivotItem Name="translateTab" Header="Help us translate this app">
+        <!--<PivotItem Name="translateTab" Header="Help us translate this app">
             <ScrollViewer>
                 <settingssections:Translate/>
             </ScrollViewer>
-        </PivotItem>
+        </PivotItem>-->
         <PivotItem Name="inboxTab" Header="Inbox">
             <ScrollViewer>
                 <settingssections:Inbox x:Name="inbox"/>

FoxTube/Views/Settings.xaml.cs

@@ -1,35 +1,45 @@
-using System;
-using System.Collections.Generic;
-using System.IO;
-using System.Linq;
-using System.Runtime.InteropServices.WindowsRuntime;
-using Windows.Foundation;
-using Windows.Foundation.Collections;
-using Windows.UI.Xaml;
-using Windows.UI.Xaml.Controls;
-using Windows.UI.Xaml.Controls.Primitives;
-using Windows.UI.Xaml.Data;
-using Windows.UI.Xaml.Input;
-using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Navigation;
 
-// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
-
 namespace FoxTube.Views
 {
     /// <summary>
-    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// Settings page
     /// </summary>
     public sealed partial class Settings : Page
     {
-        public Settings()
-        {
-            this.InitializeComponent();
-        }
+        public Settings() =>
+            InitializeComponent();
 
-        void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
+        protected override void OnNavigatedTo(NavigationEventArgs e)
         {
+            base.OnNavigatedTo(e);
 
+            if (string.IsNullOrWhiteSpace(e.Parameter as string))
+                return;
+
+            string[] param = (e.Parameter as string).Split('/');
+
+            object focus;
+            switch(param[0])
+            {
+                case "about":
+                case "info":
+                    focus = aboutTab;
+                    break;
+                case "inbox":
+                case "message":
+                case "changelog":
+                    focus = inboxTab;
+                    break;
+                default:
+                    focus = generalTab;
+                    break;
+            }
+            pivot.SelectedItem = focus;
+
+            if (focus == inboxTab && param.Length > 1)
+                inbox.Open(param[1]);
         }
     }
 }

FoxTube/Views/SettingsSections/About.xaml

@@ -27,7 +27,7 @@
                 <TextBlock>
                     <Hyperlink NavigateUri="https://github.com/Tyrrrz">@Tyrrrz</Hyperlink> for his awesome library
                     <LineBreak/><Hyperlink NavigateUri="https://vk.com/msreviewnet">@msreviewnet</Hyperlink> for warm welcome and first feedback
-                    <LineBreak/><Hyperlink>You</Hyperlink> for using my app :)
+                    <LineBreak/><Underline Foreground="Red">You</Underline> for using my app :)
                 </TextBlock>
             </StackPanel>
 
@@ -38,7 +38,7 @@
                     <LineBreak/>Vkontakte: <Hyperlink NavigateUri="https://vk.com/XFox.Mike">@XFox.Mike</Hyperlink>
                     <!--<LineBreak/>YouTube: <Hyperlink NavigateUri="https://youtube.com/c/FoxGameStudioChannel">@xfox</Hyperlink>-->
                     <LineBreak/>E-mail: <Hyperlink NavigateUri="mailto:michael.xfox@outlook.com">michael.xfox@outlook.com</Hyperlink>
-                    <LineBreak/>My website: <Hyperlink NavigateUri="https://michael-xfox.com">https://xfox111.net</Hyperlink>
+                    <LineBreak/>My website: <Hyperlink NavigateUri="https://xfox111.net">https://xfox111.net</Hyperlink>
                 </TextBlock>
             </StackPanel>
 

FoxTube/Views/SettingsSections/General.xaml

@@ -4,10 +4,9 @@
     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:controls="using:Microsoft.UI.Xaml.Controls"
     mc:Ignorable="d">
 
-    <StackPanel Orientation="Vertical">
+    <StackPanel>
         <TextBlock Text="Preferences" Style="{StaticResource SubheaderTextBlockStyle}"/>
 
         <StackPanel Margin="0,0,0,10">

FoxTube/Views/SettingsSections/Inbox.xaml

@@ -11,12 +11,12 @@
 
     <Page.Resources>
         <Style TargetType="controls:DropShadowPanel">
-            <Setter Property="OffsetX" Value="5"/>
-            <Setter Property="OffsetY" Value="5"/>
+            <Setter Property="OffsetX" Value="3"/>
+            <Setter Property="OffsetY" Value="3"/>
         </Style>
     </Page.Resources>
 
-    <controls:MasterDetailsView Background="Transparent" MasterPaneWidth="400" CompactModeThresholdWidth="850" x:Name="masterDetailsView">
+    <controls:MasterDetailsView Background="Transparent" MasterPaneWidth="400" CompactModeThresholdWidth="850" x:Name="masterDetailsView" BackButtonBehavior="Manual">
         <controls:MasterDetailsView.MasterHeader>
             <StackPanel>
                 <ProgressBar IsIndeterminate="True" x:Name="progressBar"/>
@@ -29,43 +29,53 @@
         </controls:MasterDetailsView.MasterHeader>
         <controls:MasterDetailsView.NoSelectionContent>
             <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
-                <controls:DropShadowPanel>
-                    <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE0A6;" FontSize="50" Margin="20,0"/>
+                <controls:DropShadowPanel Margin="20,0">
+                    <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE0A6;" Style="{ThemeResource HeaderTextBlockStyle}"/>
                 </controls:DropShadowPanel>
                 <controls:DropShadowPanel>
-                    <TextBlock Text="Select an item to view" VerticalAlignment="Center" Style="{StaticResource SubheaderTextBlockStyle}"/>
+                    <TextBlock Text="Select an item to view" Style="{StaticResource SubheaderTextBlockStyle}"/>
                 </controls:DropShadowPanel>
             </StackPanel>
         </controls:MasterDetailsView.NoSelectionContent>
+        <controls:MasterDetailsView.ItemContainerStyle>
+            <Style TargetType="ListViewItem">
+                <Setter Property="Padding" Value="0"/>
+            </Style>
+        </controls:MasterDetailsView.ItemContainerStyle>
         <controls:MasterDetailsView.ItemTemplate>
             <DataTemplate x:DataType="models:InboxItem">
-                <RelativePanel>
-                    <RelativePanel.Resources>
+                <Grid ColumnSpacing="10" Margin="10">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="auto"/>
+                        <ColumnDefinition/>
+                    </Grid.ColumnDefinitions>
+                    <Grid.Resources>
                         <Style TargetType="TextBlock">
                             <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
                             <Setter Property="MaxLines" Value="1"/>
                             <Setter Property="TextWrapping" Value="WrapWholeWords"/>
                         </Style>
-                    </RelativePanel.Resources>
+                    </Grid.Resources>
                     
-                    <PersonPicture Width="50" Margin="10,0" x:Name="icon" ProfilePicture="{Binding Avatar}" Initials="{Binding DefaultIcon}" FontFamily="Segoe MDL2 Assets" Foreground="White" Background="Red"/>
-                    <StackPanel RelativePanel.RightOf="icon">
+                    <PersonPicture Width="50" VerticalAlignment="Top" ProfilePicture="{Binding Avatar}" Initials="{Binding DefaultIcon}" FontFamily="Segoe MDL2 Assets" Foreground="White"/>
+                    <StackPanel Grid.Column="1">
                         <TextBlock Text="{Binding Title}" Style="{StaticResource SubtitleTextBlockStyle}"/>
-                        <TextBlock Text="{Binding Description}" FontSize="18" MaxLines="2"/>
-                        <TextBlock Text="{Binding Type}"/>
-                        <TextBlock Text="{Binding TimeStamp.ToShortDateString}" FontStyle="Italic" Style="{StaticResource CaptionTextBlockStyle}"/>
+                        <TextBlock Text="{Binding Description}" MaxLines="2"/>
+                        <TextBlock Style="{StaticResource CaptionTextBlockStyle}" FontStyle="Italic">
+                            <Run Text="{Binding Type}"/> • <Run Text="{Binding ShortTimeStamp}"/>
+                        </TextBlock>
                     </StackPanel>
-                </RelativePanel>
+                </Grid>
             </DataTemplate>
         </controls:MasterDetailsView.ItemTemplate>
         <controls:MasterDetailsView.DetailsTemplate>
             <DataTemplate x:DataType="models:InboxItem">
                 <ScrollViewer>
                     <RelativePanel Margin="10">
-                        <PersonPicture x:Name="avatar" Background="Red" Foreground="White" FontFamily="Segoe MDL2 Assets" Initials="{Binding DefaultIcon}" ProfilePicture="{Binding Avatar}"/>
+                        <PersonPicture x:Name="avatar" Foreground="White" FontFamily="Segoe MDL2 Assets" Initials="{Binding DefaultIcon}" ProfilePicture="{Binding Avatar}" Height="60" Margin="10"/>
                         <StackPanel RelativePanel.RightOf="avatar">
                             <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{Binding Title}"/>
-                            <TextBlock Text="{Binding TimeStamp.ToLongTimeString}"/>
+                            <TextBlock Text="{Binding TimeStamp}"/>
                             <TextBlock Style="{StaticResource CaptionTextBlockStyle}" FontStyle="Italic" Text="{Binding Type}"/>
                         </StackPanel>
 

FoxTube/Views/SettingsSections/Inbox.xaml.cs

@@ -12,6 +12,7 @@ namespace FoxTube.Views.SettingsSections
     public sealed partial class Inbox : Page
     {
         List<InboxItem> items;
+        string idToOpen;
 
         public Inbox() =>
             InitializeComponent();
@@ -24,19 +25,28 @@ namespace FoxTube.Views.SettingsSections
 
             progressBar.Visibility = Visibility.Collapsed;
             filter.IsEnabled = true;
+
+            if (idToOpen != null)
+                Open(idToOpen);
         }
 
-        void FilterChanged(object sender, SelectionChangedEventArgs e)
-        {
-            List<InboxItem> filtered = new List<InboxItem>();
-            filtered.AddRange(filter.SelectedIndex switch
+        void FilterChanged(object sender, SelectionChangedEventArgs e) =>
+            masterDetailsView.ItemsSource = filter.SelectedIndex switch
             {
                 1 => items.FindAll(i => i is Changelog),
                 2 => items.FindAll(i => i is DeveloperMessage),
                 _ => items
-            });
+            };
 
-            masterDetailsView.ItemsSource = filtered;
+        public void Open(string id)
+        {
+            idToOpen = id;
+            if (!IsLoaded)
+                return;
+
+            masterDetailsView.SelectedItem = (masterDetailsView.ItemsSource as List<InboxItem>).Find(i => i.Id == id);
+
+            idToOpen = null;
         }
     }
 }

FoxTube/Views/SettingsSections/Translate.xaml

@@ -5,9 +5,64 @@
     xmlns:local="using:FoxTube.Views.SettingsSections"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:globalization="using:System.Globalization"
     mc:Ignorable="d">
 
-    <Grid>
+    <StackPanel>
+        <TextBlock Text="Help us translate this app" Style="{StaticResource SubheaderTextBlockStyle}"/>
         
-    </Grid>
+        <TextBlock TextWrapping="WrapWholeWords" Text="You can help us make this app better and deliver it to more regions by translating it" Margin="0,0,0,10"/>
+        <TextBlock Text="It's quite simple:" Margin="0,0,0,10"/>
+
+        <ComboBox Header="1. Choose language you want to translate into" PlaceholderText="Choose language..." Name="LangList" Margin="0,0,0,10" MinWidth="350">
+            <ComboBox.ItemTemplate>
+                <DataTemplate x:DataType="globalization:CultureInfo">
+                    <TextBlock Text="{Binding DisplayName}" Tag="{Binding ThreeLetterISOLanguageName}"/>
+                </DataTemplate>
+            </ComboBox.ItemTemplate>
+        </ComboBox>
+
+        <TextBlock Text="2. Save language pack file to your PC" Margin="0,0,0,10"/>
+
+        <Button Content="Export to PC (.zip)" Margin="0,0,0,10" Name="export" IsEnabled="False"/>
+
+        <TextBlock TextWrapping="WrapWholeWords" Text="3. Open archive's files with any text editor you want (Notepad, Wordpad, Notepad++, VS Code, etc.)" Margin="0,0,0,10"/>
+        <TextBlock TextWrapping="WrapWholeWords" Text="4. Edit file by translating nececcary words and sentences" Margin="0,0,0,10"/>
+        <TextBlock TextWrapping="WrapWholeWords" Text="5. Upload final package to our servers" Margin="0,0,0,10"/>
+
+        <StackPanel Name="submitNotification" Visibility="Collapsed" BorderThickness="2" BorderBrush="OrangeRed" Width="350" HorizontalAlignment="Left" Margin="0,0,0,10" Padding="0,0,0,3">
+            <TextBlock Foreground="OrangeRed" FontWeight="SemiBold" Text="Attention! Once you submitted this language pack you won't be able to contribute to the language anymore. Think twice before continuing" TextWrapping="WrapWholeWords" Margin="5"/>
+        </StackPanel>
+
+        <Button Content="Choose file to upload" Margin="-1,0,0,10" HorizontalAlignment="Left" VerticalAlignment="Top" Name="upload" IsEnabled="False"/>
+
+        <Border Background="{ThemeResource SystemChromeMediumLowColor}" CornerRadius="10" Padding="10" HorizontalAlignment="Left" Name="certification" Visibility="Collapsed">
+            <StackPanel>
+                <TextBlock FontWeight="Bold" Text="Package certification result"/>
+
+                <StackPanel Orientation="Horizontal" Margin="0,5" Name="certificationStatus">
+                    <FontIcon Glyph="&#xEC61;" Foreground="Green"/>
+                    <TextBlock Text="Passed" Margin="5,0"/>
+                </StackPanel>
+                <StackPanel Orientation="Horizontal" Visibility="Visible">
+                    <Button Content="Upload" Name="submit"/>
+                    <Button Content="View log" Name="log"/>
+                    <Button Content="Choose another file" Margin="10,0,0,0" Name="chooseFile"/>
+                </StackPanel>
+                <ProgressBar HorizontalAlignment="Stretch" IsIndeterminate="True" Name="uploadingProgress" Visibility="Visible"/>
+            </StackPanel>
+        </Border>
+
+        <TextBlock TextWrapping="WrapWholeWords">
+It takes about 2-3 weeks to process new language pack and include it to the next updateThank you for your help &#x1F61A;<LineBreak/>
+Best wishes,</TextBlock>
+        <TextBlock Text="               XFox"/>
+        <StackPanel Orientation="Horizontal" BorderBrush="Green" BorderThickness="5" Margin="0,10,30,0" Visibility="Collapsed" Name="greenResult">
+            <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE76E;" FontSize="40" Foreground="Green" Margin="5"/>
+            <StackPanel>
+                <TextBlock Text="Your language pack has been sent!" Foreground="Green" FontWeight="Bold" FontSize="20"/>
+                <TextBlock Text="Thank you! It's very imortant for us. You help us making the app better" Foreground="Green"/>
+            </StackPanel>
+        </StackPanel>
+    </StackPanel>
 </Page>