Improve styling

Tyrrrz · Apr 23, 2024 · bf50871 · bf50871
1 parent 6e8b7c6
commit bf50871
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 105 deletions.
diff --git a/YoutubeDownloader.Core/Downloading/VideoQualityPreference.cs b/YoutubeDownloader.Core/Downloading/VideoQualityPreference.cs
@@ -2,30 +2,29 @@
 
 namespace YoutubeDownloader.Core.Downloading;
 
-// ReSharper disable InconsistentNaming
 public enum VideoQualityPreference
 {
+    // ReSharper disable InconsistentNaming
     Lowest,
     UpTo360p,
     UpTo480p,
     UpTo720p,
     UpTo1080p,
     Highest
+    // ReSharper restore InconsistentNaming
 }
 
-// ReSharper restore InconsistentNaming
-
 public static class VideoQualityPreferenceExtensions
 {
     public static string GetDisplayName(this VideoQualityPreference preference) =>
         preference switch
         {
-            VideoQualityPreference.Lowest => "Lowest",
+            VideoQualityPreference.Lowest => "Lowest quality",
             VideoQualityPreference.UpTo360p => "≤ 360p",
             VideoQualityPreference.UpTo480p => "≤ 480p",
             VideoQualityPreference.UpTo720p => "≤ 720p",
             VideoQualityPreference.UpTo1080p => "≤ 1080p",
-            VideoQualityPreference.Highest => "Highest",
+            VideoQualityPreference.Highest => "Highest quality",
             _ => throw new ArgumentOutOfRangeException(nameof(preference))
         };
 }
diff --git a/YoutubeDownloader/App.axaml b/YoutubeDownloader/App.axaml
@@ -21,8 +21,15 @@
         <Style Selector="ComboBox">
             <Setter Property="FontSize" Value="14" />
 
-            <Style Selector="^ /template/ Panel#PART_RootPanel">
-                <Setter Property="Height" Value="22" />
+            <Style Selector="^ /template/ ToggleButton">
+                <Style Selector="^:checked, ^:unchecked">
+                    <Setter Property="Margin" Value="0" />
+                    <Setter Property="CornerRadius" Value="0" />
+
+                    <Style Selector="^ ContentPresenter#contentPresenter">
+                        <Setter Property="Margin" Value="12,8" />
+                    </Style>
+                </Style>
             </Style>
         </Style>
 
@@ -130,16 +137,7 @@
 
         <!--  Text box  -->
         <Style Selector="TextBox">
-            <Setter Property="Height" Value="22" />
             <Setter Property="FontSize" Value="14" />
-
-            <Style Selector="^ /template/ Panel#PART_TextFieldPanel">
-                <Setter Property="MinHeight" Value="0" />
-            </Style>
-
-            <Style Selector="^ /template/ Panel#PART_TextContainer">
-                <Setter Property="Margin" Value="0" />
-            </Style>
         </Style>
 
         <!--  Toggle switch  -->
@@ -155,4 +153,26 @@
             <Setter Property="TextElement.FontStretch" Value="Normal" />
         </Style>
     </Application.Styles>
+
+    <Application.Resources>
+        <!--  Text box  -->
+        <ControlTheme
+            x:Key="CompactTextBox"
+            BasedOn="{StaticResource {x:Type TextBox}}"
+            TargetType="{x:Type TextBox}">
+            <Styles>
+                <Style Selector="TextBox">
+                    <Setter Property="Height" Value="22" />
+
+                    <Style Selector="^ /template/ Panel#PART_TextFieldPanel">
+                        <Setter Property="MinHeight" Value="0" />
+                    </Style>
+
+                    <Style Selector="^ /template/ Panel#PART_TextContainer">
+                        <Setter Property="Margin" Value="0" />
+                    </Style>
+                </Style>
+            </Styles>
+        </ControlTheme>
+    </Application.Resources>
 </Application>
diff --git a/YoutubeDownloader/Views/Components/DashboardView.axaml b/YoutubeDownloader/Views/Components/DashboardView.axaml
@@ -24,7 +24,6 @@
                 <materialStyles:Card Grid.Column="0">
                     <TextBox
                         x:Name="QueryTextBox"
-                        MinHeight="36"
                         AcceptsReturn="True"
                         FontSize="16"
                         MaxLines="4"

diff --git a/YoutubeDownloader/Views/Dialogs/DownloadMultipleSetupView.axaml b/YoutubeDownloader/Views/Dialogs/DownloadMultipleSetupView.axaml
@@ -5,6 +5,7 @@
     xmlns:asyncImageLoader="clr-namespace:AsyncImageLoader;assembly=AsyncImageLoader.Avalonia"
     xmlns:converters="clr-namespace:YoutubeDownloader.Converters"
     xmlns:dialogs="clr-namespace:YoutubeDownloader.ViewModels.Dialogs"
+    xmlns:materialAssists="clr-namespace:Material.Styles.Assists;assembly=Material.Styles"
     xmlns:materialIcons="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
     x:Name="UserControl"
     Width="500"
@@ -113,48 +114,43 @@
         </Border>
 
         <!--  Preferences  -->
-        <DockPanel
+        <UniformGrid
             Grid.Row="2"
-            Margin="16,16,16,8"
-            LastChildFill="False">
+            Margin="16"
+            Columns="2">
             <!--  Container preference  -->
-            <StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
-                <TextBlock Text="Container:" />
-                <ComboBox
-                    Width="125"
-                    Margin="8,0,0,0"
-                    ItemsSource="{Binding AvailableContainers}"
-                    SelectedItem="{Binding SelectedContainer}" />
-            </StackPanel>
+            <ComboBox
+                Margin="0,0,8,0"
+                materialAssists:ComboBoxAssist.Label="Container"
+                ItemsSource="{Binding AvailableContainers}"
+                SelectedItem="{Binding SelectedContainer}"
+                Theme="{DynamicResource MaterialFilledComboBox}" />
 
             <!--  Video quality preference  -->
-            <StackPanel
-                DockPanel.Dock="Right"
+            <ComboBox
+                Margin="8,0,0,0"
+                materialAssists:ComboBoxAssist.Label="Video quality"
                 IsEnabled="{Binding !SelectedContainer.IsAudioOnly}"
-                Orientation="Horizontal">
-                <TextBlock Text="Video quality:" />
-                <ComboBox
-                    Width="125"
-                    Margin="8,0,0,0"
-                    ItemsSource="{Binding AvailableVideoQualityPreferences}"
-                    SelectedItem="{Binding SelectedVideoQualityPreference}">
-                    <ComboBox.ItemTemplate>
-                        <DataTemplate>
-                            <TextBlock Text="{Binding Converter={x:Static converters:VideoQualityPreferenceToStringConverter.Instance}}" />
-                        </DataTemplate>
-                    </ComboBox.ItemTemplate>
-                </ComboBox>
-            </StackPanel>
-        </DockPanel>
+                ItemsSource="{Binding AvailableVideoQualityPreferences}"
+                SelectedItem="{Binding SelectedVideoQualityPreference}"
+                Theme="{DynamicResource MaterialFilledComboBox}">
+                <ComboBox.ItemTemplate>
+                    <DataTemplate>
+                        <TextBlock Text="{Binding Converter={x:Static converters:VideoQualityPreferenceToStringConverter.Instance}}" />
+                    </DataTemplate>
+                </ComboBox.ItemTemplate>
+            </ComboBox>
+        </UniformGrid>
 
         <!--  Buttons  -->
         <StackPanel
             Grid.Row="3"
-            Margin="16"
+            Margin="16,8,16,16"
             HorizontalAlignment="Right"
             Orientation="Horizontal">
             <!--  Download  -->
             <Button
+                Margin="0,0,8,0"
                 Command="{Binding ConfirmCommand}"
                 IsDefault="True"
                 Theme="{DynamicResource MaterialOutlineButton}">
@@ -168,7 +164,7 @@
 
             <!--  Cancel  -->
             <Button
-                Margin="16,0,0,0"
+                Margin="8,0,0,0"
                 Command="{Binding CloseCommand}"
                 Content="CANCEL"
                 IsCancel="True"

diff --git a/YoutubeDownloader/Views/Dialogs/DownloadSingleSetupView.axaml b/YoutubeDownloader/Views/Dialogs/DownloadSingleSetupView.axaml
@@ -5,6 +5,7 @@
     xmlns:asyncImageLoader="clr-namespace:AsyncImageLoader;assembly=AsyncImageLoader.Avalonia"
     xmlns:converters="clr-namespace:YoutubeDownloader.Converters"
     xmlns:dialogs="clr-namespace:YoutubeDownloader.ViewModels.Dialogs"
+    xmlns:materialAssists="clr-namespace:Material.Styles.Assists;assembly=Material.Styles"
     xmlns:materialIcons="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
     x:Name="UserControl"
     Width="500"
@@ -13,7 +14,7 @@
         <dialogs:DownloadSingleSetupViewModel />
     </Design.DataContext>
 
-    <Grid RowDefinitions="Auto,*,Auto">
+    <Grid RowDefinitions="Auto,*,Auto,Auto">
         <!--  Info  -->
         <StackPanel
             Grid.Row="0"
@@ -71,68 +72,62 @@
             <Image asyncImageLoader:ImageLoader.Source="{Binding Video, Converter={x:Static converters:VideoToHighestQualityThumbnailUrlStringConverter.Instance}}" />
         </Border>
 
-        <Grid
+        <!--  Download options  -->
+        <ComboBox
             Grid.Row="2"
             Margin="16"
-            ColumnDefinitions="*,Auto">
-            <!--  Download option  -->
-            <StackPanel
-                Grid.Column="0"
-                VerticalAlignment="Center"
-                Orientation="Horizontal">
-                <TextBlock Text="Format:" />
-                <ComboBox
-                    Width="150"
-                    Margin="8,0,0,0"
-                    ItemsSource="{Binding AvailableDownloadOptions}"
-                    SelectedItem="{Binding SelectedDownloadOption}">
-                    <ComboBox.ItemTemplate>
-                        <DataTemplate>
-                            <TextBlock>
-                                <!--  Video quality  -->
-                                <Run Classes.audioOnly="{Binding IsAudioOnly}">
-                                    <Run.Styles>
-                                        <Style Selector="Run">
-                                            <Setter Property="Text" Value="{Binding VideoQuality, Mode=OneWay}" />
+            materialAssists:ComboBoxAssist.Label="Format"
+            DockPanel.Dock="Left"
+            ItemsSource="{Binding AvailableDownloadOptions}"
+            SelectedItem="{Binding SelectedDownloadOption}"
+            Theme="{DynamicResource MaterialFilledComboBox}">
+            <ComboBox.ItemTemplate>
+                <DataTemplate>
+                    <TextBlock>
+                        <!--  Video quality  -->
+                        <Run Classes.audioOnly="{Binding IsAudioOnly}">
+                            <Run.Styles>
+                                <Style Selector="Run">
+                                    <Setter Property="Text" Value="{Binding VideoQuality, Mode=OneWay}" />
 
-                                            <Style Selector="^.audioOnly">
-                                                <Setter Property="Text" Value="Audio" />
-                                            </Style>
-                                        </Style>
-                                    </Run.Styles>
-                                </Run>
+                                    <Style Selector="^.audioOnly">
+                                        <Setter Property="Text" Value="Audio" />
+                                    </Style>
+                                </Style>
+                            </Run.Styles>
+                        </Run>
 
-                                <!--  Separator  -->
-                                <Run Text="—" />
+                        <!--  Separator  -->
+                        <Run Text="—" />
 
-                                <!--  Container  -->
-                                <Run Text="{Binding Container, Mode=OneWay}" />
-                            </TextBlock>
-                        </DataTemplate>
-                    </ComboBox.ItemTemplate>
-                </ComboBox>
-            </StackPanel>
+                        <!--  Container  -->
+                        <Run Text="{Binding Container, Mode=OneWay}" />
+                    </TextBlock>
+                </DataTemplate>
+            </ComboBox.ItemTemplate>
+        </ComboBox>
 
-            <!--  Buttons  -->
-            <StackPanel
-                Grid.Column="1"
-                HorizontalAlignment="Right"
-                Orientation="Horizontal">
-                <!--  Download  -->
-                <Button
-                    Command="{Binding ConfirmCommand}"
-                    Content="DOWNLOAD"
-                    IsDefault="True"
-                    Theme="{DynamicResource MaterialOutlineButton}" />
+        <!--  Buttons  -->
+        <StackPanel
+            Grid.Row="3"
+            Margin="16,8,16,16"
+            HorizontalAlignment="Right"
+            Orientation="Horizontal">
+            <!--  Download  -->
+            <Button
+                Margin="0,0,8,0"
+                Command="{Binding ConfirmCommand}"
+                Content="DOWNLOAD"
+                IsDefault="True"
+                Theme="{DynamicResource MaterialOutlineButton}" />
 
-                <!--  Cancel  -->
-                <Button
-                    Margin="16,0,0,0"
-                    Command="{Binding CloseCommand}"
-                    Content="CANCEL"
-                    IsCancel="True"
-                    Theme="{DynamicResource MaterialOutlineButton}" />
-            </StackPanel>
-        </Grid>
+            <!--  Cancel  -->
+            <Button
+                Margin="8,0,0,0"
+                Command="{Binding CloseCommand}"
+                Content="CANCEL"
+                IsCancel="True"
+                Theme="{DynamicResource MaterialOutlineButton}" />
+        </StackPanel>
     </Grid>
 </UserControl>
diff --git a/YoutubeDownloader/Views/Dialogs/SettingsView.axaml b/YoutubeDownloader/Views/Dialogs/SettingsView.axaml
@@ -128,7 +128,8 @@
                             Height="20"
                             DockPanel.Dock="Right"
                             FontSize="13"
-                            Text="{Binding FileNameTemplate}" />
+                            Text="{Binding FileNameTemplate}"
+                            Theme="{DynamicResource CompactTextBox}" />
                     </DockPanel>
 
                     <!--  Parallel limit  -->

diff --git a/YoutubeDownloader/Views/MainView.axaml b/YoutubeDownloader/Views/MainView.axaml
@@ -11,6 +11,7 @@
     MinWidth="600"
     MinHeight="400"
     Icon="/favicon.ico"
+    RenderOptions.BitmapInterpolationMode="HighQuality"
     WindowStartupLocation="CenterScreen">
     <Design.DataContext>
         <viewModels:MainViewModel />