Skip to content

Commit

Permalink
[.NET][WPF][HTML] Fix Bleed behaviour for columns (microsoft#2879)
Browse files Browse the repository at this point in the history 
* Fix visibility issue for columns

* Fix separator issue in WPF

* Almost fix HTML renderer

* Fix toggle visibility select actions

* Add test for checking initial state of separators

* Fix html for hiding separators in initial state

* Fix logic in column separators

* Fix sample app to render tall cards

* Fix PR Comments

* Fix test files

* Fix test results

* Fix comments

* Add test app results

* Fix more comments

* Add results for new card

* Fix behaviour for bleed in WPF

* Fix HTML behavior

* Fix HTML tes

* Fix some of the PR comments

* Fix PR comments
  • Loading branch information
@almedina-ms @paulcam206
almedina-ms authored and paulcam206 committed May 23, 2019
1 parent 35941c1 commit 0ede3e0
Show file tree
Hide file tree
Showing 6 changed files with 138 additions and 160 deletions.
104 changes: 46 additions & 58 deletions source/dotnet/Library/AdaptiveCards.Rendering.Html/AdaptiveCardRenderer.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -466,10 +466,25 @@ protected static void AddContainerElements(HtmlTag uiContainer, IList<AdaptiveEl
{
if (elements != null)
{
bool isFirstElement = true;
bool isFirstVisibleElement = true;
int index = 0;

foreach (var cardElement in elements)
{
if (index != 0)
{
// Only the first element can bleed to the top
context.RenderArgs.BleedDirection &= ~BleedDirection.BleedUp;
}

if (index != (elements.Count - 1))
{
// Only the last element can bleed to the bottom
context.RenderArgs.BleedDirection &= ~BleedDirection.BleedDown;
}

index++;

// each element has a row
var uiElement = context.Render(cardElement);
if (uiElement != null)
Expand Down Expand Up @@ -501,14 +516,14 @@ protected static void AddContainerElements(HtmlTag uiContainer, IList<AdaptiveEl
else
{
// if it's visible and it's the first element, hide the separator
if (isFirstElement)
if (isFirstVisibleElement)
{
if (uiSeparator != null)
{
uiSeparator.Style("display", "none");
}

isFirstElement = false;
isFirstVisibleElement = false;
}
}

Expand Down Expand Up @@ -619,7 +634,7 @@ protected static HtmlTag ColumnRender(AdaptiveColumn column, AdaptiveRenderConte
// to the side the column would have bled
if (hasPadding)
{
childRenderArgs.BleedDirection = BleedDirection.Both;
childRenderArgs.BleedDirection = BleedDirection.BleedAll;
}

childRenderArgs.HasParentWithPadding = hasPadding;
Expand Down Expand Up @@ -676,58 +691,19 @@ protected static HtmlTag ColumnSetRender(AdaptiveColumnSet columnSet, AdaptiveRe
var column = columnSet.Columns[i];

var childRenderArgs = new AdaptiveRenderArgs(childrenRenderArgs);
// Reset up and down bleed for columns as that behaviour shouldn't be changed
childRenderArgs.BleedDirection |= (BleedDirection.BleedUp | BleedDirection.BleedDown);

if (hasPadding)
if (i != 0)
{
if (columnSet.Columns.Count == 1)
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Both;
}
else
{
if (i == 0)
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Left;
}
else if (i == (columnSet.Columns.Count - 1))
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Right;
}
else
{
childRenderArgs.BleedDirection = BleedDirection.None;
}
}
// Only the first column can bleed to the left
childRenderArgs.BleedDirection &= ~BleedDirection.BleedLeft;
}
else

if (i != columnSet.Columns.Count - 1)
{
if (columnSet.Columns.Count == 1)
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = parentRenderArgs.BleedDirection;
}
else
{
if (i == 0 &&
(childRenderArgs.BleedDirection == BleedDirection.Left || childRenderArgs.BleedDirection == BleedDirection.Both))
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Left;
}
else if (i == (columnSet.Columns.Count - 1) &&
(childRenderArgs.BleedDirection == BleedDirection.Right || childRenderArgs.BleedDirection == BleedDirection.Both))
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Right;
}
else
{
childRenderArgs.BleedDirection = BleedDirection.None;
}
}
// Only the last column can bleed to the right
childRenderArgs.BleedDirection &= ~BleedDirection.BleedRight;
}
context.RenderArgs = childRenderArgs;

Expand Down Expand Up @@ -864,7 +840,7 @@ protected static HtmlTag ContainerRender(AdaptiveContainer container, AdaptiveRe

if (hasPadding)
{
childRenderArgs.BleedDirection = BleedDirection.Both;
childRenderArgs.BleedDirection = BleedDirection.BleedAll;
}

childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
Expand Down Expand Up @@ -1980,19 +1956,31 @@ private static bool ApplyPadding(HtmlTag uiElement, AdaptiveCollectionElement el

if (element.Bleed)
{
int leftMargin = 0, rightMargin = 0;
if (parentRenderArgs.BleedDirection == BleedDirection.Left || parentRenderArgs.BleedDirection == BleedDirection.Both)
int leftMargin = 0, rightMargin = 0, topMargin = 0, bottomMargin = 0;
if ((parentRenderArgs.BleedDirection & BleedDirection.BleedLeft) != BleedDirection.BleedNone)
{
leftMargin = -padding;
}

if (parentRenderArgs.BleedDirection == BleedDirection.Right || parentRenderArgs.BleedDirection == BleedDirection.Both)
if ((parentRenderArgs.BleedDirection & BleedDirection.BleedRight) != BleedDirection.BleedNone)
{
rightMargin = -padding;
}

if ((parentRenderArgs.BleedDirection & BleedDirection.BleedUp) != BleedDirection.BleedNone)
{
topMargin = -padding;
}

if ((parentRenderArgs.BleedDirection & BleedDirection.BleedDown) != BleedDirection.BleedNone)
{
bottomMargin = -padding;
}

uiElement.Style("margin-right", rightMargin + "px")
.Style("margin-left", leftMargin + "px");
.Style("margin-left", leftMargin + "px")
.Style("margin-top", topMargin + "px")
.Style("margin-bottom", bottomMargin + "px");
}
}

Expand Down
2 changes: 1 addition & 1 deletion source/dotnet/Library/AdaptiveCards.Rendering.Wpf/AdaptiveColumnRenderer.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ public static FrameworkElement Render(AdaptiveColumn column, AdaptiveRenderConte
// to the side the column would have bled
if (columnHasPadding)
{
childRenderArgs.BleedDirection = BleedDirection.Both;
childRenderArgs.BleedDirection = BleedDirection.BleedAll;
}

// If either this column or an ancestor had padding, then the children will have an ancestor with padding
Expand Down
94 changes: 24 additions & 70 deletions source/dotnet/Library/AdaptiveCards.Rendering.Wpf/AdaptiveColumnSetRenderer.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,58 +41,19 @@ public static FrameworkElement Render(AdaptiveColumnSet columnSet, AdaptiveRende
AdaptiveColumn column = columnSet.Columns[i];

var childRenderArgs = new AdaptiveRenderArgs(childrenRenderArgs);
// Reset up and down bleed for columns as that behaviour shouldn't be changed
childRenderArgs.BleedDirection |= (BleedDirection.BleedUp | BleedDirection.BleedDown);

if (hasPadding)
if (i != 0)
{
if (columnSet.Columns.Count == 1)
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Both;
}
else
{
if (i == 0)
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Left;
}
else if (i == (columnSet.Columns.Count - 1))
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Right;
}
else
{
childRenderArgs.BleedDirection = BleedDirection.None;
}
}
// Only the first column can bleed to the left
childRenderArgs.BleedDirection &= ~BleedDirection.BleedLeft;
}
else

if (i != columnSet.Columns.Count - 1)
{
if (columnSet.Columns.Count == 1)
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = parentRenderArgs.BleedDirection;
}
else
{
if (i == 0 &&
(childRenderArgs.BleedDirection == BleedDirection.Left || childRenderArgs.BleedDirection == BleedDirection.Both))
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Left;
}
else if (i == (columnSet.Columns.Count - 1) &&
(childRenderArgs.BleedDirection == BleedDirection.Right || childRenderArgs.BleedDirection == BleedDirection.Both))
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Right;
}
else
{
childRenderArgs.BleedDirection = BleedDirection.None;
}
}
// Only the last column can bleed to the right
childRenderArgs.BleedDirection &= ~BleedDirection.BleedRight;
}

context.RenderArgs = childRenderArgs;
Expand All @@ -102,34 +63,27 @@ public static FrameworkElement Render(AdaptiveColumnSet columnSet, AdaptiveRende
TagContent tag = null;

// Add vertical Separator
if (uiColumnSet.ColumnDefinitions.Count > 0)
if (uiColumnSet.ColumnDefinitions.Count > 0 && (column.Separator || column.Spacing != AdaptiveSpacing.None))
{
if (column.Separator || column.Spacing != AdaptiveSpacing.None)
{
var uiSep = new Grid();
uiSep.Style = context.GetStyle($"Adaptive.VerticalSeparator");

uiSep.VerticalAlignment = VerticalAlignment.Stretch;

int spacing = context.Config.GetSpacing(column.Spacing);
uiSep.Margin = new Thickness(spacing / 2.0, 0, spacing / 2.0, 0);
var uiSep = new Grid();
uiSep.Style = context.GetStyle($"Adaptive.VerticalSeparator");

uiSep.Width = context.Config.Separator.LineThickness;
if (column.Separator && context.Config.Separator.LineColor != null)
{
uiSep.Background = context.GetColorBrush(context.Config.Separator.LineColor);
}
uiSep.VerticalAlignment = VerticalAlignment.Stretch;

tag = new TagContent(uiSep, uiColumnSet);
int spacing = context.Config.GetSpacing(column.Spacing);
uiSep.Margin = new Thickness(spacing / 2.0, 0, spacing / 2.0, 0);

uiColumnSet.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
Grid.SetColumn(uiSep, uiColumnSet.ColumnDefinitions.Count - 1);
uiColumnSet.Children.Add(uiSep);
}
else
uiSep.Width = context.Config.Separator.LineThickness;
if (column.Separator && context.Config.Separator.LineColor != null)
{
tag = new TagContent(null, uiColumnSet);
uiSep.Background = context.GetColorBrush(context.Config.Separator.LineColor);
}

tag = new TagContent(uiSep, uiColumnSet);

uiColumnSet.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
Grid.SetColumn(uiSep, uiColumnSet.ColumnDefinitions.Count - 1);
uiColumnSet.Children.Add(uiSep);
}
else
{
Expand Down
Loading

0 comments on commit 0ede3e0

Please sign in to comment.