Skip to content

Commit 57e9934

Browse files
hamed-musallamhamed-musallam
committed
feat: about 'NMRium wrapper' modal
1 parent c8252b3 commit 57e9934

6 files changed

Lines changed: 163 additions & 10 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"filelist-utils": "^1.10.2",
1818
"nmr-load-save": "^0.17.3",
1919
"nmrium": "^0.43.1-pre.1692874523",
20+
"react-science": "^0.26.2",
2021
"vite-plugin-pwa": "^0.16.4"
2122
},
2223
"scripts": {
@@ -25,7 +26,7 @@
2526
"build": "cross-env NODE_OPTIONS=--max_old_space_size=4096 vite build --outDir build",
2627
"build-no-minify": "cross-env NO_MINIFY=true npm run build",
2728
"test": "jest --coverage",
28-
"eslint": "eslint src/* ",
29+
"eslint": "eslint . --cache",
2930
"eslint-fix": "npm run eslint -- --fix",
3031
"compile": "tsc --project tsconfig.esm.json && tsc --project tsconfig.cjs.json",
3132
"check-types": "tsc --project tsconfig.esm.json",
@@ -59,4 +60,4 @@
5960
"typescript": "^5.1.6",
6061
"vite": "^4.4.9"
6162
}
62-
}
63+
}

‎src/NMRiumWrapper.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,14 @@ import events from './events';
55
import { useLoadSpectra } from './hooks/useLoadSpectra';
66
import { usePreferences } from './hooks/usePreferences';
77
import { useWhiteList } from './hooks/useWhiteList';
8+
import { RootLayout } from 'react-science/ui';
9+
import AboutUsModal from './modal/AboutUsModal';
810

911
const styles: Record<'container' | 'loadingContainer', CSSProperties> = {
1012
container: {
1113
height: '100%',
1214
width: '100%',
15+
position: 'relative',
1316
},
1417

1518
loadingContainer: {
@@ -102,13 +105,13 @@ export default function NMRiumWrapper() {
102105
});
103106

104107
return (
105-
<div style={styles.container}>
106-
{isLoading ||
107-
(isFetchAllowedOriginsPending && (
108-
<div style={styles.loadingContainer}>
109-
<span>Loading .... </span>
110-
</div>
111-
))}
108+
<RootLayout style={styles.container}>
109+
{' '}
110+
{isFetchAllowedOriginsPending && (
111+
<div style={styles.loadingContainer}>
112+
<span>Loading .... </span>
113+
</div>
114+
)}
112115
<NMRium
113116
ref={nmriumRef}
114117
data={data}
@@ -117,7 +120,8 @@ export default function NMRiumWrapper() {
117120
workspace={workspace}
118121
emptyText={defaultEmptyMessage}
119122
/>
120-
</div>
123+
<AboutUsModal />
124+
</RootLayout>
121125
);
122126
}
123127

‎src/modal/AboutUsModal.tsx‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/** @jsxImportSource @emotion/react */
2+
import { css } from '@emotion/react';
3+
import { Modal, useOnOff } from 'react-science/ui';
4+
import versionInfo from '../versionInfo';
5+
6+
const styles = css`
7+
width: 30vw;
8+
min-width: 400px;
9+
display: flex;
10+
flex-direction: column;
11+
user-select: none;
12+
13+
button:focus {
14+
outline: none;
15+
}
16+
17+
.container {
18+
padding: 20px;
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
}
23+
24+
span.title {
25+
font-weight: bold;
26+
color: #ea580c;
27+
font-size: 2em;
28+
}
29+
30+
a {
31+
color: #969696;
32+
}
33+
34+
a:hover,
35+
a:focus {
36+
color: #00bcd4;
37+
}
38+
39+
.header {
40+
span {
41+
color: #464646;
42+
font-size: 15px;
43+
flex: 1;
44+
user-select: none;
45+
}
46+
}
47+
`;
48+
49+
function AboutUsModal() {
50+
const [isOpenDialog, openDialog, closeDialog] = useOnOff(false);
51+
return (
52+
<>
53+
<InfoButton onClick={openDialog} />
54+
<Modal
55+
hasCloseButton
56+
isOpen={isOpenDialog}
57+
onRequestClose={closeDialog}
58+
maxWidth={1000}
59+
>
60+
<div css={styles}>
61+
<Modal.Header>
62+
<div className="header">
63+
<span>About NMRium react wrapper</span>
64+
</div>
65+
</Modal.Header>
66+
<div className="container">
67+
<span className="title"> NMRium react wrapper</span>
68+
<Separator />
69+
Version <VersionInfo />
70+
<Separator />
71+
<a href="https://git.nmrium.org" target="_blank" rel="noreferrer">
72+
GitHub ( https://git.nmrium.org )
73+
</a>
74+
</div>
75+
</div>
76+
</Modal>
77+
</>
78+
);
79+
}
80+
81+
export default AboutUsModal;
82+
83+
function VersionInfo() {
84+
const { version } = versionInfo;
85+
if (version === 'HEAD') {
86+
return <>HEAD</>;
87+
} else if (version.startsWith('git-')) {
88+
return (
89+
<a
90+
href={`https://github.com/NFDI4Chem/nmrium-react-wrapper/tree/${version.slice(
91+
4,
92+
)}`}
93+
target="_blank"
94+
rel="noreferrer"
95+
>
96+
git-{version.slice(4, 14)}
97+
</a>
98+
);
99+
} else {
100+
return (
101+
<a
102+
href={`https://github.com/NFDI4Chem/nmrium-react-wrapper/tree/${version}`}
103+
target="_blank"
104+
rel="noreferrer"
105+
>
106+
{version}
107+
</a>
108+
);
109+
}
110+
}
111+
112+
function InfoButton({ onClick }) {
113+
return (
114+
<button
115+
onClick={onClick}
116+
type="button"
117+
style={{
118+
fontSize: '13px',
119+
textAlign: 'center',
120+
width: '25px',
121+
height: '25px',
122+
borderRadius: '25px',
123+
border: '0.55px solid #ea580c',
124+
left: '5px',
125+
bottom: '10px',
126+
position: 'absolute',
127+
}}
128+
>
129+
&#9432;
130+
</button>
131+
);
132+
}
133+
134+
function Separator() {
135+
return (
136+
<span
137+
style={{
138+
borderBottom: '1px solid gray',
139+
width: '15px',
140+
height: '1px',
141+
margin: '10px 0',
142+
}}
143+
/>
144+
);
145+
}

‎src/versionInfo.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default { version: 'HEAD' };

0 commit comments

Comments
 (0)