[Qt]: Improve sendcoinsdialog readability #13158

marcoagner · 2018-05-03T14:19:25Z

I'm addressing two (probably duplicate) issues: #11606 and #10613.

Some points worth noting:

I've tried to balance the proposed changes on both issues without going too far and remaining a bit conservative. It will be easier to improve based on suggestions where necessary.
I preferred to maintain a layout that doesn't ask for an address truncation because, in my view, this wallet should be conservative on this.
I didn't follow the idea of aligning the amounts to the right for finding it more natural (and minimalist) to read the information without having to map alignments. Additionally, that approach seems to need more <hr />'s (or similar) in order to help the user to map information, which ended up cluttering the box too much (specially with multiple recipients). Thus, I preferred to just give some more space between recipients. Let me know if there are better ideas on this.

Visually, I went from this (current):

To this:

As a side note, while doing this, I thought about a better way to show fees and found there's already a PR on this (#12189) and thought it is

maflcko · 2018-05-03T14:51:11Z

Thanks for working on this. I haven't looked at the code, but the screenshots look good.

marcoagner · 2018-05-03T15:04:00Z

src/qt/sendcoinsdialog.cpp

@@ -337,19 +349,10 @@ void SendCoinsDialog::on_sendButton_clicked()
        if(u != model->getOptionsModel()->getDisplayUnit())
            alternativeUnits.append(BitcoinUnits::formatHtmlWithUnit(u, totalAmount));
    }
-    questionString.append(tr("Total Amount %1")
+    questionString.append(tr("<b>Total Amount</b>: <b>%1</b>")


This line may seem weird. But I made this line's bold this way to match the bold on "Transaction fee" line where the colon is not inside bold tag since I didn't think it was good to bold the entire "Transaction fee" line and there is more text between "Transaction fee" and the colon. Maybe someone has a better alternative.

We should try, if possible, to keep the html/structure out of the translation strings, to make it easier for translators.
For example here it would be better to do this:

questionString.append("<b>%1</b>: <b>%2</b>".arg("Total Amount") .arg(...))

(this arises in a few other places as well)

laanwj · 2018-05-07T12:18:19Z

Concept ACK

jonasschnelli

Concept ACK
Build is here:
https://bitcoin.jonasschnelli.ch/build/597

jonasschnelli · 2018-05-07T12:18:27Z

src/qt/sendcoinsdialog.cpp

        }

        formatted.append(recipientElement);
    }

    QString questionString = tr("Are you sure you want to send?");
-    questionString.append("<br /><br />%1");
+    questionString.append(tr("<br /><span style='font-size:10pt;'>Please, review your transaction.</span><br />%1"));


Please extract the translation part so translator do not have to deal with html tags, etc.

jonasschnelli · 2018-05-07T12:18:36Z

src/qt/sendcoinsdialog.cpp

-        questionString.append(BitcoinUnits::formatHtmlWithUnit(model->getOptionsModel()->getDisplayUnit(), txFee));
-        questionString.append("</span> ");
-        questionString.append(tr("added as transaction fee"));
+        questionString.append(tr("<hr /><b>Transaction fee</b>"));


jonasschnelli · 2018-05-07T12:19:16Z

src/qt/sendcoinsdialog.cpp

-    questionString.append("</span>");
-
+    questionString.append(QString("<br /><span style='font-size:10pt; font-weight:normal;'>(=%1)</span>")
+        .arg(alternativeUnits.join(" " + tr("or "))));


use tr("or")+" "?

marcoagner · 2018-05-07T18:41:54Z

Thank you all for taking the time to review this.
As pointed, I extracted the html tags from translator.
The branch is rebased with master; should I squash the commits?
Let me know if you see something else I should address, thanks.

maflcko · 2018-05-08T16:09:19Z

utACK 617dfa98ce16d461009cb5e9eb207c0e0eae30fe Please squash your commits according to https://github.com/bitcoin/bitcoin/blob/master/CONTRIBUTING.md#squashing-commits

[qt]: extracts html tags from translator. [qt]: removes missed tr() call.

marcoagner · 2018-05-08T20:31:30Z

Done; commits squashed.

maflcko · 2018-05-08T20:49:15Z

utACK f08a385

maflcko · 2018-05-10T21:10:47Z

@jonasschnelli Mind to do a build here?

jonasschnelli · 2018-05-11T06:57:56Z

build: https://bitcoin.jonasschnelli.ch/build/605

f08a385 [qt]: changes sendcoinsdialog's box layout for improved readability. (marcoagner) Pull request description: I'm addressing two (probably duplicate) issues: #11606 and #10613. Some points worth noting: - I've tried to balance the proposed changes on both issues without going too far and remaining a bit conservative. It will be easier to improve based on suggestions where necessary. - I preferred to maintain a layout that doesn't ask for an address truncation because, in my view, this wallet should be conservative on this. - I didn't follow the idea of aligning the amounts to the right for finding it more natural (and minimalist) to read the information without having to map alignments. Additionally, that approach seems to need more `<hr />`'s (or similar) in order to help the user to map information, which ended up cluttering the box too much (specially with multiple recipients). Thus, I preferred to just give some more space between recipients. Let me know if there are better ideas on this. Visually, I went from this (current): ![screenshot from 2018-05-03 15-11-30](https://user-images.githubusercontent.com/5016303/39581859-16abec82-4edc-11e8-86d3-eb722f8a7ed6.png) To this: ![screenshot from 2018-05-03 15-15-41](https://user-images.githubusercontent.com/5016303/39582066-96856adc-4edc-11e8-804c-468aec44cc8d.png) As a side note, while doing this, I thought about a better way to show fees and found there's already a PR on this (#12189) and thought it is Tree-SHA512: e94b740fab6c1babd853a97be65c3b6f86ec174c975a926fde66b147f7a47e0cf0fa10f7255ba92aaba68c76a80dde8c688008179a34705a9799bf24d3c5cd46

jonasschnelli · 2018-05-16T07:12:12Z

Post merge tested ACK f08a385

Summary: f08a385 [qt]: changes sendcoinsdialog's box layout for improved readability. (marcoagner) Pull request description: I'm addressing two (probably duplicate) issues: bitcoin/bitcoin#11606 and bitcoin/bitcoin#10613. Some points worth noting: - I've tried to balance the proposed changes on both issues without going too far and remaining a bit conservative. It will be easier to improve based on suggestions where necessary. - I preferred to maintain a layout that doesn't ask for an address truncation because, in my view, this wallet should be conservative on this. - I didn't follow the idea of aligning the amounts to the right for finding it more natural (and minimalist) to read the information without having to map alignments. Additionally, that approach seems to need more `<hr />`'s (or similar) in order to help the user to map information, which ended up cluttering the box too much (specially with multiple recipients). Thus, I preferred to just give some more space between recipients. Let me know if there are better ideas on this. Visually, I went from this (current): ![screenshot from 2018-05-03 15-11-30](https://user-images.githubusercontent.com/5016303/39581859-16abec82-4edc-11e8-86d3-eb722f8a7ed6.png) To this: ![screenshot from 2018-05-03 15-15-41](https://user-images.githubusercontent.com/5016303/39582066-96856adc-4edc-11e8-804c-468aec44cc8d.png) As a side note, while doing this, I thought about a better way to show fees and found there's already a PR on this (bitcoin/bitcoin#12189) and thought it is Tree-SHA512: e94b740fab6c1babd853a97be65c3b6f86ec174c975a926fde66b147f7a47e0cf0fa10f7255ba92aaba68c76a80dde8c688008179a34705a9799bf24d3c5cd46 Backport of Core PR13158 bitcoin/bitcoin#13158 Test Plan: make check bitcoin-qt -> Send -> View confirmation window Before: {F4069070} After: {F4069069} Reviewers: deadalnix, Fabien, jasonbcox, O1 Bitcoin ABC, #bitcoin_abc Reviewed By: deadalnix, Fabien, O1 Bitcoin ABC, #bitcoin_abc Differential Revision: https://reviews.bitcoinabc.org/D4154

f08a385 [qt]: changes sendcoinsdialog's box layout for improved readability. (marcoagner) Pull request description: I'm addressing two (probably duplicate) issues: bitcoin#11606 and bitcoin#10613. Some points worth noting: - I've tried to balance the proposed changes on both issues without going too far and remaining a bit conservative. It will be easier to improve based on suggestions where necessary. - I preferred to maintain a layout that doesn't ask for an address truncation because, in my view, this wallet should be conservative on this. - I didn't follow the idea of aligning the amounts to the right for finding it more natural (and minimalist) to read the information without having to map alignments. Additionally, that approach seems to need more `<hr />`'s (or similar) in order to help the user to map information, which ended up cluttering the box too much (specially with multiple recipients). Thus, I preferred to just give some more space between recipients. Let me know if there are better ideas on this. Visually, I went from this (current): ![screenshot from 2018-05-03 15-11-30](https://user-images.githubusercontent.com/5016303/39581859-16abec82-4edc-11e8-86d3-eb722f8a7ed6.png) To this: ![screenshot from 2018-05-03 15-15-41](https://user-images.githubusercontent.com/5016303/39582066-96856adc-4edc-11e8-804c-468aec44cc8d.png) As a side note, while doing this, I thought about a better way to show fees and found there's already a PR on this (bitcoin#12189) and thought it is Tree-SHA512: e94b740fab6c1babd853a97be65c3b6f86ec174c975a926fde66b147f7a47e0cf0fa10f7255ba92aaba68c76a80dde8c688008179a34705a9799bf24d3c5cd46

fanquake added the GUI label May 3, 2018

marcoagner changed the title ~~[qt]: Improve sendcoinsdialog readability~~ [Qt]: Improve sendcoinsdialog readability May 3, 2018

marcoagner commented May 3, 2018

View reviewed changes

jonasschnelli suggested changes May 7, 2018

View reviewed changes

[qt]: changes sendcoinsdialog's box layout for improved readability.

f08a385

[qt]: extracts html tags from translator. [qt]: removes missed tr() call.

maflcko merged commit f08a385 into bitcoin:master May 14, 2018

flack mentioned this pull request May 15, 2018

Improve layout of transaction confirmation dialog #11606

Closed

Bushstar mentioned this pull request May 16, 2018

commits from bitcoin/master FeatherCoin/Feathercoin#332

Merged

marcoagner deleted the improve_sendcoinsdialog_readability branch July 19, 2018 15:30

bitcoin locked as resolved and limited conversation to collaborators Sep 8, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Qt]: Improve sendcoinsdialog readability #13158

[Qt]: Improve sendcoinsdialog readability #13158

marcoagner commented May 3, 2018 •

edited

maflcko commented May 3, 2018

marcoagner May 3, 2018 •

edited

laanwj May 7, 2018

laanwj commented May 7, 2018

jonasschnelli left a comment

jonasschnelli May 7, 2018

jonasschnelli May 7, 2018

jonasschnelli May 7, 2018

marcoagner commented May 7, 2018 •

edited

maflcko commented May 8, 2018

marcoagner commented May 8, 2018 •

edited

maflcko commented May 8, 2018

maflcko commented May 10, 2018

jonasschnelli commented May 11, 2018

jonasschnelli commented May 16, 2018

[Qt]: Improve sendcoinsdialog readability #13158

[Qt]: Improve sendcoinsdialog readability #13158

Conversation

marcoagner commented May 3, 2018 • edited

maflcko commented May 3, 2018

marcoagner May 3, 2018 • edited

Choose a reason for hiding this comment

laanwj May 7, 2018

Choose a reason for hiding this comment

laanwj commented May 7, 2018

jonasschnelli left a comment

Choose a reason for hiding this comment

jonasschnelli May 7, 2018

Choose a reason for hiding this comment

jonasschnelli May 7, 2018

Choose a reason for hiding this comment

jonasschnelli May 7, 2018

Choose a reason for hiding this comment

marcoagner commented May 7, 2018 • edited

maflcko commented May 8, 2018

marcoagner commented May 8, 2018 • edited

maflcko commented May 8, 2018

maflcko commented May 10, 2018

jonasschnelli commented May 11, 2018

jonasschnelli commented May 16, 2018

marcoagner commented May 3, 2018 •

edited

marcoagner May 3, 2018 •

edited

marcoagner commented May 7, 2018 •

edited

marcoagner commented May 8, 2018 •

edited