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

feat: ui-v2 Color System Naming

Browse Source
This commit is contained in:
Rodrigo Antinarelli 2020-04-02 15:52:41 -03:00 committed by James A. Petts
parent 5541fb1f4b
commit b6201ebc34
23 changed files with 254 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
platform/ui/src/components/Button/Button.jsx
View File

@ -30,31 +30,31 @@ const disabledClasses = {
const variantClasses = {
text: {
default:
'text-custom-aquaBright hover:bg-custom-aquaBright hover:text-white active:opacity-80 focus:bg-custom-aquaBright focus:text-white',
'text-primary-light hover:bg-primary-light hover:text-white active:opacity-80 focus:bg-primary-light focus:text-white',
primary:
'text-custom-blue hover:bg-custom-blue hover:text-white active:opacity-80 focus:bg-custom-blue focus:text-white',
'text-primary-main hover:bg-primary-main hover:text-white active:opacity-80 focus:bg-primary-main focus:text-white',
secondary:
'text-custom-violetPale hover:bg-custom-violetPale hover:text-white active:opacity-80 focus:bg-custom-violetPale focus:text-white',
'text-secondary-light hover:bg-secondary-light hover:text-white active:opacity-80 focus:bg-secondary-light focus:text-white',
white:
'text-white hover:bg-white hover:text-black active:opacity-80 focus:bg-white focus:text-black',
},
outlined: {
default:
'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',
'border bg-trasparent border-primary-light text-primary-light hover:bg-primary-light hover:text-black focus:text-black focus:bg-primary-light active:opacity-80',
primary:
'border bg-transparent border-custom-blue text-custom-blue hover:opacity-80 active:opacity-100 focus:opacity-80',
'border bg-transparent border-primary-main text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
secondary:
'border bg-transparent border-custom-violetPale text-custom-violetPale hover:opacity-80 active:opacity-100 focus:opacity-80',
'border bg-transparent border-secondary-light text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
white:
'border bg-transparent border-white text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
},
contained: {
default:
'bg-custom-aquaBright text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
'bg-primary-light text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
primary:
'bg-custom-blue text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
'bg-primary-main text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
secondary:
'bg-custom-violetPale text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
'bg-secondary-light text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
white:
'bg-white text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
},
@ -92,7 +92,12 @@ const Button = ({
<div className="mr-2">{startIconProp}</div>
);
const endIcon = endIconProp && <div className="ml-2">{endIconProp}</div>;
const handleOnClick = e => {
buttonElement.current.blur();
if (rest.onClick) {
rest.onClick(e);
}
};
return (
<button

8
platform/ui/src/components/ButtonGroup/ButtonGroup.jsx
View File

@ -37,9 +37,9 @@ const borderClasses = {
const variantClasses = {
text: {
default: 'border-custom-aquaBright',
primary: 'border-custom-blue',
secondary: 'border-custom-violetPale',
default: 'border-primary-light',
primary: 'border-primary-main',
secondary: 'border-secondary-light',
white: 'border-white',
},
outlined: {
@ -96,7 +96,7 @@ const ButtonGroup = ({
ref={ref}
{...other}
>
{React.Children.map(children, child => {
{React.Children.map(children, (child) => {
if (!React.isValidElement(child)) {
return null;
}

12
platform/ui/src/components/DateRange/DateRange.css
View File

@ -29,7 +29,7 @@
@apply bg-no-repeat;
}
.DateInput_input {
@apply cursor-pointer border-custom-blue mt-2 bg-black shadow transition duration-300 appearance-none border-t border-l border-r border-b border-solid rounded w-full py-2 px-3 text-sm text-white leading-tight pl-8;
@apply cursor-pointer border-primary-main mt-2 bg-black shadow transition duration-300 appearance-none border-t border-l border-r border-b border-solid rounded w-full py-2 px-3 text-sm text-white leading-tight pl-8;
}
.DateInput_input:hover {
@apply border-gray-500;
@ -59,7 +59,7 @@
/* SELECT MONTH PICKER */
.DateRangePicker_select {
@apply bg-white text-custom-dark border rounded border-custom-gray appearance-none cursor-pointer text-base pl-2 pr-5 py-1; /* NEEDED FOR ARROW DOWN */
@apply bg-white text-secondary-active border rounded border-common-dark appearance-none cursor-pointer text-base pl-2 pr-5 py-1; /* NEEDED FOR ARROW DOWN */
background-image: linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 50%, transparent 50%);
background-position: calc(100% - 11px) 11px, calc(100% - 6px) calc(11px);
@ -75,21 +75,21 @@
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
@apply bg-custom-blue text-white border-0 border-custom-blue;
@apply bg-primary-main text-white border-0 border-primary-main;
}
.CalendarDay__blocked_out_of_range:hover {
@apply border-0 bg-white cursor-not-allowed text-custom-gray;
@apply border-0 bg-white cursor-not-allowed text-common-dark;
}
.CalendarDay__selected_span {
@apply border-0 bg-custom-aquaBright;
@apply border-0 bg-primary-light;
}
/* MONTH NAVIGATION BUTTONS */
.DayPickerNavigation_button__horizontalDefault,
.DayPickerNavigation_button__horizontalDefault:hover {
@apply border-custom-gray text-custom-gray;
@apply border-common-dark text-common-dark;
top: 24px;
padding: 3px 9px;
}

12
platform/ui/src/components/DateRange/DateRange.jsx
View File

@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
import moment from 'moment';
const DateRange = props => {
const DateRange = (props) => {
const { onChange, startDate, endDate } = props;
const [focusedInput, setFocusedInput] = useState(null);
@ -43,7 +43,7 @@ const DateRange = props => {
<button
key={text}
type="button"
className={`m-0 py-2 px-3 bg-custom-blue border-0 rounded text-white text-base transition duration-300 hover:opacity-80`}
className={`m-0 py-2 px-3 bg-primary-main border-0 rounded text-white text-base transition duration-300 hover:opacity-80`}
onClick={() =>
onChange({
startDate: start,
@ -88,7 +88,7 @@ const DateRange = props => {
<select
className="DateRangePicker_select"
value={month.month()}
onChange={e => onMonthSelect(month, e.target.value)}
onChange={(e) => onMonthSelect(month, e.target.value)}
>
{moment.months().map((label, value) => (
<option key={value} value={value}>
@ -102,7 +102,7 @@ const DateRange = props => {
<select
className="DateRangePicker_select"
value={month.year()}
onChange={e => onYearSelect(month, e.target.value)}
onChange={(e) => onYearSelect(month, e.target.value)}
>
{renderYearsOptions()}
</select>
@ -120,7 +120,7 @@ const DateRange = props => {
endDateId={'endDateId'}
onDatesChange={onChange}
focusedInput={focusedInput}
onFocusChange={updatedVal => setFocusedInput(updatedVal)}
onFocusChange={(updatedVal) => setFocusedInput(updatedVal)}
/** OPTIONAL */
renderCalendarInfo={renderDatePresets}
renderMonthElement={renderMonthElement}
@ -130,7 +130,7 @@ const DateRange = props => {
closeDatePicker: 'Close',
clearDates: 'Clear dates',
}}
isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
isOutsideRange={(day) => !isInclusivelyBeforeDay(day, moment())}
hideKeyboardShortcutsPanel={true}
numberOfMonths={1}
showClearDates={false}

2
platform/ui/src/components/EmptyStudies/EmptyStudies.js
View File

@ -7,7 +7,7 @@ const EmptyStudies = ({ className }) => {
return (
<div className={classnames('flex-col inline-flex items-center', className)}>
<Icon name="magnifier" className="mb-4" />
<Typography className="text-custom-aquaBright" variant="h5">
<Typography className="text-primary-light" variant="h5">
No studies available
</Typography>
</div>

6
platform/ui/src/components/Icon/icon.mdx
View File

@ -20,7 +20,7 @@ import { Icon } from '@ohif/ui';
<Playground>
<div className="p-4">
<Icon name="series-active" className="text-custom-aquaBright m-4" />
<Icon name="series-active" className="text-primary-light m-4" />
</div>
</Playground>
@ -33,8 +33,8 @@ import { Icon } from '@ohif/ui';
return (
<React.Fragment key={i}>
<div className="flex flex-col items-center w-48 py-4">
<div className="flex items-center justify-center rounded border border-custom-aquaBright p-4 m-2 w-20 h-20">
<Icon name={name} className="text-custom-aquaBright" />
<div className="flex items-center justify-center rounded border border-primary-light p-4 m-2 w-20 h-20">
<Icon name={name} className="text-primary-light" />
</div>
<div className="break-normal text-white">{name}</div>
</div>

20
platform/ui/src/components/IconButton/IconButton.jsx
View File

@ -31,31 +31,31 @@ const disabledClasses = {
const variantClasses = {
text: {
default:
'text-white hover:bg-custom-aquaBright hover:text-black active:opacity-80 focus:bg-custom-aquaBright focus:text-black',
'text-white hover:bg-primary-light hover:text-black active:opacity-80 focus:bg-primary-light focus:text-black',
primary:
'text-custom-blue hover:bg-custom-blue hover:text-white active:opacity-80 focus:bg-custom-blue focus:text-white',
'text-primary-main hover:bg-primary-main hover:text-white active:opacity-80 focus:bg-primary-main focus:text-white',
secondary:
'text-custom-violetPale hover:bg-custom-violetPale hover:text-white active:opacity-80 focus:bg-custom-violetPale focus:text-white',
'text-secondary-light hover:bg-secondary-light hover:text-white active:opacity-80 focus:bg-secondary-light focus:text-white',
white:
'text-white hover:bg-white hover:text-black active:opacity-80 focus:bg-white focus:text-black',
},
outlined: {
default:
'border bg-trasparent border-custom-aquaBright text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
'border bg-trasparent border-primary-light text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
primary:
'border bg-transparent border-custom-blue text-custom-blue hover:opacity-80 active:opacity-100 focus:opacity-80',
'border bg-transparent border-primary-main text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
secondary:
'border bg-transparent border-custom-violetPale text-custom-violetPale hover:opacity-80 active:opacity-100 focus:opacity-80',
'border bg-transparent border-secondary-light text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
white:
'border bg-transparent border-white text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
},
contained: {
default:
'bg-custom-aquaBright text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
'bg-primary-light text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
primary:
'bg-custom-blue text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
'bg-primary-main text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
secondary:
'bg-custom-violetPale text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
'bg-secondary-light text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
white:
'bg-white text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
},
@ -92,7 +92,7 @@ const IconButton = ({
}) => {
const buttonElement = useRef(null);
const handleOnClick = e => {
const handleOnClick = (e) => {
buttonElement.current.blur();
if (rest.onClick) {
rest.onClick(e);

4
platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.jsx
View File

@ -35,8 +35,8 @@ const InputLabelWrapper = ({
className={classnames(
'mx-2 w-2',
sortDirection !== 'none'
? 'text-custom-aquaBright'
: 'text-custom-blue'
? 'text-primary-light'
: 'text-primary-main'
)}
/>
)}

4
platform/ui/src/components/InputText/InputText.jsx
View File

@ -19,11 +19,11 @@ const InputText = ({
onLabelClick={onLabelClick}
>
<Input
className="border-custom-blue mt-2 bg-black"
className="border-primary-main mt-2 bg-black"
type="text"
containerClassName="mr-2"
value={value}
onChange={event => {
onChange={(event) => {
onChange(event.target.value);
}}
/>

2
platform/ui/src/components/NavBar/NavBar.jsx
View File

@ -6,7 +6,7 @@ const NavBar = ({ className, children }) => {
return (
<div
className={classnames(
'flex flex-row items-center bg-custom-navy px-3 py-1 sticky top-0 z-10 border-b-4 border-black',
'flex flex-row items-center bg-secondary-dark px-3 py-1 sticky top-0 z-10 border-b-4 border-black',
className
)}
>

4
platform/ui/src/components/Select/Select.css
View File

@ -1,5 +1,5 @@
.customSelect__wrapper .customSelect__control {
@apply bg-black border-custom-blue shadow transition duration-300 border rounded w-full text-sm text-white leading-tight;
@apply bg-black border-primary-main shadow transition duration-300 border rounded w-full text-sm text-white leading-tight;
min-height: 33px;
}
.customSelect__wrapper .customSelect__control:hover {
@ -28,7 +28,7 @@
}
.customSelect__wrapper .customSelect__option:focus {
@apply bg-custom-blue;
@apply bg-primary-main;
}
.customSelect__wrapper .customSelect__option--is-selected {

2
platform/ui/src/components/TableCell/TableCell.jsx
View File

@ -22,7 +22,7 @@ const TableCell = ({
},
isTableHead: {
true: '',
false: 'border-r border-custom-violetPale',
false: 'border-r border-secondary-light',
},
};

8
platform/ui/src/components/TableHead/TableHead.jsx
View File

@ -6,7 +6,7 @@ const TableHead = ({ children, className, style }) => {
return (
<div
className={classnames(
'bg-custom-navy border-b border-custom-violetPale flex font-bold pr-2',
'bg-secondary-dark border-b border-secondary-light flex font-bold pr-2',
className
)}
style={style}
@ -26,9 +26,9 @@ TableHead.defaultProps = {
};
TableHead.propTypes = {
children: function(props, propName, componentName) {
children: function (props, propName, componentName) {
const elements = React.Children.toArray(props.children);
const isString = elements.some(child => typeof child === 'string');
const isString = elements.some((child) => typeof child === 'string');
if (isString) {
return new Error(
@ -37,7 +37,7 @@ TableHead.propTypes = {
}
const isInvalidElement = elements.some(
child => !React.isValidElement(child)
(child) => !React.isValidElement(child)
);
if (isInvalidElement) {

4
platform/ui/src/components/Typography/Typography.jsx
View File

@ -44,8 +44,8 @@ const classes = {
color: {
initial: 'text-white',
inherit: 'text-inherit',
primary: 'text-custom-blue',
secondary: 'text-custom-grayLight',
primary: 'text-primary-main',
secondary: 'text-common-light',
error: 'text-red-600',
},
align: {

4
platform/ui/src/gatsby-theme-docz/tailwind.css
View File

@ -16,9 +16,9 @@
.ohif-scrollbar::-webkit-scrollbar-thumb {
@apply rounded;
@apply bg-custom-blue;
@apply bg-primary-main;
}
.ohif-scrollbar::-webkit-scrollbar-thumb:window-inactive {
@apply bg-custom-blue;
@apply bg-primary-main;
}

4
platform/ui/src/gatsby-theme-docz/theme.css
View File

@ -15,3 +15,7 @@
#main-container > a {
@apply underline text-blue-500;
}
code {
@apply bg-gray-200 text-lg text-black px-2 py-1 rounded;
}

24
platform/ui/src/views/Colors/BackgroundColor.jsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import classnames from 'classnames';
import tailwindConfig from '../../../tailwind.config';
const BackgroundColor = ({ color }) => {
const getColorValue = () => {
const currentColor = color.split('-');
const { colors } = tailwindConfig.theme;
return colors[currentColor[0]][currentColor[1]];
};
console.log(tailwindConfig);
return (
<div
className={classnames(
`mb-4 w-56 h-10 flex items-center justify-center flex-col text-white text-lg bg-${color} py-8`
)}
>
<p>{getColorValue()}</p>
<p>bg-{color}</p>
</div>
);
};
export default BackgroundColor;

84
platform/ui/src/views/Colors/Colors.mdx Normal file
View File

@ -0,0 +1,84 @@
---
name: Colors
menu: System
route: system/colors
---
import { Playground, Props } from 'docz';
import BackgroundColor from './BackgroundColor';
# Color System
**@ohif/ui** offers a color system with a handful of color utility classes.
As **@ohif/ui** uses Tailwind as a base styling library, you will be able to use
all the default colors from Tailwind, besides our custom colors too.
# How to use
To apply color in your element, you will use the same way Tailwind does.
- Background - `bg-primary-main`
- Border - `border-primary-main`
- Text - `text-primary-main`
- Placeholder - `placeholder-primary-main`
Check [Tailwind's documentation](https://tailwindcss.com/docs) to see more
details about color classes.
# Examples
## Text
<Playground>
<div className="p-8">
<p className="text-common-bright">text-common-bright</p>
<p className="text-common-light">text-common-light</p>
<p className="text-common-main">text-common-main</p>
<p className="text-common-dark">text-common-dark</p>
<p className="text-common-active">text-common-active</p>
</div>
</Playground>
## Background
<div className="flex">
<div className="mr-8">
<BackgroundColor color="primary-light" />
<BackgroundColor color="primary-main" />
<BackgroundColor color="primary-dark" />
<BackgroundColor color="primary-active" />
</div>
<div>
<BackgroundColor color="secondary-light" />
<BackgroundColor color="secondary-main" />
<BackgroundColor color="secondary-dark" />
<BackgroundColor color="secondary-active" />
</div>
</div>
# Color palette
```javascript
primary: {
light: '#5acce6',
main: '#0944b3',
dark: '#090c29',
active: '#348cfd',
},
secondary: {
light: '#3a3f99',
main: '#2b166b',
dark: '#041c4a',
active: '#1f1f27',
},
common: {
bright: '#e1e1e1',
light: '#a19fad',
main: '#fff',
dark: '#726f7e',
active: '#2c3074',
},
```

4
platform/ui/src/views/StudyList/components/Header.js
View File

@ -18,13 +18,13 @@ function Header({ appLogo = OHIFLogo(), children, t }) {
<div>{children}</div>
</div>
<div className="flex items-center">
<span className="mr-3 text-custom-grayLight text-lg">
<span className="mr-3 text-common-light text-lg">
{t('FOR INVESTIGATIONAL USE ONLY')}
</span>
<IconButton
variant="text"
color="inherit"
className="text-custom-blueBright"
className="text-primary-active"
onClick={showSettingsDropdown}
>
<React.Fragment>

39
platform/ui/src/views/StudyList/components/StudyListFilter.js
View File

@ -13,7 +13,7 @@ import {
} from '@ohif/ui';
const isFiltering = (currentFiltersValues, filtersValues) => {
return Object.keys(currentFiltersValues).some(name => {
return Object.keys(currentFiltersValues).some((name) => {
const filterValue = currentFiltersValues[name];
return filterValue !== filtersValues[name];
});
@ -25,7 +25,7 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
);
const { sortBy, sortDirection } = currentFiltersValues;
const handleFilterLabelClick = name => {
const handleFilterLabelClick = (name) => {
let _sortDirection = 'ascending';
if (sortBy === name) {
if (sortDirection === 'ascending') {
@ -36,7 +36,7 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
}
if (numOfStudies <= 100) {
setcurrentFiltersValues(prevState => ({
setcurrentFiltersValues((prevState) => ({
...prevState,
sortBy: _sortDirection !== 0 ? name : '',
sortDirection: _sortDirection,
@ -72,8 +72,8 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
sortDirection={_sortDirection}
onLabelClick={onLabelClick}
value={currentFiltersValues[name]}
onChange={newValue => {
setcurrentFiltersValues(prevState => ({
onChange={(newValue) => {
setcurrentFiltersValues((prevState) => ({
...prevState,
[name]: newValue,
}));
@ -91,8 +91,8 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
onLabelClick={onLabelClick}
options={inputProps.options}
value={currentFiltersValues[name]}
onChange={newValue => {
setcurrentFiltersValues(prevState => ({
onChange={(newValue) => {
setcurrentFiltersValues((prevState) => ({
...prevState,
[name]: newValue,
}));
@ -108,8 +108,8 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
sortDirection={_sortDirection}
onLabelClick={onLabelClick}
value={currentFiltersValues[name]}
onChange={newValue => {
setcurrentFiltersValues(prevState => ({
onChange={(newValue) => {
setcurrentFiltersValues((prevState) => ({
...prevState,
[name]: newValue,
}));
@ -134,14 +134,11 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
return (
<>
<div>
<div className="bg-custom-navyDark">
<div className="bg-primary-dark">
<div className="container m-auto relative flex flex-col pt-5">
<div className="flex flex-row justify-between mb-5 px-12">
<div className="flex flex-row">
<Typography
variant="h4"
className="text-custom-aquaBright mr-6"
>
<Typography variant="h4" className="text-primary-light mr-6">
Study List
</Typography>
<div className="flex flex-row items-end">
@ -149,12 +146,12 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
variant="text"
size="small"
color="inherit"
className="text-custom-blueBright"
className="text-primary-active"
startIcon={<Icon name="info-link" className="w-2" />}
>
<span className="flex flex-col flex-1">
<span>Learn more</span>
<span className="opacity-50 pt-1 border-b border-custom-blueBright"></span>
<span className="opacity-50 pt-1 border-b border-primary-active"></span>
</span>
</Button>
</div>
@ -165,7 +162,7 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
rounded="full"
variant="outlined"
color="primary"
className="text-custom-blueBright border-custom-blueBright mx-8"
className="text-primary-active border-primary-active mx-8"
startIcon={<Icon name="cancel" />}
onClick={clearFilters}
>
@ -177,7 +174,7 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
</Typography>
<Typography
variant="h6"
className="text-custom-grayLight self-end pb-1"
className="text-common-light self-end pb-1"
>
Studies
</Typography>
@ -187,10 +184,10 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
</div>
</div>
<div className="sticky z-10 border-b-4 border-black" style={{ top: 58 }}>
<div className="bg-custom-navyDark pt-3 pb-3 ">
<div className="bg-primary-dark pt-3 pb-3 ">
<div className="container m-auto relative flex flex-col">
<div className="flex flex-row w-full">
{filtersMeta.map(filterMeta => {
{filtersMeta.map((filterMeta) => {
return (
<div
key={filterMeta.name}
@ -208,7 +205,7 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
</div>
{numOfStudies > 100 && (
<div className="container m-auto">
<div className="bg-custom-blue text-center text-base py-1 rounded-b">
<div className="bg-primary-main text-center text-base py-1 rounded-b">
<p className="text-white">
Filter list to 100 studies or less to enable sorting
</p>

12
platform/ui/src/views/StudyList/components/StudyListPagination.js
View File

@ -7,10 +7,10 @@ import {
Icon,
} from '../../../components/';
const StudyListPagination = props => {
const StudyListPagination = (props) => {
const [currentPage, setCurrentPage] = useState(1);
const navigateToPage = page => {
const navigateToPage = (page) => {
const toPage = page < 1 ? 1 : page;
setCurrentPage(toPage);
};
@ -23,7 +23,7 @@ const StudyListPagination = props => {
<div className="relative mr-3">
<select
defaultValue="25"
className="block appearance-none w-full bg-transparent border border-custom-darkSlateBlue text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none"
className="block appearance-none w-full bg-transparent border border-common-active text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none"
style={{ height: 28 }}
>
<option value="25">25</option>
@ -50,7 +50,7 @@ const StudyListPagination = props => {
<ButtonGroup color="primary">
<IconButton
size="small"
className="border-custom-darkSlateBlue px-4 py-2 text-base"
className="border-common-active px-4 py-2 text-base"
style={{ padding: '3px 12px', minWidth: 0 }}
color="white"
onClick={() => navigateToPage(1)}
@ -59,14 +59,14 @@ const StudyListPagination = props => {
</IconButton>
<Button
size="small"
className="border-custom-darkSlateBlue py-2 text-base"
className="border-common-active py-2 text-base"
style={{ padding: '3px 8px', minWidth: 0 }}
color="white"
onClick={() => navigateToPage(currentPage - 1)}
>{`< Previous`}</Button>
<Button
size="small"
className="border-custom-darkSlateBlue py-2 text-base"
className="border-common-active py-2 text-base"
style={{ padding: '3px 20px', minWidth: 0 }}
color="white"
onClick={() => navigateToPage(currentPage + 1)}

22
platform/ui/src/views/StudyList/components/StudyListTable.js
View File

@ -6,11 +6,11 @@ import { format } from 'date-fns';
import { Button, Icon, EmptyStudies } from '@ohif/ui';
const getGridColClass = (filtersMeta, name) => {
const filter = filtersMeta.find(filter => filter.name === name);
const filter = filtersMeta.find((filter) => filter.name === name);
return (filter && filter.gridCol && `w-${filter.gridCol}/24`) || '';
};
const StudyTableRow = props => {
const StudyTableRow = (props) => {
const {
AccessionNumber,
Modalities,
@ -28,30 +28,30 @@ const StudyTableRow = props => {
const ChevronIconName = isOpened ? 'chevron-down' : 'chevron-right';
const tdClasses = [
'px-4 py-2 text-base',
{ 'border-b border-custom-violetPale': !isOpened },
{ 'border-b border-secondary-light': !isOpened },
];
return (
<>
<tr>
<td
className={classnames('border-0 p-0', {
'border-b border-custom-violetPale bg-custom-navyDark': isOpened,
'border-b border-secondary-light bg-primary-dark': isOpened,
})}
>
<div
className={classnames('w-full transition duration-300', {
'border border-custom-aquaBright rounded overflow-hidden mb-2 hover:border-custom-violetPale': isOpened,
'border border-primary-light rounded overflow-hidden mb-2 hover:border-secondary-light': isOpened,
})}
>
<table className={classnames('w-full p-4')}>
<tbody>
<tr
className={classnames(
'cursor-pointer hover:bg-custom-violetDark transition duration-300 bg-black',
'cursor-pointer hover:bg-secondary-main transition duration-300 bg-black',
{
'bg-custom-navyDark': !isOpened,
'bg-primary-dark': !isOpened,
},
{ 'bg-custom-navy': isOpened }
{ 'bg-secondary-dark': isOpened }
)}
onClick={toggleRow}
>
@ -115,8 +115,8 @@ const StudyTableRow = props => {
<Icon
name="series-active"
className={classnames('inline-flex mr-2', {
'text-custom-blueBright': isOpened,
'text-custom-violetPale': !isOpened,
'text-primary-active': isOpened,
'text-secondary-light': !isOpened,
})}
/>
{Instances}
@ -162,7 +162,7 @@ const StudyTableRow = props => {
>
Module 3
</Button>
<div className="ml-5 text-lg text-custom-grayBright inline-flex items-center">
<div className="ml-5 text-lg text-common-bright inline-flex items-center">
<Icon
name="notificationwarning-diamond"
className="mr-2 w-5 h-5"

67
platform/ui/tailwind.config.js
View File

@ -16,22 +16,43 @@ module.exports = {
initial: 'initial',
inherit: 'inherit',
primary: {
light: '#5acce6',
main: '#0944b3',
dark: '#090c29',
active: '#348cfd',
},
secondary: {
light: '#3a3f99',
main: '#2b166b',
dark: '#041c4a',
active: '#1f1f27',
},
common: {
bright: '#e1e1e1',
light: '#a19fad',
main: '#fff',
dark: '#726f7e',
active: '#2c3074',
},
/** CUSTOM THEME COLORS */
custom: {
dark: '#1f1f27',
aquaBright: '#5acce6',
navyDark: '#090c29',
navy: '#041c4a',
violetDark: '#2b166b',
violetPale: '#3a3f99',
blue: '#0944b3',
blueBright: '#348cfd',
aquaPale: '#7bb2ce',
white: '#ffffff',
grayBright: '#e1e1e1',
grayLight: '#a19fad',
gray: '#726f7e',
darkSlateBlue: '#2c3074',
dark: '#1f1f27', // [class]-secondary-active
aquaBright: '#5acce6', // [class]-primary-light
navyDark: '#090c29', // [class]-primary-dark
navy: '#041c4a', // [class]-secondary-dark
violetDark: '#2b166b', // [class]-secondary-main
violetPale: '#3a3f99', // [class]-secondary-light
blue: '#0944b3', // [class]-primary-main
blueBright: '#348cfd', // [class]-primary-active
white: '#ffffff', // [class]-common-main
grayBright: '#e1e1e1', // [class]-common-bright
grayLight: '#a19fad', // [class]-common-light
gray: '#726f7e', // [class]-common-dark
darkSlateBlue: '#2c3074', // [class]-common-active
},
/** END CUSTOM THEME COLORS */
@ -170,7 +191,7 @@ module.exports = {
'80': '20rem',
'250px': '250px',
},
backgroundColor: theme => theme('colors'),
backgroundColor: (theme) => theme('colors'),
backgroundPosition: {
bottom: 'bottom',
center: 'center',
@ -187,7 +208,7 @@ module.exports = {
cover: 'cover',
contain: 'contain',
},
borderColor: theme => ({
borderColor: (theme) => ({
...theme('colors'),
default: theme('colors.gray.300', 'currentColor'),
}),
@ -301,7 +322,7 @@ module.exports = {
extrabold: '800',
black: '900',
},
height: theme => ({
height: (theme) => ({
auto: 'auto',
...theme('spacing'),
full: '100%',
@ -345,7 +366,7 @@ module.exports = {
...theme('spacing'),
...negative(theme('spacing')),
}),
maxHeight: theme => ({
maxHeight: (theme) => ({
full: '100%',
screen: '100vh',
...theme('spacing'),
@ -430,8 +451,8 @@ module.exports = {
'11': '11',
'12': '12',
},
padding: theme => theme('spacing'),
placeholderColor: theme => theme('colors'),
padding: (theme) => theme('spacing'),
placeholderColor: (theme) => theme('colors'),
stroke: {
current: 'currentColor',
},
@ -440,8 +461,8 @@ module.exports = {
'1': '1',
'2': '2',
},
textColor: theme => theme('colors'),
width: theme => ({
textColor: (theme) => theme('colors'),
width: (theme) => ({
auto: 'auto',
...theme('spacing'),
'1/2': '50%',
@ -505,7 +526,7 @@ module.exports = {
'40': '40',
'50': '50',
},
gap: theme => theme('spacing'),
gap: (theme) => theme('spacing'),
gridTemplateColumns: {
none: 'none',
'1': 'repeat(1, minmax(0, 1fr))',