Merge pull request #6470 from beganovich/v5-627

Right-to-left support for invoices
This commit is contained in:
David Bomba 2021-08-17 18:37:15 +10:00 committed by GitHub
commit fffbc5544b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 51 additions and 37 deletions

View File

@ -450,7 +450,7 @@ class Design extends BaseDesign
['element' => 'img', 'properties' => ['src' => '$invoiceninja.whitelabel', 'style' => 'height: 2.5rem;', 'hidden' => $this->entity->user->account->isPaid() ? 'true' : 'false', 'id' => 'invoiceninja-whitelabel-logo']], ['element' => 'img', 'properties' => ['src' => '$invoiceninja.whitelabel', 'style' => 'height: 2.5rem;', 'hidden' => $this->entity->user->account->isPaid() ? 'true' : 'false', 'id' => 'invoiceninja-whitelabel-logo']],
]], ]],
]], ]],
['element' => 'div', 'properties' => ['class' => 'totals-table-right-side'], 'elements' => []], ['element' => 'div', 'properties' => ['class' => 'totals-table-right-side', 'dir' => '$dir'], 'elements' => []],
]; ];
if ($this->type == 'delivery_note') { if ($this->type == 'delivery_note') {

View File

@ -433,6 +433,9 @@ class HtmlEngine
$data['$paymentLink'] = ['value' => '<a class="button" href="'.$this->invitation->getLink().'">'.ctrans('texts.view_payment').'</a>', 'label' => ctrans('texts.view_payment')]; $data['$paymentLink'] = ['value' => '<a class="button" href="'.$this->invitation->getLink().'">'.ctrans('texts.view_payment').'</a>', 'label' => ctrans('texts.view_payment')];
$data['$portalButton'] = &$data['$paymentLink']; $data['$portalButton'] = &$data['$paymentLink'];
$data['$dir'] = ['value' => optional($this->client->language())->locale === 'ar' ? 'rtl' : 'ltr', 'label' => ''];
$data['$dir_text_align'] = ['value' => optional($this->client->language())->locale === 'ar' ? 'right' : 'left', 'label' => ''];
$arrKeysLength = array_map('strlen', array_keys($data)); $arrKeysLength = array_map('strlen', array_keys($data));
array_multisort($arrKeysLength, SORT_DESC, $data); array_multisort($arrKeysLength, SORT_DESC, $data);

View File

@ -156,7 +156,7 @@
} }
#table-totals>.totals-table-right-side>*> :nth-child(1) { #table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left; text-align: "$dir_text_align";
margin-top: .75rem; margin-top: .75rem;
} }
@ -305,7 +305,7 @@
<div class="entity-details-wrapper-right-side"> <div class="entity-details-wrapper-right-side">
<div class="entity-details-wrapper"> <div class="entity-details-wrapper">
<table id="entity-details"></table> <table id="entity-details" dir="$dir"></table>
</div> </div>
</div> </div>
</div> </div>

View File

@ -193,7 +193,7 @@
} }
#table-totals>.totals-table-right-side>*> :nth-child(1) { #table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left; text-align: "$dir_text_align";
margin-top: .75rem; margin-top: .75rem;
} }
@ -293,7 +293,7 @@
<div id="client-details"></div> <div id="client-details"></div>
<div class="entity-details-wrapper"> <div class="entity-details-wrapper">
<table id="entity-details" cellspacing="0"></table> <table id="entity-details" cellspacing="0" dir="$dir"></table>
</div> </div>
</div> </div>

View File

@ -156,7 +156,7 @@
} }
#table-totals>.totals-table-right-side>*> :nth-child(1) { #table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left; text-align: "$dir_text_align";
margin-top: .75rem; margin-top: .75rem;
} }
@ -248,7 +248,7 @@
<p class="entity-label">$entity_label</p> <p class="entity-label">$entity_label</p>
<div class="client-and-entity-wrapper"> <div class="client-and-entity-wrapper">
<table id="entity-details" cellspacing="0"></table> <table id="entity-details" cellspacing="0" dir="$dir"></table>
<div id="client-details"></div> <div id="client-details"></div>
</div> </div>

View File

@ -158,7 +158,7 @@
} }
#table-totals>.totals-table-right-side>*> :nth-child(1) { #table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left; text-align: "$dir_text_align";
margin-top: .75rem; margin-top: .75rem;
} }
@ -258,7 +258,7 @@
<span>#$entity_number</span> <span>#$entity_number</span>
</h1> </h1>
<table id="entity-details" cellspacing="0"></table> <table id="entity-details" cellspacing="0" dir="$dir"></table>
</div> </div>
<table id="product-table" cellspacing="0"></table> <table id="product-table" cellspacing="0"></table>

View File

@ -152,7 +152,7 @@
} }
#table-totals>.totals-table-right-side>*> :nth-child(1) { #table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left; text-align: "$dir_text_align";
margin-top: .75rem; margin-top: .75rem;
} }
@ -261,7 +261,7 @@
<div class="wrapper-right-side"> <div class="wrapper-right-side">
<h2 class="wrapper-info-text">$details_label</h2> <h2 class="wrapper-info-text">$details_label</h2>
<table id="entity-details" cellspacing="0"></table> <table id="entity-details" cellspacing="0" dir="$dir"></table>
</div> </div>
</div> </div>

View File

@ -167,7 +167,7 @@
} }
#table-totals>.totals-table-right-side>*> :nth-child(1) { #table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left; text-align: "$dir_text_align";
margin-top: .75rem; margin-top: .75rem;
} }
@ -213,6 +213,16 @@
margin-bottom: 0; margin-bottom: 0;
} }
.entity-details-wrapper > * {
direction: $dir;
}
.entity-details-wrapper {
display: flex;
flex-wrap: wrap;
direction: $dir;
}
/** Useful snippets, uncomment to enable. **/ /** Useful snippets, uncomment to enable. **/
/** Hide company logo **/ /** Hide company logo **/
@ -271,30 +281,31 @@
<h1 class="entity-label">$entity_label</h1> <h1 class="entity-label">$entity_label</h1>
<div class="entity-details-wrapper"> <div class="entity-details-wrapper">
<span> <div>
<span <span class="entity-property-label" data-element="entity-details-wrapper-invoice-number-label">
class="entity-property-label" $entity_number_label:
data-element="entity-details-wrapper-invoice-number-label"
>$entity_number_label:</span
>
<span class="entity-property-value">$entity_number</span>
</span> </span>
<span> <span class="entity-property-value">$entity_number</span>
</div>
<div>
<span class="entity-property-label">$date_label:</span> <span class="entity-property-label">$date_label:</span>
<span class="entity-property-value">$date</span> <span class="entity-property-value">$date</span>
</span> </div>
<span>
<div>
<span class="entity-property-label">$payment_due_label:</span> <span class="entity-property-label">$payment_due_label:</span>
<span class="entity-property-value">$payment_due</span> <span class="entity-property-value">$payment_due</span>
</span> </div>
<span>
<div>
<span class="entity-property-label">$amount_due_label:</span> <span class="entity-property-label">$amount_due_label:</span>
<span <span
class="entity-property-value" class="entity-property-value"
data-element="entity-details-wrapper-amount-due" data-element="entity-details-wrapper-amount-due"
>$amount_due</span >$amount_due</span
> >
</span> </div>
</div> </div>
<table id="product-table" cellspacing="0"></table> <table id="product-table" cellspacing="0"></table>

View File

@ -189,7 +189,7 @@
} }
#table-totals>.totals-table-right-side>*> :nth-child(1) { #table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left; text-align: "$dir_text_align";
margin-top: .75rem; margin-top: .75rem;
} }
@ -232,7 +232,7 @@
[data-ref="total_table-footer"] { [data-ref="total_table-footer"] {
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 2rem margin-bottom: 2rem;
} }
/** Repeating header & footer styling. */ /** Repeating header & footer styling. */
@ -307,7 +307,7 @@
<td> <td>
<div class="header-container" id="header"> <div class="header-container" id="header">
<h1 class="company-name">$company.name</h1> <h1 class="company-name">$company.name</h1>
<table id="entity-details" cellspacing="0"></table> <table id="entity-details" cellspacing="0" dir="$dir"></table>
</div> </div>
</td> </td>
</tr> </tr>

View File

@ -132,7 +132,7 @@
} }
#table-totals>.totals-table-right-side>*> :nth-child(1) { #table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left; text-align: "$dir_text_align";
margin-top: .75rem; margin-top: .75rem;
} }
@ -223,7 +223,7 @@
alt="$company.name logo" alt="$company.name logo"
/> />
<table id="entity-details" cellspacing="0"></table> <table id="entity-details" cellspacing="0" dir="$dir"></table>
</div> </div>
</div> </div>

View File

@ -184,7 +184,7 @@
} }
#table-totals>.totals-table-right-side>*> :nth-child(1) { #table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left; text-align: "$dir_text_align";
margin-top: .75rem; margin-top: .75rem;
} }
@ -301,7 +301,7 @@
<div></div> <div></div>
<div class="entity-details-wrapper"> <div class="entity-details-wrapper">
<table id="entity-details" cellspacing="0"></table> <table id="entity-details" cellspacing="0" dir="$dir"></table>
</div> </div>
</div> </div>

View File

@ -190,7 +190,7 @@
} }
#table-totals>.totals-table-right-side>*> :nth-child(1) { #table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left; text-align: "$dir_text_align";
padding: 7px; padding: 7px;
} }
@ -278,15 +278,15 @@
<img class="company-logo" src="$company.logo" <img class="company-logo" src="$company.logo"
alt="$company.name logo"> alt="$company.name logo">
<div class="top-right-side-section"> <div class="top-right-side-section">
<section> <div dir="$dir">
<span class="header-payment-due-label">$payment_due_label:</span> <span class="header-payment-due-label">$payment_due_label:</span>
<span>$payment_due</span> <span>$payment_due</span>
</section> </div>
<section> <div dir="$dir">
<span class="header-amount-due-label">$amount_due_label:</span> <span class="header-amount-due-label">$amount_due_label:</span>
<span class="header-amount-due-value">$amount_due</span> <span class="header-amount-due-value">$amount_due</span>
</section> </div>
</div> </div>
</div> </div>
</div> </div>