u

src/components/panels/EditablePanelTile.jsx

@@ -70,7 +70,7 @@ export class EditablePanelTile extends Component {
   };
 
   handleCancel = (event) => {
-    event.stopPropagation();
+    event?.stopPropagation();
     this.setState({
       editing: false,
       draft: null,
@@ -82,8 +82,25 @@ export class EditablePanelTile extends Component {
     this.setState({ draft: nextDraft, error: null });
   };
 
+  handleEditKeyDown = (event) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      event.stopPropagation();
+      this.handleCancel();
+      return;
+    }
+
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.canSave()) {
+        void this.handleSave(event);
+      }
+    }
+  };
+
   handleSave = async (event) => {
-    event.stopPropagation();
+    event?.stopPropagation();
     if (!this.canSave()) return;
 
     const { onSave } = this.props;
@@ -109,7 +126,7 @@ export class EditablePanelTile extends Component {
       <Typography
         variant="overline"
         color="text.secondary"
-        sx={{ display: 'block', mb: 1, pr: editing ? 7 : 4 }}
+        sx={{ display: 'block', mb: 1, pr: editing ? 9 : 5 }}
       >
         {title}
       </Typography>
@@ -126,16 +143,16 @@ export class EditablePanelTile extends Component {
       top: 4,
       color: 'text.secondary',
     };
+    const iconSx = { fontSize: 28 };
 
     if (!editing) {
       return (
         <IconButton
-          size="small"
           onClick={this.handleStartEdit}
           aria-label="Bearbeiten"
           sx={{ ...actionSx, right: 4 }}
         >
-          <EditOutlinedIcon fontSize="small" />
+          <EditOutlinedIcon sx={iconSx} />
         </IconButton>
       );
     }
@@ -143,16 +160,14 @@ export class EditablePanelTile extends Component {
     return (
       <>
         <IconButton
-          size="small"
           onClick={this.handleCancel}
           disabled={saving}
           aria-label="Abbrechen"
-          sx={{ ...actionSx, right: 40 }}
+          sx={{ ...actionSx, right: 48 }}
         >
-          <CloseOutlinedIcon fontSize="small" />
+          <CloseOutlinedIcon sx={iconSx} />
         </IconButton>
         <IconButton
-          size="small"
           onClick={this.handleSave}
           disabled={!this.canSave()}
           aria-label="Speichern"
@@ -160,9 +175,9 @@ export class EditablePanelTile extends Component {
           sx={{ ...actionSx, right: 4 }}
         >
           {saving ? (
-            <CircularProgress size={18} color="inherit" />
+            <CircularProgress size={22} color="inherit" />
           ) : (
-            <SaveOutlinedIcon fontSize="small" />
+            <SaveOutlinedIcon sx={iconSx} />
           )}
         </IconButton>
       </>
@@ -188,7 +203,10 @@ export class EditablePanelTile extends Component {
       >
         {this.renderActions()}
         {this.renderTitle()}
-        <Box sx={{ flex: 1, minWidth: 0, pr: editing ? 1 : 0 }}>
+        <Box
+          sx={{ flex: 1, minWidth: 0, pr: editing ? 1 : 0 }}
+          onKeyDown={editing ? this.handleEditKeyDown : undefined}
+        >
           {editing && draft != null
             ? renderEdit(draft, this.handleDraftChange, this.inputRef)
             : renderDisplay(savedValue)}