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

Icons and prettier #620

Merged
merged 13 commits into from
Mar 27, 2022
25 changes: 23 additions & 2 deletions components/Field/FieldIcon.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,22 @@ const FieldIcon = ({ field, hide }) => {
iconName = "calendar";
}
break;
case FieldTypes.DATETIME_SERIES:
if (name.includes("meeting")) {
iconType = "MaterialCommunityIcons";
iconName = "calendar-clock";
} else {
iconType = "MaterialCommunityIcons";
iconName = "calendar-clock";
}
break;
case FieldTypes.CONNECTION:
if (name.includes("subassigned")) {
iconType = "MaterialCommunityIcons";
iconName = "briefcase-account-outline";
} else if (name.includes("parent")) {
iconType = "MaterialCommunityIcons";
iconName = "drawing-box";
iconName = "triangle";
} else if (name.includes("peer")) {
iconType = "MaterialCommunityIcons";
iconName = "ray-start-end";
Expand All @@ -77,6 +86,9 @@ const FieldIcon = ({ field, hide }) => {
} else if (name.includes("coached_by")) {
iconType = "MaterialCommunityIcons";
iconName = "teach";
} else if (name.includes("coaches")) {
iconType = "MaterialCommunityIcons";
iconName = "teach";
} else if (name.includes("baptized_by")) {
iconType = "MaterialCommunityIcons";
iconName = "water";
Expand All @@ -91,7 +103,7 @@ const FieldIcon = ({ field, hide }) => {
iconName = "account-group";
} else if (name.includes("train")) {
iconType = "MaterialCommunityIcons";
iconName = "chalkboard-teacher";
iconName = "teach";
} else if (name.includes("members")) {
iconType = "MaterialCommunityIcons";
iconName = "format-list-bulleted";
Expand Down Expand Up @@ -196,6 +208,15 @@ const FieldIcon = ({ field, hide }) => {
iconName = "tag-multiple";
}
break;
case FieldTypes.TASK:
if (name.includes("task")) {
iconType = "MaterialCommunityIcons";
iconName = "calendar-clock";
} else {
iconType = "MaterialCommunityIcons";
iconName = "calendar-clock";
}
break;
case FieldTypes.TEXT:
if (name.includes("nickname")) {
iconType = "MaterialCommunityIcons";
Expand Down
10 changes: 5 additions & 5 deletions components/Icon.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,11 @@ export const ArrowIcon = ({ onPress, style }) => {

export const ChevronIcon = ({ header, onPress, style }) => {
const { isRTL } = useI18N();
if (isRTL && header) return <ChevronForwardIcon onPress={onPress} style={style} />;
if (isRTL && header)
return <ChevronForwardIcon onPress={onPress} style={style} />;
if (header) return <ChevronBackIcon onPress={onPress} style={style} />;
if (isRTL) return <ChevronBackIcon onPress={onPress} style={style} />;
if (isRTL) return <ChevronBackIcon onPress={onPress} style={style} />;
return <ChevronForwardIcon onPress={onPress} style={style} />;

};

// Static Icons
Expand Down Expand Up @@ -164,9 +164,9 @@ export const MapIcon = ({ onPress, style }) => (
export const OnePasswordIcon = ({ onPress, style }) => (
<MaterialCommunityIcon name="onepassword" onPress={onPress} style={style} />
);
//TODO more icon
//TODO icon for more post Types
export const PostIcon = ({ onPress, style }) => (
<MaterialCommunityIcon name="post-outline" onPress={onPress} style={style} />
<MaterialCommunityIcon name="teach" onPress={onPress} style={style} />
);
export const RemoveIcon = ({ onPress, style }) => (
<MaterialCommunityIcon name="minus" onPress={onPress} style={style} />
Expand Down
4 changes: 2 additions & 2 deletions components/OfflineBar.styles.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export const localStyles = ({ theme, isRTL, isIOS }) => ({
offlineBar: {
height: 20,
height: 24,
backgroundColor: theme.warning,
},
offlineBarText: {
Expand All @@ -9,4 +9,4 @@ export const localStyles = ({ theme, isRTL, isIOS }) => ({
textAlignVertical: "center",
textAlign: "center",
},
});
});
2 changes: 2 additions & 0 deletions constants/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export const FieldTypes = Object.freeze({
COMMUNICATION_CHANNEL: "communication_channel",
CONNECTION: "connection",
DATE: "date",
DATETIME_SERIES: "datetime_series",
KEY_SELECT: "key_select",
LOCATION: "location",
LOCATION_GRID: "location_grid",
Expand All @@ -91,6 +92,7 @@ export const FieldTypes = Object.freeze({
NUMBER: "number",
POST_USER_META: "post_user_meta",
TAGS: "tags",
TASK: "task",
TEXT: "text",
TEXTAREA: "textarea",
USER_SELECT: "user_select",
Expand Down
109 changes: 49 additions & 60 deletions screens/HomeScreen.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import React, { useEffect, useLayoutEffect, useReducer, useState } from "react";
import { Image, RefreshControl, Text, View } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { useIsFocused } from '@react-navigation/native';
import { useIsFocused } from "@react-navigation/native";

import { BellIcon, CogIcon } from "components/Icon";
import { HeaderRight } from "components/Header/Header";
import OfflineBar from "components/OfflineBar";

import MetricCard from "components/Card/MetricCard";
import PendingContactsCard from "components/Card/PendingContactsCard";
import ActivityLogCard from "components/Card/ActivityLogCard";
Expand All @@ -18,15 +20,18 @@ import { ScreenConstants, TypeConstants } from "constants";

import { findFilterById, labelize } from "utils";

import { localStyles } from './HomeScreen.styles';
import { localStyles } from "./HomeScreen.styles";

const HomeScreen = ({ navigation, route }) => {

const isFocused = useIsFocused();
const { styles, globalStyles } = useStyles(localStyles);
const { i18n } = useI18N();
const { data: contactFilters, mutate: mutateContactFilters } = useFilters({ type: TypeConstants.CONTACT });
const { data: groupFilters, mutate: mutateGroupFilters } = useFilters({ type: TypeConstants.GROUP });
const { data: contactFilters, mutate: mutateContactFilters } = useFilters({
type: TypeConstants.CONTACT,
});
const { data: groupFilters, mutate: mutateGroupFilters } = useFilters({
type: TypeConstants.GROUP,
});
const { hasNotifications } = useNotifications();

const [refreshing, setRefreshing] = useState(false);
Expand All @@ -46,53 +51,49 @@ const HomeScreen = ({ navigation, route }) => {
const renderHeaderLeft = (props) => (
<View style={globalStyles.rowContainer}>
<Image source={require("assets/dt-icon.png")} style={styles.logo} />
<Text style={styles.brandText}>
D.T
</Text>
<Text style={styles.brandText}>D.T</Text>
</View>
);

useLayoutEffect(() => {
const kebabItems = [
{
label: i18n.t('global.viewOnMobileWeb'),
label: i18n.t("global.viewOnMobileWeb"),
urlPath: "/settings/",
},
{
label: i18n.t('settingsScreen.helpSupport'),
label: i18n.t("settingsScreen.helpSupport"),
url: "https://disciple.tools/user-docs/getting-started-info/admin/settings-dt/general-settings-dt/",
}
},
];
const renderStartIcons = () => (
<>
<View style={styles.headerIcon}>
<BellIcon
onPress={() => navigation.push(ScreenConstants.NOTIFICATIONS)}
/>
{ hasNotifications && (
{hasNotifications && (
<View style={styles.notificationsDot(hasNotifications)} />
)}
</View>
<View style={styles.headerIcon}>
<CogIcon
onPress={() => navigation.push(ScreenConstants.SETTINGS)}
/>
{ hasAccountUpdates && (
<CogIcon onPress={() => navigation.push(ScreenConstants.SETTINGS)} />
{hasAccountUpdates && (
<View style={styles.notificationsDot(hasAccountUpdates)} />
)}
</View>
</>
);
navigation.setOptions({
title: '',
title: "",
headerLeft: (props) => renderHeaderLeft(props),
headerRight: (props) => (
<HeaderRight
kebabItems={kebabItems}
renderStartIcons={renderStartIcons}
props
/>
)
),
});
}, [navigation, hasNotifications, hasAccountUpdates]);

Expand All @@ -102,7 +103,7 @@ const HomeScreen = ({ navigation, route }) => {

const FavoriteContactsCard = () => {
const filter = findFilterById("favorite", contactFilters);
return(
return (
<MetricCard
title={filter?.name}
filter={filter}
Expand All @@ -113,7 +114,7 @@ const HomeScreen = ({ navigation, route }) => {

const FavoriteGroupsCard = () => {
const filter = findFilterById("favorite", groupFilters);
return(
return (
<MetricCard
title={filter?.name}
filter={filter}
Expand Down Expand Up @@ -151,57 +152,45 @@ const HomeScreen = ({ navigation, route }) => {

const ActiveContactsCard = () => {
const filter = findFilterById("my_active", contactFilters);
const title = `${ filter?.name } ${ labelize (TypeConstants.CONTACT) }`;
return(
<MetricCard
title={title}
filter={filter}
type={TypeConstants.CONTACT}
/>
const title = `${filter?.name} ${labelize(TypeConstants.CONTACT)}`;
return (
<MetricCard title={title} filter={filter} type={TypeConstants.CONTACT} />
);
};

const ActiveGroupsCard = () => {
const filter = findFilterById("my_active", groupFilters);
const title = `${ filter?.name } ${ labelize(TypeConstants.GROUP) }`;
return(
<MetricCard
title={title}
filter={filter}
type={TypeConstants.GROUP}
/>
const title = `${filter?.name} ${labelize(TypeConstants.GROUP)}`;
return (
<MetricCard title={title} filter={filter} type={TypeConstants.GROUP} />
);
};

return (
<ScrollView style={[
globalStyles.screenContainer,
styles.container
]}
refreshControl={
<RefreshControl
<>
<OfflineBar />
<ScrollView
style={[globalStyles.screenContainer, styles.container]}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
>
<View style={[globalStyles.rowContainer, styles.cardRowContainer]}>
<FavoriteContactsCard />
<FavoriteGroupsCard />
</View>
<View style={[globalStyles.rowContainer, styles.cardRowContainer]}>
<ActiveContactsCard />
<ActiveGroupsCard />
</View>
<PendingContactsCard
filters={contactFilters}
refreshing={refreshing}
onRefresh={onRefresh}
/>
}
>
<View style={[
globalStyles.rowContainer,
styles.cardRowContainer
]}>
<FavoriteContactsCard />
<FavoriteGroupsCard />
</View>
<View style={[
globalStyles.rowContainer,
styles.cardRowContainer
]}>
<ActiveContactsCard />
<ActiveGroupsCard />
</View>
<PendingContactsCard filters={contactFilters} refreshing={refreshing} onRefresh={onRefresh} />
<ActivityLogCard preview={5} refreshing={refreshing} />
</ScrollView>
<ActivityLogCard preview={5} refreshing={refreshing} />
</ScrollView>
</>
);
};
export default HomeScreen;
export default HomeScreen;
Loading