Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Send UX: Too long input placeholder is being cut off #1517

Closed
bitcoinuser opened this issue Sep 25, 2022 · 11 comments
Closed

Send UX: Too long input placeholder is being cut off #1517

bitcoinuser opened this issue Sep 25, 2022 · 11 comments
Labels
enhancement New feature or request frontend All things frontend development related good first issue Good for newcomers hacktoberfest

Comments

@bitcoinuser
Copy link
Contributor

bitcoinuser commented Sep 25, 2022 •
edited by escapedcat
Loading

Describe the bug

Text in Portuguese is cut on send field

Screenshots

To Reproduce

Steps to reproduce the behavior:

  1. Set Portuguese language on Alby and go to Send window

Expected behavior

See all the text or on mouseover see all the text.

@escapedcat comment:

The UX should be changed. Currently the text is an input-placeholder. This should be some sort of hint-text and not a placeholder within the input.

Hint can be added via input-prop

Alby information

  • Alby Version: 1.16.0
@escapedcat escapedcat changed the title Text in Portuguese is cut on send field Send UX: Too long input placeholder is being cut off Sep 26, 2022
@escapedcat escapedcat added enhancement New feature or request good first issue Good for newcomers frontend All things frontend development related labels Sep 26, 2022
@rottingcleaner
Copy link
Contributor

Alternatively we can add the title attribute to the input field. On mouse over the user will see a browser native tooltip with the full text of the input-placeholder. Easy to implement.

Screenshot 2022-10-07 at 18 35 26 (1)

@vaibhavgarg237 vaibhavgarg237 mentioned this issue Oct 8, 2022
Merged
3 tasks
@escapedcat
Copy link
Contributor

escapedcat commented Oct 9, 2022 •
edited
Loading

Alternatively we can add the title attribute to the input field. On mouse over the user will see a browser native tooltip with the full text of the input-placeholder. Easy to implement.

Yeah, but I don't think this is a common or learned UX pattern we should use. If you want to "hide" hint-texts usually people use some sort of "i"-icon with a hover, but I don't think we currently need that. A clear text below an input does the job. What do you think?

The placeholder should be changed to what will be input there i.e. LNURL.../lightning-address for example. We can think about the actual text. /cc @reneaaron

@reneaaron
Copy link
Contributor

Can you post a screenshot of how that would look?

@escapedcat
Copy link
Contributor

escapedcat commented Oct 9, 2022 •
edited
Loading

image
I guess we have the chance to improve label, placeholder and hint.

vaibhavgarg237 added a commit to vaibhavgarg237/lightning-browser-extension that referenced this issue Oct 10, 2022
@vaibhavgarg237
fix: input placeholder got cut (send) getAlby#1517
2279ee8
@vaibhavgarg237
Copy link
Contributor

Just for reference
image

@vaibhavgarg237
Copy link
Contributor

vaibhavgarg237 commented Oct 10, 2022 •
edited
Loading

I feel in the case of placeholder text, we can indicate the user for action i.e. "Paste here...". Like below-attached screenshot. What do you think?
Or "Your destination" ?

@escapedcat I opened a PR #1591, with this change

image

@escapedcat
Copy link
Contributor

/cc @dvoroneca

@reneaaron
Copy link
Contributor

What do you think of this?

  • Label: Recipient
  • Placeholder: ``
  • Helptext: Invoice, Lightning Address or LNURL

@vaibhavgarg237
Copy link
Contributor

What do you think of this?

  • Label: Recipient
  • Placeholder: ``
  • Helptext: Invoice, Lightning Address or LNURL

TBH, the empty placeholder seems slightly odd, although this label and hint look good. Can we add "Paste here" or some similar text here?

image

@reneaaron
Copy link
Contributor

I'm okay with the empty field, to me that seems fine. I don't feel like every field needs to have a placeholder.
Paste here feels wrong to me as you can also type a lightning address.

vaibhavgarg237 added a commit to vaibhavgarg237/lightning-browser-extension that referenced this issue Oct 16, 2022
@vaibhavgarg237
fix: input placeholder got cut (send) getAlby#1517
269837f
@vaibhavgarg237
Copy link
Contributor

Okay. I have updated PR #1591 with this change & test

escapedcat added a commit that referenced this issue Oct 17, 2022
@escapedcat
Merge pull request #1591 from vaibhavgarg237/showFullText
42ad835 
fix: input placeholder got cut (send) #1517
bumi added a commit that referenced this issue Oct 20, 2022
@bumi
Merge branch 'master' into feature/lnc-web
2b9e563 
# By escapedcat (9) and others
# Via GitHub (13) and René Aaron (1)
* master:
  fix: bump version to v1.18.0
  Nostr integration (#1440)
  fix(connectors): lnbits - avoid balance with decimal places
  refactor: clean up non-async usage
  refactor: clean up non-async usage
  refactor: clean up non-async usage
  refactor: remove redundent code
  New build message
  fix(connectors): lnbits incoming payments shows outgoing ones as well #1634
  style: prettier
  Translated using Weblate (Portuguese (Brazil))
  chore: relax node version dependency
  refactor(connectors): lnd incoming tx order #1625
  fix(connectors): lndhub incoming tx order #1625
  Update i18next-browser-languagedetector to version 6.1.8
  fix: input placeholder got cut (send) #1517
  Update i18next to version 21.10.0
  Update all development Yarn dependencies (2022-10-15)
  fix(lnurlpay): disable input fields buttons #1572
  fix: truncate account title

# Conflicts:
#	src/extension/background-script/router.ts
#	src/extension/content-script/onend.js
@escapedcat escapedcat mentioned this issue Oct 22, 2022
Closed
@escapedcat escapedcat mentioned this issue Feb 5, 2023
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request frontend All things frontend development related good first issue Good for newcomers hacktoberfest
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@escapedcat @bitcoinuser @vaibhavgarg237 @reneaaron @rottingcleaner