styles.tsx 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. import styled from '@emotion/styled';
  2. import Panel from 'sentry/components/panels/panel';
  3. import PanelBody from 'sentry/components/panels/panelBody';
  4. import {space} from 'sentry/styles/space';
  5. export const GRID_HEAD_ROW_HEIGHT = 45;
  6. export const GRID_BODY_ROW_HEIGHT = 40;
  7. export const GRID_STATUS_MESSAGE_HEIGHT = GRID_BODY_ROW_HEIGHT * 4;
  8. /**
  9. * Local z-index stacking context
  10. * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  11. */
  12. // Parent context is Panel
  13. const Z_INDEX_PANEL = 1;
  14. const Z_INDEX_GRID = 5;
  15. // Parent context is GridHeadCell
  16. const Z_INDEX_GRID_RESIZER = 1;
  17. export const Header = styled('div')`
  18. display: flex;
  19. justify-content: space-between;
  20. align-items: center;
  21. margin-bottom: ${space(1)};
  22. `;
  23. export const HeaderTitle = styled('h4')`
  24. margin: 0;
  25. font-size: ${p => p.theme.fontSizeMedium};
  26. color: ${p => p.theme.subText};
  27. `;
  28. export const HeaderButtonContainer = styled('div')`
  29. display: grid;
  30. gap: ${space(1)};
  31. grid-auto-flow: column;
  32. grid-auto-columns: auto;
  33. justify-items: end;
  34. /* Hovercard anchor element when features are disabled. */
  35. & > span {
  36. display: flex;
  37. flex-direction: row;
  38. }
  39. `;
  40. export const Body = styled(({children, ...props}) => (
  41. <Panel {...props}>
  42. <PanelBody>{children}</PanelBody>
  43. </Panel>
  44. ))`
  45. overflow-x: auto;
  46. z-index: ${Z_INDEX_PANEL};
  47. `;
  48. /**
  49. * Grid is the parent element for the tableResizable component.
  50. *
  51. * On newer browsers, it will use CSS Grids to implement its layout.
  52. *
  53. * However, it is based on <table>, which has a distinction between header/body
  54. * HTML elements, which allows CSS selectors to its full potential. This has
  55. * the added advantage that older browsers will still have a chance of
  56. * displaying the data correctly (but this is untested).
  57. *
  58. * <thead>, <tbody>, <tr> are ignored by CSS Grid.
  59. * The entire layout is determined by the usage of <th> and <td>.
  60. */
  61. export const Grid = styled('table')<{height?: string | number; scrollable?: boolean}>`
  62. position: inherit;
  63. display: grid;
  64. /* Overwritten by GridEditable.setGridTemplateColumns */
  65. grid-template-columns: repeat(auto-fill, minmax(50px, auto));
  66. box-sizing: border-box;
  67. border-collapse: collapse;
  68. margin: 0;
  69. z-index: ${Z_INDEX_GRID};
  70. ${p =>
  71. p.scrollable &&
  72. `
  73. overflow-x: auto;
  74. overflow-y: scroll;
  75. `}
  76. ${p =>
  77. p.height
  78. ? `
  79. height: 100%;
  80. max-height: ${typeof p.height === 'number' ? p.height + 'px' : p.height}
  81. `
  82. : ''}
  83. `;
  84. /**
  85. * GridHead is the collection of elements that builds the header section of the
  86. * Grid. As the entirety of the add/remove/resize actions are performed on the
  87. * header, most of the elements behave different for each stage.
  88. */
  89. export const GridHead = styled('thead')`
  90. display: grid;
  91. grid-template-columns: subgrid;
  92. grid-column: 1/-1;
  93. background-color: ${p => p.theme.backgroundSecondary};
  94. border-bottom: 1px solid ${p => p.theme.border};
  95. font-size: ${p => p.theme.fontSizeSmall};
  96. font-weight: 600;
  97. line-height: 1;
  98. text-transform: uppercase;
  99. user-select: none;
  100. color: ${p => p.theme.subText};
  101. border-top-left-radius: ${p => p.theme.borderRadius};
  102. border-top-right-radius: ${p => p.theme.borderRadius};
  103. `;
  104. export const GridHeadCell = styled('th')<{isFirst: boolean; sticky?: boolean}>`
  105. /* By default, a grid item cannot be smaller than the size of its content.
  106. We override this by setting min-width to be 0. */
  107. position: relative; /* Used by GridResizer */
  108. height: ${GRID_HEAD_ROW_HEIGHT}px;
  109. display: flex;
  110. align-items: center;
  111. min-width: 24px;
  112. padding: 0 ${space(2)};
  113. border-right: 1px solid transparent;
  114. border-left: 1px solid transparent;
  115. ${p => (p.sticky ? `position: sticky; top: 0;` : '')}
  116. a,
  117. div,
  118. span {
  119. line-height: 1.1;
  120. color: inherit;
  121. white-space: nowrap;
  122. text-overflow: ellipsis;
  123. overflow: hidden;
  124. }
  125. &:last-child {
  126. border-right: none;
  127. }
  128. &:hover {
  129. border-left-color: ${p => (p.isFirst ? 'transparent' : p.theme.border)};
  130. border-right-color: ${p => p.theme.border};
  131. }
  132. `;
  133. /**
  134. * Create spacing/padding similar to GridHeadCellWrapper but
  135. * without interactive aspects.
  136. */
  137. export const GridHeadCellStatic = styled('th')`
  138. height: ${GRID_HEAD_ROW_HEIGHT}px;
  139. display: flex;
  140. align-items: center;
  141. padding: 0 ${space(2)};
  142. text-overflow: ellipsis;
  143. white-space: nowrap;
  144. overflow: hidden;
  145. &:first-child {
  146. padding: ${space(1)} 0 ${space(1)} ${space(3)};
  147. }
  148. `;
  149. /**
  150. * GridBody are the collection of elements that contains and display the data
  151. * of the Grid. They are rather simple.
  152. */
  153. export const GridBody = styled('tbody')`
  154. display: grid;
  155. grid-template-columns: subgrid;
  156. grid-column: 1/-1;
  157. `;
  158. export const GridRow = styled('tr')`
  159. display: grid;
  160. position: relative;
  161. grid-template-columns: subgrid;
  162. grid-column: 1/-1;
  163. &:not(thead > &) {
  164. background-color: ${p => p.theme.background};
  165. &:not(:last-child) {
  166. border-bottom: 1px solid ${p => p.theme.innerBorder};
  167. }
  168. &:last-child {
  169. border-bottom-left-radius: ${p => p.theme.borderRadius};
  170. border-bottom-right-radius: ${p => p.theme.borderRadius};
  171. }
  172. }
  173. `;
  174. export const GridBodyCell = styled('td')`
  175. /* By default, a grid item cannot be smaller than the size of its content.
  176. We override this by setting min-width to be 0. */
  177. min-width: 0;
  178. /* Locking in the height makes calculation for resizer to be easier.
  179. min-height is used to allow a cell to expand and this is used to display
  180. feedback during empty/error state */
  181. min-height: ${GRID_BODY_ROW_HEIGHT}px;
  182. padding: ${space(1)} ${space(2)};
  183. display: flex;
  184. flex-direction: column;
  185. justify-content: center;
  186. font-size: ${p => p.theme.fontSizeMedium};
  187. /* Need to select the 2nd child to select the first cell
  188. as the first child is the interaction state layer */
  189. &:nth-child(2) {
  190. padding: ${space(1)} 0 ${space(1)} ${space(3)};
  191. }
  192. &:last-child {
  193. padding: ${space(1)} ${space(2)};
  194. }
  195. `;
  196. const GridStatusWrapper = styled(GridBodyCell)`
  197. grid-column: 1 / -1;
  198. width: 100%;
  199. height: ${GRID_STATUS_MESSAGE_HEIGHT}px;
  200. background-color: transparent;
  201. `;
  202. const GridStatusFloat = styled('div')`
  203. position: absolute;
  204. top: 0;
  205. left: 0;
  206. right: 0;
  207. display: flex;
  208. justify-content: center;
  209. align-items: center;
  210. width: 100%;
  211. height: ${GRID_STATUS_MESSAGE_HEIGHT}px;
  212. overflow: hidden;
  213. `;
  214. export function GridBodyCellStatus(props) {
  215. return (
  216. <GridStatusWrapper>
  217. <GridStatusFloat>{props.children}</GridStatusFloat>
  218. </GridStatusWrapper>
  219. );
  220. }
  221. /**
  222. * We have a fat GridResizer and we use the ::after pseudo-element to draw
  223. * a thin 1px border.
  224. *
  225. * The right most cell does not have a resizer as resizing from that side does strange things.
  226. */
  227. export const GridResizer = styled('div')<{dataRows: number}>`
  228. position: absolute;
  229. top: 0px;
  230. right: -6px;
  231. width: 11px;
  232. height: ${p => {
  233. const numOfRows = p.dataRows;
  234. const height = GRID_HEAD_ROW_HEIGHT + numOfRows * GRID_BODY_ROW_HEIGHT;
  235. return height;
  236. }}px;
  237. padding-left: 5px;
  238. padding-right: 5px;
  239. cursor: col-resize;
  240. z-index: ${Z_INDEX_GRID_RESIZER};
  241. /**
  242. * This element allows us to have a fat GridResizer that is easy to hover and
  243. * drag, but still draws an appealing thin line for the border
  244. */
  245. &::after {
  246. content: ' ';
  247. display: block;
  248. width: 100%; /* Equivalent to 1px */
  249. height: 100%;
  250. }
  251. &:hover::after {
  252. background-color: ${p => p.theme.gray200};
  253. }
  254. /**
  255. * Ensure that this rule is after :hover, otherwise it will flicker when
  256. * the GridResizer is dragged
  257. */
  258. &:active::after,
  259. &:focus::after {
  260. background-color: ${p => p.theme.purple300};
  261. }
  262. /**
  263. * This element gives the resize handle a more visible knob to grab
  264. */
  265. &:hover::before {
  266. position: absolute;
  267. top: 0;
  268. left: 2px;
  269. content: ' ';
  270. display: block;
  271. width: 7px;
  272. height: ${GRID_HEAD_ROW_HEIGHT}px;
  273. background-color: ${p => p.theme.purple300};
  274. opacity: 0.4;
  275. }
  276. `;