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