Skip to content

Commit

Permalink
#330 change size of toggle buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@tibor-postek-m2ms
tibor-postek-m2ms committed May 29, 2020
1 parent a8d5219 commit ef1d9d5
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 46 deletions.
16 changes: 9 additions & 7 deletions js/components/datasets/datasetMoleculeList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,10 +117,12 @@ const useStyles = makeStyles(theme => ({
},
contColButton: {
minWidth: 'fit-content',
paddingLeft: theme.spacing(1) / 2,
paddingRight: theme.spacing(1) / 2,
paddingBottom: theme.spacing(1) / 8,
paddingTop: theme.spacing(1) / 8,
paddingLeft: theme.spacing(1) / 4,
paddingRight: theme.spacing(1) / 4,
paddingBottom: 0,
paddingTop: 0,
fontWeight: 'bold',
fontSize: 9,
borderRadius: 0,
borderColor: theme.palette.primary.main,
backgroundColor: theme.palette.primary.light,
Expand Down Expand Up @@ -441,7 +443,7 @@ export const DatasetMoleculeList = memo(
onClick={() => onButtonToggle('ligand')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">L</Typography>
L
</Button>
</Grid>
</Tooltip>
Expand All @@ -455,7 +457,7 @@ export const DatasetMoleculeList = memo(
onClick={() => onButtonToggle('protein')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">P</Typography>
P
</Button>
</Grid>
</Tooltip>
Expand All @@ -470,7 +472,7 @@ export const DatasetMoleculeList = memo(
onClick={() => onButtonToggle('complex')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">C</Typography>
C
</Button>
</Grid>
</Tooltip>
Expand Down
22 changes: 12 additions & 10 deletions js/components/datasets/datasetMoleculeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,12 @@ const useStyles = makeStyles(theme => ({
},
contColButton: {
minWidth: 'fit-content',
paddingLeft: theme.spacing(1) / 2,
paddingRight: theme.spacing(1) / 2,
paddingBottom: theme.spacing(1) / 8,
paddingTop: theme.spacing(1) / 8,
paddingLeft: theme.spacing(1) / 4,
paddingRight: theme.spacing(1) / 4,
paddingBottom: 0,
paddingTop: 0,
fontWeight: 'bold',
fontSize: 9,
borderRadius: 0,
borderColor: theme.palette.primary.main,
backgroundColor: theme.palette.primary.light,
Expand Down Expand Up @@ -419,7 +421,7 @@ export const DatasetMoleculeView = memo(({ imageHeight, imageWidth, data, datase
}}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">A</Typography>
A
</Button>
</Grid>
</Tooltip>
Expand All @@ -433,7 +435,7 @@ export const DatasetMoleculeView = memo(({ imageHeight, imageWidth, data, datase
onClick={() => onLigand()}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">L</Typography>
L
</Button>
</Grid>
</Tooltip>
Expand All @@ -447,7 +449,7 @@ export const DatasetMoleculeView = memo(({ imageHeight, imageWidth, data, datase
onClick={() => onProtein()}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">P</Typography>
P
</Button>
</Grid>
</Tooltip>
Expand All @@ -462,7 +464,7 @@ export const DatasetMoleculeView = memo(({ imageHeight, imageWidth, data, datase
onClick={() => onComplex()}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">C</Typography>
C
</Button>
</Grid>
</Tooltip>
Expand All @@ -476,7 +478,7 @@ export const DatasetMoleculeView = memo(({ imageHeight, imageWidth, data, datase
onClick={() => onSurface()}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">S</Typography>
S
</Button>
</Grid>
</Tooltip>
Expand All @@ -492,7 +494,7 @@ export const DatasetMoleculeView = memo(({ imageHeight, imageWidth, data, datase
}}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">F</Typography>
F
</Button>
</Grid>
</Tooltip>
Expand Down
20 changes: 12 additions & 8 deletions js/components/datasets/inspirationDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,14 +85,18 @@ const useStyles = makeStyles(theme => ({
paddingTop: theme.spacing(2)
},
contButtonsMargin: {
margin: theme.spacing(1) / 2
marginTop: theme.spacing(1) / 2,
marginBottom: theme.spacing(1) / 2,
marginLeft: theme.spacing(2)
},
contColButton: {
minWidth: 'fit-content',
paddingLeft: theme.spacing(1) / 2,
paddingRight: theme.spacing(1) / 2,
paddingBottom: theme.spacing(1) / 8,
paddingTop: theme.spacing(1) / 8,
paddingLeft: theme.spacing(1) / 4,
paddingRight: theme.spacing(1) / 4,
paddingBottom: 0,
paddingTop: 0,
fontWeight: 'bold',
fontSize: 9,
borderRadius: 0,
borderColor: theme.palette.primary.main,
backgroundColor: theme.palette.primary.light,
Expand Down Expand Up @@ -309,7 +313,7 @@ export const InspirationDialog = memo(({ open = false, anchorEl, datasetID }) =>
onClick={() => onButtonToggle('ligand')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">L</Typography>
L
</Button>
</Grid>
</Tooltip>
Expand All @@ -324,7 +328,7 @@ export const InspirationDialog = memo(({ open = false, anchorEl, datasetID }) =>
onClick={() => onButtonToggle('protein')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">P</Typography>
P
</Button>
</Grid>
</Tooltip>
Expand All @@ -340,7 +344,7 @@ export const InspirationDialog = memo(({ open = false, anchorEl, datasetID }) =>
onClick={() => onButtonToggle('complex')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">C</Typography>
C
</Button>
</Grid>
</Tooltip>
Expand Down
20 changes: 12 additions & 8 deletions js/components/preview/molecule/moleculeList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,14 +129,18 @@ const useStyles = makeStyles(theme => ({
}
},
contButtonsMargin: {
margin: theme.spacing(1) / 2
marginTop: theme.spacing(1) / 2,
marginBottom: theme.spacing(1) / 2,
marginLeft: theme.spacing(2)
},
contColButton: {
minWidth: 'fit-content',
paddingLeft: theme.spacing(1) / 2,
paddingRight: theme.spacing(1) / 2,
paddingBottom: theme.spacing(1) / 8,
paddingTop: theme.spacing(1) / 8,
paddingLeft: theme.spacing(1) / 4,
paddingRight: theme.spacing(1) / 4,
paddingBottom: 0,
paddingTop: 0,
fontWeight: 'bold',
fontSize: 9,
borderRadius: 0,
borderColor: theme.palette.primary.main,
backgroundColor: theme.palette.primary.light,
Expand Down Expand Up @@ -592,7 +596,7 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
onClick={() => onButtonToggle('ligand')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">L</Typography>
L
</Button>
</Grid>
</Tooltip>
Expand All @@ -607,7 +611,7 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
onClick={() => onButtonToggle('protein')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">P</Typography>
P
</Button>
</Grid>
</Tooltip>
Expand All @@ -623,7 +627,7 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
onClick={() => onButtonToggle('complex')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">C</Typography>
C
</Button>
</Grid>
</Tooltip>
Expand Down
28 changes: 15 additions & 13 deletions js/components/preview/molecule/moleculeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,12 @@ const useStyles = makeStyles(theme => ({
},
contColButton: {
minWidth: 'fit-content',
paddingLeft: theme.spacing(1) / 2,
paddingRight: theme.spacing(1) / 2,
paddingBottom: theme.spacing(1) / 8,
paddingTop: theme.spacing(1) / 8,
paddingLeft: theme.spacing(1) / 4,
paddingRight: theme.spacing(1) / 4,
paddingBottom: 0,
paddingTop: 0,
fontWeight: 'bold',
fontSize: 9,
borderRadius: 0,
borderColor: theme.palette.primary.main,
backgroundColor: theme.palette.primary.light,
Expand Down Expand Up @@ -427,14 +429,14 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
</Grid>
<Grid item container className={classes.detailsCol} justify="space-between" direction="row">
{/* Title label */}
<Grid item xs={6}>
<Grid item xs={8}>
<Tooltip title={moleculeTitle} placement="bottom-start">
<div className={classes.moleculeTitleLabel}>{moleculeTitle}</div>
</Tooltip>
</Grid>

{/* Control Buttons A, L, C, V */}
<Grid item xs={6}>
<Grid item xs={4}>
<Grid
container
direction="row"
Expand Down Expand Up @@ -466,7 +468,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
}}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">A</Typography>
A
</Button>
</Grid>
</Tooltip>
Expand All @@ -480,7 +482,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
onClick={() => onLigand()}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">L</Typography>
L
</Button>
</Grid>
</Tooltip>
Expand All @@ -494,7 +496,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
onClick={() => onProtein()}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">P</Typography>
P
</Button>
</Grid>
</Tooltip>
Expand All @@ -509,7 +511,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
onClick={() => onComplex()}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">C</Typography>
C
</Button>
</Grid>
</Tooltip>
Expand All @@ -523,7 +525,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
onClick={() => onSurface()}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">S</Typography>
S
</Button>
</Grid>
</Tooltip>
Expand All @@ -538,7 +540,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
onClick={() => onDensity()}
disabled={true || disableUserInteraction}
>
<Typography variant="subtitle2">D</Typography>
D
</Button>
</Grid>
</Tooltip>
Expand All @@ -552,7 +554,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
onClick={() => onVector()}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">V</Typography>
V
</Button>
</Grid>
</Tooltip>
Expand Down

0 comments on commit ef1d9d5

Please sign in to comment.