Improve UI

jerry08 · Nov 9, 2023 · e5e637a · e5e637a
1 parent 8b886ab
commit e5e637a
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 10 deletions.
diff --git a/AniStream/Views/AnimeTabView.xaml b/AniStream/Views/AnimeTabView.xaml
@@ -100,7 +100,7 @@
                         VerticalOptions="Start"
                         WidthRequest="35">
                         <ImageButton.Behaviors>
-                            <toolkit:IconTintColorBehavior TintColor="#D9FFFFFF" />
+                            <toolkit:IconTintColorBehavior TintColor="#A9FFFFFF" />
                         </ImageButton.Behaviors>
                     </ImageButton>
 

diff --git a/AniStream/Views/Templates/AnimeCarouselTemplateView.xaml b/AniStream/Views/Templates/AnimeCarouselTemplateView.xaml
@@ -8,6 +8,8 @@
     xmlns:local="clr-namespace:AniStream"
     xmlns:materialDesign="clr-namespace:MaterialDesign"
     xmlns:models="clr-namespace:Jita.AniList.Models;assembly=Jita.AniList"
+    xmlns:viewTemplates="clr-namespace:AniStream.Views.Templates"
+    xmlns:views="clr-namespace:AniStream.Views"
     x:Name="this"
     Margin="0"
     Padding="0"
@@ -16,6 +18,12 @@
     <Border.Resources>
         <ResourceDictionary>
             <converters:RatingConverter x:Key="RatingConverter" />
+
+            <DataTemplate x:Key="GenreTemplate">
+                <viewTemplates:CarouselGenreTemplateView />
+            </DataTemplate>
+
+            <views:MainDataTemplateSelector x:Key="GenreTemplateSelector" DataTemplate="{StaticResource GenreTemplate}" />
         </ResourceDictionary>
     </Border.Resources>
     <!--  Source="https://media.tenor.com/l47dR9-6BGIAAAAd/demon-slayer-kimetsu-no-yaiba.gif"  -->
@@ -95,15 +103,34 @@
             </Border>
 
             <Grid Grid.Column="1">
-                <Label
-                    Grid.Column="1"
-                    FontAttributes="Bold"
-                    FontSize="18"
-                    HorizontalTextAlignment="Center"
-                    LineBreakMode="TailTruncation"
-                    MaxLines="5"
-                    Text="{Binding Title.PreferredTitle}"
-                    VerticalOptions="Center" />
+                <VerticalStackLayout Spacing="5" VerticalOptions="Center">
+                    <Label
+                        FontAttributes="Bold"
+                        FontSize="18"
+                        HorizontalTextAlignment="Center"
+                        LineBreakMode="TailTruncation"
+                        MaxLines="5"
+                        Text="{Binding Title.PreferredTitle}"
+                        VerticalOptions="Center" />
+
+                    <Label
+                        FontAttributes="Bold"
+                        FontSize="14"
+                        HorizontalTextAlignment="Center"
+                        LineBreakMode="TailTruncation"
+                        MaxLines="5"
+                        Opacity="0.65"
+                        Text="{Binding Status}"
+                        TextColor="{StaticResource Secondary}"
+                        VerticalOptions="Center" />
+
+                    <FlexLayout
+                        Margin="0,0,0,10"
+                        BindableLayout.ItemTemplateSelector="{StaticResource GenreTemplateSelector}"
+                        BindableLayout.ItemsSource="{Binding Genres}"
+                        JustifyContent="Center"
+                        Wrap="Wrap" />
+                </VerticalStackLayout>
             </Grid>
         </Grid>
     </Grid>

diff --git a/AniStream/Views/Templates/CarouselGenreTemplateView.xaml b/AniStream/Views/Templates/CarouselGenreTemplateView.xaml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Border
+    x:Class="AniStream.Views.Templates.CarouselGenreTemplateView"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:AniStream"
+    xmlns:models="clr-namespace:Juro.Core.Models.Anime;assembly=Juro.Core"
+    x:Name="this"
+    Margin="0"
+    Padding="0"
+    BackgroundColor="Transparent"
+    HeightRequest="35">
+    <Grid BackgroundColor="Transparent">
+        <Border
+            Grid.Column="0"
+            HorizontalOptions="Center"
+            StrokeThickness="1"
+            VerticalOptions="FillAndExpand">
+            <Border.StrokeShape>
+                <RoundRectangle CornerRadius="15" />
+            </Border.StrokeShape>
+            <Label
+                Grid.Row="1"
+                Padding="9,4"
+                FontAttributes="Bold"
+                FontSize="11"
+                HorizontalOptions="Center"
+                HorizontalTextAlignment="Center"
+                Text="{Binding}"
+                VerticalTextAlignment="Center" />
+        </Border>
+    </Grid>
+</Border>
diff --git a/AniStream/Views/Templates/CarouselGenreTemplateView.xaml.cs b/AniStream/Views/Templates/CarouselGenreTemplateView.xaml.cs
@@ -0,0 +1,11 @@
+using Microsoft.Maui.Controls;
+
+namespace AniStream.Views.Templates;
+
+public partial class CarouselGenreTemplateView
+{
+    public CarouselGenreTemplateView()
+    {
+        InitializeComponent();
+    }
+}