2.20.1 improvements in visuals

public/changelog.txt

@@ -1,3 +1,8 @@
+- 2.20.1 : 2024-01-29
+        * Made the web log editor bigger instead of a small modal. 
+        * Added loading indicator on the "edit log buttons" to show a spinner when the editor itself is loading.
+        * Improved the editor's feedback UI a bit.
+
 - 2.20.0 : 2024-01-17
         + Added posibility to download the logs directly to Dropbox and Google Drive.
         * Changed the position of the "download logs" box in the settings to the top of the settings.

src/codemirror/LogTextEditor.css

@@ -21,6 +21,10 @@
     background-image: url(./fire.png)
 } 
 
+.CodeMirror { 
+    font-size: 20px; 
+    }
+
 /* //el icono
 "& .CodeMirror-lint-marker-info":{
     backgroundImage: 'url("data:image/x-icon;base64,AAABAAEAEBAAAAEAIAARAQAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAQAAAAEAgDAAAAKC0PUwAAAAFzUkdCAdnJLH8AAAAJcEhZcwAADsQAAA7EAZUrDhsAAABFUExURf//AH9/AL+/AD8/AK+vAN/fAO/vAI+PAG9vAICAAE9PAF9fAM/PAA8PAP//Af//CP//Cf//Bf//A///B///BP//Av//BgZQxRgAAABlSURBVHictY4JDsAgCAQXrEXtoVLt/59atD9o0g0JyQybAPwSYhtn4cWvtBpwA5jxJEuYF2IgRkaijQZACuyYPYiCTLAfs4LE8gJsoxKH4k9/nTnnYrtU1aupojdtQNez3q2beAC4yQLeRUhbWAAAAABJRU5ErkJggg==")'

src/componentes/journal/editor-button.js

@@ -2,7 +2,7 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { JOwnerContext } from "../../pages/journal-context";
 import AddIcon from '@material-ui/icons/Add';
 import EditIcon from '@material-ui/icons/Edit';
-import { Button, ButtonGroup, Dialog, Grid, Typography } from "@material-ui/core";
+import { Button, ButtonGroup, Dialog, DialogContent, Grid, Typography } from "@material-ui/core";
 import Backdrop from '@material-ui/core/Backdrop';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
@@ -20,6 +20,7 @@ import CloseIcon from '@material-ui/icons/Close';
 
 import { JEditorStopwatch } from "./editor-stopwatch";
 import FileCopyIcon from '@material-ui/icons/FileCopy';
+import { ActionButton } from "../action-button";
 
 const useStyles = makeStyles((theme) => ({
   backdrop: {
@@ -82,7 +83,7 @@ export const JEditorButton = ({ ymd, range, redirect, wouldBeNewLog, children, .
     }
 
     const openEditor = async ()=>{
-         await loadEditor();
+         await loadEditor(); 
          setOpen(true)
     }
 
@@ -102,9 +103,9 @@ export const JEditorButton = ({ ymd, range, redirect, wouldBeNewLog, children, .
 
 
 
-    return <><Button startIcon={<BtnIcon/>} {...rest} onClick={()=>openEditor()}>
+    return <><ActionButton startIcon={<BtnIcon/>} {...rest} execAction={openEditor}>
                 {children || ( wouldBeNewLog?"New Log" :"Edit") } 
-            </Button>
+            </ActionButton> 
 
             <TutorialModal openState={helpModalState}/>
             <LoadCopyOfWorkoutModal openState={copyModalState}/>
@@ -117,18 +118,16 @@ export const JEditorButton = ({ ymd, range, redirect, wouldBeNewLog, children, .
             <Dialog
                     open={open}
                     // onClose={handleClose}
-                    scroll="paper" 
-                    fullWidth
-                    maxWidth="sm"
+                    scroll="body"
+                    fullScreen
                     style={{
                         backgroundImage:`repeating-linear-gradient(45deg, #ffffff 0, #ffffff 1px, transparent 0, transparent 50%)`, backgroundSize:"5px 5px"
-                         
+                        ,margin:10
                     }}
                 >
                     <DialogTitle>
 
                         <div className="desktop-view">
-                            <Typography style={{float:"right"}} variant="caption">editor v2.0</Typography> 
                             <SectionTitle line1={"GOOD JOB! Consistency is key!"} line2="LOG A WORKOUT ↴"/>
                         </div>
 
@@ -142,10 +141,11 @@ export const JEditorButton = ({ ymd, range, redirect, wouldBeNewLog, children, .
                     </DialogTitle> 
 
 
+                    <DialogContent dividers={true}>
                         <div className="desktop-view">
                             <DialogContentText>
                                 <Alert severity="info">
-                                To trigger the auto-complete hit <strong>CTRL+SPACE</strong> or <strong>CMD+SPACE</strong>  on a new line. 
+                                To trigger the auto-complete hit <strong>CTRL+SPACE</strong> or <strong>⌘+SPACE</strong>  on a new line. 
                                 </Alert> 
                             </DialogContentText>
                         </div>
@@ -155,43 +155,43 @@ export const JEditorButton = ({ ymd, range, redirect, wouldBeNewLog, children, .
 
 
                         <JEditor redirect ymd={ymd || $defaultYMD} range={range} onClose={handleClose} hintTriggerRef={hintTriggerRef} saveTrigger={saveTriggerRef} onLoaded={ ()=>setHasLoaded(true) }/>  
-                         
+                    </DialogContent>
 
                         <DialogActions>
 
                             <div className="mobile-view">
-                                <ButtonGroup variant="outlined" >
+                                <ButtonGroup variant="outlined" size="large">
                                     <Button onClick={ ()=>helpModalState[1](true) } ><MenuBookIcon/></Button>
                                     <Button color="primary"  onClick={ ()=>copyModalState[1](true) }> <FileCopyIcon/> </Button>
                                     {/* <Button color="primary" onClick={()=>stopwatchState[1](!stopwatchState[0])}>
                                         { stopwatchState[0]? <CloseIcon/> : <TimerIcon/> } 
                                         </Button>  */}
                                  </ButtonGroup>
                                 &nbsp;&nbsp;
-                                 <ButtonGroup variant="outlined" >
+                                 <ButtonGroup variant="outlined" size="large">
                                     <Button disabled={!hasLoaded} onClick={()=>saveTriggerRef.current()} color="primary" variant="contained" >
                                         <SaveAltIcon/>
                                         </Button> </ButtonGroup>
                             </div>
 
                             <div className="desktop-view">
-                            <Grid container>
+                            <Grid container spacing={1}>
                                 <Grid item xs={6}>
-                                    <ButtonGroup variant="outlined" >
+                                    <ButtonGroup variant="outlined" size="large">
                                         <Button onClick={ ()=>helpModalState[1](true) } startIcon={<MenuBookIcon/>}>HELP</Button>
                                         {/* <OpenDMButton  otherUser={{id:"1" }} label="DM Admin" /> */}
-                                        <Button color="primary" variant="contained" startIcon={<FileCopyIcon/>} onClick={ ()=>copyModalState[1](true) }>
-                                            copy
+                                        <Button className="oneline" color="primary" variant="contained" startIcon={<FileCopyIcon/>} onClick={ ()=>copyModalState[1](true) }>
+                                            Load copy of...
                                         </Button>
                                         <Button color="primary" startIcon={ stopwatchState[0]? <CloseIcon/> : <TimerIcon/> }  onClick={()=>stopwatchState[1](!stopwatchState[0])}>
                                             stopwatch
                                         </Button>
                                     </ButtonGroup>
-                                </Grid>
-                                <Grid item xs={6} style={{ textAlign:"right"}}>
+                                </Grid> 
+                                <Grid item xs={6} style={{ textAlign:"right" }}>
 
-                                    <ButtonGroup >
-                                        <Button  onClick={handleClose} color="primary" variant="outlined">
+                                    <ButtonGroup size="large">
+                                        <Button startIcon={<CloseIcon/>}  onClick={handleClose} color="primary" variant="outlined">
                                             Cancel
                                         </Button>
                                         <Button disabled={!hasLoaded} onClick={()=>saveTriggerRef.current()} color="primary" variant="contained" startIcon={<SaveAltIcon/>}>

src/componentes/journal/editor.js

@@ -1,4 +1,4 @@
-import { LinearProgress } from "@material-ui/core";
+import { Button, LinearProgress } from "@material-ui/core";
 import { useRef, useEffect, useState } from "react";
 import { LogTextEditor, convertJEditorData2Text } from "../../codemirror/LogTextEditor";
 import { parseError } from "../../data/db";
@@ -37,19 +37,18 @@ export const JEditor = ({ ymd, range, onClose, saveTrigger, hintTriggerRef, onLo
 
     const [saveEditor, {client}]    = useSaveJEditorMutation();
 
-    const { data, loading, error }  = useGetJEditorDataQuery({
+    const { data, loading, error, refetch }  = useGetJEditorDataQuery({
         variables: {
             ymd, range
         },
 
         fetchPolicy:"network-only",
+        notifyOnNetworkStatusChange:true,
         onCompleted: ( data )=> {
             $jeditorError(null);
             setJeditorData( data )
         }
     });
-
-
 
     useEffect(()=>{
 
@@ -220,18 +219,22 @@ export const JEditor = ({ ymd, range, onClose, saveTrigger, hintTriggerRef, onLo
 
     }
 
-    if( error ) { 
-        return <Alert severity="error">{parseError(error)}</Alert>;
-    }
-
     if( loading || !jeditorData )
     {
         return <div>
             <LinearProgress/>
-            <AsciiSpinner label="Loading Editor's data..."/>
+            <AsciiSpinner label="Loading data..."/>
             </div>;
     }  
 
+    if( error ) {  
+        return <Alert severity="error" action={
+            <Button color="inherit" size="small" onClick={()=>refetch()}>
+              RETRY
+            </Button>
+          }>{parseError(error)}</Alert>;
+    }
+
     //--
     saveTrigger.current = save;
     //--

src/version.json

@@ -1 +1 @@
-{"buildMajor":"2","buildMinor":20,"buildRevision":0,"buildTag":"RELEASE","when":"Wed, 17 Jan 2024 20:21:26 GMT"}
+{"buildMajor":"2","buildMinor":20,"buildRevision":1,"buildTag":"RELEASE","when":"Mon, 29 Jan 2024 09:21:51 GMT"}