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

style improvements

main
alex 2023-08-03 00:06:01 +00:00
parent e61fa08943
commit c74be48e2b
16 changed files with 108 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
App.js
View File

@ -7,9 +7,11 @@ import SideBar from "./src/Components/SideBar";
import {
AppContext,
AppProvider,
AppStyles,
Constants,
GetDataFromList,
GetMultipleData,
IsPlatformIos,
} from "./src/utils";
import { Suspense, lazy, useContext, useEffect } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
@ -34,14 +36,12 @@ import {
import { EditActionAnimationSelectionModalContent } from "./src/Screens/Device/modals/EditActions";
import UpdateSceneNameModalContent from "./src/Screens/Device/modals/UpdateSceneName";
import SettingsChangeDeviceDisplayNameModalContent from "./src/Screens/Device/modals/SettingsChangeDeviceDisplayName";
import HelpScreen from "./src/Screens/Device/Help";
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
const SettingsScreen = lazy(() => import("./src/Screens/Settings"));
const FaqScreen = lazy(() => import("./src/Screens/FAQ"));
const FeedbackScreen = lazy(() => import("./src/Screens/Feedback"));
const HelpScreen = lazy(() => import("./src/Screens/Help"));
export function MyApp() {
const appContext = useContext(AppContext);
@ -108,7 +108,7 @@ export function MyApp() {
};
return (
<SafeAreaView style={{ height: "100%" }}>
<SafeAreaView style={{ flex: 1 }}>
<NavigationContainer theme={navigatonTheme}>
<Stack.Navigator
screenOptions={{
@ -367,14 +367,18 @@ function getScreenStackOptions(
onPress={() =>
isModalScreen ? navigation.goBack() : navigation.toggleDrawer()
}
style={{ marginLeft: 20 }}
>
<MyIcon name={isModalScreen ? "chevron-left" : "menu"} size={24} />
<MyIcon
name={isModalScreen ? "chevron-left" : "menu"}
size={24}
style={[AppStyles.headerNavigationIcons]}
/>
</TouchableOpacity>
),
headerTintColor: headerTintColor,
headerStyle: {
backgroundColor: headerBackgroundColor,
height: IsPlatformIos() ? 76 : 56,
},
};
}

BIN
assets/Circle-10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

2
locales/de.json
View File

@ -105,7 +105,7 @@
},
"settings": {
"pageTitle": "Einstellungen",
"settingsCardTitle": "Einstellungen",
"settingsCardTitle": "Allgemein",
"languageText": "Sprache",
"languageModalTitle": "Sprache ändern",
"appColorSchemeText": "Anzeigemodus",

2
locales/en.json
View File

@ -105,7 +105,7 @@
},
"settings": {
"pageTitle": "Settings",
"settingsCardTitle": "Settings",
"settingsCardTitle": "General",
"languageText": "Language",
"languageModalTitle": "Customize language",
"appColorSchemeText": "Appearance",

17
package-lock.json generated
View File

@ -12,7 +12,6 @@
"@react-native-community/slider": "^4.4.2",
"@react-navigation/drawer": "^6.6.3",
"@react-navigation/native": "^6.1.7",
"@react-navigation/native-stack": "^6.9.13",
"@react-navigation/stack": "^6.3.17",
"expo": "~48.0.18",
"expo-status-bar": "~1.4.4",
@ -5038,22 +5037,6 @@
"react-native": "*"
}
},
"node_modules/@react-navigation/native-stack": {
"version": "6.9.13",
"resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.9.13.tgz",
"integrity": "sha512-ejlepMrvFneewL+XlXHHhn+6y3lwvavM4/R7XwBV0XJxCymujexK+7Vkg7UcvJ1lx4CRhOcyBSNfGmdNIHREyQ==",
"dependencies": {
"@react-navigation/elements": "^1.3.18",
"warn-once": "^0.1.0"
},
"peerDependencies": {
"@react-navigation/native": "^6.0.0",
"react": "*",
"react-native": "*",
"react-native-safe-area-context": ">= 3.0.0",
"react-native-screens": ">= 3.0.0"
}
},
"node_modules/@react-navigation/native/node_modules/escape-string-regexp": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",

1
package.json
View File

@ -13,7 +13,6 @@
"@react-native-community/slider": "^4.4.2",
"@react-navigation/drawer": "^6.6.3",
"@react-navigation/native": "^6.1.7",
"@react-navigation/native-stack": "^6.9.13",
"@react-navigation/stack": "^6.3.17",
"expo": "~48.0.18",
"expo-status-bar": "~1.4.4",

53
src/Components/Card/index.js
View File

@ -1,8 +1,8 @@
import { useContext } from "react";
import { View } from "react-native";
import { Text, View } from "react-native";
import { AppContext, AppStyles } from "../../utils";
export default function Card({ children, cardBackgroundColor }) {
export default function Card({ children, cardTopicText, cardBackgroundColor }) {
const appContext = useContext(AppContext);
const backgroundColor =
@ -11,26 +11,39 @@ export default function Card({ children, cardBackgroundColor }) {
: cardBackgroundColor;
return (
<View
style={{
paddingTop: 10,
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 10,
}}
>
<>
<View
style={[
{
borderRadius: 20,
backgroundColor: backgroundColor,
padding: 20,
},
AppStyles.Shadow,
]}
style={{
paddingTop: 10,
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 10,
}}
>
{children}
{cardTopicText !== undefined && (
<Text
style={{
paddingLeft: 10,
color: appContext.appTheme.colors.gray,
paddingBottom: 6,
}}
>
{cardTopicText}
</Text>
)}
<View
style={[
{
borderRadius: 20,
backgroundColor: backgroundColor,
padding: 20,
},
AppStyles.Shadow,
]}
>
{children}
</View>
</View>
</View>
</>
);
}

4
src/Components/Divider/index.js
View File

@ -2,7 +2,7 @@ import { useContext } from "react";
import { View } from "react-native";
import { AppContext } from "../../utils";
export function Divider({ style }) {
export function Divider({ style, withoutMarginVertical }) {
const appContext = useContext(AppContext);
return (
@ -12,8 +12,8 @@ export function Divider({ style }) {
{
height: 1,
backgroundColor: appContext.appTheme.divider,
marginVertical: 10,
},
!withoutMarginVertical && { marginVertical: 10 },
]}
/>
);

18
src/Components/Modal/index.js
View File

@ -1,10 +1,10 @@
import { useContext, useEffect, useState } from "react";
import { AppContext, AppStyles, ModalContainer } from "../../utils";
import { Pressable, Text, TouchableOpacity, View } from "react-native";
import { Divider } from "../Divider";
import { Pressable, Text, View } from "react-native";
import MyIcon from "../Icon";
import MyTextInput from "../TextInput";
import { MyIconButton } from "../Button";
import { Divider } from "../Divider";
//const modalContentStyle = { margin: 10, paddingTop: 10 };
@ -141,14 +141,22 @@ export function MyPickerModalListItem({
{itemName}
</Text>
{itemSelected && (
{itemSelected ? (
<MyIcon
name="check"
name="checkbox-marked-circle"
size={24}
color={appContext.appTheme.colors.primary}
/>
) : (
<MyIcon
name="checkbox-blank-circle-outline"
size={24}
color={appContext.appTheme.colors.gray}
style={disabled && AppStyles.disabled}
/>
)}
</View>
<Divider withoutMarginVertical />
</Pressable>
</>
);
@ -171,7 +179,7 @@ export function MyTextInputModalContent({
usePrimaryColor
iconName="check"
iconSize={24}
style={{ marginRight: 20 }}
style={AppStyles.headerNavigationIcons}
onPress={() => {
navigation.goBack();
onCheckIconPress(newValue);

25
src/Screens/Device/modals/AddSceneAction/index.js
View File

@ -1,5 +1,5 @@
import { useContext } from "react";
import { Image, ScrollView, Text, TouchableOpacity, View } from "react-native";
import { Image, Pressable, ScrollView, Text, View } from "react-native";
import { AppContext, AppStyles, ModalContainer } from "../../../../utils";
import MyIcon from "../../../../Components/Icon";
import { Divider } from "../../../../Components/Divider";
@ -27,10 +27,16 @@ function Action({
return (
<>
<TouchableOpacity
style={{ marginLeft: 10, marginRight: 10 }}
<Pressable
onPress={onPress}
disabled={!deviceFirmwareVersionSupported}
style={({ pressed }) => [
{
backgroundColor: pressed
? appContext.appTheme.modal.pressedPickerItemColor
: appContext.appTheme.backgroundColor,
},
]}
>
<View
style={[
@ -38,6 +44,7 @@ function Action({
flexDirection: "row",
alignItems: "center",
flexWrap: "wrap",
padding: 12,
},
imageSource !== undefined && { marginBottom: 4 },
]}
@ -57,10 +64,14 @@ function Action({
)}
</View>
{imageSource !== undefined && (
<Image source={imageSource} style={{ height: 150, width: 150 }} />
<Image
source={imageSource}
style={{ height: 150, width: 150, marginLeft: 12 }}
/>
)}
</TouchableOpacity>
<Divider />
</Pressable>
<Divider withoutMarginVertical />
</>
);
}
@ -74,7 +85,7 @@ export default function AddSceneActionModalContent({ navigation, route }) {
return (
<ScrollView>
<ModalContainer>
<ModalContainer withoutPadding>
<Action
text={t("screens.device.scenes.modalAddSceneAction.actions.layers")}
iconName="lightbulb-on-outline"

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

@ -13,7 +13,7 @@ import {
} from "../../../deviceTabButton";
import Card from "../../../../../Components/Card";
import MyDropdown from "../../../../../Components/Dropdown";
import { useCallback, useContext, useEffect, useRef, useState } from "react";
import { useContext, useEffect, useRef, useState } from "react";
import { AppContext, AppStyles, ModalContainer } from "../../../../../utils";
import { MyPickerModalListItem } from "../../../../../Components/Modal";
import { MyColorPickerV2 } from "../../../../../Components/ColorPicker";
@ -28,7 +28,6 @@ import EditActionAnimationsCardContent, {
EditActionAdjustmentContent,
} from "..";
import { useTranslation } from "react-i18next";
import { useFocusEffect } from "@react-navigation/native";
function LightModeDefaultColor({
sharedColor,
@ -171,6 +170,7 @@ export function LightsEditActionModalContent({ navigation, route }) {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginTop: 2,
}}
>
<Text
@ -233,13 +233,9 @@ export function LightsEditActionModalContent({ navigation, route }) {
))}
</View>
<Divider />
<MyColorPickerV2
pickerRef={colorPickerRef}
style={[
selectedSceneActionModeId === "" && { marginTop: 10 },
]}
style={{ marginTop: 10 }}
appThemeText={appContext.appTheme.text}
isUserExpertModeEnabled={appContext.isUserExpertModeEnabled}
disabled={selectedDefaultLightModeColor === undefined}
@ -257,16 +253,17 @@ export function LightsEditActionModalContent({ navigation, route }) {
)}
{selectedLightMode.adjustments.length > 0 && (
<View style={{ marginTop: 2 }}>
<>
{selectedLightMode.adjustments.map((adjustment, index) => (
<EditActionAdjustmentContent
key={index}
adjustment={adjustment}
appThemeText={appContext.appTheme.text}
appLanguage={appContext.appLanguage}
/>
<View key={index} style={{ marginTop: 10 }}>
<EditActionAdjustmentContent
adjustment={adjustment}
appThemeText={appContext.appTheme.text}
appLanguage={appContext.appLanguage}
/>
</View>
))}
</View>
</>
)}
</>
)}
@ -290,7 +287,7 @@ export function LayersEditActionColorModeSelectionModalContent({
const appContext = useContext(AppContext);
return (
<ModalContainer>
<ModalContainer withoutPadding>
<FlatList
data={route.params.supportedDeviceLightModes}
keyExtractor={(item) => item.id}

4
src/Screens/Device/modals/EditActions/index.js
View File

@ -84,7 +84,7 @@ export default function EditActionAnimationsCardContent({
AppStyles.typography14,
{
fontWeight: "bold",
marginTop: 6,
marginTop: 10,
color: appContext.appTheme.text,
},
]}
@ -157,7 +157,7 @@ export function EditActionAnimationSelectionModalContent({
animationType === "animationIn" ? "animationInId" : "animationOutId";
return (
<ModalContainer>
<ModalContainer withoutPadding>
{supportedLightAnimations.length === 0 ? (
<MyResult
text={

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

@ -1,6 +1,6 @@
import { FlatList, Text, TouchableOpacity, View } from "react-native";
import Card from "../../Components/Card";
import { AppContext, Constants, GetDevice } from "../../utils";
import { AppContext, AppStyles, Constants, GetDevice } from "../../utils";
import { useCallback, useContext, useState } from "react";
import MyDropdown from "../../Components/Dropdown";
import MyIcon from "../../Components/Icon";
@ -34,7 +34,7 @@ export default function SceneView({ navigation }) {
<MyIconButton
iconName="pencil"
iconSize={22}
style={{ marginRight: 20 }}
style={AppStyles.headerNavigationIcons}
onPress={() =>
navigation.navigate("modalUpdateSceneName", {
deviceSelectedScene: device.selectedScene,

28
src/Screens/Device/settings.js
View File

@ -24,19 +24,7 @@ export default function SettingsView({ navigation }) {
return (
<>
<Card>
<Text
style={[
AppStyles.typography20,
{
color: appContext.appTheme.text,
marginBottom: 10,
},
]}
>
{t("screens.device.settings.settingsTitle")}
</Text>
<Card cardTopicText={t("screens.device.settings.settingsTitle")}>
<View
style={{
flexDirection: "row",
@ -69,19 +57,7 @@ export default function SettingsView({ navigation }) {
</View>
</Card>
<Card>
<Text
style={[
AppStyles.typography20,
{
color: appContext.appTheme.text,
marginBottom: 10,
},
]}
>
{t("screens.device.settings.deviceInformationText")}
</Text>
<Card cardTopicText={t("screens.device.settings.deviceInformationText")}>
<View
style={{
flexDirection: "row",

21
src/Screens/Settings/index.js
View File

@ -18,19 +18,7 @@ export default function SettingsScreen({ navigation }) {
backgroundColor: appContext.appTheme.backgroundColor,
}}
>
<Card>
<Text
style={[
AppStyles.typography20,
{
color: appContext.appTheme.text,
marginBottom: 10,
},
]}
>
{t("screens.settings.settingsCardTitle")}
</Text>
<Card cardTopicText={t("screens.settings.settingsCardTitle")}>
<TouchableOpacity
onPress={() => navigation.navigate("modalSettingsAppLanguage")}
style={{ marginBottom: 6 }}
@ -40,6 +28,7 @@ export default function SettingsScreen({ navigation }) {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingBottom: 4,
}}
>
<Text
@ -68,6 +57,8 @@ export default function SettingsScreen({ navigation }) {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingTop: 4,
paddingBottom: 4,
}}
>
<Text
@ -146,7 +137,7 @@ export function SettingsAppLanguageModalContent({ navigation }) {
const appContext = useContext(AppContext);
return (
<ModalContainer>
<ModalContainer withoutPadding>
<FlatList
data={Constants.languages}
renderItem={({ item, index }) => (
@ -188,7 +179,7 @@ export function SettingsAppColorSchemeModalContent({ navigation }) {
];
return (
<ModalContainer>
<ModalContainer withoutPadding>
<FlatList
data={items}
renderItem={({ item, index }) => (

5
src/utils.js
View File

@ -57,6 +57,9 @@ export const AppStyles = StyleSheet.create({
disabled: {
opacity: 0.6,
},
headerNavigationIcons: {
padding: 17,
},
});
const DarkAppTheme = {
@ -64,6 +67,7 @@ const DarkAppTheme = {
colors: {
primary: "#e67e22",
secondary: "#9b59b6",
gray: "#b2bec3",
},
text: "#fff",
textSecondary: "#ddd",
@ -114,6 +118,7 @@ const LightAppTheme = {
colors: {
primary: "#e67e22",
secondary: "#9b59b6",
gray: "#636e72",
},
text: "#000",
textSecondary: "#555",