Skip to content

Commit

Permalink
Various FlexPanel related layout fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Al12rs
Al12rs committed Sep 25, 2024
1 parent a6f75e0 commit 2077a8f
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 24 deletions.
4 changes: 2 additions & 2 deletions src/NexusMods.App.UI/Pages/LibraryPage/Collections/CollectionCardView.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@
<Border x:Name="CategoryTextBorder">
<TextBlock x:Name="CategoryText" />
</Border>
<panels:FlexPanel x:Name="SummaryTextFlexPanel">
<Border x:Name="SummaryTextFlexPanel">
<TextBlock x:Name="SummaryText" />
</panels:FlexPanel>
</Border>
</panels:FlexPanel>

</panels:FlexPanel>
Expand Down
47 changes: 25 additions & 22 deletions ...ods.Themes.NexusFluentDark/Styles/UserControls/CollectionCards/CollectionCardStyles.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,14 @@

<Style Selector="^ panels|FlexPanel#Container">
<Setter Property="AlignItems" Value="FlexStart" />
<Setter Property="panels:Flex.AlignSelf" Value="Stretch" />
<Setter Property="Direction" Value="Row" />

<!-- left column -->
<Style Selector="^ Border#TileImageBorder">
<Setter Property="panels:Flex.Shrink" Value="0" />
<Setter Property="CornerRadius" Value="{StaticResource Rounded}" />
<Setter Property="ClipToBounds" Value="True" />
<!-- NOTE(insomnious): not sure if we fixed sizes on both elements, but figma does -->
<!-- NOTE(insomnious): not sure if we need fixed sizes on both elements, but figma does -->
<Setter Property="Width" Value="144" />
<Setter Property="Height" Value="180" />
<Style Selector="^ Image#TileImage">
Expand All @@ -60,13 +60,13 @@

<!-- right column -->
<Style Selector="^ panels|FlexPanel#TitleContainer">

<!-- <Setter Property="Background" Value="DarkBlue" /> -->
<Setter Property="Direction" Value="Column" />
<Setter Property="AlignItems" Value="Stretch" />
<Setter Property="panels:Flex.Grow" Value="1" />
<Setter Property="panels:Flex.Shrink" Value="0" />
<Setter Property="panels:Flex.Basis" Value="0" />

<!-- Fixed sizes for child elements -->
<Style Selector="^ > :is(Control)">
<Setter Property="panels:Flex.Shrink" Value="0" />
</Style>

<Style Selector="^ TextBlock#TitleText">
<Setter Property="Theme" Value="{StaticResource BodyLGBoldTheme}" />
Expand All @@ -92,17 +92,15 @@
</Style>
</Style>

<!-- NOTE(insomnious): We shouldn't need this FlexPanel wrapper as we should be able to set
Flex.??? directly on the TextBlock and achieve the desired outcome. @Al12rs will look into it
at a later date but this is working for now -->
<Style Selector="^ panels|FlexPanel#SummaryTextFlexPanel">
<Style Selector="^ Border#SummaryTextFlexPanel">
<!-- <Setter Property="Background" Value="Red" /> -->
<Setter Property="panels:Flex.Grow" Value="1" />
<Setter Property="panels:Flex.Shrink" Value="0" />
<Setter Property="panels:Flex.Basis" Value="0" />
<Setter Property="panels:Flex.AlignSelf" Value="FlexStart" />
<Setter Property="panels:Flex.Shrink" Value="1" />

<Style Selector="^ TextBlock#SummaryText">
<!-- <Setter Property="Background" Value="DarkBlue" /> -->
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Padding" Value="12, 4, 0, 0" />
<Setter Property="Theme" Value="{StaticResource BodyMDNormalTheme}" />
<Setter Property="TextWrapping" Value="Wrap" />
Expand All @@ -120,6 +118,7 @@

<!-- middle row -->
<Style Selector="^ Border#StatsBorder">
<Setter Property="panels:Flex.Shrink" Value="0" />
<Setter Property="Height" Value="44" />
<Setter Property="Padding" Value="12" />

Expand Down Expand Up @@ -159,23 +158,23 @@

<!-- bottom row -->
<Style Selector="^ Border#ActionFooterBorder">
<Setter Property="panels:Flex.Shrink" Value="0" />

<Setter Property="Padding" Value="12" />
<Setter Property="BorderBrush" Value="{StaticResource StrokeTranslucentWeakBrush}" />
<Setter Property="BorderThickness" Value="0, 1, 0, 0" />

<Style Selector="^ panels|FlexPanel#ActionFooter">
<Setter Property="AlignItems" Value="Center" />
<Setter Property="panels:Flex.AlignSelf" Value="Stretch" />
<Setter Property="AlignItems" Value="Stretch" />
<Setter Property="JustifyContent" Value="FlexEnd" />
<Setter Property="ColumnSpacing" Value="16" />

<Style Selector="^ panels|FlexPanel#ActionGroup">
<!-- <Setter Property="Background" Value="Red"/> -->
<Setter Property="AlignItems" Value="Center" />
<Setter Property="panels:Flex.AlignSelf" Value="Stretch" />
<Setter Property="panels:Flex.Grow" Value="1" />
<Setter Property="panels:Flex.Shrink" Value="0" />
<Setter Property="panels:Flex.Basis" Value="0" />
<Setter Property="panels:Flex.Basis" Value="0%" />
<Setter Property="AlignItems" Value="Center" />
<Setter Property="ColumnSpacing" Value="8" />

<Style Selector="^ > Button">
Expand All @@ -188,13 +187,13 @@
<Style Selector="^ panels|FlexPanel#FooterLabels">
<Setter Property="panels:Flex.Grow" Value="1" />
<Setter Property="panels:Flex.Shrink" Value="0" />
<Setter Property="panels:Flex.Basis" Value="0" />
<Setter Property="AlignItems" Value="Center" />
<Setter Property="panels:Flex.AlignSelf" Value="Stretch" />
<Setter Property="panels:Flex.Basis" Value="0%" />
<Setter Property="JustifyContent" Value="FlexEnd" />
<Setter Property="AlignItems" Value="Center" />
<Setter Property="ColumnSpacing" Value="8" />

<Style Selector="^ panels|FlexPanel#UserLabel">
<Setter Property="JustifyContent" Value="FlexEnd" />
<Setter Property="ColumnSpacing" Value="4" />

<Style Selector="^ Border#AvatarImageBorder">
Expand All @@ -208,9 +207,13 @@
<Style Selector="^ TextBlock#AuthorName">
<Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
<Setter Property="Theme" Value="{StaticResource BodySMNormalTheme}" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
</Style>
</Style>

<Style Selector="^ panels|FlexPanel#UserLabel">
</Style>

</Style>
</Style>
</Style>
Expand Down

0 comments on commit 2077a8f

Please sign in to comment.