Delmepls3 #179
Closed
Delmepls3 #179
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tbg
pushed a commit
that referenced
this pull request
Jun 4, 2021
* CRDB-2271: Truncating long queries with CSS Applying a tried and true hack using `-webkit-line-clamp` to truncate queries in the statements table to a couple of lines followed by an ellipsis. To allow a longer preview, I am applying the same fix to the tooltip, but clamping the lines to 15 (there were around 30 characters per line and design asked for ~425 characters. It's close enough). * Adding truncation to Transactions table Since statements and transactions have enough variation to not be able to make this change at the common table level, I'm adding truncation to the transactions table styles to mirror the change in the statements page table. * Adding trucation to Statement col in Sessions Adding trucation to the Statements column on the Sessions page to be consistent with how statements appear on Statements and Tranactions pages. * Truncating long app names in Statements app filter If a very long name is displayed in the Statements application filter, the name may cause the dropdown to extend outside of the view or at least beyond the table and cause excessive horizontal scrolling. To correct this I have added the `nowrap` option to the `<Text>` component inside of the Dropdown trigger. The "nowrap" prop will constrain the the text to a single line but does not offer a constraint for the width. To constrain the width I have added a local style set to a max-width of `75ch` (75 characters wide). Just a note, that I have used this opportunity to bring in the `<Text>` from `ui-components` to replace the local one here, which was the inspiration for the common component. The width and display of the menu are controlled by the Dropdown component and I didn't want to alter the display of all dropdowns that use that component. So instead I extended the dropdown component to take an additional `itemsClassname` prop to apply a class name to the element rendered for the menu items. This way I can supply another local style to constrain the width of the menu (to `80ch`) and apply text truncation. * Replacing repetitive styles with Sass mixins DRYing up the code a little with two Sass mixins: text-overflow and line-clamp.
tbg
pushed a commit
that referenced
this pull request
Jun 7, 2021
* CRDB-2271: Truncating long queries with CSS Applying a tried and true hack using `-webkit-line-clamp` to truncate queries in the statements table to a couple of lines followed by an ellipsis. To allow a longer preview, I am applying the same fix to the tooltip, but clamping the lines to 15 (there were around 30 characters per line and design asked for ~425 characters. It's close enough). * Adding truncation to Transactions table Since statements and transactions have enough variation to not be able to make this change at the common table level, I'm adding truncation to the transactions table styles to mirror the change in the statements page table. * Adding trucation to Statement col in Sessions Adding trucation to the Statements column on the Sessions page to be consistent with how statements appear on Statements and Tranactions pages. * Truncating long app names in Statements app filter If a very long name is displayed in the Statements application filter, the name may cause the dropdown to extend outside of the view or at least beyond the table and cause excessive horizontal scrolling. To correct this I have added the `nowrap` option to the `<Text>` component inside of the Dropdown trigger. The "nowrap" prop will constrain the the text to a single line but does not offer a constraint for the width. To constrain the width I have added a local style set to a max-width of `75ch` (75 characters wide). Just a note, that I have used this opportunity to bring in the `<Text>` from `ui-components` to replace the local one here, which was the inspiration for the common component. The width and display of the menu are controlled by the Dropdown component and I didn't want to alter the display of all dropdowns that use that component. So instead I extended the dropdown component to take an additional `itemsClassname` prop to apply a class name to the element rendered for the menu items. This way I can supply another local style to constrain the width of the menu (to `80ch`) and apply text truncation. * Replacing repetitive styles with Sass mixins DRYing up the code a little with two Sass mixins: text-overflow and line-clamp.
tbg
pushed a commit
that referenced
this pull request
Sep 17, 2021
* CRDB-2271: Truncating long queries with CSS Applying a tried and true hack using `-webkit-line-clamp` to truncate queries in the statements table to a couple of lines followed by an ellipsis. To allow a longer preview, I am applying the same fix to the tooltip, but clamping the lines to 15 (there were around 30 characters per line and design asked for ~425 characters. It's close enough). * Adding truncation to Transactions table Since statements and transactions have enough variation to not be able to make this change at the common table level, I'm adding truncation to the transactions table styles to mirror the change in the statements page table. * Adding trucation to Statement col in Sessions Adding trucation to the Statements column on the Sessions page to be consistent with how statements appear on Statements and Tranactions pages. * Truncating long app names in Statements app filter If a very long name is displayed in the Statements application filter, the name may cause the dropdown to extend outside of the view or at least beyond the table and cause excessive horizontal scrolling. To correct this I have added the `nowrap` option to the `<Text>` component inside of the Dropdown trigger. The "nowrap" prop will constrain the the text to a single line but does not offer a constraint for the width. To constrain the width I have added a local style set to a max-width of `75ch` (75 characters wide). Just a note, that I have used this opportunity to bring in the `<Text>` from `ui-components` to replace the local one here, which was the inspiration for the common component. The width and display of the menu are controlled by the Dropdown component and I didn't want to alter the display of all dropdowns that use that component. So instead I extended the dropdown component to take an additional `itemsClassname` prop to apply a class name to the element rendered for the menu items. This way I can supply another local style to constrain the width of the menu (to `80ch`) and apply text truncation. * Replacing repetitive styles with Sass mixins DRYing up the code a little with two Sass mixins: text-overflow and line-clamp.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.