CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/frontend/compute/cloud-filesystem/card-title.tsx
Views: 687
1
import MountButton from "./mount-button";

2
import Title from "../title";

3
import Menu from "./menu";

4
import { trunc_middle } from "@cocalc/util/misc";

5


6
interface Props {

7
  cloudFilesystem;

8
  setError;

9
  refresh?;

10
  show?;

11
}

12


13
export default function CloudFilesystemCardTitle({

14
  cloudFilesystem,

15
  setError,

16
  show,

17
}: Props) {

18
  return (

19
    <div

20
      style={{

21
        display: "flex",

22
        color: "#666",

23
        borderBottom: `1px solid ${cloudFilesystem.color}`,

24
        paddingBottom: "5px",

25
      }}

26
    >

27
      <div style={{ flex: 1 }}>

28
        <MountButton

29
          cloudFilesystem={cloudFilesystem}

30
          setShowMount={show?.setShowMount}

31
        />

32
      </div>

33
      <div

34
        style={{

35
          flex: 1,

36
          textOverflow: "ellipsis",

37
          overflow: "hidden",

38
          padding: "5px 5px 0 5px",

39
          fontWeight: 400,

40
        }}

41
      >

42
        <code

43
          onClick={

44
            cloudFilesystem.mount

45
              ? undefined

46
              : () => show?.setShowEditMountpoint(true)

47
          }

48
          style={cloudFilesystem.mount ? {} : { cursor: "pointer" }}

49
        >

50
          {trunc_middle(`~/${cloudFilesystem.mountpoint}`, 40)}

51
        </code>

52
      </div>

53
      <div

54
        style={{ flex: 1, cursor: "pointer", overflow: "hidden" }}

55
        onClick={() => show?.setShowEditTitleAndColor(true)}

56
      >

57
        <Title

58
          title={cloudFilesystem.title}

59
          editable={false}

60
          style={{

61
            textOverflow: "ellipsis",

62
            overflow: "hidden",

63
            padding: "5px 5px 0 5px",

64
          }}

65
        />

66
      </div>

67
      <Menu cloudFilesystem={cloudFilesystem} setError={setError} show={show} />

68
    </div>

69
  );

70
}

71


72