Jannex
/
expo-app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added device tab button container and component for device live preview

main
alex 2023-08-06 19:04:31 +00:00
parent e65de207c0
commit be81177b9f
5 changed files with 101 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/Screens/Device/deviceTabButton.js
View File

@ -1,17 +1,9 @@
import { useContext } from "react"; import { useContext } from "react";
import { AppContext } from "../../utils"; import { AppContext, AppStyles } from "../../utils";
import { TouchableHighlight, TouchableOpacity } from "react-native"; import { TouchableHighlight, TouchableOpacity, View } from "react-native";
import MyIcon from "../../Components/Icon"; import MyIcon from "../../Components/Icon";
const spaceToSide = 10; // left and right export function MyDeviceTabButton({ iconName, iconColor, onPress }) {
const top = 35;
const spaceBetweenButtons = 60;
export const topFirst = top;
export const topSecond = top + spaceBetweenButtons;
export const topThird = top + 2 * spaceBetweenButtons;
export const MyDeviceTabButton = ({ top, iconName, iconColor, onPress }) => {
const appContext = useContext(AppContext); const appContext = useContext(AppContext);
const TouchComponent = const TouchComponent =
@ -23,15 +15,31 @@ export const MyDeviceTabButton = ({ top, iconName, iconColor, onPress }) => {
<TouchComponent <TouchComponent
onPress={onPress} onPress={onPress}
style={{ style={{
position: "absolute",
backgroundColor: appContext.appTheme.card.backgroundColor, backgroundColor: appContext.appTheme.card.backgroundColor,
borderRadius: 10, borderRadius: 10,
padding: 8, padding: 8,
top: top,
right: spaceToSide,
}} }}
> >
<MyIcon name={iconName} size={30} color={iconColor} /> <MyIcon name={iconName} size={30} color={iconColor} />
</TouchComponent> </TouchComponent>
); );
}; }
export function MyDeviceTabButtonContainer({ children }) {
return (
<View
style={[
{
justifyContent: "space-evenly",
position: "absolute",
paddingTop: 6,
paddingBottom: 6,
right: 10,
},
AppStyles.deviceLivePreview,
]}
>
{children}
</View>
);
}

112
src/Screens/Device/index.js
View File

@ -1,13 +1,11 @@
import { useContext, useState } from "react"; import { useContext, useState } from "react";
import { Image, ScrollView, StyleSheet, View, Text, Alert } from "react-native"; import { Image, View, Text, Alert } from "react-native";
import { AppContext } from "../../utils"; import { AppContext, AppStyles } from "../../utils";
import SettingsView from "./settings"; import SettingsView from "./settings";
import SceneView from "./scene"; import SceneView from "./scene";
import { import {
MyDeviceTabButton, MyDeviceTabButton,
topFirst, MyDeviceTabButtonContainer,
topSecond,
topThird,
} from "./deviceTabButton"; } from "./deviceTabButton";
export default function DeviceScreen({ navigation }) { export default function DeviceScreen({ navigation }) {
@ -38,44 +36,33 @@ export default function DeviceScreen({ navigation }) {
backgroundColor: appContext.appTheme.backgroundColor, backgroundColor: appContext.appTheme.backgroundColor,
}} }}
> >
{appContext.isUserDeveloperModeEnabled ? ( <DeviceLivePreview />
<Image
source={require("../../../assets/device.png")}
style={styles.image}
resizeMode="contain"
/>
) : (
<>
{selectedView !== 4 && (
<View style={[styles.image, { backgroundColor: "#ddd" }]} />
)}
</>
)}
<MyDeviceTabButton <MyDeviceTabButtonContainer>
iconName={"cog-outline"} <MyDeviceTabButton
selectedViewNumber={0} iconName={"cog-outline"}
top={topFirst} selectedViewNumber={0}
iconColor={getIconColor(0)} iconColor={getIconColor(0)}
onPress={() => setSelectedView(0)} onPress={() => setSelectedView(0)}
/> />
<MyDeviceTabButton <MyDeviceTabButton
iconName={"rotate-3d-variant"} iconName={"rotate-3d-variant"}
selectedViewNumber={1} selectedViewNumber={1}
top={topSecond} iconColor={getIconColor(1)}
iconColor={getIconColor(1)} onPress={() =>
onPress={() => { Alert.alert(
console.log("rotate"); "Rotate device",
Alert.alert("Rotate device", "Soon the device will turn 180 degrees"); "Soon the device will turn 180 degrees"
}} )
/> }
<MyDeviceTabButton />
iconName={"group"} <MyDeviceTabButton
selectedViewNumber={2} iconName={"group"}
top={topThird} selectedViewNumber={2}
iconColor={getIconColor(2)} iconColor={getIconColor(2)}
onPress={() => setSelectedView(2)} onPress={() => setSelectedView(2)}
/> />
</MyDeviceTabButtonContainer>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<SelectedView /> <SelectedView />
@ -84,19 +71,28 @@ export default function DeviceScreen({ navigation }) {
); );
} }
const styles = StyleSheet.create({ export function DeviceLivePreview() {
container: { const appContext = useContext(AppContext);
flex: 1,
alignItems: "center", return (
justifyContent: "center", <>
backgroundColor: "#2e2e30", {appContext.isUserDeveloperModeEnabled ? (
}, <Image
scrollView: { source={require("../../../assets/device.png")}
width: "100%", style={[{ width: "100%" }, AppStyles.deviceLivePreview]}
padding: 20, resizeMode="contain"
}, />
image: { ) : (
width: "100%", <View
height: 250, style={[
}, {
}); width: "100%",
backgroundColor: "#ddd",
},
AppStyles.deviceLivePreview,
]}
/>
)}
</>
);
}

49
src/Screens/Device/modals/EditActions/Lights/index.js
View File

@ -1,6 +1,5 @@
import { import {
FlatList, FlatList,
Image,
ScrollView, ScrollView,
Text, Text,
TouchableOpacity, TouchableOpacity,
@ -8,18 +7,14 @@ import {
} from "react-native"; } from "react-native";
import { import {
MyDeviceTabButton, MyDeviceTabButton,
MyDeviceTabButtonContainer,
topFirst, topFirst,
topSecond, topSecond,
} from "../../../deviceTabButton"; } from "../../../deviceTabButton";
import Card from "../../../../../Components/Card"; import Card from "../../../../../Components/Card";
import MyDropdown from "../../../../../Components/Dropdown"; import MyDropdown from "../../../../../Components/Dropdown";
import { useCallback, useContext, useEffect, useRef, useState } from "react"; import { useCallback, useContext, useEffect, useRef, useState } from "react";
import { import { AppContext, AppStyles, ModalContainer } from "../../../../../utils";
AppContext,
AppStyles,
GetUuid,
ModalContainer,
} from "../../../../../utils";
import { import {
MyDotsModal, MyDotsModal,
MyPickerModalListItem, MyPickerModalListItem,
@ -36,6 +31,7 @@ import EditActionAnimationsCardContent, {
} from ".."; } from "..";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useFocusEffect } from "@react-navigation/native"; import { useFocusEffect } from "@react-navigation/native";
import { DeviceLivePreview } from "../../..";
function LightModeDefaultColor({ function LightModeDefaultColor({
sharedColor, sharedColor,
@ -180,12 +176,6 @@ export function LightsEditActionModalContent({ navigation, route }) {
(a) => a.actionId === selectedSceneAction.actionId (a) => a.actionId === selectedSceneAction.actionId
); );
console.log(
"foundSceneActionIndex",
foundSceneActionIndex,
newArr[foundSceneActionIndex]
);
if (foundSceneActionIndex !== -1) { if (foundSceneActionIndex !== -1) {
newArr[foundSceneActionIndex].modeAdjustments.colors = newArr[foundSceneActionIndex].modeAdjustments.colors =
sharedLightModeDefaultColors.value; sharedLightModeDefaultColors.value;
@ -204,29 +194,18 @@ export function LightsEditActionModalContent({ navigation, route }) {
height: "100%", height: "100%",
}} }}
> >
{appContext.isUserDeveloperModeEnabled ? ( <DeviceLivePreview />
<Image
source={require("../../../../../../assets/device.png")}
style={{ width: "100%", height: 200 }}
resizeMode="contain"
/>
) : (
<View
style={[
{
width: "100%",
height: 200,
},
{ backgroundColor: "#ddd" },
]}
/>
)}
<MyDeviceTabButton iconName="play-network-outline" top={topFirst + 10} /> <MyDeviceTabButtonContainer>
<MyDeviceTabButton <MyDeviceTabButton
iconName="play-box-multiple-outline" iconName="play-network-outline"
top={topSecond + 15} onPress={() => console.log("pressed")}
/> />
<MyDeviceTabButton
iconName="play-box-multiple-outline"
onPress={() => console.log("pressed2")}
/>
</MyDeviceTabButtonContainer>
<ScrollView> <ScrollView>
<Card> <Card>

11
src/Screens/Device/scene.js
View File

@ -113,9 +113,9 @@ export default function SceneView({ navigation }) {
(a) => a.sceneId === device.selectedScene (a) => a.sceneId === device.selectedScene
); );
const DropdownCard = (style) => { const DropdownCard = () => {
return ( return (
<Card style={style}> <Card>
<MyDropdown <MyDropdown
label={t("screens.device.scenes.dropdownSceneSelection.label")} label={t("screens.device.scenes.dropdownSceneSelection.label")}
onPress={() => onPress={() =>
@ -131,7 +131,6 @@ export default function SceneView({ navigation }) {
return ( return (
<> <>
{console.log("actions", appContext.deviceSceneActions)}
{device.selectedScene === "" ? ( {device.selectedScene === "" ? (
<> <>
<DropdownCard /> <DropdownCard />
@ -159,7 +158,11 @@ export default function SceneView({ navigation }) {
}) })
} }
keyExtractor={(item) => item.actionId} keyExtractor={(item) => item.actionId}
ListHeaderComponent={<DropdownCard style={{ marginBottom: 10 }} />} ListHeaderComponent={
<View style={{ marginBottom: 10 }}>
<DropdownCard />
</View>
}
ListEmptyComponent={ ListEmptyComponent={
<MyResult <MyResult
text={t("screens.device.scenes.infoNoActionsAvailableInScene")} text={t("screens.device.scenes.infoNoActionsAvailableInScene")}

3
src/utils.js
View File

@ -68,6 +68,9 @@ export const AppStyles = StyleSheet.create({
headerNavigationIcons: { headerNavigationIcons: {
padding: 17, padding: 17,
}, },
deviceLivePreview: {
height: 200,
},
}); });
const DarkAppTheme = { const DarkAppTheme = {