diff options
-rw-r--r-- | app/components/graph/graph.tsx | 2 | ||||
-rw-r--r-- | app/components/index.ts | 3 | ||||
-rw-r--r-- | app/components/local/local.tsx | 11 | ||||
-rw-r--r-- | app/components/tweaks/tweaks.tsx | 25 | ||||
-rw-r--r-- | app/screens/graph/graph-screen.tsx | 13 |
5 files changed, 34 insertions, 20 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx index 8b041b5..83cc40a 100644 --- a/app/components/graph/graph.tsx +++ b/app/components/graph/graph.tsx @@ -271,7 +271,7 @@ onLinkHover={handleLinkHover} } return ( - <View> + <View style={style}> {!physics.threedim ? ( <ForceGraph2D ref={fgRef} diff --git a/app/components/index.ts b/app/components/index.ts index 9ec6a91..8858b2f 100644 --- a/app/components/index.ts +++ b/app/components/index.ts @@ -12,4 +12,5 @@ export * from "./wallpaper/wallpaper" export * from "./auto-image/auto-image" export * from "./graph/graph" export * from "./tweaks/tweaks" -export * from "./local/local" +export * from "./local-button/local-button" +export * from "./graph-ui/graph-ui" diff --git a/app/components/local/local.tsx b/app/components/local/local.tsx index 82ea0ee..e6984fc 100644 --- a/app/components/local/local.tsx +++ b/app/components/local/local.tsx @@ -1,9 +1,10 @@ import * as React from "react" -import { StyleProp, TextStyle, View, ViewStyle } from "react-native" +import { StyleProp, TextStyle, TouchableOpacity, View, ViewStyle } from "react-native" import { observer } from "mobx-react-lite" import { color, typography } from "../../theme" import { Text } from "../" import { flatten } from "ramda" +import Icon from "react-native-vector-icons/MaterialCommunityIcons" const CONTAINER: ViewStyle = { justifyContent: "center", @@ -25,13 +26,13 @@ export interface LocalProps { /** * Describe your component here */ -export const Local = observer(function Local(props: LocalProps) { +export const LocalButton = observer(function LocalButton(props: LocalProps): boolean { const { style } = props const styles = flatten([CONTAINER, style]) return ( - <View style={styles}> - <Text style={TEXT}>Hello</Text> - </View> + <Icon color="#a99f1f" name="graph" + style={{position:"absolute", zIndex: 100, width: 500}} + /> ) }) diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx index 3bfeb6e..08a5e2a 100644 --- a/app/components/tweaks/tweaks.tsx +++ b/app/components/tweaks/tweaks.tsx @@ -133,10 +133,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element setPhysics({ ...physics, collision: !physics.collision }) }} /> - <Text preset="fieldLabel" text={"Alhpa Decay: " + physics.alphaDecay} /> + <Text preset="fieldLabel" text={"Alpha Decay: " + physics.alphaDecay} /> <Slider + style={styles.slider} minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" + thumbTintColor="#a991f1" minimumValue={0} maximumValue={1} onValueChange={(value) => { @@ -585,16 +587,19 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element const styles = StyleSheet.create({ container: { - flex: 1, + //flex: 1, backgroundColor: "#2a2e38", - position: "absolute", - zIndex: 100, - left: 50, - top: 50, - width: 250, - borderRadius: 5, + position: "relative", + zIndex: 5, + marginLeft: "3%", + marginTop: "3%", + maxWidth: 275, + borderRadius: 10, borderStyle: "solid", - maxHeight: "70%", + borderWidth: 10, + borderColor: "#2a2e38", + height: "25%", + maxHeight: "80%", paddingBottom: 20, }, title: { @@ -602,7 +607,7 @@ const styles = StyleSheet.create({ fontSize: 22, fontWeight: "300", marginBottom: 20, - paddingLeft: 20, + paddingLeft: 10, }, header: { backgroundColor: "#2a2e38", diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx index f537128..c578fd4 100644 --- a/app/screens/graph/graph-screen.tsx +++ b/app/screens/graph/graph-screen.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react" import { observer } from "mobx-react-lite" -import { TouchableOpacity, ViewStyle } from "react-native" +import { TouchableOpacity, View, ViewStyle } from "react-native" import { Screen, Text } from "../../components" // import { useNavigation } from "@react-navigation/native" // import { useStores } from "../../models" @@ -22,6 +22,8 @@ const ROOT: ViewStyle = { flex: 1, } +import { LocalButton } from "../../components/" +import { GraphUi } from "../../components/graph-ui/graph-ui" export const GraphScreen = observer(function GraphScreen() { // Pull in one of our MST stores // const { someStore, anotherStore } = useStores() @@ -169,9 +171,14 @@ export const GraphScreen = observer(function GraphScreen() { return null } else { return ( - <Screen style={ROOT} preset="scroll"> + <Screen style={ROOT} preset="fixed"> + <View style={{flex:1, flexDirection: "row", height: "100%", width: "100%",position: "absolute", zIndex:150}}> <Tweaks physics={physics} setPhysics={setPhysics} /> - <Graph setPhysics={setPhysics} physics={physics} gData={graphData} nodeIds={nodeIds} /> + <LocalButton style={{marginLeft: "auto", marginRight:"3%", marginTop: "3%", zIndex: 5, position: "relative"}} physics={physics} setPhysics={setPhysics} /> + <Graph + style={{position: "absolute"}} + setPhysics={setPhysics} physics={physics} gData={graphData} nodeIds={nodeIds} /> + </View> </Screen> ) } |