github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/HelpDialog.tsx (about)

     1  import React from "react"
     2  import styled from "styled-components"
     3  import { ReactComponent as GithubSvg } from "./assets/svg/github.svg"
     4  import { ReactComponent as SlackSvg } from "./assets/svg/slack.svg"
     5  import FloatDialog, { HR } from "./FloatDialog"
     6  import { HelpSearchBar } from "./HelpSearchBar"
     7  import { AnimDuration, Color } from "./style-helpers"
     8  
     9  type props = {
    10    open: boolean
    11    onClose: () => void
    12    anchorEl: Element | null
    13  }
    14  
    15  let ShortcutRow = styled.div`
    16    display: flex;
    17    flex-direction: row;
    18    font-size: 16px;
    19    align-items: center;
    20  `
    21  
    22  let ShortcutKey = styled.div`
    23    text-align: right;
    24    flex-grow: 1;
    25    margin-right: 24px;
    26  `
    27  
    28  let ShortcutBox = styled.div`
    29    display: inline-block;
    30    background: rgba(204, 218, 222, 0.4);
    31    border-radius: 2px;
    32    padding: 0px 6px;
    33    margin: 4px 0;
    34  `
    35  
    36  let ShortcutLabel = styled.div`
    37    text-align: left;
    38  `
    39  
    40  let HelpLink = styled.a`
    41    display: flex;
    42    align-items: center;
    43    text-decoration: none;
    44    transform: color ${AnimDuration.default} ease;
    45  
    46    &:hover {
    47      color: ${Color.gray50};
    48    }
    49  `
    50  
    51  function Shortcut(props: React.PropsWithChildren<{ label: string }>) {
    52    return (
    53      <ShortcutRow>
    54        <ShortcutLabel>{props.label}</ShortcutLabel>
    55        <ShortcutKey>{props.children}</ShortcutKey>
    56      </ShortcutRow>
    57    )
    58  }
    59  
    60  function cmdOrCtrlShortcut(key: string) {
    61    // OS detection is inherently fragile on the web; thankfully, we really only
    62    // care about macOS vs "everything else" and as of macOS 11 (Big Sur), this
    63    // works reliably
    64    const isMac = navigator.platform.indexOf("Mac") != -1
    65  
    66    if (isMac) {
    67      return (
    68        <>
    69          <ShortcutBox>&#8984;</ShortcutBox> + <ShortcutBox>{key}</ShortcutBox>
    70        </>
    71      )
    72    }
    73    return (
    74      <>
    75        <ShortcutBox>Ctrl</ShortcutBox> + <ShortcutBox>{key}</ShortcutBox>
    76      </>
    77    )
    78  }
    79  
    80  export default function HelpDialog(props: props) {
    81    return (
    82      <FloatDialog id="shortcuts" title="Help" {...props}>
    83        <ShortcutRow>
    84          <HelpSearchBar />
    85        </ShortcutRow>
    86        <HR />
    87        <ShortcutRow style={{ marginBottom: "24px" }}>
    88          <HelpLink
    89            href="http://slack.k8s.io/"
    90            target="_blank"
    91            rel="noopener noreferrer"
    92          >
    93            <SlackSvg style={{ marginRight: "8px" }} />
    94            Connect in #tilt on Kubernetes Slack
    95          </HelpLink>
    96        </ShortcutRow>
    97        <ShortcutRow style={{ marginBottom: "8px" }}>
    98          <HelpLink
    99            href="https://github.com/tilt-dev/tilt/issues/new/choose"
   100            target="_blank"
   101            rel="noopener noreferrer"
   102          >
   103            <GithubSvg style={{ marginRight: "8px" }} />
   104            File an Issue
   105          </HelpLink>
   106          <HR />
   107        </ShortcutRow>
   108        <HR />
   109        <ShortcutRow
   110          style={{
   111            textDecoration: "underline",
   112            fontSize: "18px",
   113            marginBottom: "8px",
   114          }}
   115        >
   116          Keyboard shortcuts
   117        </ShortcutRow>
   118        <Shortcut label="Navigate Resource">
   119          <ShortcutBox>j</ShortcutBox> or <ShortcutBox>k</ShortcutBox>
   120        </Shortcut>
   121        <Shortcut label="Trigger rebuild for a resource">
   122          <ShortcutBox>r</ShortcutBox>
   123        </Shortcut>
   124        <Shortcut label="Open Endpoint">
   125          <ShortcutBox>Shift</ShortcutBox> + <ShortcutBox>1</ShortcutBox>,{" "}
   126          <ShortcutBox>2</ShortcutBox> …
   127        </Shortcut>
   128        <Shortcut label="Select Resource Row">
   129          <ShortcutBox>x</ShortcutBox>
   130        </Shortcut>
   131        <Shortcut label="Clear Logs">{cmdOrCtrlShortcut("Backspace")}</Shortcut>
   132        <Shortcut label="Make Snapshot">
   133          <ShortcutBox>s</ShortcutBox>
   134        </Shortcut>
   135        <Shortcut label="Help">
   136          <ShortcutBox>?</ShortcutBox>
   137        </Shortcut>
   138      </FloatDialog>
   139    )
   140  }