github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/LogActions.tsx (about) 1 import React, { useEffect } from "react" 2 import { useStorageState } from "react-storage-hooks" 3 import styled from "styled-components" 4 import ClearLogs from "./ClearLogs" 5 import { InstrumentedButton } from "./instrumentedComponents" 6 import { 7 AnimDuration, 8 Color, 9 FontSize, 10 mixinResetButtonStyle, 11 } from "./style-helpers" 12 13 export const LogFontSizeScaleLocalStorageKey = "tilt.global.log-font-scale" 14 export const LogFontSizeScaleCSSProperty = "--log-font-scale" 15 export const LogFontSizeScaleMinimumPercentage = 10 16 17 const LogActionsGroup = styled.div` 18 margin-left: auto; 19 display: flex; 20 flex-direction: row; 21 justify-content: space-between; 22 ` 23 24 const FontSizeControls = styled.div` 25 color: ${Color.gray60}; 26 vertical-align: middle; 27 display: flex; 28 flex-wrap: nowrap; 29 ` 30 31 const FontSizeControlsDivider = styled.div` 32 font-size: ${FontSize.default}; 33 user-select: none; 34 ` 35 36 const FontSizeButton = styled(InstrumentedButton)` 37 ${mixinResetButtonStyle}; 38 color: ${Color.gray60}; 39 transition: color ${AnimDuration.default} ease; 40 padding: 0 4px; 41 user-select: none; 42 43 &:hover { 44 color: ${Color.blue}; 45 } 46 ` 47 48 export const FontSizeDecreaseButton = styled(FontSizeButton)` 49 font-size: ${FontSize.smallest}; 50 ` 51 52 export const FontSizeIncreaseButton = styled(FontSizeButton)` 53 font-size: ${FontSize.default}; 54 ` 55 56 export const LogsFontSize: React.FC = () => { 57 // this uses `useStorageState` directly vs `usePersistentState` wrapper because it's a global setting 58 // (i.e. log zoom applies across all Tiltfiles) 59 const [logFontScale, setLogFontSize] = useStorageState<string>( 60 localStorage, 61 LogFontSizeScaleLocalStorageKey, 62 () => 63 document.documentElement.style.getPropertyValue( 64 LogFontSizeScaleCSSProperty 65 ) 66 ) 67 useEffect(() => { 68 if (!logFontScale?.endsWith("%")) { 69 // somehow an invalid value ended up in local storage - reset to 100% and let effect run again 70 setLogFontSize("100%") 71 return 72 } 73 document.documentElement.style.setProperty( 74 LogFontSizeScaleCSSProperty, 75 logFontScale 76 ) 77 }, [logFontScale]) 78 79 const adjustLogFontScale = (step: number) => { 80 const val = Math.max( 81 parseFloat(logFontScale) + step, 82 LogFontSizeScaleMinimumPercentage 83 ) 84 setLogFontSize(`${val}%`) 85 } 86 87 const zoomStep = 5 88 return ( 89 <FontSizeControls> 90 <FontSizeDecreaseButton 91 aria-label="Decrease log font size" 92 onClick={() => adjustLogFontScale(-zoomStep)} 93 analyticsName="ui.web.zoomLogs" 94 analyticsTags={{ dir: "out" }} 95 > 96 A 97 </FontSizeDecreaseButton> 98 <FontSizeControlsDivider aria-hidden={true}>|</FontSizeControlsDivider> 99 <FontSizeIncreaseButton 100 aria-label="Increase log font size" 101 onClick={() => adjustLogFontScale(zoomStep)} 102 analyticsName="ui.web.zoomLogs" 103 analyticsTags={{ dir: "in" }} 104 > 105 A 106 </FontSizeIncreaseButton> 107 </FontSizeControls> 108 ) 109 } 110 111 export interface LogActionsProps { 112 resourceName: string 113 isSnapshot: boolean 114 } 115 116 const LogActions: React.FC<LogActionsProps> = ({ 117 resourceName, 118 isSnapshot, 119 }) => { 120 return ( 121 <LogActionsGroup> 122 <LogsFontSize /> 123 {isSnapshot || <ClearLogs resourceName={resourceName} />} 124 </LogActionsGroup> 125 ) 126 } 127 128 export default LogActions