Skip to content

Commit 25eda03

Browse files
loitlyloitly
authored
Merge pull request #39 from Caltech-IPAC/2024-refresh
Refresh firefly-help
2 parents 878cef8 + f96851f commit 25eda03

File tree

3 files changed

+96
-55
lines changed

3 files changed

+96
-55
lines changed

‎app/src/App.jsx‎

Lines changed: 76 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Next from '@mui/icons-material/NavigateNextRounded';
1313
import Close from '@mui/icons-material/KeyboardDoubleArrowLeftRounded';
1414
import Open from '@mui/icons-material/KeyboardDoubleArrowRightRounded';
1515
import Pdf from '@mui/icons-material/PictureAsPdfOutlined';
16+
import Info from '@mui/icons-material/InfoOutlined';
1617

1718
export function App({tableOfContent, showHidden=false}) {
1819

@@ -57,19 +58,19 @@ export function App({tableOfContent, showHidden=false}) {
5758

5859
<div className='inline-flex flex-grow overflow-hidden'>
5960
<div className='flex flex-col'>
60-
<Navigator {...{selNode, treeRoot, selectedKeys, defaultExpandedKeys, treeMap, tableOfContent, showHidden, expandedKeys, setExpandedKeys, setHelpId}}/>
61+
<SideBar {...{selNode, treeRoot, selectedKeys, defaultExpandedKeys, treeMap, tableOfContent, showHidden, expandedKeys, setExpandedKeys, setHelpId}}/>
6162
</div>
6263

6364
<div className='flex-grow relative min-w-[100px]'>
6465
<iframe id='help-content' title='HelpFrame' src={href} onLoad={() => styleIframe(mode, 'help-content')} className='w-full h-full mx-1 dark:bg-black dark:text-white'/>
6566
</div>
6667
</div>
67-
<VersionInfo/>
68+
<div id='VersionPopup'/>
6869
</div>
6970
);
7071
}
7172

72-
function Navigator({selNode, treeMap, treeRoot, selectedKeys, defaultExpandedKeys, expandedKeys=[], setExpandedKeys, setHelpId}) {
73+
function SideBar({selNode, treeMap, treeRoot, selectedKeys, defaultExpandedKeys, expandedKeys=[], setExpandedKeys, setHelpId, children}) {
7374

7475
const [open, setOpen] = useState(true);
7576

@@ -107,69 +108,104 @@ function Navigator({selNode, treeMap, treeRoot, selectedKeys, defaultExpandedKey
107108

108109
if (open) {
109110
return (
110-
<NavBar className='min-w-60 w-[20vw]'>
111-
<div className='inline-flex mb-2 p-1 w-full justify-between shadow bg-slate-300 dark:bg-slate-700'>
112-
<div className='inline-flex space-x-4'>
113-
<div className='inline-flex'>
114-
<Button onClick={() => expandAll(true)}><Expand title='Expand All'/></Button>
115-
<Button onClick={() => expandAll(false)}><Collaspe title='Collapse All'/></Button>
116-
</div>
117-
<div className='inline-flex'>
118-
<Button onClick={previous}><Previous title='Previous'/></Button>
119-
<Button onClick={next}><Next title='Next'/></Button>
120-
</div>
121-
<Button onClick={() => false} className='mx-6'><a href='help.pdf' target='help_pdf'><Pdf title='View PDF'/></a></Button>
122-
</div>
123-
<Button onClick={() => setOpen(false)}><Close title='Close Navigator'/></Button>
124-
</div>
111+
<SidePanel className='min-w-60 w-[20vw]'>
112+
<TopNav{...{expandAll, previous, next, setOpen}}/>
125113
<div className='relative grow'>
126114
<div className='absolute inset-0 overflow-auto '>
127115
<Tree showLine {...pickBy({onSelect, expandedKeys, onExpand, selectedKeys, defaultExpandedKeys, autoExpandParent: true})} >
128116
{treeRoot}
129117
</Tree>
130118
</div>
131119
</div>
132-
</NavBar>
120+
<VersionInfo/>
121+
</SidePanel>
133122
);
134123
} else {
135124
return (
136-
<NavBar className='w-8'>
137-
<div className='flex flex-col space-y-4'>
138-
<Button onClick={() => setOpen(true)}><Open title='Open Navigator'/></Button>
139-
<div>
140-
<Button onClick={previous}><Previous title='Previous'/></Button>
141-
<Button onClick={next}><Next title='Next'/></Button>
142-
</div>
143-
<Button onClick={() => false}><a href='help.pdf' target='help_pdf'><Pdf title='View PDF'/></a></Button>
144-
</div>
145-
</NavBar>
125+
<SidePanel className='w-8 justify-between pb-3'>
126+
<SideNav {...{setOpen, previous, next}}/>
127+
<Button onClick={showVersionPopup}><Info title='Version Information'/></Button>
128+
</SidePanel>
146129
);
147130
}
148131
}
149132

133+
function TopNav({expandAll, previous, next, setOpen}) {
134+
return (
135+
<div className='inline-flex mb-2 p-1 w-full justify-between shadow bg-slate-300 dark:bg-slate-700'>
136+
<div className='inline-flex space-x-4'>
137+
<div className='inline-flex'>
138+
<Button onClick={() => expandAll(true)}><Expand title='Expand All'/></Button>
139+
<Button onClick={() => expandAll(false)}><Collaspe title='Collapse All'/></Button>
140+
</div>
141+
<div className='inline-flex'>
142+
<Button onClick={previous}><Previous title='Previous'/></Button>
143+
<Button onClick={next}><Next title='Next'/></Button>
144+
</div>
145+
<Button onClick={() => false} className='mx-6'><a href={getPdfUrl()} target='help_pdf'><Pdf title='View PDF'/></a></Button>
146+
</div>
147+
<Button onClick={() => setOpen(false)}><Close title='Close Navigator'/></Button>
148+
</div>
149+
);
150+
}
151+
152+
function SideNav({setOpen, previous, next}) {
153+
return (
154+
<div className='flex flex-col space-y-4'>
155+
<Button onClick={() => setOpen(true)}><Open title='Open Navigator'/></Button>
156+
<div>
157+
<Button onClick={previous}><Previous title='Previous'/></Button>
158+
<Button onClick={next}><Next title='Next'/></Button>
159+
</div>
160+
<Button onClick={() => false}><a href={getPdfUrl()} target='help_pdf'><Pdf title='View PDF'/></a></Button>
161+
</div>
162+
);
163+
}
164+
150165
function VersionInfo() {
151166

167+
const vTag = process.env.REACT_APP_VersionTag || 'not set';
168+
return (
169+
<div className='flex-col px-3 italic text-gray-500' onClick={showVersionPopup}>
170+
{`${vTag}`}
171+
</div>
172+
);
173+
}
174+
175+
function showVersionPopup () {
176+
const div = document.getElementById('VersionPopup');
177+
ReactDOM.render( <VersionPopup/>, div);
178+
};
179+
180+
function VersionPopup () {
152181
const vTag = process.env.REACT_APP_VersionTag || 'not set';
153182
const vCommit = process.env.REACT_APP_BuildCommit || 'not set';
154183
const buildTime = process.env.REACT_APP_BuildTime || 'not set';
155184

156-
const hideVersionPopup = () => {
157-
const div = document.getElementById('VersionPopup');
158-
ReactDOM.unmountComponentAtNode(div);
159-
};
160-
const showVersionPopup = () => {
161-
const div = document.getElementById('VersionPopup');
162-
ReactDOM.render( <VersionPopup {...{vTag, vCommit, buildTime, hideVersionPopup}}/>, div);
163-
};
185+
useEffect(() => {
186+
const hideVersionPopup = () => {
187+
const div = document.getElementById('VersionPopup');
188+
ReactDOM.unmountComponentAtNode(div);
189+
};
190+
191+
document.addEventListener('click', hideVersionPopup);
192+
return () => document.removeEventListener('click', hideVersionPopup);
193+
}, []);
164194

165195
return (
166-
<div className='mx-3 italic text-gray-500' onClick={showVersionPopup}>
196+
<div className="flex flex-col px-3 text-sm shadow fixed bottom-0 left-0 right-0 bg-slate-100 dark:bg-slate-800" >
167197
{`${vTag}`}
168-
<div id='VersionPopup'/>
198+
<div className='inline-flex space-x-4'><div>Commit Hash: </div><div className='font-bold'>{vCommit}</div></div>
199+
<div className='inline-flex space-x-4'><div>Build On: </div><div className='font-bold'>{buildTime}</div></div>
169200
</div>
170201
);
171202
}
172203

204+
function getPdfUrl() {
205+
const id = process.env.REACT_APP_BuildCommit || new Date().toISOString;
206+
return `help.pdf?id=${id}`;
207+
}
208+
173209
function convertToTreeNode(key, node, showHidden) {
174210

175211
if (Array.isArray(node)) {
@@ -206,21 +242,6 @@ function flattenTree(node={}, map={}) {
206242
return map;
207243
}
208244

209-
210-
function VersionPopup ({vTag, vCommit, buildTime, hideVersionPopup}) {
211-
useEffect(() => {
212-
document.addEventListener('click', hideVersionPopup);
213-
return () => document.removeEventListener('click', hideVersionPopup);
214-
}, [hideVersionPopup]);
215-
216-
return (
217-
<div className="grid mt-10">
218-
<div className='inline-flex space-x-4'><div>Commit Hash: </div><div className='font-bold'>{vCommit}</div></div>
219-
<div className='inline-flex space-x-4'><div>Build On: </div><div className='font-bold'>{buildTime}</div></div>
220-
</div>
221-
);
222-
}
223-
224245
function getSelNode(helpId, treeMap) {
225246
const root = Object.values(treeMap)[0];
226247
let snode = treeMap[helpId];
@@ -260,7 +281,7 @@ function Button({ onClick, className, children }) {
260281
);
261282
}
262283

263-
function NavBar({children, className}) {
284+
function SidePanel({children, className}) {
264285
return(
265286
<div className={`${className} flex flex-col flex-grow transition-all max-w-96 border border-gray-200 dark:border-gray-900 bg-gradient-to-bl from-slate-200 dark:from-slate-900`}>
266287
{children}

‎app/src/help.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* custom scrollbar */
2+
::-webkit-scrollbar {
3+
width: 7px;
4+
height: 7px;
5+
}
6+
/* Light mode thumb */
7+
::-webkit-scrollbar-thumb {
8+
background-color: rgba(0, 0, 0, 0.2);
9+
}
10+
11+
/* Dark mode thumb */
12+
.dark ::-webkit-scrollbar-thumb {
13+
background-color: rgba(255, 255, 255, 0.2);
14+
}
15+
16+
/* override rc-tree highlight color when in dark mode */
17+
.dark .rc-tree-node-content-wrapper.rc-tree-node-selected {
18+
background-color: black;
19+
}

‎app/src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
33
import {App} from './App';
44
import {create} from './toc/toc_creator';
55
import 'tailwindcss/tailwind.css';
6+
import './help.css';
67

78

89

0 commit comments

Comments
 (0)