Embedding SVG data into dialog and make it theme-aware

This commit is contained in:
1011025m 2023-05-11 00:56:13 +08:00
parent 3f6154cf84
commit 6de96bbf60
6 changed files with 40 additions and 16 deletions

View File

@ -14,8 +14,6 @@
<ItemGroup>
<Resource Include="Bloxstrap.ico" />
<Resource Include="Resources\CancelButtonSmall.png" />
<Resource Include="Resources\WordmarkRoblox.png" />
</ItemGroup>
<ItemGroup>

View File

@ -12,25 +12,33 @@
WindowStartupLocation="CenterScreen"
AllowsTransparency="True"
Background="Transparent">
<Border
CornerRadius="10"
Background="Black">
<Grid>
<Button Margin="12,12,12,12" VerticalAlignment="Top" HorizontalAlignment="Right" Width="20" Height="20" BorderThickness="0" Padding="0" Background="Transparent" BorderBrush="Transparent" Visibility="{Binding CancelButtonVisibility, Mode=OneWay}" Command="{Binding CancelInstallCommand}">
<Image Source="/Resources/CancelButtonSmall.png"/>
</Button>
<Border Margin="12,12,36,12" VerticalAlignment="Top" Height="20">
<TextBlock VerticalAlignment="Center" TextAlignment="Left" Foreground="#FFD8D8D8" FontSize="12" FontWeight="Bold" Text="{Binding Version}" />
</Border>
<Image Width="300" Height="60" Source="/Resources/WordmarkRoblox.png"/>
<Border CornerRadius="10" BorderBrush="#33393B3D" BorderThickness="{Binding DialogBorder}">
<Border CornerRadius="10" Background="{Binding Background}">
<Grid>
<Button Margin="12,12,12,12" VerticalAlignment="Top" HorizontalAlignment="Right" Width="20" Height="20" BorderThickness="0" Padding="0" Background="Transparent" BorderBrush="Transparent" Visibility="{Binding CancelButtonVisibility, Mode=OneWay}" Command="{Binding CancelInstallCommand}">
<Path Fill="{Binding IconColor}" Stretch="Fill">
<Path.Data>
<PathGeometry Figures="m 6.7507011 2.1168752 c -1.0144874 0 -2.0291944 0.3884677 -2.8065471 1.1658203 -1.5547052 1.5547053 -1.5547052 4.0583888 10e-8 5.6130941 L 28.499761 33.45088 3.9441541 58.006487 c -1.5547058 1.554706 -1.5547051 4.057873 0 5.612578 1.554705 1.554705 4.0583891 1.554705 5.6130942 0 l 24.5550907 -24.55509 24.555607 24.55509 c 1.554705 1.554705 4.057871 1.554705 5.612577 0 1.554705 -1.554706 1.554705 -4.057872 0 -5.612577 L 39.725433 33.450881 64.280523 8.89579 c 1.554706 -1.5547058 1.554705 -4.0583892 0 -5.6130942 -1.554705 -1.5547051 -4.057872 -1.5547058 -5.612578 -7e-7 L 34.112338 27.838303 9.5572482 3.2826955 C 8.7798955 2.5053428 7.7651883 2.1168752 6.7507011 2.1168752 Z" FillRule="NonZero"/>
</Path.Data>
</Path>
</Button>
<Grid Margin="12,12,36,12" VerticalAlignment="Top" Height="20">
<TextBlock VerticalAlignment="Center" TextAlignment="Left" Foreground="{Binding Foreground}" FontSize="12" FontWeight="Bold" Text="{Binding Version}" />
</Grid>
<Path Fill="{Binding IconColor}" Width="300" Height="56" Stretch="Fill">
<Path.Data>
<PathGeometry Figures="M38.5796 38.4043L47.7906 55.2626H30.6999L22.9226 40.8556H15.5546V55.2626H0V4.19308H28.4486C40.2169 4.19308 47.6883 10.7246 47.6883 22.4706C47.6883 30.0289 44.209 35.4433 38.5796 38.4043ZM15.5546 17.4658V27.5775H26.6066C29.8813 27.5775 31.9279 25.6369 31.9279 22.4706C31.9279 19.3043 29.8813 17.4658 26.6066 17.4658H15.5546ZM97.2175 59.0374L50.656 46.4743L63.1406 0L86.4214 6.28155L109.702 12.5631L97.2175 59.0374ZM88.4169 24.8198L75.4206 21.2449L71.9413 34.2166L84.9376 37.7925L88.4169 24.8198ZM163.019 40.8556C163.019 50.661 156.777 55.2626 147.055 55.2626H116.56V4.19308H146.032C155.753 4.19308 161.995 9.19789 161.995 17.9818C161.995 23.4973 159.949 27.1754 156.06 29.7289C160.461 31.6631 163.019 35.5455 163.019 40.8556ZM131.705 16.4498V24.008H141.83C144.593 24.008 146.231 22.7824 146.231 20.1268C146.231 17.6754 144.593 16.4498 141.83 16.4498H131.705ZM131.705 43.0059H143.064C145.725 43.0059 147.265 41.576 147.265 39.1235C147.265 36.469 145.73 35.2433 143.064 35.2433H131.705V43.0059ZM170.694 4.19308H186.246V40.1417H208.555V55.2626H170.692L170.694 4.19308ZM265.762 29.7289C265.762 34.9812 264.202 40.1156 261.278 44.4827C258.355 48.8498 254.199 52.2536 249.338 54.2636C244.476 56.2736 239.126 56.7995 233.965 55.7748C228.804 54.7501 224.063 52.2209 220.342 48.5069C216.621 44.793 214.087 40.0611 213.06 34.9098C212.034 29.7584 212.561 24.4188 214.574 19.5663C216.588 14.7138 219.998 10.5663 224.374 7.64828C228.749 4.73025 233.893 3.17276 239.156 3.17276C242.651 3.16582 246.114 3.8478 249.345 5.17958C252.575 6.51135 255.511 8.46672 257.983 10.9335C260.455 13.4003 262.415 16.3299 263.75 19.5544C265.085 22.7788 265.769 26.2346 265.762 29.7235V29.7289ZM250.208 29.7289C250.208 23.3952 245.193 18.3904 239.156 18.3904C233.118 18.3904 228.103 23.3952 228.103 29.7289C228.103 36.0626 233.118 41.0663 239.156 41.0663C245.193 41.0663 250.208 36.0551 250.208 29.7235V29.7289ZM303.216 28.9107L320 55.2626H301.472L292.267 40.2428L282.75 55.2626H263.92L281.419 29.5225L265.353 4.19308H283.875L292.369 17.9818L300.556 4.19308H318.976L303.216 28.9107Z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Grid Margin="0,0,0,30" VerticalAlignment="Bottom">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Margin="0,0,0,24" TextAlignment="Center" Grid.Row="0" FontSize="16" Text="{Binding Message}" Foreground="#FFD8D8D8" FontFamily="Source Sans Pro" FontWeight="SemiBold" />
<ProgressBar Grid.Row="1" Width="480" Height="12" Foreground="#FFECECEC" Background="#FF565656" BorderThickness="0" IsIndeterminate="{Binding ProgressIndeterminate}" Value="{Binding ProgressValue}"></ProgressBar>
<TextBlock Margin="0,0,0,24" TextAlignment="Center" Grid.Row="0" FontSize="16" Text="{Binding Message}" Foreground="{Binding Foreground}" FontFamily="Source Sans Pro" FontWeight="SemiBold" />
<ProgressBar Grid.Row="1" Width="480" Height="12" Foreground="{Binding Foreground}" Background="{Binding ProgressBarBackground}" BorderThickness="0" IsIndeterminate="{Binding ProgressIndeterminate}" Value="{Binding ProgressValue}"></ProgressBar>
</Grid>
</Grid>
</Border>
</Border>
</Window>

View File

@ -1,6 +1,7 @@
using System;
using System.Windows;
using System.Windows.Forms;
using System.Windows.Media;
using Bloxstrap.Enums;
using Bloxstrap.Extensions;
@ -62,7 +63,17 @@ namespace Bloxstrap.Dialogs
public HyperionDialog()
{
_viewModel = new HyperionDialogViewModel(this);
if (App.Settings.Prop.Theme.GetFinal() == Theme.Light)
{
// Matching the roblox website light theme as close as possible.
_viewModel.DialogBorder = new Thickness(1);
_viewModel.Background = new SolidColorBrush(Color.FromRgb(242, 244, 245));
_viewModel.Foreground = new SolidColorBrush(Color.FromRgb(57, 59, 61));
_viewModel.IconColor = new SolidColorBrush(Color.FromRgb(57, 59, 61));
_viewModel.ProgressBarBackground = new SolidColorBrush(Color.FromRgb(189, 190, 190));
}
DataContext = _viewModel;
InitializeComponent();
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.0 KiB

View File

@ -1,4 +1,6 @@
using System.ComponentModel;
using System.Windows;
using System.Windows.Media;
using Bloxstrap.Dialogs;
namespace Bloxstrap.ViewModels
@ -6,7 +8,12 @@ namespace Bloxstrap.ViewModels
public class HyperionDialogViewModel : FluentDialogViewModel, INotifyPropertyChanged
{
public string Version => $"Bloxstrap v{App.Version}";
// Using dark theme for default values.
public Thickness DialogBorder { get; set; } = new Thickness(0);
public Brush Background { get; set; } = Brushes.Black;
public Brush Foreground { get; set; } = new SolidColorBrush(Color.FromRgb(216, 216, 216));
public Brush IconColor { get; set; } = new SolidColorBrush(Color.FromRgb(255, 255, 255));
public Brush ProgressBarBackground { get; set; } = new SolidColorBrush(Color.FromRgb(86, 86, 86));
public HyperionDialogViewModel(IBootstrapperDialog dialog) : base(dialog)
{
}