EditDialog: Improve comment UI

zbycz · Feb 4, 2025 · dfe5137 · dfe5137
1 parent 35ae7d7
commit dfe5137
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 20 deletions.
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/CommentField.tsx b/src/components/FeaturePanel/EditDialog/EditContent/CommentField.tsx
@@ -1,26 +1,43 @@
-import { TextField } from '@mui/material';
+import {
+  Checkbox,
+  FormControlLabel,
+  TextField,
+  Typography,
+} from '@mui/material';
 import React from 'react';
 import { useEditContext } from '../EditContext';
 import { t } from '../../../../services/intl';
 
 export const CommentField = () => {
   const { comment, setComment } = useEditContext();
+  const [isCommentVisible, setIsCommentVisible] = React.useState(false);
   return (
     <>
-      <TextField
-        sx={{ mt: 6 }}
-        label={t('editdialog.comment')}
-        placeholder={t('editdialog.comment_placeholder')}
-        InputLabelProps={{
-          shrink: true,
-        }}
-        multiline
-        fullWidth
-        rows={2}
-        variant="outlined"
-        value={comment}
-        onChange={(e) => setComment(e.target.value)}
+      <FormControlLabel
+        control={<Checkbox size="small" />}
+        onChange={() => setIsCommentVisible(!isCommentVisible)}
+        label={
+          <Typography variant="body2">
+            {t('editdialog.comment_checkbox')}
+          </Typography>
+        }
       />
+      {isCommentVisible && (
+        <TextField
+          sx={{ mt: 1, mb: 1 }}
+          label={t('editdialog.comment')}
+          placeholder={t('editdialog.comment_placeholder')}
+          InputLabelProps={{
+            shrink: true,
+          }}
+          multiline
+          fullWidth
+          rows={2}
+          variant="outlined"
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
+        />
+      )}
     </>
   );
 };
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/ContributionInfoBox.tsx b/src/components/FeaturePanel/EditDialog/EditContent/ContributionInfoBox.tsx
@@ -6,13 +6,13 @@ import { Translation } from '../../../../services/intl';
 export const ContributionInfoBox = () => {
   const { loggedIn } = useOsmAuthContext();
   return loggedIn ? (
-    <Box mt={4} mb={4}>
+    <Box mt={1} mb={2}>
       <Typography variant="body2" color="textSecondary">
         <Translation id="editdialog.info_edit" />
       </Typography>
     </Box>
   ) : (
-    <Box mt={4} mb={4}>
+    <Box mt={1} mb={2}>
       <Typography variant="body2" color="textSecondary">
         <Translation id="editdialog.info_note" />
       </Typography>

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx b/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx
@@ -119,9 +119,9 @@ export const EditContent = () => {
             <Stack height="100%">
               <Stack flex={1}>
                 <FeatureEditSection shortId={current} />
-                <CommentField />
-                <ContributionInfoBox />
               </Stack>
+              <CommentField />
+              <ContributionInfoBox />
               <OsmUserLogged />
               <TestApiWarning />
             </Stack>

diff --git a/src/locales/cs.js b/src/locales/cs.js
@@ -185,8 +185,9 @@ export default {
   'editdialog.location_editor_to_be_added': 'Polohu zde zatím upravit nelze, můžete to provést třeba v <a href="__link__">editoru iD</a>.',
   'editdialog.place_cancelled': 'Místo zrušeno (smazat)',
   'editdialog.comment': 'Poznámka k úpravám (nepovinné)',
+  'editdialog.comment_checkbox': 'Přidat poznámku ke změnám',
   'editdialog.comment_placeholder': 'Odkaz na zdroj informace apod.',
-  'editdialog.info_edit': `Vaše úprava bude ihned uložena do databáze OpenStreetMap. Prosíme,
+  'editdialog.info_edit': `Vaše úprava bude ihned uložena do databáze OpenStreetMap, ale může trvat pár minut než se zobrazí na mapě. Prosíme,
         vkládejte pouze informace z vlastních nebo ověřených zdrojů. Je zakázano
         kopírovat data krytá autorským zákonem (např. Google Maps).
         <a href="https://wiki.openstreetmap.org/wiki/Cs:Jak_mapujeme">Více informací</a>`,

diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js
@@ -224,8 +224,9 @@ export default {
   'editdialog.location_editor_to_be_added': 'The position cannot be edited here yet, you can do so in the <a href="__link__">iD editor</a>.',
   'editdialog.place_cancelled': 'Permanently closed (delete)',
   'editdialog.comment': 'Comment on your changes (optional)',
+  'editdialog.comment_checkbox': 'Add comment to your changes',
   'editdialog.comment_placeholder': 'Note, link to source, etc.',
-  'editdialog.info_edit': `Your edit will be immediately saved to the OpenStreetMap. Please,
+  'editdialog.info_edit': `Your edit will be immediately saved to the OpenStreetMap, but it can take a few minutes to show new content on the map. Please,
          enter only information from your own or verified sources. It is prohibited
          to copy copyrighted data (e.g. Google Maps). <a href="https://wiki.openstreetmap.org/wiki/How_We_Map">More info</a>`,
   'editdialog.info_note':