#92 change size of control buttons

xchem · Mar 2, 2020 · 1576abe · 1576abe
1 parent 3101546
commit 1576abe
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 31 deletions.
diff --git a/js/components/preview/Preview.js b/js/components/preview/Preview.js
@@ -30,8 +30,8 @@ const useStyles = makeStyles(theme => ({
     width: 'inherit'
   },
   nglViewWidth: {
-    padding: 0,
-    width: 'inherit' //`calc(inherit - ${theme.spacing(1)}px`
+    // padding: 0,
+    width: 'inherit'
   },
   hitColumn: {
     minWidth: hitNavigatorWidth,
@@ -90,13 +90,7 @@ const Preview = memo(({ isStateLoaded, headerHeight }) => {
   return (
     <>
       <Grid container justify="space-between" className={classes.root} spacing={1}>
-        <Grid
-          item // sm={12} md={5} lg xl
-          container
-          direction="column"
-          spacing={1}
-          className={classes.hitColumn}
-        >
+        <Grid item container direction="column" spacing={1} className={classes.hitColumn}>
           {/* Hit cluster selector */}
           <Grid item>
             <MolGroupSelector isStateLoaded={isStateLoaded} handleHeightChange={setMolGroupsHeight} />
@@ -110,11 +104,7 @@ const Preview = memo(({ isStateLoaded, headerHeight }) => {
             />
           </Grid>
         </Grid>
-        <Grid
-          item //sm={12} md={5} lg xl
-          className={classes.nglColumn}
-          // style={nglColumnClass}
-        >
+        <Grid item className={classes.nglColumn}>
           <Grid container direction="column">
             <Grid item className={classes.nglViewWidth}>
               <NGLView div_id={VIEWS.MAJOR_VIEW} height={screenHeight} />
@@ -130,13 +120,7 @@ const Preview = memo(({ isStateLoaded, headerHeight }) => {
             </Grid>
           </Grid>
         </Grid>
-        <Grid
-          item // sm={12} md={6} lg xl
-          container
-          direction="column"
-          spacing={1}
-          className={classes.summaryColumn}
-        >
+        <Grid item container direction="column" spacing={1} className={classes.summaryColumn}>
           <Grid item>
             <SummaryView setSummaryViewHeight={setSummaryViewHeight} summaryViewHeight={summaryViewHeight} />
           </Grid>

diff --git a/js/components/preview/viewerControls/index.js b/js/components/preview/viewerControls/index.js
@@ -5,7 +5,7 @@
 import React, { memo, useState } from 'react';
 import { Button } from '../../common/Inputs/Button';
 import { Settings, Mouse, PersonalVideo } from '@material-ui/icons';
-import { ButtonGroup, Grid } from '@material-ui/core';
+import { ButtonGroup, Grid, makeStyles, Tooltip } from '@material-ui/core';
 import { SettingControls } from './settingsControls';
 import DisplayControls from './displayControls/';
 import { MouseControls } from './mouseControls';
@@ -18,8 +18,15 @@ const drawers = {
 
 const initDrawers = { [drawers.settings]: false, [drawers.display]: false, [drawers.mouse]: false };
 
+const useStyles = makeStyles(theme => ({
+  button: {
+    padding: theme.spacing(1)
+  }
+}));
+
 export const ViewerControls = memo(({}) => {
   const [drawerSettings, setDrawerSettings] = useState(JSON.parse(JSON.stringify(initDrawers)));
+  const classes = useStyles();
 
   const openDrawer = key => {
     //close all and open selected by key
@@ -36,15 +43,31 @@ export const ViewerControls = memo(({}) => {
       <Grid container justify="center">
         <Grid item>
           <ButtonGroup variant="contained" color="primary">
-            <Button color="primary" onClick={() => openDrawer(drawers.settings)} startIcon={<Settings />}>
-              Settings
-            </Button>
-            <Button color="primary" onClick={() => openDrawer(drawers.display)} startIcon={<PersonalVideo />}>
-              Display
-            </Button>
-            <Button color="primary" onClick={() => openDrawer(drawers.mouse)} startIcon={<Mouse />}>
-              Mouse
-            </Button>
+            <Tooltip title="Settings controls">
+              <Button
+                size="small"
+                color="primary"
+                onClick={() => openDrawer(drawers.settings)}
+                className={classes.button}
+              >
+                <Settings />
+              </Button>
+            </Tooltip>
+            <Tooltip title="Display controls">
+              <Button
+                size="small"
+                color="primary"
+                onClick={() => openDrawer(drawers.display)}
+                className={classes.button}
+              >
+                <PersonalVideo />
+              </Button>
+            </Tooltip>
+            <Tooltip title="Mouse controls">
+              <Button size="small" color="primary" onClick={() => openDrawer(drawers.mouse)} className={classes.button}>
+                <Mouse />
+              </Button>
+            </Tooltip>
           </ButtonGroup>
         </Grid>
       </Grid>