Feature: Improved PR and Issue page visuals

0x5bfa · Aug 6, 2023 · 72962d8 · 72962d8
1 parent 4a87633
commit 72962d8
Show file tree

Hide file tree

Showing 18 changed files with 234 additions and 180 deletions.
diff --git a/src/FluentHub.App/Data/Items/NavigationBarModel.cs b/src/FluentHub.App/Data/Items/NavigationBarModel.cs
@@ -5,8 +5,8 @@ namespace FluentHub.App.Data.Items
 {
 	public class NavigationBarModel : ObservableObject
 	{
-		private ObservableCollection<NavigationBarItem>? _NavigationBarItems;
-		public ObservableCollection<NavigationBarItem>? NavigationBarItems
+		private ObservableCollection<NavigationBarItem> _NavigationBarItems = new();
+		public ObservableCollection<NavigationBarItem> NavigationBarItems
 		{
 			get => _NavigationBarItems;
 			set => SetProperty(ref _NavigationBarItems, value);

diff --git a/src/FluentHub.App/Data/Items/NavigationHistory.cs b/src/FluentHub.App/Data/Items/NavigationHistory.cs
@@ -175,9 +175,6 @@ private void UpdateNavigationBar(bool isBackNavigation = false)
 			{
 				currentTabNavigationBar.PageKind = CurrentItem.PageKind;
 
-				// Initialize NavigationBar items
-				currentTabNavigationBar.NavigationBarItems ??= new();
-
 				if (currentTabNavigationBar.NavigationBarItems.Count != 0)
 					currentTabNavigationBar.NavigationBarItems.Clear();
 

diff --git a/src/FluentHub.App/Data/Items/TabViewItem.cs b/src/FluentHub.App/Data/Items/TabViewItem.cs
@@ -29,6 +29,7 @@ public TabViewItem()
 			Frame = new();
 			NavigationHistory = new();
 			NavigationBar = new();
+			NavigationBar.NavigationBarItems = new();
 
 			Frame.Navigating += OnFrameNavigating;
 		}

diff --git a/src/FluentHub.App/UserControls/IssueCommentBlock.xaml b/src/FluentHub.App/UserControls/IssueCommentBlock.xaml
@@ -20,7 +20,7 @@
 		Background="{ThemeResource LayerFillColorDefaultBrush}"
 		BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
 		BorderThickness="1"
-		CornerRadius="{StaticResource ControlCornerRadius}">
+		CornerRadius="8">
 
 		<Grid.RowDefinitions>
 			<RowDefinition Height="Auto" />
@@ -62,9 +62,10 @@
 				<Button
 					Width="36"
 					Height="32"
+					Padding="0"
 					VerticalAlignment="Center"
 					Background="Transparent"
-					BorderThickness="0">
+					BorderBrush="Transparent">
 					<FontIcon FontSize="16" Glyph="&#xE10C;" />
 					<Button.Flyout>
 						<MenuFlyout Placement="BottomEdgeAlignedRight">

diff --git a/src/FluentHub.App/UserControls/Overview/PullRequestOverview.xaml b/src/FluentHub.App/UserControls/Overview/PullRequestOverview.xaml
@@ -34,17 +34,24 @@
 			<RowDefinition Height="Auto" />
 		</Grid.RowDefinitions>
 
-		<Grid Padding="32,16,32,12">
+		<Grid
+			Padding="24,12,24,24"
+			ColumnSpacing="12"
+			RowSpacing="12">
 			<Grid.RowDefinitions>
 				<RowDefinition Height="Auto" />
 				<RowDefinition Height="Auto" />
 			</Grid.RowDefinitions>
+			<Grid.ColumnDefinitions>
+				<ColumnDefinition Width="*" />
+				<ColumnDefinition Width="Auto" />
+			</Grid.ColumnDefinitions>
 
 			<TextBlock
 				x:Name="PullRequestTitleTextBlock"
 				IsTextSelectionEnabled="True"
 				Style="{StaticResource TitleTextBlockStyle}"
-				ToolTipService.ToolTip="{x:Bind PullRequestTitleTextBlock.Text, Mode=OneWay}">
+				ToolTipService.ToolTip="{x:Bind ViewModel.PullRequest.Title, Mode=OneWay}">
 				<Run FontWeight="SemiBold" Text="{x:Bind ViewModel.PullRequest.Title, Mode=OneWay}" />
 				<Run
 					FontWeight="Normal"
@@ -54,7 +61,6 @@
 
 			<StackPanel
 				Grid.Row="1"
-				Margin="0,12,0,0"
 				Orientation="Horizontal"
 				Spacing="16">
 
@@ -160,6 +166,7 @@
 
 			<Grid
 				Grid.RowSpan="2"
+				Grid.Column="1"
 				HorizontalAlignment="Right"
 				VerticalAlignment="Top">
 				<Button
@@ -189,7 +196,13 @@
 
 		</Grid>
 
-		<Grid Grid.Row="1" Margin="24,0">
+		<Grid
+			Grid.Row="1"
+			Margin="24,0"
+			Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+			BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+			BorderThickness="1"
+			CornerRadius="8">
 			<NavigationView
 				x:Name="PullRequestNavView"
 				IsBackButtonVisible="Collapsed"

diff --git a/src/FluentHub.App/Views/LocatablePage.cs b/src/FluentHub.App/Views/LocatablePage.cs
@@ -37,12 +37,18 @@ public void CheckIfNavigationBarShouldBeChanged()
 			if (currentTabNavigationBar is null)
 				return;
 
+			if (_currentPageKind is NavigationPageKind.None)
+			{
+				currentTabNavigationBar.PageKind = _currentPageKind;
+				currentTabNavigationBar.NavigationBarItems = new();
+
+				return;
+			}
+
 			if (currentTabNavigationBar.PageKind != _currentPageKind)
 			{
 				currentTabNavigationBar.PageKind = _currentPageKind;
 
-				// Initialize NavigationBar items
-				currentTabNavigationBar.NavigationBarItems ??= new();
 				currentTabNavigationBar.NavigationBarItems.Clear();
 
 				// Generate items

diff --git a/src/FluentHub.App/Views/MainPage.xaml b/src/FluentHub.App/Views/MainPage.xaml
@@ -118,6 +118,8 @@
 				Grid.Row="0"
 				Padding="16,12,16,12"
 				Background="{ThemeResource AppThemeGlobalNavigationBarBackgroundBrush}"
+				BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
+				BorderThickness="0,0,0,1"
 				RowSpacing="12">
 				<Grid>
 					<Grid.RowDefinitions>

diff --git a/src/FluentHub.App/Views/Repositories/Code/DetailsLayoutView.xaml b/src/FluentHub.App/Views/Repositories/Code/DetailsLayoutView.xaml
@@ -25,7 +25,7 @@
 	<Grid>
 		<Grid x:Name="RootContentGrid" x:Load="{x:Bind ViewModel.LoadDetailsViewPageCommand.ExecutionTask.IsFaulted, Converter={StaticResource ObjectToBoolConverter}, ConverterParameter=Invert, Mode=OneWay}">
 			<ScrollViewer>
-				<Grid Padding="32,24" RowSpacing="8">
+				<Grid Padding="24,24" RowSpacing="8">
 					<Grid.RowDefinitions>
 						<RowDefinition Height="Auto" />
 						<RowDefinition Height="*" />

diff --git a/src/FluentHub.App/Views/Repositories/Commits/CommitsPage.xaml b/src/FluentHub.App/Views/Repositories/Commits/CommitsPage.xaml
@@ -24,21 +24,39 @@
 
 		<Grid x:Name="RootContentGrid" x:Load="{x:Bind ViewModel.LoadRepositoryCommitsPageCommand.ExecutionTask.IsFaulted, Converter={StaticResource ObjectToBoolConverter}, ConverterParameter=Invert, Mode=OneWay}">
 			<ScrollViewer VerticalScrollBarVisibility="Auto">
-				<Grid Margin="0,0,8,8" RowSpacing="8">
+				<Grid Padding="24,24" RowSpacing="12">
 					<Grid.RowDefinitions>
 						<RowDefinition Height="Auto" />
 						<RowDefinition Height="*" />
 					</Grid.RowDefinitions>
 
-					<ov:RepositoryOverview ViewModel="{x:Bind ViewModel.RepositoryOverviewViewModel, Mode=OneWay}" />
+					<Grid>
+						<Grid.ColumnDefinitions>
+							<ColumnDefinition Width="Auto" />
+							<ColumnDefinition Width="*" />
+							<ColumnDefinition Width="Auto" />
+						</Grid.ColumnDefinitions>
+
+						<StackPanel Orientation="Horizontal" Spacing="8">
+							<!--<primer:Avatar
+								Width="32"
+								Height="32"
+								IsSquare="True"
+								Source="{x:Bind ViewModel.Repository.Owner.AvatarUrl, Mode=OneWay}" />-->
+
+							<TextBlock
+								VerticalAlignment="Center"
+								Style="{StaticResource SubtitleTextBlockStyle}"
+								Text="Commits on" />
+
+							<TextBlock
+								VerticalAlignment="Center"
+								Style="{StaticResource SubtitleTextBlockStyle}"
+								Text="{x:Bind ViewModel.Repository.Name, Mode=OneWay}" />
+						</StackPanel>
+					</Grid>
 
-					<Grid
-						Grid.Row="1"
-						Padding="32,24"
-						Background="{ThemeResource LayerFillColorDefaultBrush}"
-						BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-						BorderThickness="1"
-						CornerRadius="8">
+					<Grid Grid.Row="1">
 						<Grid.RowDefinitions>
 							<RowDefinition Height="Auto" />
 							<RowDefinition Height="*" />
@@ -47,7 +65,7 @@
 						<ScrollViewer Grid.Row="2">
 							<ItemsRepeater ItemsSource="{x:Bind ViewModel.Items, Mode=OneWay}">
 								<ItemsRepeater.Layout>
-									<StackLayout Orientation="Vertical" Spacing="6" />
+									<StackLayout Orientation="Vertical" Spacing="4" />
 								</ItemsRepeater.Layout>
 								<DataTemplate x:DataType="bbvm:CommitBlockButtonViewModel">
 									<bb:CommitBlockButton ViewModel="{x:Bind}" />