othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

using dropdown and opening modal for preferences

Browse Source
This commit is contained in:
Rodrigo Antinarelli 2020-06-23 00:10:58 -03:00
parent 70cf31b449
commit 1441062d95
4 changed files with 97 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
extensions/default/src/ViewerLayout/Header.jsx
View File

@ -3,10 +3,28 @@ import PropTypes from 'prop-types';
// TODO: This may fail if package is split from PWA build
import { useHistory } from 'react-router-dom';
//
import { NavBar, Svg, Icon, IconButton } from '@ohif/ui';
import { NavBar, Svg, Icon, IconButton, Dropdown, useModal } from '@ohif/ui';
function Header({ children }) {
const history = useHistory();
const { show } = useModal();
const showAboutModal = () => {
const modalComponent = () => <div>About modal</div>;
show({
title: 'About',
content: modalComponent,
});
};
const showPreferencesModal = () => {
const modalComponent = () => <div>Preferences modal</div>;
show({
title: 'Preferences',
content: modalComponent,
});
};
// const dropdownContent = [
// {
// name: 'Soft tissue',
@ -42,16 +60,29 @@ function Header({ children }) {
<span className="mr-3 text-lg text-common-light">
FOR INVESTIGATIONAL USE ONLY
</span>
<IconButton
variant="text"
color="inherit"
className="text-primary-active"
onClick={() => {}}
>
<React.Fragment>
<Icon name="settings" /> <Icon name="chevron-down" />
</React.Fragment>
</IconButton>
<Dropdown
titleElement={
<IconButton
variant="text"
color="inherit"
size="initial"
className="text-primary-active"
onClick={() => {}}
>
<React.Fragment>
<Icon name="settings" /> <Icon name="chevron-down" />
</React.Fragment>
</IconButton>
}
list={[
{ title: 'About', icon: 'info', onClick: () => showAboutModal() },
{
title: 'Preferences',
icon: 'settings',
onClick: () => showPreferencesModal(),
},
]}
/>
</div>
</div>
</NavBar>

51
platform/viewer/src/components/PreferencesDropdown/PreferencesDropdown.jsx Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import { Dropdown, IconButton, Icon, useModal } from '@ohif/ui';
const PreferencesDropdown = () => {
const { show } = useModal();
const showAboutModal = () => {
const modalComponent = () => <div>About modal</div>;
show({
content: modalComponent,
title: 'About',
});
};
const showPreferencesModal = () => {
const modalComponent = () => <div>Preferences modal</div>;
show({
content: modalComponent,
title: 'Preferences',
});
};
return (
<Dropdown
titleElement={
<IconButton
variant="text"
color="inherit"
size="initial"
className="text-primary-active"
onClick={() => {}}
>
<React.Fragment>
<Icon name="settings" /> <Icon name="chevron-down" />
</React.Fragment>
</IconButton>
}
list={[
{ title: 'About', icon: 'info', onClick: () => showAboutModal() },
{
title: 'Preferences',
icon: 'settings',
onClick: () => showPreferencesModal(),
},
]}
/>
);
};
export default PreferencesDropdown;

1
platform/viewer/src/components/PreferencesDropdown/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './PreferencesDropdown';

15
platform/viewer/src/routes/WorkList/WorkList.jsx
View File

@ -9,13 +9,14 @@ import filtersMeta from './filtersMeta.js';
import { useAppConfig } from '@state';
import { useDebounce, useQuery } from '@hooks';
import PreferencesDropdown from '../../components/PreferencesDropdown';
import {
Icon,
StudyListExpandedRow,
Button,
NavBar,
Svg,
IconButton,
EmptyStudies,
StudyListTable,
StudyListPagination,
@ -364,17 +365,7 @@ function WorkList({ history, data: studies, dataSource }) {
<span className="mr-3 text-lg text-common-light">
FOR INVESTIGATIONAL USE ONLY
</span>
<IconButton
variant="text"
color="inherit"
className="text-primary-active"
onClick={() => {}}
>
<React.Fragment>
<Icon name="settings" />
<Icon name="chevron-down" />
</React.Fragment>
</IconButton>
<PreferencesDropdown />
</div>
</NavBar>
<StudyListFilter