Danny BrownandRodrigo Antinarelli
2cdef4b984
* 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
233 lines
5.0 KiB
Stylus
233 lines
5.0 KiB
Stylus
@import './../../design/styles/common/form.styl'
|
|
@import './../../design/styles/common/global.styl'
|
|
|
|
$study-list-padding = 8%;
|
|
$study-list-toolbar-height = 75px;
|
|
$body-cell-height = 40px;
|
|
$body-cell-top-bottom-padding = 16px;
|
|
|
|
$tablePaddingMediumScreen = 5px
|
|
$tablePaddingBigScreen = 3%
|
|
$tablePaddingLargeScreen = 5%
|
|
|
|
// TODO: move this to a common mixin files
|
|
placeholder-color(c)
|
|
&::-webkit-input-placeholder
|
|
color: c
|
|
&:-moz-placeholder
|
|
color: c
|
|
&::-moz-placeholder
|
|
color: c
|
|
&:-ms-input-placeholder
|
|
color: c
|
|
|
|
.study-list-header
|
|
.addNewStudy
|
|
margin: 0 10px
|
|
|
|
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
|
|
line-height: $study-list-toolbar-height
|
|
|
|
.header
|
|
font-size: 22px
|
|
font-weight: 300
|
|
color: var(--table-text-secondary-color)
|
|
line-height: $study-list-toolbar-height
|
|
|
|
.actions
|
|
display: flex;
|
|
|
|
.study-count
|
|
color: var(--large-numbers-color)
|
|
font-size: 40px
|
|
font-weight: 100
|
|
line-height: $study-list-toolbar-height
|
|
|
|
/*
|
|
* 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%
|
|
|
|
&:before, &:after
|
|
content: ''
|
|
display: block
|
|
left: 0
|
|
position: absolute
|
|
width: 100%
|
|
|
|
&:before
|
|
background-color: var(--ui-gray-darker)
|
|
height: 100%
|
|
top: 0
|
|
z-index: 1
|
|
|
|
&:after
|
|
background-color: var(--ui-border-color-active)
|
|
bottom: -1px
|
|
height: 1px
|
|
z-index: 2
|
|
|
|
|
|
.study-list-container
|
|
width: 100%
|
|
padding: 0 $study-list-padding
|
|
position: absolute
|
|
z-index: 2
|
|
|
|
table.table
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
|
|
> 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)
|
|
font-size: 30px
|
|
font-weight: 200
|
|
text-align: center
|
|
|
|
@media only screen and (max-width: 768px)
|
|
.study-list-header
|
|
padding: 0 16px;
|
|
|
|
.study-list-container
|
|
padding: 0;
|
|
|
|
.study-list-container > table.table > thead > tr > th
|
|
padding: 0 13px;
|
|
|
|
.study-list-container > table.table > tbody > tr > td
|
|
padding: 8px;
|
|
|
|
.study-list-container .filters label
|
|
padding: 8px;
|
|
|
|
@media only screen and (max-width: 500px)
|
|
.hide-xs
|
|
display: none;
|