feat: responsive study list (#1068)
* feat: 🎸 Load spinner when selecting gcloud store. Add key on td * feat: 🎸 Code review. Translate loading study status * feat: 🎸 Code review. Minor code refactoring * fix: add missing study and index declerations * Newer version of react-dates (calendar input component) * Add useMedia hook * Add useDebounce hook * Export hooks for consumption * Pull search filter into own component * StudyListWithData to StudyListRoute * Rename pagination component * Rename Toolbar * CustomeDateRangePicker to plain ol' css * Remove unused styles * Misc * Magic to make our "OR" filters work * Play w/ Mobile styles * Fix pagination pushing out max width for viewport * Tidy up small and medium templates * Remove unecessary nesting * Better mobile header and logo styles * Fix studyList font size * Remove unused code * hookup on click * Fix table search selectors * Cypress uses medium width * Remove irrelevant test * Fix primary sort * Fix sort for our smaller displays * fix study list sometimes longer than specified rowsPerPage * Simplify date picker styles * restore study date filters * Fix about table styling * fix take value for search * Fix header sizing for viewer and list route * Remove dead code * Restore isLoading * Update platform/ui/src/components/studyList/StudyList.styl Co-Authored-By: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com> * Attempt first usage of translations w/ hooks * Pull from react-i18n library * Fit presets on to a single line * add no results message * Show error message in studyList table * Update input selectors for e2e tests * Make sure messages span all columns * fix test selector for table results * Skip hover for result rows * fix imports * Date filtering w/ config * Default export * Pushed to PageComponent * Remove DropZone This previously only worked for null/undefined studies. I'm unable to trigger the state by testing the data. This "might" have happened when using a fresh/empty PACS; but even an empty array of studies would not show
This commit is contained in:
Danny BrownandRodrigo Antinarelli authored and GitHub committed
1 parent
70532a6cc6
commit
2cdef4b984
35 files changed
+1814
-1347
No files matched your search
@@ -4,6 +4,7 @@
|
||||
$study-list-padding = 8%;
|
||||
$study-list-toolbar-height = 75px;
|
||||
$body-cell-height = 40px;
|
||||
$body-cell-top-bottom-padding = 16px;
|
||||
|
||||
$tablePaddingMediumScreen = 5px
|
||||
$tablePaddingBigScreen = 3%
|
||||
@@ -20,21 +21,41 @@ placeholder-color(c)
|
||||
&:-ms-input-placeholder
|
||||
color: c
|
||||
|
||||
.DateRangePicker
|
||||
height: 40px
|
||||
margin: 0 5px 20px 5px
|
||||
cursor: pointer
|
||||
border: none
|
||||
position: block
|
||||
.study-list-header
|
||||
.addNewStudy
|
||||
margin: 0 10px
|
||||
|
||||
.studyListToolbar
|
||||
label
|
||||
font-weight: 400
|
||||
cursor: pointer
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
|
||||
input
|
||||
width: 0.1px;
|
||||
height: 0.1px
|
||||
opacity: 0
|
||||
overflow: hidden
|
||||
position: absolute
|
||||
z-index: -1
|
||||
|
||||
color: var(--text-secondary-color)
|
||||
|
||||
&:hover
|
||||
color: var(--hover-color)
|
||||
|
||||
&:active
|
||||
color: var(--active-color)
|
||||
|
||||
.study-list-header
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: var(--ui-gray-darker)
|
||||
height: $study-list-toolbar-height
|
||||
margin-bottom: 2px
|
||||
padding: 0 $study-list-padding
|
||||
|
||||
&>div
|
||||
display: inline-block
|
||||
line-height: $study-list-toolbar-height
|
||||
|
||||
.header
|
||||
font-size: 22px
|
||||
@@ -42,17 +63,20 @@ placeholder-color(c)
|
||||
color: var(--table-text-secondary-color)
|
||||
line-height: $study-list-toolbar-height
|
||||
|
||||
.studylistToolbar
|
||||
height: $study-list-toolbar-height
|
||||
line-height: $study-list-toolbar-height
|
||||
.actions
|
||||
display: flex;
|
||||
|
||||
.studyCount
|
||||
.study-count
|
||||
color: var(--large-numbers-color)
|
||||
font-size: 40px
|
||||
font-weight: 100
|
||||
line-height: $study-list-toolbar-height
|
||||
|
||||
.theadBackground
|
||||
/*
|
||||
* Dark gray background with blue border
|
||||
* Spans width of page to create a distinct area for table filters
|
||||
*/
|
||||
.table-head-background
|
||||
height: 121px
|
||||
position: absolute
|
||||
width: 100%
|
||||
@@ -76,20 +100,110 @@ placeholder-color(c)
|
||||
height: 1px
|
||||
z-index: 2
|
||||
|
||||
#studyListContainer
|
||||
|
||||
.study-list-container
|
||||
width: 100%
|
||||
padding: 0 $study-list-padding
|
||||
position: absolute
|
||||
z-index: 2
|
||||
|
||||
.loading
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
table.table
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
|
||||
.loading-text
|
||||
color: var(--table-text-secondary-color)
|
||||
font-size: 30px
|
||||
width: fit-content;
|
||||
> tbody tr
|
||||
padding: 5px
|
||||
background-color: black
|
||||
|
||||
/* Striped Variant */
|
||||
&.table--striped > tbody tr:nth-child(even)
|
||||
background-color: var(--ui-gray-darker)
|
||||
|
||||
/* Hover Variant */
|
||||
&.table--hoverable > tbody tr
|
||||
&:hover, &:active, &.active
|
||||
background-color: var(--table-hover-color)
|
||||
&.no-hover
|
||||
&:hover, &:active, &.active
|
||||
background-color: var(--ui-gray-darker)
|
||||
|
||||
.study-list-container > table.table > tr
|
||||
height: 20px
|
||||
|
||||
.study-list-container > table.table > thead
|
||||
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
|
||||
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
|
||||
::-webkit-datetime-edit-day-field:not([aria-valuenow])
|
||||
color: transparent
|
||||
|
||||
.study-list-container > table.table > thead > tr > th
|
||||
padding: 0;
|
||||
border-bottom: 1px solid var(--ui-border-color-active);
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-top: 0;
|
||||
|
||||
.study-list-container > table.table > tbody > tr > td
|
||||
padding: $body-cell-top-bottom-padding 8px;
|
||||
height: $body-cell-height
|
||||
color: var(--table-text-primary-color)
|
||||
font-weight: 300
|
||||
word-wrap: break-word;
|
||||
|
||||
&.emptyCell
|
||||
color: var(--ui-gray-light)
|
||||
|
||||
.study-list-container > table.table > thead > tr > th.studyDate
|
||||
min-width: 230px
|
||||
|
||||
.study-list-container
|
||||
.filters
|
||||
label
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
min-width: 95px;
|
||||
margin: 0 auto;
|
||||
color: var(--table-text-primary-color);
|
||||
font-weight: 400;
|
||||
padding: 20px;
|
||||
user-select: none;
|
||||
font-size: 15px;
|
||||
|
||||
&:hover
|
||||
color: var(--active-color);
|
||||
|
||||
&.active, &:active
|
||||
color: var(--active-color);
|
||||
i
|
||||
margin: 0 5px;
|
||||
|
||||
input
|
||||
height: 40px
|
||||
margin: 0 5px 20px 5px
|
||||
padding: 0 20px
|
||||
cursor: pointer
|
||||
border: none
|
||||
background-color: var(--input-background-color)
|
||||
color: var(--input-placeholder-color)
|
||||
font-size: 10pt
|
||||
font-weight: normal
|
||||
border-radius: 4px
|
||||
width: calc(100% - 10px); /* Just use padding? */
|
||||
transition(all 0.15s ease)
|
||||
placeholder-color(var(--input-placeholder-color))
|
||||
|
||||
&:active, &:hover
|
||||
background-color: var(--input-background-color)
|
||||
|
||||
.loading-text
|
||||
color: var(--table-text-secondary-color)
|
||||
text-align: center;
|
||||
font-size: 30px
|
||||
|
||||
.notFound
|
||||
color: var(--table-text-secondary-color)
|
||||
@@ -97,191 +211,22 @@ placeholder-color(c)
|
||||
font-weight: 200
|
||||
text-align: center
|
||||
|
||||
table#tblStudyList
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 20px;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
@media only screen and (max-width: 768px)
|
||||
.study-list-header
|
||||
padding: 0 16px;
|
||||
|
||||
> tr
|
||||
height: 20px
|
||||
.study-list-container
|
||||
padding: 0;
|
||||
|
||||
> thead
|
||||
white-space: nowrap
|
||||
.study-list-container > table.table > thead > tr > th
|
||||
padding: 0 13px;
|
||||
|
||||
tr
|
||||
th
|
||||
padding: 0
|
||||
border-bottom: 1px solid var(--ui-border-color-active);
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-top: 0;
|
||||
.study-list-container > table.table > tbody > tr > td
|
||||
padding: 8px;
|
||||
|
||||
&.studyDate
|
||||
min-width: 230px
|
||||
.study-list-container .filters label
|
||||
padding: 8px;
|
||||
|
||||
.display-text
|
||||
display: inline-block
|
||||
cursor: pointer
|
||||
width: 100%
|
||||
min-width: 95px
|
||||
margin: 0 auto
|
||||
color: var(--table-text-primary-color)
|
||||
font-weight: 400
|
||||
padding: 20px
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
user-select: none
|
||||
|
||||
span
|
||||
font-size: 15px
|
||||
float: left
|
||||
|
||||
i
|
||||
margin: 0 5px
|
||||
|
||||
&:hover
|
||||
color: var(--active-color)
|
||||
|
||||
&.active, &:active
|
||||
color: var(--active-color)
|
||||
|
||||
input.studylist-search
|
||||
height: 40px
|
||||
margin: 0 5px 20px 5px
|
||||
padding: 0 20px
|
||||
cursor: pointer
|
||||
border: none
|
||||
background-color: var(--input-background-color)
|
||||
color: var(--input-placeholder-color)
|
||||
font-size: 10pt
|
||||
font-weight: normal
|
||||
width: calc(100% - 10px)
|
||||
border-radius: 4px
|
||||
|
||||
transition(all 0.15s ease)
|
||||
placeholder-color(var(--input-placeholder-color))
|
||||
|
||||
&.invisible
|
||||
visibility: hidden
|
||||
|
||||
&:active, &:hover
|
||||
background-color: var(--input-background-color)
|
||||
|
||||
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
|
||||
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
|
||||
::-webkit-datetime-edit-day-field:not([aria-valuenow])
|
||||
color: transparent
|
||||
|
||||
> tbody
|
||||
tr
|
||||
padding: 5px
|
||||
background-color: black
|
||||
|
||||
&:nth-child(even)
|
||||
background-color: var(--ui-gray-darker)
|
||||
|
||||
td
|
||||
padding: 8px;
|
||||
height: $body-cell-height
|
||||
line-height: $body-cell-height
|
||||
color: var(--table-text-primary-color)
|
||||
font-weight: 300
|
||||
border-top: 1px solid var(--ui-gray-lighter)
|
||||
border-bottom: 1px solid var(--ui-gray-lighter)
|
||||
white-space: nowrap
|
||||
transition(all 0.1s ease)
|
||||
|
||||
&.emptyCell
|
||||
color: #516873
|
||||
|
||||
&.emptyValue
|
||||
color: var(--ui-gray-light)
|
||||
|
||||
&:hover, &:active, &.active
|
||||
background-color: var(--table-hover-color)
|
||||
color: var(--text-primary-color)
|
||||
|
||||
td
|
||||
// This selector is necessary to override bootstrap's 'table' class
|
||||
border-top: 1px solid var(--ui-gray-lighter)
|
||||
border-bottom: 1px solid var(--ui-gray-lighter)
|
||||
background-color: var(--table-hover-color)
|
||||
|
||||
@media only screen and (max-width: 1362px)
|
||||
#studyListContainer
|
||||
padding: 0 $tablePaddingLargeScreen
|
||||
|
||||
table#tblStudyList
|
||||
thead,
|
||||
tbody
|
||||
tr
|
||||
th,
|
||||
td
|
||||
&:first-child
|
||||
padding-left: $tablePaddingLargeScreen
|
||||
|
||||
&:last-child
|
||||
padding-right: $tablePaddingLargeScreen
|
||||
|
||||
@media only screen and (max-width: 1161px)
|
||||
#studyListContainer
|
||||
padding: 0 $tablePaddingBigWidth
|
||||
|
||||
table#tblStudyList
|
||||
thead,
|
||||
tbody
|
||||
tr
|
||||
th,
|
||||
td
|
||||
&:first-child
|
||||
padding-left: $tablePaddingBigScreen
|
||||
|
||||
&:last-child
|
||||
padding-right: $tablePaddingBigScreen
|
||||
|
||||
@media only screen and (max-width: 1069px)
|
||||
.theadBackground
|
||||
height: 101px
|
||||
|
||||
.studylist-pagination > .row
|
||||
margin-right: 0;
|
||||
|
||||
.studyListToolbar
|
||||
padding: 0 $tablePaddingMediumScreen
|
||||
|
||||
#studyListContainer
|
||||
padding: 0
|
||||
|
||||
table#tblStudyList
|
||||
thead > tr > th
|
||||
|
||||
&:first-child
|
||||
padding-left: $tablePaddingMediumScreen
|
||||
|
||||
&:last-child
|
||||
padding-right: $tablePaddingMediumScreen
|
||||
|
||||
input.worklist-search
|
||||
padding: 10px
|
||||
|
||||
.display-text
|
||||
padding: 10px 5px
|
||||
|
||||
i
|
||||
width: auto
|
||||
|
||||
tbody > tr > td
|
||||
|
||||
&:first-child
|
||||
padding-left: $tablePaddingMediumScreen
|
||||
|
||||
&:last-child
|
||||
padding-right: $tablePaddingMediumScreen
|
||||
|
||||
.worklistPagination
|
||||
.row
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
@media only screen and (max-width: 500px)
|
||||
.hide-xs
|
||||
display: none;
|
||||
Reference in new issue
Block a user