Mobile friendly project editor

zxplay · Jun 28, 2023 · f603328 · f603328
1 parent 2c42879
commit f603328
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 20 deletions.
diff --git a/apps/web/src/components/HomePage.jsx b/apps/web/src/components/HomePage.jsx
@@ -13,7 +13,7 @@ import {showToastsForErrorItems} from "../errors";
 export default function HomePage() {
     const dispatch = useDispatch();
 
-    const activeIndex = useSelector(state => state?.demo.selectedTabIndex);
+    const selectedTabIndex = useSelector(state => state?.demo.selectedTabIndex);
     const errorItems = useSelector(state => state?.project.errorItems);
     const isMobile = useSelector(state => state?.window.isMobile);
 
@@ -52,7 +52,7 @@ export default function HomePage() {
                             </div>
                             <div className="col-fixed p-0" style={{width: `${width}px`}}>
                                 <TabView
-                                    activeIndex={activeIndex}
+                                    activeIndex={selectedTabIndex}
                                     onTabChange={(e) => dispatch(setSelectedTabIndex(e.index))}>
                                     <TabPanel header="Emulator">
                                         <Emulator zoom={zoom} width={width}/>
@@ -74,7 +74,7 @@ export default function HomePage() {
                         <>
                             <div className="col p-0 mr-2" style={{maxWidth: `calc(100vw - ${width + 41}px`}}>
                                 <TabView
-                                    activeIndex={activeIndex}
+                                    activeIndex={selectedTabIndex}
                                     onTabChange={(e) => dispatch(setSelectedTabIndex(e.index))}>
                                     <TabPanel header="Sinclair BASIC">
                                         <DemoSinclairBasicEditor/>

diff --git a/apps/web/src/components/ProjectPage.jsx b/apps/web/src/components/ProjectPage.jsx
@@ -16,7 +16,7 @@ export default function ProjectPage() {
     const dispatch = useDispatch();
 
     const userId = useSelector(state => state?.identity.userId);
-    const activeIndex = useSelector(state => state?.project.selectedTabIndex);
+    const selectedTabIndex = useSelector(state => state?.project.selectedTabIndex);
     const lang = useSelector(state => state?.project.lang);
     let title = useSelector(state => state?.project.title);
     const errorItems = useSelector(state => state?.project.errorItems);
@@ -79,21 +79,47 @@ export default function ProjectPage() {
             <Toast ref={toast}/>
             <div className={className}>
                 <div className="grid" style={{width: "100%", padding: 0, margin: 0}}>
-                    <div className="col p-0 mr-2" style={{maxWidth: `calc(100vw - ${width + 41}px`}}>
-                        <TabView
-                            activeIndex={activeIndex}
-                            onTabChange={(e) => dispatch(setSelectedTabIndex(e.index))}>
-                            <TabPanel header={editorTitle}>
-                                <ProjectEditor id={id}/>
-                            </TabPanel>
-                        </TabView>
-                    </div>
-                    <div className="col-fixed p-0 pt-1" style={{width: `${width}px`}}>
-                        <div style={{height: '53px'}} className="pt-3 pl-1">
-                            <h3>{title ? `Project: ${title}` : ''}</h3>
-                        </div>
-                        <Emulator zoom={zoom} width={width}/>
-                    </div>
+                    {isMobile && (
+                        <>
+                            <div className="col" style={{padding: 0}}>
+
+                            </div>
+                            <div className="col-fixed p-0" style={{width: `${width}px`}}>
+                                <TabView
+                                    activeIndex={selectedTabIndex}
+                                    onTabChange={(e) => dispatch(setSelectedTabIndex(e.index))}>
+                                    <TabPanel header="Emulator">
+                                        <Emulator zoom={zoom} width={width}/>
+                                    </TabPanel>
+                                    <TabPanel header={editorTitle}>
+                                        <ProjectEditor id={id}/>
+                                    </TabPanel>
+                                </TabView>
+                            </div>
+                            <div className="col" style={{padding: 0}}>
+
+                            </div>
+                        </>
+                    )}
+                    {!isMobile && (
+                        <>
+                            <div className="col p-0 mr-2" style={{maxWidth: `calc(100vw - ${width + 41}px`}}>
+                                <TabView
+                                    activeIndex={selectedTabIndex}
+                                    onTabChange={(e) => dispatch(setSelectedTabIndex(e.index))}>
+                                    <TabPanel header={editorTitle}>
+                                        <ProjectEditor id={id}/>
+                                    </TabPanel>
+                                </TabView>
+                            </div>
+                            <div className="col-fixed p-0 pt-1" style={{width: `${width}px`}}>
+                                <div style={{height: '53px'}} className="pt-3 pl-1">
+                                    <h3>{title ? `Project: ${title}` : ''}</h3>
+                                </div>
+                                <Emulator zoom={zoom} width={width}/>
+                            </div>
+                        </>
+                    )}
                 </div>
             </div>
         </Titled>

diff --git a/apps/web/src/redux/eightbit/sagas.js b/apps/web/src/redux/eightbit/sagas.js
@@ -17,7 +17,7 @@ import {
     setFollowTapAction
 } from "./actions";
 import {loadTap} from "../jsspeccy/actions";
-import {setErrorItems} from "../project/actions";
+import {setErrorItems, setSelectedTabIndex} from "../project/actions";
 import {handleException} from "../../errors";
 import {dashboardUnlock} from "../../dashboard_lock";
 
@@ -137,6 +137,11 @@ function* handleWorkerMessageActions(action) {
 function* handleRunProjectCodeActions(_) {
     yield put(setFollowTapAction(runTap));
     yield put(getProjectTap());
+
+    // Mobile view has emulator on a tab. Switch to the emulator tab when running code.
+    const isMobile = yield select((state) => state.window.isMobile);
+    console.log('handleRunProjectCodeActions', isMobile);
+    if (isMobile) yield put(setSelectedTabIndex(0));
 }
 
 function* handleDownloadProjectTapActions(_) {