diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx index 447d033eab..f4cea2c4df 100644 --- a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx +++ b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx @@ -36,13 +36,17 @@ Map.displayName = 'Map'; const MapThumbnailButtonToolTip = tooltip(Button); const CopyToClipboard = tooltip(CopyToClipboardCmp); -const EditTitle = ({ title, onEdit, tagName, disabled }) => { +const EditTitle = ({ title, onEdit, disabled }) => { + const [textValue, setTextValue] = React.useState(title); return (
- { + setTextValue(evt.target.value); + onEdit(evt.target.value); + }} + value={textValue} disabled={disabled} />
); @@ -543,7 +547,7 @@ function DetailsPanel({
- {!downloading ? : } + {!downloading ? : } diff --git a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less index 5b98341a0e..ad36623802 100644 --- a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less +++ b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less @@ -104,7 +104,14 @@ h6 { margin-top: 0 } - [contenteditable]:focus-visible { + .editContainer-input { + border: none; + font-size: 1.4rem; + width: 100%; + text-overflow: ellipsis; + line-height: 1.4; + } + [contenteditable]:focus-visible, .editContainer-input { outline-color: @gn-editable-border; } &.imagepreview {