git

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51// Source-control layout tokens shared by its pure render functions.
// One grid for the whole panel: every row starts its icon where the
// message box starts its text (a multi-line field insets it 10px) and is
// the same height.
export const INSET = 10;
export const ROW_H = 24;

// Layout for the templates below: a flex column, a row that centres its
// children across, a child that takes the free space (and may shrink below
// its content), the whole of the parent, the hover wash, the pointer of
// something clickable, a popover's lifted card, and the buttons that float
// over the right end of a row while the pointer is on it.
export const column = { display: "flex", flexDirection: "column" };
export const row = { display: "flex", flexDirection: "row", alignItems: "center" };
export const fill = { flexGrow: 1, flexShrink: 1, flexBasis: "0%", minWidth: 0, minHeight: 0 };
export const full = { width: "100%", height: "100%" };
export const HOVER = { background: "hover" };
export const clickable = { group: "hover", cursor: "pointer" };
export const menuCard = {
  ...column,
  gap: "small",
  padding: "small",
  background: "popover",
  borderRadius: "md",
  border: { width: 1, color: "border" },
};
export const hoverActions = {
  ...row,
  gap: 2,
  padding: "small",
  paddingX: 2,
  background: "muted",
  borderRadius: "sm",
  visibility: "hidden",
  groupHover: { group: "hover", visibility: "visible" },
  position: "absolute",
  top: 0,
  bottom: 0,
  right: 4,
};
// A row of the panel: the grid every row shares, and the hover wash.
export const panelRow = {
  ...row,
  ...clickable,
  gap: "medium",
  padding: "small",
  paddingX: INSET,
  height: ROW_H,
  borderRadius: "sm",
  hover: HOVER,
};