Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navigation update separate mobile desktop #48

Merged
merged 36 commits into from
Apr 7, 2023
Merged
Show file tree
Hide file tree
Changes from 34 commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
d062f92
add Mobile and Desktop Pages
JesJehle Mar 30, 2023
cc42efa
Merge branch 'screen-size' into navigation-update-seperate-mobile-des…
JesJehle Mar 30, 2023
21d7a6f
Merge branch 'main' into navigation-update-seperate-mobile-desktop
JesJehle Mar 30, 2023
56ceed9
adding mobile and Desktop Navigation
JesJehle Mar 31, 2023
125488b
build DesktopPage
JesJehle Mar 31, 2023
ba0945d
adjust InventoryList
JesJehle Mar 31, 2023
3ffa513
adjust base layer selection
JesJehle Mar 31, 2023
d3ef153
adjust map
JesJehle Mar 31, 2023
b4f6447
delete mobile page
JesJehle Mar 31, 2023
649856a
implemt TreeDetails using navigation
mmaelicke Apr 2, 2023
4931923
use react-router directly
mmaelicke Apr 3, 2023
76389a0
cleanup
mmaelicke Apr 3, 2023
3c79137
add Settings page to desktop navigation
mmaelicke Apr 3, 2023
1a4ced0
Merge pull request #49 from hydrocode-de/use-nested-router
JesJehle Apr 3, 2023
9f32fb6
using list instead of cards, add a add to bockmark button.
JesJehle Apr 4, 2023
2d6cf51
updating VisualMapSelection
JesJehle Apr 4, 2023
b7ca57a
added additional map buttons
JesJehle Apr 4, 2023
7cdca4b
added RangeFilter as popover for desktop
JesJehle Apr 5, 2023
8441eb0
adding map buttons to map component
JesJehle Apr 5, 2023
bf79de2
wip
JesJehle Apr 6, 2023
d1118e2
set fixed width for Tree Details and adjust IonGrid
JesJehle Apr 6, 2023
ef8b5b0
adding MapButtonGroup to Desktop
JesJehle Apr 6, 2023
1fbd971
working on activeActionButton
JesJehle Apr 6, 2023
37266d9
updated visual map selection
JesJehle Apr 6, 2023
3f5e960
map style selection on mobile
JesJehle Apr 6, 2023
d20b5a0
finished visual map selection
JesJehle Apr 6, 2023
d0e50ed
added RangeFilter to desktop and mobile
JesJehle Apr 6, 2023
d42b802
inspecting bug
JesJehle Apr 6, 2023
d9dfcb3
added variable selection component and satte
JesJehle Apr 6, 2023
5d22776
addded correct variable state to button
JesJehle Apr 7, 2023
f58fa1a
reorganising and cleaning
JesJehle Apr 7, 2023
576a148
adding modal reference for each modal
JesJehle Apr 7, 2023
a906c0b
clean up
JesJehle Apr 7, 2023
33dba97
fixing spacing
JesJehle Apr 7, 2023
c988043
disable Selection button
mmaelicke Apr 7, 2023
85d328f
fixing issues of review
JesJehle Apr 7, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
File renamed without changes
50 changes: 29 additions & 21 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,42 @@
import {IonApp, IonGrid, IonRow, IonSpinner, setupIonicReact} from '@ionic/react';
import {
IonApp,
IonGrid,
IonRow,
IonSpinner,
setupIonicReact,
} from "@ionic/react";

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/* Theme variables */
import './theme/variables.css';
import "./theme/variables.css";

// import application wide Navigation
import DesktopNavigation from './DesktopNavigation';
import MobileNavigation from './DesktopNavigation';
import { useSettings } from './context/settings';
import DesktopNavigation from "./DesktopNavigation";
import MobileNavigation from "./MobileNavigation";
import { useSettings } from "./context/settings";

setupIonicReact();

const App: React.FC = () => {
// get the screenSize from settings context
const { screenSize } = useSettings();

// console.log("screenSize", screenSize);

// if screenSize is still undefined return IonGrid with centered IonSpinner
if (!screenSize) {
return (
Expand All @@ -40,14 +47,15 @@ const App: React.FC = () => {
</IonRow>
</IonGrid>
</IonApp>
)
);
}

// return MobileNavigation if the screenSize is smaller than md
return (
<IonApp>
{ screenSize?.width < 768 ? <MobileNavigation /> : <DesktopNavigation /> }
</IonApp>
)};
<IonApp>
{screenSize?.width < 768 ? <MobileNavigation /> : <DesktopNavigation />}
</IonApp>
);
};

export default App;
112 changes: 62 additions & 50 deletions src/DesktopNavigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,63 +16,75 @@ import {
import { IonReactRouter } from "@ionic/react-router";
import { Redirect, Route } from "react-router";
import { listSharp, map } from "ionicons/icons";
import DataLayerDrawer from "./components/DataLayerSelector";
import DataLayerDrawer from "./components/archive/DataLayerSelector";
import TreeOverviewPage from "./pages/TreeOverviewPage";
import InventoryListPage from "./pages/InventoryListPage";
import MapPage from "./pages/MapPage";
import MapPage from "./pages/MobilePage";
import SettingsPage from "./pages/SettingsPage";
import DesktopPage from "./pages/DesktopPage";

const MainTabs: React.FC = () => {
return (
<IonTabs>
<IonRouterOutlet>
<Redirect exact from="/tabs" to="/tabs/map" />
<Route path="/tabs/map" exact>
<MapPage />
</Route>
<Route exact path="/tabs/list">
<InventoryListPage />
</Route>
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="map" href="/tabs/map">
<IonLabel>Map</IonLabel>
<IonIcon icon={map}></IonIcon>
</IonTabButton>
<IonTabButton tab="list" href="/tabs/list">
<IonLabel>List</IonLabel>
<IonIcon icon={listSharp}></IonIcon>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
};

const SplitPaneNavigation: React.FC = () => {
const MobileNavigation: React.FC = () => {
console.log("Running Desktop Navigation");
return (
<IonReactRouter>
<IonSplitPane when="md" contentId="main">
<IonMenu contentId="main">
<IonHeader>
<IonToolbar>
<IonTitle>Data Layer</IonTitle>
</IonToolbar>
</IonHeader>
<DataLayerDrawer />
</IonMenu>
<IonRouterOutlet id="main">
<Redirect exact from="/" to="/tabs" />
<Route path="/tabs">
<MainTabs />
</Route>
<Route path="/list/:id" component={TreeOverviewPage} />
<Route exact path="/settings">
<SettingsPage />
</Route>
</IonRouterOutlet>
</IonSplitPane>
<DesktopPage />
</IonReactRouter>
);
};

export default SplitPaneNavigation;
export default MobileNavigation;

// const MainTabs: React.FC = () => {
// return (
// <IonTabs>
// <IonRouterOutlet>
// <Redirect exact from="/tabs" to="/tabs/map" />
// <Route path="/tabs/map" exact>
// <MapPage />
// </Route>
// <Route exact path="/tabs/list">
// <InventoryListPage />
// </Route>
// </IonRouterOutlet>
// <IonTabBar slot="bottom">
// <IonTabButton tab="map" href="/tabs/map">
// <IonLabel>Map</IonLabel>
// <IonIcon icon={map}></IonIcon>
// </IonTabButton>
// <IonTabButton tab="list" href="/tabs/list">
// <IonLabel>List</IonLabel>
// <IonIcon icon={listSharp}></IonIcon>
// </IonTabButton>
// </IonTabBar>
// </IonTabs>
// );
// };

// const SplitPaneNavigation: React.FC = () => {
// return (
// <IonReactRouter>
// <IonSplitPane when="md" contentId="main">
// <IonMenu contentId="main">
// <IonHeader>
// <IonToolbar>
// <IonTitle>Data Layer</IonTitle>
// </IonToolbar>
// </IonHeader>
// <DataLayerDrawer />
// </IonMenu>
// <IonRouterOutlet id="main">
// <Redirect exact from="/" to="/tabs" />
// <Route path="/tabs">
// <MainTabs />
// </Route>
// <Route path="/list/:id" component={TreeOverviewPage} />
// <Route exact path="/settings">
// <SettingsPage />
// </Route>
// </IonRouterOutlet>
// </IonSplitPane>
// </IonReactRouter>
// );
// };

// export default SplitPaneNavigation;
38 changes: 38 additions & 0 deletions src/MobileNavigation.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import {
IonContent,
IonHeader,
IonPage,
IonRouterOutlet,
IonTitle,
IonToolbar,
} from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import React from "react";
import { Redirect, Route } from "react-router";
import InventoryListPage from "./pages/InventoryListPage";
import MapPage from "./pages/MobilePage";
import SettingsPage from "./pages/SettingsPage";
import TreeOverviewPage from "./pages/TreeOverviewPage";

const MobileNavigation: React.FC = () => {
console.log("Running Mobile Navigation");
return (
<IonReactRouter>
<IonRouterOutlet>
<Redirect exact from="/" to="/map" />
<Route exact path="/map">
<MapPage />
</Route>
<Route exact path="/list">
<InventoryListPage />
</Route>
<Route exact path="/settings">
<SettingsPage />
</Route>
<Route path="/list/:id" component={TreeOverviewPage} />
</IonRouterOutlet>
</IonReactRouter>
);
};

export default MobileNavigation;
78 changes: 78 additions & 0 deletions src/components/ActiveMapSelectionButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { IonButton, IonImg, IonNote } from "@ionic/react";
import { useEffect, useState } from "react";
import { useLayers } from "../context/layers";

interface ActiveMapSelectionButtonProps {
height: number;
width: number;
}

const ActiveMapSelectionButton: React.FC<ActiveMapSelectionButtonProps> = ({
height,
width,
}) => {
const layers = useLayers();

const [src, setSrc] = useState("assets/openstreetmap.png");
const [titel, setTitel] = useState("OSM");

useEffect(() => {
if (layers.activeBaseLayer.toString() === "density") {
setSrc("assets/density.png");
setTitel("Density");
} else if (layers.activeBaseLayer.toString() === "dtm") {
setSrc("assets/dtm.png");
setTitel("DTM");
} else if (layers.activeBaseLayer.toString() === "ortho") {
setSrc("assets/ortho.png");
setTitel("Ortho");
} else {
setSrc("assets/openstreetmap.png");
setTitel("OSM");
}
}, [layers.activeBaseLayer]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a comment about the purpose would be nice


return (
<IonButton
id="open-map-selection-popover"
class="ion-no-padding"
style={{
height: height,
width: width,
}}
>
<div
style={{
height: height,
width: width,
// padding: isHoverDTM ? 2 : 0,
borderColor: "#0fac0c",
borderWidth: 2,
borderStyle: "solid",
borderRadius: 2,
display: "flex",
alignItems: "end",
justifyContent: "center",
}}
>
<div style={{ position: "absolute", zIndex: -1 }}>
<IonImg src={src}></IonImg>
</div>
<div
style={{
backgroundColor: "#0fac0c",
height: height / 4,
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<IonNote style={{ color: "white" }}>{titel}</IonNote>
</div>
</div>
</IonButton>
);
};

export default ActiveMapSelectionButton;
Loading