Skip to content

Commit

Permalink
feat: Swap first and third columns when direction is rtl (#496)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DenverCoder1
DenverCoder1 authored Apr 17, 2023
1 parent ac775e9 commit e08a590
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 26 deletions.
32 changes: 19 additions & 13 deletions src/card.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,12 @@ function generateCard(array $stats, array $params = null): string
$centerOffset = $cardWidth / 2;
$thirdColumnOffset = ($cardWidth * 5) / 6;

// if direction is rtl, swap first and third column offsets
if ($direction === "rtl") {
$firstColumnOffset = ($cardWidth * 5) / 6;
$thirdColumnOffset = $cardWidth / 6;
}

// Set Background
$backgroundParts = explode(",", $theme["background"] ?? "");
$backgroundIsGradient = count($backgroundParts) >= 3;
Expand Down Expand Up @@ -433,76 +439,76 @@ function generateCard(array $stats, array $params = null): string
<line x1='{$firstBarOffset}' y1='28' x2='{$firstBarOffset}' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='{$theme["stroke"]}' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
</g>
<g style='isolation: isolate'>
<!-- Total Contributions Big Number -->
<!-- Total Contributions big number -->
<g transform='translate({$firstColumnOffset},48)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["sideNums"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>
{$totalContributions}
</text>
</g>
<!-- Total Contributions Label -->
<!-- Total Contributions label -->
<g transform='translate({$firstColumnOffset},84)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["sideLabels"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.7s'>
{$totalContributionsText}
</text>
</g>
<!-- total contributions range -->
<!-- Total Contributions range -->
<g transform='translate({$firstColumnOffset},114)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["dates"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.8s'>
{$totalContributionsRange}
</text>
</g>
</g>
<g style='isolation: isolate'>
<!-- Current Streak Big Number -->
<!-- Current Streak big number -->
<g transform='translate({$centerOffset},48)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["currStreakNum"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='animation: currstreak 0.6s linear forwards'>
{$currentStreak}
</text>
</g>
<!-- Current Streak Label -->
<!-- Current Streak label -->
<g transform='translate({$centerOffset},108)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["currStreakLabel"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='700' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>
{$currentStreakText}
</text>
</g>
<!-- Current Streak Range -->
<!-- Current Streak range -->
<g transform='translate({$centerOffset},145)'>
<text x='0' y='21' stroke-width='0' text-anchor='middle' fill='{$theme["dates"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>
{$currentStreakRange}
</text>
</g>
<!-- ring around number -->
<!-- Ring around number -->
<g mask='url(#mask_out_ring_behind_fire)'>
<circle cx='{$centerOffset}' cy='71' r='40' fill='none' stroke='{$theme["ring"]}' stroke-width='5' style='opacity: 0; animation: fadein 0.5s linear forwards 0.4s'></circle>
</g>
<!-- fire icon -->
<!-- Fire icon -->
<g transform='translate({$centerOffset}, 19.5)' stroke-opacity='0' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>
<path d='M -12 -0.5 L 15 -0.5 L 15 23.5 L -12 23.5 L -12 -0.5 Z' fill='none'/>
<path d='M 1.5 0.67 C 1.5 0.67 2.24 3.32 2.24 5.47 C 2.24 7.53 0.89 9.2 -1.17 9.2 C -3.23 9.2 -4.79 7.53 -4.79 5.47 L -4.76 5.11 C -6.78 7.51 -8 10.62 -8 13.99 C -8 18.41 -4.42 22 0 22 C 4.42 22 8 18.41 8 13.99 C 8 8.6 5.41 3.79 1.5 0.67 Z M -0.29 19 C -2.07 19 -3.51 17.6 -3.51 15.86 C -3.51 14.24 -2.46 13.1 -0.7 12.74 C 1.07 12.38 2.9 11.53 3.92 10.16 C 4.31 11.45 4.51 12.81 4.51 14.2 C 4.51 16.85 2.36 19 -0.29 19 Z' fill='{$theme["fire"]}' stroke-opacity='0'/>
</g>
</g>
<g style='isolation: isolate'>
<!-- Longest Streak Big Number -->
<!-- Longest Streak big number -->
<g transform='translate({$thirdColumnOffset},48)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["sideNums"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.2s'>
{$longestStreak}
</text>
</g>
<!-- Longest Streak Label -->
<!-- Longest Streak label -->
<g transform='translate({$thirdColumnOffset},84)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["sideLabels"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.3s'>
{$longestStreakText}
</text>
</g>
<!-- Longest Streak Range -->
<!-- Longest Streak range -->
<g transform='translate({$thirdColumnOffset},114)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["dates"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.4s'>
{$longestStreakRange}
Expand Down Expand Up @@ -553,14 +559,14 @@ function generateErrorCard(string $message, array $params = null): string
<rect stroke='{$theme["border"]}' fill='{$theme["background"]}' rx='{$borderRadius}' x='0.5' y='0.5' width='{$rectWidth}' height='194'/>
</g>
<g style='isolation: isolate'>
<!-- Error Label -->
<!-- Error lable -->
<g transform='translate({$centerOffset},108)'>
<text x='0' y='50' dy='0.25em' stroke-width='0' text-anchor='middle' fill='{$theme["sideLabels"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal'>
{$message}
</text>
</g>
<!-- mask for background behind face -->
<!-- Mask for background behind face -->
<defs>
<mask id='cut-off-area'>
<rect x='0' y='0' width='500' height='500' fill='white' />
Expand Down
18 changes: 18 additions & 0 deletions tests/RenderTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,4 +231,22 @@ public function testCardWidth(): void
$this->assertStringContainsString("<g transform='translate(300,", $render);
$this->assertStringContainsString("<g transform='translate(500,", $render);
}

/**
* Test first and third columns swapped when direction is rtl
*/
public function testFirstAndThirdColumnsSwappedWhenDirectionIsRtl(): void
{
$this->testParams["locale"] = "he";
$render = generateOutput($this->testStats, $this->testParams)["body"];
$renderCollapsedSpaces = preg_replace("/(\s)\s*/", '$1', $render);
$this->assertStringContainsString(
"<!-- Total Contributions big number -->\n<g transform='translate(412.5,48)'>",
$renderCollapsedSpaces
);
$this->assertStringContainsString(
"<!-- Longest Streak big number -->\n<g transform='translate(82.5,48)'>",
$renderCollapsedSpaces
);
}
}
22 changes: 11 additions & 11 deletions tests/expected/test_card.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions tests/expected/test_error_card.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e08a590

Please sign in to comment.