4 files changed,
+93,
-29
1@@ -10,6 +10,8 @@ function option(elem) {
2 }
3 }
4
5+let ClassList = {};
6+
7 let Elements = {};
8
9 let Signal = {};
10@@ -26,6 +28,7 @@ function cls(base, kv) {
11
12 export {
13 option,
14+ ClassList,
15 Elements,
16 Signal,
17 cls,
+53,
-21
1@@ -43,6 +43,28 @@ function getLongestTime(wp) {
2 }
3 }
4
5+function Summary$StatusText(props) {
6+ return JsxRuntime.jsx("div", {
7+ children: props.status,
8+ ref: Primitive_option.some(elem => {
9+ Core__Option.map((elem == null) ? undefined : Primitive_option.some(elem), elem => {
10+ elem.classList.remove("md:opacity-0");
11+ });
12+ setTimeout(() => {
13+ Core__Option.map((elem == null) ? undefined : Primitive_option.some(elem), elem => {
14+ elem.classList.add("md:opacity-0");
15+ });
16+ }, 5000);
17+ }),
18+ className: "hidden md:block md:transition md:transition-opacity md:ease-in-out md:duration-1000",
19+ id: props.id
20+ });
21+}
22+
23+let StatusText = {
24+ make: Summary$StatusText
25+};
26+
27 function Summary(props) {
28 let doc = props.doc;
29 let wp = State.waypoints.get(doc);
30@@ -55,43 +77,55 @@ function Summary(props) {
31 let tmp;
32 switch (status) {
33 case "Offline" :
34- tmp = JsxRuntime.jsx(LucidePreact.GlobeOff, {
35- size: 14,
36- strokeWidth: 4
37+ tmp = JsxRuntime.jsx(Summary$StatusText, {
38+ id: "status-offline",
39+ status: "Offline"
40 });
41 break;
42 case "Connecting" :
43- tmp = JsxRuntime.jsx(LucidePreact.WifiSync, {
44- size: 14,
45- strokeWidth: 4
46+ tmp = JsxRuntime.jsx(Summary$StatusText, {
47+ id: "status-connecting",
48+ status: "Connecting"
49 });
50 break;
51 case "Synced" :
52- tmp = JsxRuntime.jsx(LucidePreact.Check, {
53- size: 14,
54- strokeWidth: 4
55+ tmp = JsxRuntime.jsx(Summary$StatusText, {
56+ id: "status-synced",
57+ status: "Saved"
58 });
59 break;
60 case "Saving" :
61- tmp = JsxRuntime.jsx(LucidePreact.CloudUpload, {
62- size: 14,
63- strokeWidth: 4
64+ tmp = JsxRuntime.jsx(Summary$StatusText, {
65+ id: "status-saving",
66+ status: "Saving"
67 });
68 break;
69 }
70 let tmp$1;
71 switch (status) {
72 case "Offline" :
73- tmp$1 = "offline";
74+ tmp$1 = JsxRuntime.jsx(LucidePreact.GlobeOff, {
75+ size: 14,
76+ strokeWidth: 4
77+ });
78 break;
79 case "Connecting" :
80- tmp$1 = "connecting";
81+ tmp$1 = JsxRuntime.jsx(LucidePreact.WifiSync, {
82+ size: 14,
83+ strokeWidth: 4
84+ });
85 break;
86 case "Synced" :
87- tmp$1 = "saved";
88+ tmp$1 = JsxRuntime.jsx(LucidePreact.Check, {
89+ size: 14,
90+ strokeWidth: 4
91+ });
92 break;
93 case "Saving" :
94- tmp$1 = "saving";
95+ tmp$1 = JsxRuntime.jsx(LucidePreact.CloudUpload, {
96+ size: 14,
97+ strokeWidth: 4
98+ });
99 break;
100 }
101 return JsxRuntime.jsx("div", {
102@@ -144,17 +178,14 @@ function Summary(props) {
103 JsxRuntime.jsx("div", {
104 children: JsxRuntime.jsxs("div", {
105 children: [
106+ tmp,
107 JsxRuntime.jsx("div", {
108- children: tmp,
109+ children: tmp$1,
110 className: Preact.cls("m-auto", {
111 "text-(--color-yellow)": status === "Connecting" || status === "Saving",
112 "text-(--color-green)": status === "Synced",
113 "text-(--color-red)": status === "Offline"
114 })
115- }),
116- JsxRuntime.jsx("div", {
117- children: tmp$1,
118- className: "hidden md:block"
119 })
120 ],
121 className: "flex flex-row items-center justify-center gap-1 text-xs"
122@@ -176,6 +207,7 @@ let make = Summary;
123 export {
124 getLongestDistance,
125 getLongestTime,
126+ StatusText,
127 make,
128 }
129 /* Panel Not a pure module */
+8,
-0
1@@ -40,6 +40,14 @@ external float: float => element = "%identity"
2 external int: int => element = "%identity"
3 external string: string => element = "%identity"
4
5+module ClassList = {
6+ @scope("classList") @send
7+ external add: (Dom.element, string) => unit = "add"
8+
9+ @scope("classList") @send
10+ external remove: (Dom.element, string) => unit = "remove"
11+}
12+
13 /* These are needed for Fragment (<> </>) support */
14 type fragmentProps = {children?: element}
15
+29,
-8
1@@ -25,6 +25,29 @@ let getLongestTime = (wp: Waypoint.attributes): float => {
2 maxTime
3 }
4
5+module StatusText = {
6+ @jsx.component
7+ let make = (~id: string, ~status: string) => {
8+ <div
9+ id={id}
10+ ref={PreactDOM.Ref.callbackDomRef(elem => {
11+ let _ =
12+ elem->Nullable.toOption->Option.map(elem => elem->Preact.ClassList.remove("md:opacity-0"))
13+ let _ = Window.setTimeout(() => {
14+ let _ =
15+ elem
16+ ->Nullable.toOption
17+ ->Option.map(elem => elem->Preact.ClassList.add("md:opacity-0"))
18+ }, 5000)
19+ None
20+ })}
21+ className="hidden md:block md:transition md:transition-opacity md:ease-in-out md:duration-1000"
22+ >
23+ {status->Preact.string}
24+ </div>
25+ }
26+}
27+
28 @jsx.component
29 let make = (~doc: string) => {
30 let distance = switch State.waypoints->Map.get(doc) {
31@@ -67,6 +90,12 @@ let make = (~doc: string) => {
32 </div>
33 <div className="px-4 py-2">
34 <div className="flex flex-row items-center justify-center gap-1 text-xs">
35+ {switch status {
36+ | Offline => <StatusText id="status-offline" status="Offline" />
37+ | Connecting => <StatusText id="status-connecting" status="Connecting" />
38+ | Synced => <StatusText id="status-synced" status="Saved" />
39+ | Saving => <StatusText id="status-saving" status="Saving" />
40+ }}
41 <div
42 className={Preact.cls(
43 "m-auto",
44@@ -84,14 +113,6 @@ let make = (~doc: string) => {
45 | Saving => <Icons.CloudUpload strokeWidth=4 size=14 />
46 }}
47 </div>
48- <div className="hidden md:block">
49- {switch status {
50- | Offline => "offline"->Preact.string
51- | Connecting => "connecting"->Preact.string
52- | Synced => "saved"->Preact.string
53- | Saving => "saving"->Preact.string
54- }}
55- </div>
56 </div>
57 </div>
58 </div>