MAUI viewer UI enhancements (#1464)

williambohrmann3 · web-flow · commit ceb06b7f0660 · 2024-07-01T09:02:37.000-07:00
diff --git a/src/MAUI/Maui.Samples/AppShell.xaml b/src/MAUI/Maui.Samples/AppShell.xaml
@@ -6,12 +6,21 @@
        xmlns:local="clr-namespace:ArcGIS"
        Shell.FlyoutBehavior="Flyout"
        Shell.TabBarIsVisible="False">
+    <Shell.Resources>
+        <Style BasedOn="{StaticResource BaseStyle}" TargetType="local:AppShell" />
+    </Shell.Resources>
     <Shell.FlyoutHeader>
-        <Label Margin="0,5"
+        <Label Margin="5"
+               Padding="5"
                FontAttributes="Bold"
+               FontSize="18"
+               HeightRequest="{OnPlatform MacCatalyst=80,
+                                          iOS=65,
+                                          Default=40}"
                HorizontalTextAlignment="Center"
                Text="Categories"
-               VerticalTextAlignment="Center" />
+               TextColor="White"
+               VerticalTextAlignment="End" />
     </Shell.FlyoutHeader>
     <Shell.FlyoutContent>
         <controls:CategoriesFlyoutContent />
diff --git a/src/MAUI/Maui.Samples/ArcGIS.Samples.Maui.csproj b/src/MAUI/Maui.Samples/ArcGIS.Samples.Maui.csproj
@@ -41,7 +41,7 @@
 		<MauiIcon Include="Resources\appicon.svg" Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'" />
 
 		<!-- Splash Screen -->
-		<MauiSplashScreen Include="Resources\arcgissdkglyphfg.svg" Color="#512BD4" BaseSize="128,128" />
+		<MauiSplashScreen Include="Resources\arcgissdkglyphfg.svg" Color="#832FBC" BaseSize="128,128" />
 
 		<!-- Images -->
 		<MauiImage Include="Images\*" />
diff --git a/src/MAUI/Maui.Samples/Controls/CategoriesFlyoutContent.xaml b/src/MAUI/Maui.Samples/Controls/CategoriesFlyoutContent.xaml
@@ -13,14 +13,28 @@
         <CollectionView.ItemTemplate>
             <DataTemplate x:DataType="viewModels:FlyoutCategoryViewModel">
                 <HorizontalStackLayout HeightRequest="40">
+                    <HorizontalStackLayout.Triggers>
+                        <DataTrigger Binding="{Binding IsSelected}"
+                                     TargetType="HorizontalStackLayout"
+                                     Value="True">
+                            <Setter Property="BackgroundColor" Value="Grey" />
+                        </DataTrigger>
+                        <DataTrigger Binding="{Binding IsSelected}"
+                                     TargetType="HorizontalStackLayout"
+                                     Value="False">
+                            <Setter Property="BackgroundColor" Value="Transparent" />
+                        </DataTrigger>
+                    </HorizontalStackLayout.Triggers>
                     <Label Margin="20,0"
                            FontFamily="calcite-ui-icons-24"
-                           FontSize="20"
+                           FontSize="25"
                            Text="{Binding CategoryIcon}"
+                           TextColor="White"
                            VerticalOptions="Center" />
                     <Label Margin="15,0,0,0"
                            FontSize="16"
                            Text="{Binding CategoryName}"
+                           TextColor="White"
                            VerticalOptions="Center" />
                 </HorizontalStackLayout>
             </DataTemplate>
diff --git a/src/MAUI/Maui.Samples/Controls/CategoriesFlyoutContent.xaml.cs b/src/MAUI/Maui.Samples/Controls/CategoriesFlyoutContent.xaml.cs
@@ -21,6 +21,14 @@ private void CategoriesCollectionView_SelectionChanged(object sender, SelectionC
         try
         {
             var selectedCategory = e.CurrentSelection.FirstOrDefault() as FlyoutCategoryViewModel;
+            var previousCategory = e.PreviousSelection.FirstOrDefault() as FlyoutCategoryViewModel;
+
+            if (previousCategory == null)
+                previousCategory = _viewModel.Categories.FirstOrDefault();
+
+            selectedCategory.IsSelected = true;
+            previousCategory.IsSelected = false;
+
             _viewModel.CategorySelected(selectedCategory.CategoryName);
 
         }
diff --git a/src/MAUI/Maui.Samples/Helpers/FeedbackPrompt.cs b/src/MAUI/Maui.Samples/Helpers/FeedbackPrompt.cs
@@ -22,29 +22,38 @@ public async static Task ShowFeedbackPromptAsync()
         {
             await Application.Current.MainPage.DisplayActionSheet("Open an issue on GitHub:", "Cancel", null, [BugReport, FeatureRequest]).ContinueWith((result) =>
             {
-                string link;
                 switch (result.Result)
                 {
                     case BugReport:
-                        var sb = new StringBuilder("https://github.com/Esri/arcgis-maps-sdk-dotnet-samples/issues/new?assignees=&labels=Type%3A+Bug&projects=&template=bug_report.yml&title=%5BBug%5D");
-                        if (SampleManager.Current.SelectedSample != null)
-                        {
-                            sb.Append("+&impacted-samples=");
-                            sb.Append(SampleManager.Current.SelectedSample.FormalName);
-                        }
-                        _ = Browser.Default.OpenAsync(new Uri(sb.ToString()), BrowserLaunchMode.SystemPreferred);
+                        OpenBugReport();
                         break;
 
                     case FeatureRequest:
-                        link =
-                            "https://github.com/Esri/arcgis-maps-sdk-dotnet-samples/issues/new?assignees=&labels=Type%3A+Feature&projects=&template=feature_request.yml&title=%5BFeature%5D";
-                        _ = Browser.Default.OpenAsync(new Uri(link), BrowserLaunchMode.SystemPreferred);
+                        OpenFeatureRequest();
                         break;
 
                     case "Cancel":
                         break;
                 }
             }, TaskScheduler.FromCurrentSynchronizationContext());
         }
+
+        public static void OpenBugReport()
+        {
+            var sb = new StringBuilder("https://github.com/Esri/arcgis-maps-sdk-dotnet-samples/issues/new?assignees=&labels=Type%3A+Bug&projects=&template=bug_report.yml&title=%5BBug%5D");
+            if (SampleManager.Current.SelectedSample != null)
+            {
+                sb.Append("+&impacted-samples=");
+                sb.Append(SampleManager.Current.SelectedSample.FormalName);
+            }
+            _ = Browser.Default.OpenAsync(new Uri(sb.ToString()), BrowserLaunchMode.SystemPreferred);
+        }
+
+        public static void OpenFeatureRequest()
+        {
+            string link =
+                "https://github.com/Esri/arcgis-maps-sdk-dotnet-samples/issues/new?assignees=&labels=Type%3A+Feature&projects=&template=feature_request.yml&title=%5BFeature%5D";
+            _ = Browser.Default.OpenAsync(new Uri(link), BrowserLaunchMode.SystemPreferred);
+        }
     }
 }
diff --git a/src/MAUI/Maui.Samples/Resources/Styles/Styles.xaml b/src/MAUI/Maui.Samples/Resources/Styles/Styles.xaml
@@ -467,8 +467,10 @@
     </Style>
 
     <Style x:Key="BaseStyle" TargetType="Element">
-        <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Black}}" />
-        <Setter Property="Shell.TitleColor" Value="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource White}}" />
+        <Setter Property="Shell.BackgroundColor" Value="#832FBC" />
+        <Setter Property="Shell.ForegroundColor" Value="White" />
+        <Setter Property="Shell.TitleColor" Value="White" />
+        <Setter Property="Shell.FlyoutBackground" Value="#832FBC" />
         <Setter Property="Shell.DisabledColor" Value="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}" />
         <Setter Property="Shell.UnselectedColor" Value="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}" />
         <Setter Property="Shell.NavBarHasShadow" Value="False" />
diff --git a/src/MAUI/Maui.Samples/Views/SamplePage.xaml.cs b/src/MAUI/Maui.Samples/Views/SamplePage.xaml.cs
@@ -16,6 +16,7 @@
 #endif
 
 using ArcGIS.Samples.Managers;
+using ArcGIS.Helpers;
 using ArcGIS.Samples.Shared.Models;
 using CommunityToolkit.Maui.Views;
 using Esri.ArcGISRuntime.Maui;
@@ -46,6 +47,8 @@ public partial class SamplePage : ContentPage
         public ObservableCollection<SourceCodeFile> SourceFiles { get; } = new ObservableCollection<SourceCodeFile>();
 
         // Toolbar item titles as displayed in UI
+        private const string BugReport = "Open a Bug Report";
+        private const string FeatureRequest = "Request a Feature";
         private const string ViewOnGitHub = "View on GitHub";
         private const string SourceCode = "Source Code";
         private const string Description = "Description";
@@ -337,13 +340,6 @@ protected override bool OnBackButtonPressed()
 
         private void SetToolbarItems()
         {
-            // Feedback toolbar item should be placed last on desktop and first on mobile.
-            var feedbackToolbarItem = new ToolbarItem
-            {
-                IconImageSource = "feedback.png",
-                Text = "Feedback"
-            };
-            feedbackToolbarItem.Clicked += FeedbackToolbarItem_Clicked;
 
 #if WINDOWS
             // Add the screenshot tool if enabled in settings.
@@ -385,17 +381,23 @@ private void SetToolbarItems()
             gitHubToolbarItem.Clicked += GitHubToolbarItem_Clicked;
             ToolbarItems.Add(gitHubToolbarItem);
 
+            // Feedback toolbar item should only be present on desktop platforms.
+            var feedbackToolbarItem = new ToolbarItem
+            {
+                IconImageSource = "feedback.png",
+                Text = "Feedback"
+            };
+            feedbackToolbarItem.Clicked += FeedbackToolbarItem_Clicked;
             ToolbarItems.Add(feedbackToolbarItem);
+            // On mobile platforms, issue forms are accessible via the vertical handle.
 #else
-            ToolbarItems.Add(feedbackToolbarItem);
             var verticalHandle = new ToolbarItem
             {
                 IconImageSource = "verticalhandle.png"
             };
             verticalHandle.Clicked += VerticalHandle_Clicked;
             ToolbarItems.Add(verticalHandle);
 #endif
-            
         }
 
 #if WINDOWS
@@ -417,7 +419,7 @@ private ToolbarItem PrepareScreenshotTool()
 
         private async void VerticalHandle_Clicked(object sender, EventArgs e)
         {
-            await DisplayActionSheet("Select a view", "Cancel", null, new string[] { LiveSample, Description, SourceCode, ViewOnGitHub }).ContinueWith((result) =>
+            await DisplayActionSheet("", "Cancel", null, [LiveSample, Description, SourceCode, ViewOnGitHub, BugReport, FeatureRequest]).ContinueWith((result) =>
             {
                 if (result.Result != "Cancel")
                 {
@@ -438,6 +440,14 @@ private async void VerticalHandle_Clicked(object sender, EventArgs e)
                         case ViewOnGitHub:
                             _ = OpenGitHub();
                             break;
+
+                        case BugReport:
+                            FeedbackPrompt.OpenBugReport();
+                            break;
+
+                        case FeatureRequest:
+                            FeedbackPrompt.OpenFeatureRequest();
+                            break;
                     }
                 }
             }, TaskScheduler.FromCurrentSynchronizationContext());

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,14 @@ private void CategoriesCollectionView_SelectionChanged(object sender, SelectionC`
`21`	`21`	`try`
`22`	`22`	`{`
`23`	`23`	`var selectedCategory = e.CurrentSelection.FirstOrDefault() as FlyoutCategoryViewModel;`
	`24`	`+ var previousCategory = e.PreviousSelection.FirstOrDefault() as FlyoutCategoryViewModel;`
	`25`	`+`
	`26`	`+ if (previousCategory == null)`
	`27`	`+ previousCategory = _viewModel.Categories.FirstOrDefault();`
	`28`	`+`
	`29`	`+ selectedCategory.IsSelected = true;`
	`30`	`+ previousCategory.IsSelected = false;`
	`31`	`+`
`24`	`32`	`_viewModel.CategorySelected(selectedCategory.CategoryName);`
`25`	`33`
`26`	`34`	`}`