From e0adc505dbe4acbaad56db634ed5c8e07a1bff03 Mon Sep 17 00:00:00 2001 From: TechMiX Date: Wed, 9 Dec 2020 01:57:18 +0100 Subject: [PATCH 1/6] add rtl-layout class to base component --- .../components/address/address.component.html | 2 +- .../src/app/components/app/app.component.ts | 2 + .../latest-blocks.component.html | 2 +- .../transactions-list.component.html | 24 ++++++------ frontend/src/styles.scss | 37 +++++++++++++++++++ 5 files changed, 53 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html index 35a02bf38..41728c083 100644 --- a/frontend/src/app/components/address/address.component.html +++ b/frontend/src/app/components/address/address.component.html @@ -1,5 +1,5 @@
-

Address

+

Address

{{ addressString | shortenString : 24 }} {{ addressString }} diff --git a/frontend/src/app/components/app/app.component.ts b/frontend/src/app/components/app/app.component.ts index 59f4fed32..86f244d47 100644 --- a/frontend/src/app/components/app/app.component.ts +++ b/frontend/src/app/components/app/app.component.ts @@ -19,10 +19,12 @@ export class AppComponent implements OnInit { ) { if (this.locale.startsWith('ar') || this.locale.startsWith('fa')) { this.dir = 'rtl'; + this.class = 'rtl-layout'; } } @HostBinding('attr.dir') dir = 'ltr'; + @HostBinding('class') class; @HostListener('document:keydown', ['$event']) handleKeyboardEvents(event: KeyboardEvent) { diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.html b/frontend/src/app/components/latest-blocks/latest-blocks.component.html index 46e043107..5c8853158 100644 --- a/frontend/src/app/components/latest-blocks/latest-blocks.component.html +++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.html @@ -1,5 +1,5 @@
-

Blocks

+

Blocks


diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html index a3af65da1..5ea8bd9b2 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -1,6 +1,6 @@
- + {{ tx.txid | shortenString : 16 }} {{ tx.txid }} @@ -69,32 +69,32 @@ ScriptSig (ASM) - + ScriptSig (HEX) - {{ vin.scriptsig }} + {{ vin.scriptsig }} Witness - {{ vin.witness.join(' ') }} + {{ vin.witness.join(' ') }} P2SH redeem script - + P2WSH witness script - + nSequence - {{ formatHex(vin.sequence) }} + {{ formatHex(vin.sequence) }} Previous output script - {{ vin.prevout.scriptpubkey_type ? ('(' + vin.prevout.scriptpubkey_type + ')') : '' }}" + {{ vin.prevout.scriptpubkey_type ? ('(' + vin.prevout.scriptpubkey_type + ')') : '' }}" @@ -164,19 +164,19 @@ Type - {{ vout.scriptpubkey_type.toUpperCase() }} + {{ vout.scriptpubkey_type.toUpperCase() }} ScriptPubKey (ASM) - + ScriptPubKey (HEX) - {{ vout.scriptpubkey }} + {{ vout.scriptpubkey }} OP_RETURN data - {{ vout.scriptpubkey_asm | hex2ascii }} + {{ vout.scriptpubkey_asm | hex2ascii }} diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index f1a0ab361..43a3ddc47 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -450,3 +450,40 @@ th { .crypto { color: #fa3d3d } .locktime { color: #ff8c00 } .reserved { color: #ff8c00 } + +.rtl-layout { + .arrow { + @extend .arrow; + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + } + + .table td { + text-align: right; + } + + .table th { + text-align: right; + } + + .title-block { + text-align: right; + } + + .mr-3 { + @extend .ml-3; + margin-right: 0 !important; + } + + .mr-1 { + @extend .ml-1; + } + + .float-left { + float: right !important; + } + + .float-right { + float: left !important; + } +} From c4734357c4c3745f40adf7eabd38ef640ba29dc1 Mon Sep 17 00:00:00 2001 From: TechMiX Date: Wed, 9 Dec 2020 02:22:16 +0100 Subject: [PATCH 2/6] add text-align for Details title + swap text-left class with style so that it always remains aligned to left --- .../transaction/transaction.component.html | 2 +- .../transactions-list.component.html | 22 +++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index b48423fad..19645b6b3 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -173,7 +173,7 @@ -

Details

+

Details

diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html index 5ea8bd9b2..44a7133bf 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -69,32 +69,32 @@ - + - + - + - + - + - + - +
ScriptSig (ASM)
ScriptSig (HEX){{ vin.scriptsig }}{{ vin.scriptsig }}
Witness{{ vin.witness.join(' ') }}{{ vin.witness.join(' ') }}
P2SH redeem script
P2WSH witness script
nSequence{{ formatHex(vin.sequence) }}{{ formatHex(vin.sequence) }}
Previous output script{{ vin.prevout.scriptpubkey_type ? ('(' + vin.prevout.scriptpubkey_type + ')') : '' }}"{{ vin.prevout.scriptpubkey_type ? ('(' + vin.prevout.scriptpubkey_type + ')') : '' }}"
@@ -164,19 +164,19 @@ Type - {{ vout.scriptpubkey_type.toUpperCase() }} + {{ vout.scriptpubkey_type.toUpperCase() }} ScriptPubKey (ASM) - + ScriptPubKey (HEX) - {{ vout.scriptpubkey }} + {{ vout.scriptpubkey }} OP_RETURN data - {{ vout.scriptpubkey_asm | hex2ascii }} + {{ vout.scriptpubkey_asm | hex2ascii }} From c1bcf49f37b2dbb0980fd68f8d2aa38484fc3e93 Mon Sep 17 00:00:00 2001 From: TechMiX Date: Wed, 9 Dec 2020 02:23:53 +0100 Subject: [PATCH 3/6] reverse all text-aligns in rtl-layout --- frontend/src/styles.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 43a3ddc47..38e4283a7 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -486,4 +486,12 @@ th { .float-right { float: left !important; } + + .text-left { + text-align: right !important; + } + + .text-right { + text-align: left !important; + } } From e6be450aaacbec705adf0bbdd1f0a7ec8e70ed78 Mon Sep 17 00:00:00 2001 From: TechMiX Date: Wed, 9 Dec 2020 02:33:20 +0100 Subject: [PATCH 4/6] add left-to-right mark character to amount component --- frontend/src/app/components/amount/amount.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/components/amount/amount.component.html b/frontend/src/app/components/amount/amount.component.html index f3e1e1631..713e7a940 100644 --- a/frontend/src/app/components/amount/amount.component.html +++ b/frontend/src/app/components/amount/amount.component.html @@ -6,7 +6,7 @@ Confidential - {{ satoshis / 100000000 | number : digitsInfo }} + ‎{{ satoshis / 100000000 | number : digitsInfo }} L- tBTC From 306197c6e97272e516ab0847381bcbc0aa0a347d Mon Sep 17 00:00:00 2001 From: TechMiX Date: Wed, 9 Dec 2020 21:46:13 +0100 Subject: [PATCH 5/6] fix blockchain scrolling on mobile mode when RTL layout --- frontend/src/app/components/start/start.component.html | 2 +- frontend/src/styles.scss | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/components/start/start.component.html b/frontend/src/app/components/start/start.component.html index 04c1175d0..4ee2258f4 100644 --- a/frontend/src/app/components/start/start.component.html +++ b/frontend/src/app/components/start/start.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 38e4283a7..b8fca1621 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -494,4 +494,8 @@ th { .text-right { text-align: left !important; } + + .bitcoin-block { + direction: rtl; + } } From 95c9b2114988f174434e16c997d09e09b05c6337 Mon Sep 17 00:00:00 2001 From: TechMiX Date: Wed, 9 Dec 2020 21:47:27 +0100 Subject: [PATCH 6/6] add left-to-right mark character to blockchain and mempool block components size --- .../blockchain-blocks/blockchain-blocks.component.html | 2 +- .../app/components/mempool-blocks/mempool-blocks.component.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html index c6de90a50..ee46d0832 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html @@ -12,7 +12,7 @@
{{ block.feeRange[1] | number:'1.0-0' }} - {{ block.feeRange[block.feeRange.length - 1] | number:'1.0-0' }} sat/vB
-
{{ block.size | bytes: 2 }}
+
‎{{ block.size | bytes: 2 }}
{{ i }} transaction diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html index 20d4c9097..cd482a14f 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html @@ -10,7 +10,7 @@
{{ projectedBlock.feeRange[0] | number:'1.0-0' }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:'1.0-0' }} sat/vB
-
{{ projectedBlock.blockSize | bytes: 2 }}
+
‎{{ projectedBlock.blockSize | bytes: 2 }}
{{ i }} transaction