web: add zoom in/out for logs#4354
Merged
Merged
Conversation
Add buttons next to "Clear logs" to adjust the font size for logs. At a high-level, a CSS custom property (variable) is used to set a % font size for log lines (the absolute font size is set on the container, and the default property value is 100%). This provides an easy and performant way for JS to adjust the log font size, particularly since the actual log CSS is pure CSS from an SCSS stylesheet, not using `styled-components` in React. The scale value is read from/written to local storage under a global (NOT Tiltfile-namespaced) key so that it's persistent and applies to all Tilt sessions. As a bonus, that means it live synchronizes between tabs which is kinda nifty.
nicks
approved these changes
Mar 22, 2021
Contributor
|
an hero |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Add buttons next to "Clear logs" to adjust the font size for logs.
At a high-level, a CSS custom property (variable) is used to set
a % font size for log lines (the absolute font size is set on the
container, and the default property value is 100%).
This provides an easy and performant way for JS to adjust the log
font size, particularly since the actual log CSS is pure CSS from
an SCSS stylesheet, not using
styled-componentsin React.The scale value is read from/written to local storage under a global
(NOT Tiltfile-namespaced) key so that it's persistent and applies to
all Tilt sessions. As a bonus, that means it live synchronizes between
tabs which is kinda nifty.
Closes #4210.