Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styling bug fixes for TreeDataGrid #2060

Merged
merged 11 commits into from
Sep 19, 2024
Merged

Styling bug fixes for TreeDataGrid #2060

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
33200fc
FileTree formatting and fix for status bar hiding the tree view
insomnious Sep 17, 2024
cd2eb55
Compact class for treedatagrid
insomnious Sep 17, 2024
a1756d6
Rearranged state column, changed size, set color based on state
insomnious Sep 18, 2024
8eedb47
Advanced installer brought up to date
insomnious Sep 18, 2024
ca67194
replaced textblock class with theme
insomnious Sep 18, 2024
979a116
Fix bug with TextBox input styling
insomnious Sep 18, 2024
b5e931e
border fixes
insomnious Sep 18, 2024
a6570a4
Moved more textblocks to use themes
insomnious Sep 19, 2024
d619693
More TextBlock classes to theme
insomnious Sep 19, 2024
4eb0aa3
Removed dropshadow from parent rows (as per design request)
insomnious Sep 19, 2024
336720f
statusbar height change
insomnious Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Games/NexusMods.Games.AdvancedInstaller.UI/AdvancedManualInstallerUI.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ public override async ValueTask<InstallerResult> ExecuteAsync(
if (Headless) return new NotSupported();

var tree = LibraryArchiveTree.Create(libraryArchive);
var (shouldInstall, deploymentData) = await GetDeploymentDataAsync(Language.AdvancedInstaller_Manual_Mod, tree, loadout);
var (shouldInstall, deploymentData) = await GetDeploymentDataAsync(loadoutGroup.GetLoadoutItem(transaction).Name, tree, loadout);

if (!shouldInstall) return new NotSupported();

Expand Down
12 changes: 8 additions & 4 deletions src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/BodyView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,18 @@
<Border Grid.Row="0" x:Name="TitleContainerBorder">
<StackPanel x:Name="HeadingAndSubHeadingStackPanel" Orientation="Vertical">
<!-- Mod Name -->
<TextBlock Classes="TitleMDSemi" x:Name="ModNameTextBlock" Text="TEMP MOD NAME" />
<TextBlock Theme="{StaticResource HeadingSMSemiTheme}"
x:Name="ModNameTextBlock" Text="TEMP MOD NAME" />

<!-- Installer Name -->
<TextBlock Classes="HeadingMDSemi" x:Name="InstallerNameTextBlock"
Text="{x:Static resources:Language.InstallerNameText}" />
<TextBlock Theme="{StaticResource HeadingMDSemiTheme}"
x:Name="InstallerNameTextBlock"
Text="{x:Static resources:Language.InstallerNameText}"
IsVisible="False"/>

<!-- 'Please Select Files' -->
<TextBlock Classes="BodyLGNormal" x:Name="SubHeadingTextBlock"
<TextBlock Theme="{StaticResource BodyLGNormalTheme}"
x:Name="SubHeadingTextBlock"
Text="{x:Static resources:Language.SubHeadingText_Please_select_files}" />
</StackPanel>
</Border>
Expand Down
2 changes: 1 addition & 1 deletion src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/BodyView.axaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ public BodyView()
// Set the mod name if VM is not null.
this.WhenAnyValue(view => view.ViewModel)
.WhereNotNull()
.Do(vm => ModNameTextBlock.Text = vm.ModName.ToUpper())
.Do(vm => ModNameTextBlock.Text = vm.ModName)
.Subscribe()
.DisposeWith(disposables);

Expand Down
10 changes: 6 additions & 4 deletions src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/Left/ModContent/ModContentView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,13 @@
<modContent:ModContentDesignViewModel />
</Design.DataContext>


<UserControl.Styles>
<Style Selector="Border.HeaderAreaBorder">
<Setter Property="BorderThickness" Value="0, 0, 0, 1" />
<Setter Property="Margin" Value="0, 0, 0, 16" />
</Style>

<Style Selector="TextBlock.ContentSubHeading">
<Setter Property="Margin" Value="0, 4, 0, 16" />
</Style>
Expand All @@ -27,19 +28,20 @@
<!-- "Mod Content" Header and "Description" -->
<Border Grid.Row="0" Classes="HeaderAreaBorder OutlineWeak" x:Name="HeaderAreaBorder">
<StackPanel Orientation="Vertical">
<TextBlock Classes="TitleSMSemi"
<TextBlock Theme="{StaticResource TitleSMSemiTheme}"
Text="{x:Static resources:Language.ModContentTitle_MOD_CONTENT}"
x:Name="ModContentTitle" />

<TextBlock Classes="BodySMNormal ForegroundSubdued ContentSubHeading"
<TextBlock Theme="{StaticResource BodySMNormalTheme}"
Classes="ForegroundSubdued ContentSubHeading"
Text="{x:Static resources:Language.ModContentSubHeading_Files_with_no}"
x:Name="ModContentSubHeading" />
</StackPanel>
</Border>

<!-- "Mod Content" Tree -->
<!-- Don't remove the width, it's a hack around https://github.com/AvaloniaUI/Avalonia.Controls.TreeDataGrid/issues/221 -->
<TreeDataGrid Grid.Row="1" Classes="TreeWhiteCaret" x:Name="ModContentTreeDataGrid"
<TreeDataGrid Grid.Row="1" Classes="Compact" x:Name="ModContentTreeDataGrid"
ShowColumnHeaders="False" Width="1"/>
</Grid>
</reactiveUi:ReactiveUserControl>
29 changes: 15 additions & 14 deletions ...ames.AdvancedInstaller.UI/Content/Left/ModContent/TreeEntry/ModContentTreeEntryView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,25 +34,26 @@
<icons:UnifiedIcon Classes="FileTypeIcon" x:Name="EntryIcon" />

<!-- File Name -->
<TextBlock Classes="BodyMDNormal" VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
Text="Example-file.bsa"
x:Name="FileNameTextBlock" />
<TextBlock Theme="{StaticResource BodyMDNormalTheme}"
VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
Text="Example-file.bsa"
x:Name="FileNameTextBlock" />
</StackPanel>

<!-- Right Elements -->
<StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal"
x:Name="EntryRightElementsStackPanel">

<!-- Install Button (Install / Install all / Install folder) -->
<Button Classes="Rounded Primary RightElements" HorizontalAlignment="Right" IsVisible="False"
x:Name="InstallRoundedButton">
<Button Classes="Standard Tertiary Weak RightElements" HorizontalAlignment="Right" IsVisible="False"
x:Name="InstallRoundedButton" Height="24">
<TextBlock Text="Install temp text" x:Name="InstallRoundedButtonTextBlock" />
</Button>

<!-- X Select location ['Selecting' State] -->
<Button Classes="Rounded Primary Active RightElements" HorizontalAlignment="Right" IsVisible="False"
x:Name="SelectLocationRoundedButton">
<Button Classes="Standard Secondary RightElements" HorizontalAlignment="Right" IsVisible="False"
x:Name="SelectLocationRoundedButton" Height="24">
<StackPanel Orientation="Horizontal">
<icons:UnifiedIcon Classes="Close" x:Name="SelectLocationCloseIcon" />
<TextBlock Text="{x:Static resources:Language.SelectLocationButton_Select_location}"
Expand All @@ -61,26 +62,26 @@
</Button>

<!-- Remove from Location Button ['IncludedExplicit' State] -->
<Button Classes="Rounded Accent RightElements" HorizontalAlignment="Right" IsVisible="False"
x:Name="RemoveFromLocationButton">
<Button Classes="Standard Secondary RightElements" HorizontalAlignment="Right" IsVisible="False"
x:Name="RemoveFromLocationButton" Height="24">
<StackPanel Orientation="Horizontal">
<icons:UnifiedIcon Classes="Close" x:Name="RemoveFromLocationCloseIcon" />
<TextBlock Text="temp Loc" x:Name="RemoveFromLocationButtonTextBlock" />
</StackPanel>
</Button>

<!-- Include Transition Button (Include / Include folder / Include with folder) [`Selecting`,`SelectingViaParent`]-->
<Button Classes="Rounded Primary SemiActive RightElements" HorizontalAlignment="Right" IsVisible="False"
x:Name="IncludeTransitionButton">
<Button Classes="Standard Tertiary Weak SemiActive RightElements" HorizontalAlignment="Right" IsVisible="False"
x:Name="IncludeTransitionButton" Height="24">
<StackPanel Orientation="Horizontal">
<icons:UnifiedIcon Classes="Close" x:Name="IncludeTransitionCloseIcon" />
<TextBlock Text="Include temp text" x:Name="IncludeTransitionButtonTextBlock" />
</StackPanel>
</Button>

<!-- Included Remove Button (Included / Included folder / Included with folder) -->
<Button Classes="Rounded Accent SemiActive RightElements" HorizontalAlignment="Right" IsVisible="False"
x:Name="IncludedRemoveButton">
<Button Classes="Standard Tertiary Weak SemiActive RightElements" HorizontalAlignment="Right" IsVisible="False"
x:Name="IncludedRemoveButton" Height="24">
<StackPanel Orientation="Horizontal">
<icons:UnifiedIcon Classes="Close" x:Name="IncludedRemoveButtonCloseIcon" />
<TextBlock Text="Included temp text" x:Name="IncludedRemoveButtonTextBlock" />
Expand Down
10 changes: 6 additions & 4 deletions ...es/NexusMods.Games.AdvancedInstaller.UI/Content/Right/EmptyPreview/EmptyPreviewView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
<emptyPreview:EmptyPreviewViewModel />
</Design.DataContext>

<Border Classes="Rounded-lg OutlineModerate">
<Border Classes="Rounded-lg OutlineModerate" BorderThickness="2">

<Border.Styles>
<Style Selector="TextBlock#EmptyPreviewTextBlock">
<Setter Property="VerticalAlignment" Value="Center" />
Expand All @@ -22,9 +23,10 @@
</Border.Styles>

<ScrollViewer>
<TextBlock Classes="BodyMDNormal ForegroundSubdued"
Text="{x:Static resources:Language.EmptyPreviewText_Select_files_to_install}"
x:Name="EmptyPreviewTextBlock" />
<TextBlock Theme="{StaticResource BodyMDNormalTheme}"
Classes="ForegroundSubdued"
Text="{x:Static resources:Language.EmptyPreviewText_Select_files_to_install}"
x:Name="EmptyPreviewTextBlock" />
</ScrollViewer>
</Border>

Expand Down
13 changes: 7 additions & 6 deletions src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/Right/Preview/PreviewView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@
<preview:PreviewViewModel />
</Design.DataContext>

<Border Classes="Rounded-lg Mid" Padding="16">
<Border Classes="Rounded-lg Mid" Padding="16" BorderThickness="2">
<Border.Styles>
<Style Selector="Border.HeaderAreaBorder">
<Setter Property="BorderThickness" Value="0, 0, 0, 1" />
<Setter Property="Margin" Value="0, 0, 0, 16" />
<Setter Property="BorderThickness" Value="0, 0, 0, 1" />
</Style>

<Style Selector="TextBlock#InstallLocationPreviewSubHeading">
<Setter Property="Margin" Value="0, 4, 0, 16" />
</Style>
Expand All @@ -27,17 +27,18 @@
<Grid RowDefinitions="Auto *">
<Border Grid.Row="0" Classes="OutlineWeak HeaderAreaBorder" x:Name="HeaderAreaBorder">
<StackPanel Orientation="Vertical">
<TextBlock Classes="TitleSMSemi"
<TextBlock Theme="{StaticResource TitleSMSemiTheme}"
Text="{x:Static resources:Language.PreviewHeader_INSTALL_LOCATION_PREVIEW}" />

<TextBlock Classes="BodySMNormal ForegroundSubdued SubHeading"
<TextBlock Theme="{StaticResource BodySMNormalTheme}"
Classes="ForegroundSubdued SubHeading"
Text="{x:Static resources:Language.PreviewSubHeading_Files_labelled_as_new}"
x:Name="InstallLocationPreviewSubHeading" />
</StackPanel>
</Border>

<!-- Don't remove this width, it's a hack around https://github.com/AvaloniaUI/Avalonia.Controls.TreeDataGrid/issues/221 -->
<TreeDataGrid Grid.Row="1" Classes="TreeWhiteCaret" x:Name="LocationPreviewTreeDataGrid"
<TreeDataGrid Grid.Row="1" Classes="Compact" x:Name="LocationPreviewTreeDataGrid"
ShowColumnHeaders="False" Width="1" />
</Grid>
</Border>
Expand Down
21 changes: 11 additions & 10 deletions ...ods.Games.AdvancedInstaller.UI/Content/Right/Preview/TreeEntry/PreviewTreeEntryView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
</Style>

<Style Selector="Button.RightElements">
<Setter Property="Margin" Value="0,0,8,0" />
<Setter Property="Margin" Value="0" />
</Style>

<Style Selector="Button.PillElement">
Expand All @@ -43,31 +43,32 @@
<icons:UnifiedIcon Classes="FileTypeIcon" x:Name="EntryIcon" />

<!-- File Name -->
<TextBlock Classes="BodyMDNormal" VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
Text="Example-file.bsa"
x:Name="FileNameTextBlock" />
<TextBlock Theme="{StaticResource BodyMDNormalTheme}"
VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
Text="Example-file.bsa"
x:Name="FileNameTextBlock" />

<!-- Pills -->
<StackPanel Orientation="Horizontal" Classes="Spacing-2">

<!-- NEW Pill Label -->
<Button Classes="Pill Accent Label Hug PillElement" IsVisible="False" x:Name="NewPill">
<Button Classes="Pill Accent Label Hug PillElement" IsVisible="False" x:Name="NewPill" Height="18">
<StackPanel>
<TextBlock Text="{x:Static resources:Language.NewFilePill_NEW}" />
</StackPanel>
</Button>

<!-- Dupe Folder Pill Label -->
<Button Classes="Pill Light Label Hug PillElement" IsVisible="False" x:Name="DupeFolderPill">
<Button Classes="Pill Light Label Hug PillElement" IsVisible="False" x:Name="DupeFolderPill" Height="18">
<StackPanel>
<icons:UnifiedIcon Classes="Alert" />
<TextBlock Text="{x:Static resources:Language.Pill_DUPE_FOLDER}" />
</StackPanel>
</Button>

<!-- Folder Merged Pill Label -->
<Button Classes="Pill Light Label Hug PillElement" IsVisible="False" x:Name="FolderMergedPill">
<Button Classes="Pill Light Label Hug PillElement" IsVisible="False" x:Name="FolderMergedPill" Height="18">
<StackPanel>
<icons:UnifiedIcon Classes="Check" />
<TextBlock Text="{x:Static resources:Language.Pill_FOLDER_MERGED}" />
Expand All @@ -80,8 +81,8 @@

<!-- Right Elements // Add StackPanel here if adding additional ones -->
<!-- X Button -->
<Button Grid.Column="1" Classes="Rounded Primary RightElements" HorizontalAlignment="Right"
x:Name="XRoundedButton">
<Button Grid.Column="1" Classes="Standard Tertiary Weak RightElements" HorizontalAlignment="Right"
x:Name="XRoundedButton" Height="24" Width="24">
<icons:UnifiedIcon Classes="Close" x:Name="StandaloneCloseIcon" />
</Button>
</Grid>
Expand Down
3 changes: 0 additions & 3 deletions ....Games.AdvancedInstaller.UI/Content/Right/Preview/TreeEntry/PreviewTreeEntryView.axaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,6 @@ private void InitView()
{
EntryIcon.Classes.Add("FolderOutline");

// Make directory name bold.
FileNameTextBlock.Classes.Remove("BodyMDNormal");
FileNameTextBlock.Classes.Add("BodyMDBold");
}
else
{
Expand Down
31 changes: 17 additions & 14 deletions ...exusMods.Games.AdvancedInstaller.UI/Content/Right/SelectLocation/SelectLocationView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,45 +12,46 @@
<selectLocation:SelectLocationDesignViewModel />
</Design.DataContext>

<Border Classes="Rounded-lg Mid OutlineStrong" Padding="16">
<Border Classes="Rounded-lg Mid OutlineModerate" Padding="16" BorderThickness="2">
<Border.Styles>
<Style Selector="Border#HeaderAreaBorder">
<Setter Property="Margin" Value="0, 0, 0, 16" />
</Style>

<Style Selector="TextBlock#SelectLocationSubHeading">
<Setter Property="Margin" Value="0, 4, 0, 16" />
</Style>

<Style Selector="TextBlock#AllFoldersAreaSubHeaderText">
<Setter Property="Margin" Value="0, 0, 0, 8" />
</Style>

<Style Selector="StackPanel.SuggestedHeaderStackPanel">
<Setter Property="Margin" Value="0, 0, 0, 8" />
</Style>

<Style Selector="Border.SuggestedAreaBorder">
<Setter Property="Margin" Value="0, 0, 0, 16" />
</Style>

<Style Selector="Border.Padding16">
<Setter Property="Padding" Value="16" />
</Style>
</Border.Styles>

<ScrollViewer>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Vertical" Margin="0,0,16,0">
Al12rs marked this conversation as resolved.
Show resolved Hide resolved

<!-- 'Select Install Location' -->
<Border x:Name="HeaderAreaBorder" Classes="OutlineWeak" BorderThickness="0, 0, 0, 1">
<StackPanel Orientation="Vertical">
<!-- 'Select Install Location' -->
<TextBlock Classes="TitleSMSemi"
<TextBlock Theme="{StaticResource TitleSMSemiTheme}"
Text="{x:Static resources:Language.SelectLocationHeaderText_SELECT_INSTALL_LOCATION}" />

<!-- 'Select where to install the mod file/folder' -->
<TextBlock Classes="BodySMNormal ForegroundSubdued"
<TextBlock Theme="{StaticResource BodySMNormalTheme}"
Classes="ForegroundSubdued"
Text="{x:Static resources:Language.SelectLocationSubHeadingText_Select_where_to}"
x:Name="SelectLocationSubHeading" />
</StackPanel>
Expand All @@ -61,10 +62,11 @@
<StackPanel Orientation="Vertical">
<StackPanel Classes="SuggestedHeaderStackPanel" Orientation="Vertical">
<!-- Header: 'SUGGESTED' -->
<TextBlock Classes="TitleXSSemi"
<TextBlock Theme="{StaticResource TitleXSSemiTheme}"
Text="{x:Static resources:Language.SuggestedHeaderText_SUGGESTED}" />

<TextBlock Classes="BodySMNormal ForegroundSubdued"
<TextBlock Theme="{StaticResource BodySMNormalTheme}"
Classes="ForegroundSubdued"
TextWrapping="Wrap"
Text="TEMP SUBTITLE"
x:Name="SuggestedSubHeaderText" />
Expand All @@ -86,14 +88,15 @@
<StackPanel Orientation="Vertical">
<StackPanel Classes="SuggestedHeaderStackPanel" Orientation="Vertical">
<!-- Header: 'ALL FOLDERS' -->
<TextBlock Classes="TitleXSSemi"
<TextBlock Theme="{StaticResource TitleXSSemiTheme}"
Text="{x:Static resources:Language.AllFoldersAreaHeaderText_ALL_FOLDERS}" />
<!-- Description: 'Select from full folder structure' -->
<TextBlock Classes="BodySMNormal ForegroundSubdued"
<TextBlock Theme="{StaticResource BodySMNormalTheme}"
Classes="ForegroundSubdued"
Text="{x:Static resources:Language.AllFoldersAreaSubHeaderText_Select_from_full}" />
</StackPanel>

<TreeDataGrid Classes="TreeWhiteCaret"
<TreeDataGrid Classes="Compact"
ShowColumnHeaders="False"
x:Name="SelectTreeDataGrid" />
</StackPanel>
Expand Down
2 changes: 1 addition & 1 deletion ...AdvancedInstaller.UI/Content/Right/SelectLocation/SuggestedEntry/SuggestedEntryView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
</StackPanel>

<!-- Select Button -->
<Button Grid.Column="2" Classes="Rounded Primary RightElements" HorizontalAlignment="Right"
<Button Grid.Column="2" Classes="Standard Tertiary Weak RightElements" HorizontalAlignment="Right"
x:Name="SelectRoundedButton">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Static resources:Language.SelectButton_Select}" />
Expand Down
Loading
Loading