1
/*
2
Just the minimal app context definitions so that this can also be imported by the nextjs app.
3

4
This should be renderable server side, e.g., no window references, etc.
5
*/
6

7
import { ThemeConfig } from "antd";
8
import type { SizeType } from "antd/es/config-provider/SizeContext";
9
import { createContext, ReactNode, useContext } from "react";
10

11
import type { IntlMessage } from "@cocalc/util/i18n/types";
12
import { COLORS } from "@cocalc/util/theme";
13

14
import { ACTIVITY_BAR_LABELS_DEFAULT } from "@cocalc/frontend/project/page/activity-bar-consts";
15
import {
16
  FONT_SIZE_ICONS_NARROW,
17
  FONT_SIZE_ICONS_NORMAL,
18
  NAV_HEIGHT_NARROW_PX,
19
  NAV_HEIGHT_PX,
20
  type PageStyle,
21
} from "./top-nav-consts";
22

23
export interface AppState {
24
  pageWidthPx: number;
25
  pageStyle: PageStyle;
26
  antdComponentSize?: SizeType;
27
  antdTheme?: ThemeConfig;
28
  formatIntl: (msg: IntlMessage | ReactNode | string) => ReactNode | string;
29
  timeAgoAbsolute?: boolean;
30
  setTimeAgoAbsolute?: (boolean) => void;
31
  showActBarLabels?: boolean; // whether to show labels on the vertical fixed bar
32
}
33

34
export const DEFAULT_CONTEXT = {
35
  pageWidthPx: 1000, // gets updated
36
  pageStyle: calcStyle(false), // gets updated
37
  formatIntl: () => "Loading…",
38
  showActBarLabels: ACTIVITY_BAR_LABELS_DEFAULT,
39
};
40

41
export const AppContext = createContext<AppState>(DEFAULT_CONTEXT);
42

43
export default function useAppContext() {
44
  return useContext(AppContext);
45
}
46

47
export function calcStyle(isNarrow: boolean): PageStyle {
48
  const fontSizeIcons: string = isNarrow
49
    ? FONT_SIZE_ICONS_NARROW
50
    : FONT_SIZE_ICONS_NORMAL;
51
  const topPaddingIcons: string = isNarrow ? "2px" : "5px";
52
  const sidePaddingIcons: string = isNarrow ? "7px" : "14px";
53

54
  const height = isNarrow ? NAV_HEIGHT_NARROW_PX : NAV_HEIGHT_PX;
55

56
  const topBarStyle = {
57
    height: `${height}px`,
58
    background: "#fafafa",
59
  } as const;
60

61
  const fileUseStyle = {
62
    background: "white",
63
    border: `2px solid ${COLORS.GRAY_DDD}`,
64
    borderRadius: "5px",
65
    boxShadow: "0 0 15px #aaa",
66
    fontSize: "10pt",
67
    height: "90%",
68
    margin: 0,
69
    overflowX: "hidden",
70
    overflowY: "auto",
71
    padding: "4px",
72
    position: "fixed",
73
    right: "5vw",
74
    top: `${height}px`,
75
    width: isNarrow ? "90vw" : "50vw",
76
    zIndex: 110,
77
  } as const;
78

79
  const projectsNavStyle = isNarrow
80
    ? ({
81
        /* this makes it so the projects tabs are on a separate row; otherwise, there is literally no room for them at all... */
82
        width: "100vw",
83
        marginTop: "4px",
84
        height: `${height}px`,
85
        // no flex!
86
      } as const)
87
    : ({
88
        flex: "1 1 auto", // necessary to stretch out to the full width
89
      } as const);
90

91
  return {
92
    topBarStyle,
93
    fileUseStyle,
94
    projectsNavStyle,
95
    isNarrow,
96
    sidePaddingIcons,
97
    topPaddingIcons,
98
    fontSizeIcons,
99
    height,
100
  };
101
}
102

103