github.com/tilt-dev/tilt@v0.36.0/web/src/OverviewTablePane.tsx (about)

     1  import React from "react"
     2  import styled from "styled-components"
     3  import HeaderBar, { HeaderBarPage } from "./HeaderBar"
     4  import OverviewTable from "./OverviewTable"
     5  import { OverviewTableBulkActions } from "./OverviewTableBulkActions"
     6  import { OverviewTableDisplayOptions } from "./OverviewTableDisplayOptions"
     7  import { ResourceNameFilter } from "./ResourceNameFilter"
     8  import StarredResourceBar, {
     9    starredResourcePropsFromView,
    10  } from "./StarredResourceBar"
    11  import { Color, SizeUnit, Width, ZIndex } from "./style-helpers"
    12  
    13  type OverviewTablePaneProps = {
    14    view: Proto.webviewView
    15    isSocketConnected: boolean
    16  }
    17  
    18  let OverviewTablePaneStyle = styled.div`
    19    display: flex;
    20    flex-direction: column;
    21    width: 100%;
    22    height: 100vh;
    23    background-color: ${Color.gray20};
    24  `
    25  
    26  const OverviewTableStickyNav = styled.div`
    27    background-color: ${Color.gray20};
    28    position: sticky;
    29    top: 0;
    30    z-index: ${ZIndex.TableStickyHeader};
    31  `
    32  
    33  const OverviewTableMenu = styled.section`
    34    display: flex;
    35    flex-direction: row;
    36    align-items: center;
    37    margin-left: auto;
    38    margin-right: auto;
    39    /* Max and min width are based on fixed table layout and column widths */
    40    max-width: 2000px;
    41    min-width: 1400px;
    42  
    43    @media screen and (max-width: 2200px) {
    44      margin-left: ${SizeUnit(1 / 2)};
    45      margin-right: ${SizeUnit(1 / 2)};
    46    }
    47  `
    48  
    49  const OverviewTableResourceNameFilter = styled(ResourceNameFilter)`
    50    margin-left: ${SizeUnit(1 / 2)};
    51    margin-right: ${SizeUnit(1 / 2)};
    52    min-width: ${Width.sidebarDefault}px;
    53  `
    54  
    55  export default function OverviewTablePane(props: OverviewTablePaneProps) {
    56    return (
    57      <OverviewTablePaneStyle>
    58        <OverviewTableStickyNav>
    59          <HeaderBar
    60            view={props.view}
    61            currentPage={HeaderBarPage.Grid}
    62            isSocketConnected={props.isSocketConnected}
    63          />
    64          <StarredResourceBar {...starredResourcePropsFromView(props.view, "")} />
    65          <OverviewTableMenu aria-label="Resource menu">
    66            <OverviewTableResourceNameFilter />
    67            <OverviewTableBulkActions uiButtons={props.view.uiButtons} />
    68            <OverviewTableDisplayOptions resources={props.view.uiResources} />
    69          </OverviewTableMenu>
    70        </OverviewTableStickyNav>
    71        <OverviewTable view={props.view} />
    72      </OverviewTablePaneStyle>
    73    )
    74  }