Add dynamically resizing label able to fill up horizontal space #1396
Conversation
Deployed to Cloudflare Pages
|
|
(Code mostly extracted from the Pontus-X branch) |
csillag
changed the title
csillag
force-pushed
the
csillag/adaptive-text-shortener
branch
from
2632cce to
68e53c3
Compare
csillag
force-pushed
the
csillag/adaptive-text-shortener
branch
from
68e53c3 to
97fbd82
Compare
csillag
force-pushed
the
csillag/adaptive-text-shortener
branch
from
97fbd82 to
44e0504
Compare
csillag
force-pushed
the
csillag/adaptive-text-shortener
branch
2 times, most recently
from
d2865f0 to
24d07bd
Compare
| } | ||
|
|
||
| export const AccountLink: FC<Props> = ({ scope, address, alwaysTrim }) => { | ||
| export const AccountLink: FC<Props> = ({ scope, address, alwaysTrim, extraTooltip, labelOnly }) => { |
There was a problem hiding this comment.
The problem with the from and to fields is that the auto-trimming only works if no overflow / scrolling is happening in the DOM above the component that is displaying the address. If the overflow is happening in a higher level, then we can't detect it in the adaptive trimmer.
The way to ensure this is to go through the dom level by level, and boxing everything with max-width or similar CSS features. However, here we are inside a table, which doesn't support max-width, as far as I know.
On the short term, I added a switch called alwaysTrimOnTable, which we can set when using the AccountLink inside a table (or similar environments) to disable the adaptive behavior, and fall back to fixed length.
This gets us:
Trimming too much is still better then hiding the stuff in an overflow, I guess.
This could be improved, but I would rather return to this after the new event-related stuff has landed.
There was a problem hiding this comment.
- "Emitting contract" is misbehaving a bit
That one, we can solve easily.
csillag
force-pushed
the
csillag/adaptive-text-shortener
branch
2 times, most recently
from
126be85 to
7ec70ee
Compare
With this, we can adaptively truncate text based on the available space. When truncated, we can display the full version in a tooltip.
csillag
force-pushed
the
csillag/adaptive-text-shortener
branch
from
7ec70ee to
95682bc
Compare
Improve how we use horizontal space. When working with small-ish vertical space, instead of always shortening text to a very short predefined value, try to fill up the available space.
Changes cleared by @donouwens (a while back).
See #1290 for the background and context.
This implementation is using JS code for the adaptive dynamic resizing.
We might want to use a pure-CSS implementation instead if this, for simplicity.