github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/CustomNav.tsx (about) 1 import React from "react" 2 import styled from "styled-components" 3 import { 4 ApiButton, 5 ApiButtonType, 6 ApiIcon, 7 buttonsForComponent, 8 UIBUTTON_GLOBAL_COMPONENT_ID, 9 } from "./ApiButton" 10 import { MenuButtonLabeled, MenuButtonMixin } from "./GlobalNav" 11 import { Color, SizeUnit } from "./style-helpers" 12 13 type CustomNavProps = { 14 view: Proto.webviewView 15 } 16 17 const CustomNavButton = styled(ApiButton)` 18 height: 100%; 19 align-items: center; 20 21 button { 22 ${MenuButtonMixin}; 23 height: 100%; 24 box-shadow: unset; 25 justify-content: center; 26 27 &:hover, 28 &:active { 29 box-shadow: unset; 30 } 31 } 32 33 .MuiButton-contained.Mui-disabled { 34 color: ${Color.blue}; 35 background: transparent; 36 } 37 // If there is an options toggle, remove padding between the submit 38 // button and the options button. 39 button:first-child { 40 padding-right: 0px; 41 } 42 // If there is no options toggle, then restore the default padding. 43 button:only-child { 44 padding-right: ${SizeUnit(0.5)}; 45 } 46 .apibtn-label { 47 display: none; 48 } 49 ` 50 51 export function CustomNav(props: CustomNavProps) { 52 const buttons = buttonsForComponent( 53 props.view.uiButtons, 54 ApiButtonType.Global, 55 UIBUTTON_GLOBAL_COMPONENT_ID 56 ).default 57 58 return ( 59 <React.Fragment> 60 {buttons.map((b) => ( 61 <MenuButtonLabeled label={b.spec?.text} key={b.metadata?.name}> 62 <CustomNavButton 63 uiButton={b} 64 variant="contained" 65 aria-label={b.spec?.text} 66 > 67 <ApiIcon 68 iconName={b.spec?.iconName || "smart_button"} 69 iconSVG={b.spec?.iconSVG} 70 /> 71 </CustomNavButton> 72 </MenuButtonLabeled> 73 ))} 74 </React.Fragment> 75 ) 76 }