Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DUOS-2559][risk=no] Extract catalog styles into a module #2316

Merged
merged 2 commits into from
Aug 23, 2023
Merged

[DUOS-2559][risk=no] Extract catalog styles into a module #2316

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9dfd530
pull as many catalog specific styles into a module
rushtong Aug 23, 2023
d37f8a2
multi-style fix
rushtong Aug 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 0 additions & 33 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1643,16 +1643,6 @@ input:-webkit-autofill {
overflow-y: visible;
}

.table-scroll-admin {
overflow-x: scroll;
margin: 0 25px 5px 60px !important;
overflow-y: visible;
}

.table-scroll-admin thead, .table-scroll thead {
padding: 0 10px 0 10px;
}

.table {
margin: 15px 0 !important;
}
Expand All @@ -1677,20 +1667,6 @@ input:-webkit-autofill {
padding-top: 5px;
}

td:first-child {
position: absolute;
margin-left: -40px;
}

td:first-child .checkbox {
margin-top: 0px;
display: inline;
}

td:first-child .checkbox label {
padding-top: 1px;
}

.dataset-actions {
display: inline !important;
margin: 0;
Expand Down Expand Up @@ -1773,10 +1749,6 @@ td:first-child .checkbox label {
display: inline;
}

.dataset-disabled, .dataset-disabled p, .dataset-disabled a {
color: #cccccc !important;
}

.accordion-title {
font-size: 24px;
font-weight: 500;
Expand Down Expand Up @@ -1985,11 +1957,6 @@ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:foc
background-color: #00928A;
}

.layout-table td:first-child {
position: inherit;
margin-left: -40px;
}

.layout-table th,td {
padding-top: 2px;
padding-right: 30px;
Expand Down
86 changes: 41 additions & 45 deletions src/pages/DatasetCatalog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ import {SearchBox} from '../components/SearchBox';
import {DAC, DAR, DataSet} from '../libs/ajax';
import {Storage} from '../libs/storage';
import {Theme} from '../libs/theme';
import datasetIcon from '../images/icon_dataset_.png';
import {getBooleanFromEventHtmlDataValue, USER_ROLES} from '../libs/utils';
import {DataUseTranslation} from '../libs/dataUseTranslation';
import {spinnerService} from '../libs/spinner-service';
import { ArrowDropUp, ArrowDropDown } from '@mui/icons-material';
import {isDevEnv} from '../utils/EnvironmentUtils';
import DuosLogo from '../images/duos-network-logo.svg';
import style from './DatasetCatalog.module.css';

const tableBody = {
...Theme.textTableBody,
Expand Down Expand Up @@ -457,13 +457,11 @@ export default function DatasetCatalog(props) {
})
])
]),
div({
className: 'right'
}, [
div({}, [
div({ className: 'col-lg-7 col-md-7 col-sm-7 col-xs-7 search-wrapper', style: { display: 'flex' } }, [
h(SearchBox, { id: 'datasetCatalog', searchHandler: handleSearchDul, pageHandler: handlePageChange, color: 'dataset' }),
div({
className: 'checkbox',
className: style['checkbox'],
isRendered: isCustomDacDatasetPage,
style: {
marginLeft: '10px',
Expand All @@ -474,15 +472,15 @@ export default function DatasetCatalog(props) {
checked: useCustomFilter,
type: 'checkbox',
'select-all': 'true',
className: 'checkbox-inline',
className: style['checkbox-inline'],
id: 'chk_filterDacId',
onChange: () => {
setUseCustomFilter(!useCustomFilter);
setCurrentPageOnlySelected(1);
setCurrentPageAllDatasets(1);
},
}),
label({ className: 'regular-checkbox', htmlFor: 'chk_filterDacId' }, [`Filter to only ${customDacDatasetPage?.dacName} data`]),
label({ className: style['regular-checkbox'], htmlFor: 'chk_filterDacId' }, [`Filter to only ${customDacDatasetPage?.dacName} data`]),
]),
]),

Expand All @@ -501,7 +499,7 @@ export default function DatasetCatalog(props) {
div({style: Theme.lightTable}, [
form({ className: 'pos-relative' }, [
div({
className: 'checkbox display-inline-block',
className: style['checkbox display-inline-block'],
style: {
marginLeft: '28px',
marginBottom: '0px',
Expand All @@ -519,7 +517,7 @@ export default function DatasetCatalog(props) {
]),
// vertical line
div({
className: 'display-inline-block',
className: style['display-inline-block'],
style: {
top: '13px',
position: 'absolute',
Expand All @@ -534,7 +532,7 @@ export default function DatasetCatalog(props) {
]),

div({
className: 'checkbox display-inline-block',
className: style['checkbox display-inline-block'],
style: {
marginLeft: '18px',
marginBottom: '0px',
Expand All @@ -544,62 +542,60 @@ export default function DatasetCatalog(props) {
type: 'checkbox',
id: 'chk_onlySelected',
checked: filterToOnlySelected,
className: 'checkbox-inline',
onChange: () => {
setFilterToOnlySelected(!filterToOnlySelected);
}
}),
label({ id: 'lbl_onlySelected', className: 'regular-checkbox', htmlFor: 'chk_onlySelected' },
label({ id: 'lbl_onlySelected', className: style['regular-checkbox'], htmlFor: 'chk_onlySelected' },
[`Show ${numDatasetsSelected} Dataset${(numDatasetsSelected != 1?'s':'')} Selected`])
]),
]),

div({ className: currentUser.isAdmin ? 'table-scroll-admin' : 'table-scroll' }, [
div({ className: currentUser.isAdmin ? style['table-scroll-admin'] : style['table-scroll'] }, [
table({ className: 'table' }, [
thead({}, [
tr({}, [
th(),
th({ isRendered: (currentUser.isAdmin || currentUser.isChairPerson), className: 'cell-size', style: { minWidth: '14rem' }}, ['Actions']),
th({ className: 'cell-size' }, [getSortDisplay({ field: 'datasetIdentifier', label: 'Dataset ID' })]),
th({ className: 'cell-size' }, [getSortDisplay({ field: 'Dataset Name' })]),
th({ className: 'cell-size' }, [getSortDisplay({ field: 'Data Access Committee' })]),
th({ className: 'cell-size' }, ['Data Source']),
th({ className: 'cell-size' }, ['Data Use Terms']),
th({ className: 'cell-size' }, [getSortDisplay({ field: 'Data Type' })]),
th({ className: 'cell-size' }, [getSortDisplay({ field: 'Disease Studied' })]),
th({ className: 'cell-size' }, [getSortDisplay({ field: 'Principal Investigator (PI)' })]),
th({ className: 'cell-size' }, [getSortDisplay({ field: '# of Participants' })]),
th({ className: 'cell-size' }, [getSortDisplay({ field: 'Description' })]),
th({ className: 'cell-size' }, [getSortDisplay({ field: 'Species' })]),
th({ className: 'cell-size' }, [getSortDisplay({ field: 'Data Custodian' })]),
th({ isRendered: (currentUser.isAdmin || currentUser.isChairPerson), className: style['cell-size'], style: { minWidth: '14rem' }}, ['Actions']),
th({ className: style['cell-size'] }, [getSortDisplay({ field: 'datasetIdentifier', label: 'Dataset ID' })]),
th({ className: style['cell-size'] }, [getSortDisplay({ field: 'Dataset Name' })]),
th({ className: style['cell-size'] }, [getSortDisplay({ field: 'Data Access Committee' })]),
th({ className: style['cell-size'] }, ['Data Source']),
th({ className: style['cell-size'] }, ['Data Use Terms']),
th({ className: style['cell-size'] }, [getSortDisplay({ field: 'Data Type' })]),
th({ className: style['cell-size'] }, [getSortDisplay({ field: 'Disease Studied' })]),
th({ className: style['cell-size'] }, [getSortDisplay({ field: 'Principal Investigator (PI)' })]),
th({ className: style['cell-size'] }, [getSortDisplay({ field: '# of Participants' })]),
th({ className: style['cell-size'] }, [getSortDisplay({ field: 'Description' })]),
th({ className: style['cell-size'] }, [getSortDisplay({ field: 'Species' })]),
th({ className: style['cell-size'] }, [getSortDisplay({ field: 'Data Custodian' })]),
])
]),

tbody({ isRendered: !isNil(visibleDatasets()) && !isEmpty(visibleDatasets()) }, [
datasetsOnPage
.map((dataset, trIndex) => {
return h(Fragment, { key: trIndex }, [
tr({ className: 'tableRow' }, [
td({ width: '60px' }, [
div({ className: 'checkbox', isRendered: !isNil(dataset.dacId)}, [
tr({}, [
td({ className: style['first-child'], width: '60px' }, [
div({ className: style['checkbox'], isRendered: !isNil(dataset.dacId)}, [
input({
type: 'checkbox',
id: trIndex + '_chkSelect',
name: 'chk_select',
checked: dataset.checked,
className: 'checkbox-inline user-checkbox',
onChange: checkSingleRow(dataset)
}),
label({
className: 'regular-checkbox rp-choice-questions',
className: style['regular-checkbox'],
// Apply additional styling for inactive datasets
style: inactiveCheckboxStyle(dataset),
htmlFor: trIndex + '_chkSelect' })
])
]),

td({ isRendered: (currentUser.isAdmin || currentUser.isChairPerson) }, [
div({ className: 'dataset-actions' }, [
div({ className: style['dataset-actions'] }, [
a({
id: trIndex + '_btnDelete', name: 'btn_delete', onClick: openDelete(dataset.dataSetId),
disabled: (!dataset.deletable || !isEditDatasetEnabled(dataset))
Expand Down Expand Up @@ -636,94 +632,94 @@ export default function DatasetCatalog(props) {

td({
id: dataset.datasetIdentifier + '_dataset', name: 'datasetIdentifier',
className: 'cell-size ' + (!isVisible(dataset) ? 'dataset-disabled' : ''),
className: `${style['cell-size']} ` + (!isVisible(dataset) ? style['dataset-disabled'] : ''),
style: tableBody
}, [
dataset['Dataset ID']
]),

td({
id: trIndex + '_datasetName', name: 'datasetName',
className: 'cell-size ' + (!isVisible(dataset) ? !!'dataset-disabled' : ''),
className: `${style['cell-size']} ` + (!isVisible(dataset) ? !! style['dataset-disabled'] : ''),
style: tableBody
}, [findPropertyValue(dataset, 'Dataset Name')]),

td({
id: trIndex + '_dac', name: 'dac',
className: 'cell-size ' + (!isVisible(dataset) ? 'dataset-disabled' : ''),
className: `${style['cell-size']} ` + (!isVisible(dataset) ? style['dataset-disabled'] : ''),
style: tableBody
}, [
dataset['Data Access Committee']
]),

td({
className: 'cell-size ' + (!isVisible(dataset) ? 'dataset-disabled' : ''),
className: `${style['cell-size']} ` + (!isVisible(dataset) ? style['dataset-disabled'] : ''),
style: tableBody
}, [
getLinkDisplay(dataset, trIndex)
]),

td({
className: 'cell-size ' + (!isVisible(dataset) ? 'dataset-disabled' : ''),
className: `${style['cell-size']} ` + (!isVisible(dataset) ? style['dataset-disabled'] : ''),
style: tableBody
}, [
a({
id: trIndex + '_linkTranslatedDul', name: 'link_translatedDul',
onClick: () => openTranslatedDUL(dataset.dataUse),
className: (!isVisible(dataset) ? 'dataset-disabled' : 'enabled')
className: (!isVisible(dataset) ? style['dataset-disabled'] : 'enabled')
}, dataset.codeList)
]),

td({
id: trIndex + '_dataType', name: 'dataType',
className: 'cell-size ' + (!isVisible(dataset) ? 'dataset-disabled' : ''),
className: `${style['cell-size']} ` + (!isVisible(dataset) ? style['dataset-disabled'] : ''),
style: tableBody
}, [
findPropertyValue(dataset, 'Data Type')
]),

td({
id: trIndex + '_phenotype', name: 'phenotype',
className: 'cell-size ' + (!isVisible(dataset) ? 'dataset-disabled' : ''),
className: `${style['cell-size']} ` + (!isVisible(dataset) ? style['dataset-disabled'] : ''),
style: tableBody
}, [
dataset['Disease Studied']
]),

td({
id: trIndex + '_pi', name: 'pi', className: 'cell-size ' + (!isVisible(dataset) ? 'dataset-disabled' : ''),
id: trIndex + '_pi', name: 'pi', className: 'cell-size ' + (!isVisible(dataset) ? style['dataset-disabled'] : ''),
style: tableBody
}, [
dataset['Principal Investigator (PI)']
]),

td({
id: trIndex + '_participants', name: 'participants',
className: 'cell-size ' + (!isVisible(dataset) ? 'dataset-disabled' : ''),
className: `${style['cell-size']} ` + (!isVisible(dataset) ? style['dataset-disabled'] : ''),
style: tableBody
}, [
dataset['# of Participants']
]),

td({
id: trIndex + '_description', name: 'description',
className: 'cell-size ' + (!isVisible(dataset) ? 'dataset-disabled' : ''),
className: `${style['cell-size']} ` + (!isVisible(dataset) ? style['dataset-disabled'] : ''),
style: tableBody
}, [
findPropertyValue(dataset, 'Description')
]),

td({
id: trIndex + '_species', name: 'species',
className: 'cell-size ' + (!isVisible(dataset) ? 'dataset-disabled' : ''),
className: `${style['cell-size']} ` + (!isVisible(dataset) ? style['dataset-disabled'] : ''),
style: tableBody
}, [
findPropertyValue(dataset, 'Species')
]),

td({
id: trIndex + '_depositor', name: 'depositor',
className: 'cell-size ' + (!isVisible(dataset) ? 'dataset-disabled' : ''),
className: `${style['cell-size']} ` + (!isVisible(dataset) ? style['dataset-disabled'] : ''),
style: tableBody
}, [
dataset['Data Custodian']
Expand Down
Loading
Loading