From 3706d1337eece3bdffe39223cc64eb305e2dd83c Mon Sep 17 00:00:00 2001
From: Antoine <antoine.roy@tetras-libre.fr>
Date: Fri, 8 Dec 2023 15:36:53 +0100
Subject: [PATCH] Start and End set over the clock icons
---
src/AnnotationCreation.js | 41 ++++++++++++++++++++++++++++-----------
src/HMSInput.js | 28 ++++++++++++++++----------
2 files changed, 48 insertions(+), 21 deletions(-)
diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index d1b829e..49029d3 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -411,22 +411,33 @@ class AnnotationCreation extends Component {
</Grid>
<div className={`${classes.paper} ${classes.selectTimeField} `}>
<div className={`${classes.paper} ${classes.selectTimeModule} `}>
- <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTstartNow} className={classes.timecontrolsbutton}>
- <Alarm fontSize="small" />
- </ToggleButton>
- <div>
- <p>Start</p>
+ <div className={classes.buttonTimeContainer}>
+ <div>
+ <p className={classes.textTimeButton}>Start</p>
+ </div>
+ <ToggleButton
+ value="true"
+ title="Set current time"
+ size="small"
+ onClick={this.setTstartNow}
+ className={classes.timecontrolsbutton}
+ >
+ <Alarm fontSize="small"/>
+ </ToggleButton>
</div>
- <HMSInput seconds={tstart} onChange={this.updateTstart} />
+ <HMSInput seconds={tstart} onChange={this.updateTstart}/>
</div>
<div className={`${classes.paper} ${classes.selectTimeModule}`}>
- <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTendNow} className={classes.timecontrolsbutton}>
- <Alarm fontSize="small" />
- </ToggleButton>
+ <div className={classes.buttonTimeContainer}>
<div>
- <p>End</p>
+ <p className={classes.textTimeButton}>End</p>
</div>
- <HMSInput seconds={tend} onChange={this.updateTend} />
+ <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTendNow}
+ className={classes.timecontrolsbutton}>
+ <Alarm fontSize="small"/>
+ </ToggleButton>
+ </div>
+ <HMSInput seconds={tend} onChange={this.updateTend}/>
</div>
</div>
</>
@@ -606,6 +617,10 @@ class AnnotationCreation extends Component {
/** */
const styles = (theme) => ({
+ buttonTimeContainer: {
+ display: 'flex',
+ flexDirection: 'column',
+ },
divider: {
margin: theme.spacing(1, 0.5),
},
@@ -647,6 +662,10 @@ const styles = (theme) => ({
justifyContent: 'center',
padding: '5px',
},
+ textTimeButton: {
+ margin:0,
+ fontSize: '15px',
+ },
timecontrolsbutton: {
border: 'none',
height: '30px',
diff --git a/src/HMSInput.js b/src/HMSInput.js
index 48d815b..7a1be4a 100644
--- a/src/HMSInput.js
+++ b/src/HMSInput.js
@@ -37,8 +37,8 @@ class HMSInput extends Component {
someChange(ev) {
const { onChange } = this.props;
const { state } = this;
- state[ev.target.name] = Number(ev.target.value);
- onChange(state.hours * 3600 + state.minutes * 60 + state.seconds);
+ state[ev.target.name] = Number(ev.target.value);
+ onChange(state.hours * 3600 + state.minutes * 60 + state.seconds);
}
/** Render */
@@ -48,10 +48,18 @@ class HMSInput extends Component {
return (
<div className={classes.root}>
<div className={classes.root}>
- <Input className={classes.input}
- variant="filled" type='number' min='0' pattern name="hours" value={hours} onChange={this.someChange} />
- <Input className={classes.input} type='number' min='0' max='59' name="minutes" value={minutes} onChange={this.someChange} />
- <Input className={classes.input} type='number' min='0' max='59' name="seconds" value={seconds} onChange={this.someChange} />
+ <Input
+ className={classes.input}
+ variant="filled"
+ type="number"
+ min="0"
+ pattern
+ name="hours"
+ value={hours}
+ onChange={this.someChange}
+ />
+ <Input className={classes.input} type="number" min="0" max="59" name="minutes" value={minutes} onChange={this.someChange} />
+ <Input className={classes.input} type="number" min="0" max="59" name="seconds" value={seconds} onChange={this.someChange} />
</div>
</div>
);
@@ -79,17 +87,17 @@ const styles = (theme) => ({
width: '4ch',
// remove arrow from field for Firefox
'& input[type=number]': {
- '-moz-appearance': 'textfield'
+ '-moz-appearance': 'textfield',
},
// remove arrow from field for Chrome, Safari and Opera
'& input[type=number]::-webkit-outer-spin-button': {
'-webkit-appearance': 'none',
- margin: 0
+ margin: 0,
},
'& input[type=number]::-webkit-inner-spin-button': {
'-webkit-appearance': 'none',
- margin: 0
- }
+ margin: 0,
+ },
},
});
--
GitLab