diff --git a/platform/ui/index.js b/platform/ui/index.js index 744d7d629..1d51a1e14 100644 --- a/platform/ui/index.js +++ b/platform/ui/index.js @@ -6,3 +6,5 @@ export { ThemeWrapper, Typography, } from './src/components'; + +export { StudyList } from './src/views'; diff --git a/platform/ui/src/assets/icons/instances-active.svg b/platform/ui/src/assets/icons/instances-active.svg new file mode 100644 index 000000000..3be5c3622 --- /dev/null +++ b/platform/ui/src/assets/icons/instances-active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/platform/ui/src/assets/icons/instances-inactive.svg b/platform/ui/src/assets/icons/instances-inactive.svg new file mode 100644 index 000000000..b30075350 --- /dev/null +++ b/platform/ui/src/assets/icons/instances-inactive.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/platform/ui/src/components/Button/Button.jsx b/platform/ui/src/components/Button/Button.jsx index 73ae10a97..4544d8f80 100644 --- a/platform/ui/src/components/Button/Button.jsx +++ b/platform/ui/src/components/Button/Button.jsx @@ -40,7 +40,7 @@ const variantClasses = { }, outlined: { default: - 'border bg-trasparent border-custom-aquaBright text-custom-aquaBright hover:opacity-80 active:opacity-100 focus:opacity-80', + 'border bg-trasparent border-custom-aquaBright text-custom-aquaBright hover:bg-custom-aquaBright hover:text-black focus:text-black focus:bg-custom-aquaBright active:opacity-80', primary: 'border bg-transparent border-custom-blue text-custom-blue hover:opacity-80 active:opacity-100 focus:opacity-80', secondary: diff --git a/platform/ui/src/gatsby-theme-docz/tailwind.css b/platform/ui/src/gatsby-theme-docz/tailwind.css index e94873cff..efd53e205 100644 --- a/platform/ui/src/gatsby-theme-docz/tailwind.css +++ b/platform/ui/src/gatsby-theme-docz/tailwind.css @@ -3,4 +3,22 @@ @tailwind utilities; /* IMPORT CUSTOM FONT */ -@import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap'); + +/* CUSTOM OHIF SCROLLBAR */ +.ohif-scrollbar::-webkit-scrollbar { + @apply w-2; +} + +.ohif-scrollbar::-webkit-scrollbar-track { + @apply rounded; +} + +.ohif-scrollbar::-webkit-scrollbar-thumb { + @apply rounded; + @apply bg-custom-blue; +} + +.ohif-scrollbar::-webkit-scrollbar-thumb:window-inactive { + @apply bg-custom-blue; +} diff --git a/platform/viewer/src/components/StudyList/studyListMock.json b/platform/ui/src/mocks/studyList.json similarity index 100% rename from platform/viewer/src/components/StudyList/studyListMock.json rename to platform/ui/src/mocks/studyList.json diff --git a/platform/viewer/src/components/StudyList/StudyList.js b/platform/ui/src/views/StudyList/StudyList.js similarity index 100% rename from platform/viewer/src/components/StudyList/StudyList.js rename to platform/ui/src/views/StudyList/StudyList.js diff --git a/platform/ui/src/views/StudyList/StudyList.mdx b/platform/ui/src/views/StudyList/StudyList.mdx new file mode 100644 index 000000000..cad5ff505 --- /dev/null +++ b/platform/ui/src/views/StudyList/StudyList.mdx @@ -0,0 +1,30 @@ +--- +name: Study List +menu: Views +route: components/studyList +--- + +import { Playground, Props } from 'docz'; +import StudyList from './'; + +# StudyList + +Description... + +## Import + +```javascript +import { StudyList } from '@ohfi/ui'; +``` + +## StudyList + + + <> + + + + +## Properties + + diff --git a/platform/viewer/src/components/StudyList/components/Header.js b/platform/ui/src/views/StudyList/components/Header.js similarity index 100% rename from platform/viewer/src/components/StudyList/components/Header.js rename to platform/ui/src/views/StudyList/components/Header.js diff --git a/platform/viewer/src/components/StudyList/components/StudyListFilter.js b/platform/ui/src/views/StudyList/components/StudyListFilter.js similarity index 100% rename from platform/viewer/src/components/StudyList/components/StudyListFilter.js rename to platform/ui/src/views/StudyList/components/StudyListFilter.js diff --git a/platform/viewer/src/components/StudyList/components/StudyListPagination.js b/platform/ui/src/views/StudyList/components/StudyListPagination.js similarity index 100% rename from platform/viewer/src/components/StudyList/components/StudyListPagination.js rename to platform/ui/src/views/StudyList/components/StudyListPagination.js diff --git a/platform/ui/src/views/StudyList/components/StudyListTable.js b/platform/ui/src/views/StudyList/components/StudyListTable.js new file mode 100644 index 000000000..e6d77c444 --- /dev/null +++ b/platform/ui/src/views/StudyList/components/StudyListTable.js @@ -0,0 +1,196 @@ +import React, { useState } from 'react'; +import classnames from 'classnames'; +import { Button } from '@ohif/ui'; + +/** TODO: Icon component should be used instead of importing the icons directly */ +import ChevronRight from '../../../assets/icons/chevron-right.svg'; +import ChevronDown from '../../../assets/icons/chevron-down.svg'; +import InstancesActive from '../../../assets/icons/instances-active.svg'; +import InstancesInactive from '../../../assets/icons/instances-inactive.svg'; +import LaunchInfo from '../../../assets/icons/launch-info.svg'; + +const TableRow = () => { + const [isOpened, setIsOpened] = useState(false); + const toggleRow = () => setIsOpened(!isOpened); + const ChevronIcon = isOpened ? ChevronDown : ChevronRight; + const InstancesIcon = isOpened ? InstancesActive : InstancesInactive; + const tdClasses = [ + 'px-4 py-2', + { 'border-b border-custom-violetPale': !isOpened }, + ]; + const seriesWidthClasses = { + normal: 'px-2 flex-1', + small: 'px-2 flex-0.3', + }; + const seriesBodyClasses = 'border-r border-custom-violetPale'; + + return ( + <> + + +
+ + + + + + + + + + + + + {isOpened && ( + + + + )} + +
+ + Patient name11000002 + Mar-29-2013 11:26 AM + + PET^1_PETCT_WB_AC (Adult) + CT/OT/PT00000001 + + 902 +
+
+ + + + + {/* ADD ICON HERE */} + Feedback text lorem ipsum dolor sit amet + +
+
+
+
+
+ Description +
+
+ Series +
+
+ Modality +
+
+ Instances +
+
+
+ {new Array(30).fill('').map((el, i) => ( +
+
+ Patient Protocol +
+
+ # +
+
+ CT +
+
+ 149 +
+
+ ))} +
+
+
+
+
+ + + + ); +}; + +const StudyListTable = () => { + return ( + <> +
+
+
+

+ Filter list to 100 studies or less to enable sorting +

+
+ + + {new Array(30).fill('').map((empty, i) => ( + + ))} + +
+
+
+ + ); +}; + +export default StudyListTable; diff --git a/platform/ui/src/views/StudyList/index.js b/platform/ui/src/views/StudyList/index.js new file mode 100644 index 000000000..3d9f05301 --- /dev/null +++ b/platform/ui/src/views/StudyList/index.js @@ -0,0 +1,2 @@ +import StudyList from './StudyList'; +export default StudyList; diff --git a/platform/ui/src/views/index.js b/platform/ui/src/views/index.js new file mode 100644 index 000000000..aeaa206c0 --- /dev/null +++ b/platform/ui/src/views/index.js @@ -0,0 +1,3 @@ +import StudyList from './StudyList'; + +export { StudyList }; diff --git a/platform/ui/tailwind.config.js b/platform/ui/tailwind.config.js index f46d23b23..6240d6e3d 100644 --- a/platform/ui/tailwind.config.js +++ b/platform/ui/tailwind.config.js @@ -233,6 +233,8 @@ module.exports = { }, flex: { '1': '1 1 0%', + '0.3': '0.3 0.3 0%', + '0.5': '0.5 0.5 0%', auto: '1 1 auto', initial: '0 1 auto', none: 'none', diff --git a/platform/viewer/src/components/StudyList/components/StudyListTable.js b/platform/viewer/src/components/StudyList/components/StudyListTable.js deleted file mode 100644 index d0ce69110..000000000 --- a/platform/viewer/src/components/StudyList/components/StudyListTable.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -const StudyListTable = () => { - return
{`<- STUDYLIST TABLE CONTENT ->`}
; -}; - -export default StudyListTable; diff --git a/platform/viewer/src/components/StudyList/index.js b/platform/viewer/src/components/StudyList/index.js deleted file mode 100644 index faef4d2b0..000000000 --- a/platform/viewer/src/components/StudyList/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as StudyList } from './StudyList'; diff --git a/platform/viewer/src/connectedComponents/ConnectedStudyList.js b/platform/viewer/src/connectedComponents/ConnectedStudyList.js index 0e8160ec9..ea2373402 100644 --- a/platform/viewer/src/connectedComponents/ConnectedStudyList.js +++ b/platform/viewer/src/connectedComponents/ConnectedStudyList.js @@ -1,5 +1,5 @@ import React from 'react'; -import StudyList from '../components/StudyList/StudyList'; +import { StudyList } from '@ohif/ui'; const ConnectedStudyList = () => { return ;