Unverified Commit afd4f5e9 authored by benguedj's avatar benguedj Committed by GitHub
Browse files

fix: 🐛 Améliore l'UX/UI (buttons, checkbox) (#563)

iOS Guideline 4.0 - Design (App refused)

 Closes: #560
parent 31bb5b85
......@@ -9,6 +9,7 @@ import {
FontNames,
FontWeight,
getFontFamilyName,
Margins,
Paddings,
Sizes,
} from "../../constants";
......@@ -43,7 +44,10 @@ const styles = StyleSheet.create({
alignSelf: "flex-start",
backgroundColor: "transparent",
borderWidth: 0,
paddingVertical: Paddings.smallest,
marginHorizontal: Margins.light,
marginVertical: 0,
padding: Paddings.light,
width: "100%",
},
label: {
color: Colors.primaryBlueDark,
......
......@@ -19,6 +19,7 @@ const styles = StyleSheet.create({
appLogo: {
alignItems: "center",
display: "flex",
paddingBottom: Paddings.light,
},
logoMinistere: {
aspectRatio: 1,
......
......@@ -140,9 +140,10 @@ const styles = StyleSheet.create({
justifyContent: "center",
},
closeButton: {
padding: Paddings.default,
position: "absolute",
right: Paddings.default,
top: Paddings.default,
right: 0,
top: 0,
},
modalView: {
alignItems: "center",
......
......@@ -120,7 +120,7 @@ const RootNavigator: FC<RootNavigatorProps> = ({ onPressMenu }) => (
</TouchableOpacity>
),
headerShown: true,
headerTitle: () => <AppLogo height={Sizes.xxxl} />,
headerTitle: () => <AppLogo height={Sizes.xxxl} width={Sizes.xxxl} />,
headerTitleContainerStyle: {
alignItems: "center",
},
......@@ -140,7 +140,9 @@ const styles = StyleSheet.create({
},
headerRight: {
alignItems: "center",
paddingRight: Paddings.default,
height: "100%",
justifyContent: "center",
paddingHorizontal: Paddings.default,
},
headerRightButtonText: {
color: Colors.primaryBlue,
......
......@@ -351,7 +351,7 @@ const styles = StyleSheet.create({
marginTop: Margins.default,
},
closeModalView: {
margin: Margins.default,
padding: Paddings.default,
position: "absolute",
right: 0,
top: 0,
......
......@@ -25,24 +25,26 @@ const EpdsQuestion: React.FC<Props> = ({
style={styles.swipeView}
contentContainerStyle={styles.justifyContentCenter}
>
<View style={styles.swipeViewMargin}>
<View style={[styles.swipeViewMargin, styles.paddingRight]}>
<CommonText style={styles.question}>
{questionAndAnswers.questionNumber}. {questionAndAnswers.question}
</CommonText>
{questionAndAnswers.answers.map((answer, answerIndex) => (
<Checkbox
key={answerIndex}
labelSize={Sizes.xs}
title={answer.label}
checked={answer.isChecked}
onPress={() => {
updatePressedAnswer(answer);
trackScreenView(
`${TrackerUtils.TrackingEvent.EPDS} - question n°${questionAndAnswers.questionNumber} - case cochée`
);
}}
/>
))}
<View style={styles.paddingRight}>
{questionAndAnswers.answers.map((answer, answerIndex) => (
<Checkbox
key={answerIndex}
labelSize={Sizes.xs}
title={answer.label}
checked={answer.isChecked}
onPress={() => {
updatePressedAnswer(answer);
trackScreenView(
`${TrackerUtils.TrackingEvent.EPDS} - question n°${questionAndAnswers.questionNumber} - case cochée`
);
}}
/>
))}
</View>
</View>
</ScrollView>
);
......@@ -54,6 +56,9 @@ const styles = StyleSheet.create({
alignItems: "center",
justifyContent: "center",
},
paddingRight: {
paddingRight: Paddings.light,
},
question: {
color: Colors.primaryBlueDark,
fontSize: Sizes.sm,
......
......@@ -62,7 +62,9 @@ const ListArticles: FC<Props> = ({ navigation, route }) => {
);
}, []);
const [articles, setArticles] = React.useState<Article[]>([]);
const [filteredArticles, setFilteredArticles] = React.useState<Article[]>([]);
const [showArticles, setShowArticles] = React.useState(false);
const STEP_ARTICLES = gql`
query GetStepArticles {
......@@ -112,14 +114,17 @@ const ListArticles: FC<Props> = ({ navigation, route }) => {
const applyFilters = (filters: ArticleFilter[]) => {
const activeFilters = _.filter(filters, { active: true });
sendFiltersTracker(activeFilters);
const result = filteredArticles.map((article) => {
const result = articles.map((article) => {
let hide = false;
if (activeFilters.length > 0)
article.hide = !matchWithFilters(article, activeFilters);
else article.hide = false;
hide = !matchWithFilters(article, activeFilters);
return article;
return {
...article,
hide: hide,
};
});
setFilteredArticles(result);
setArticles(result);
};
const { loading, error, data } = useQuery(STEP_ARTICLES, {
......@@ -128,12 +133,19 @@ const ListArticles: FC<Props> = ({ navigation, route }) => {
useEffect(() => {
if (!loading && data) {
const articles = (data as { articles: Article[] }).articles;
setFilteredArticles(articles);
const articlesToShow = _.filter(articles, (article) => !article.hide);
setFilteredArticles(articlesToShow);
setShowArticles(true);
}
}, [articles]);
useEffect(() => {
if (!loading && data) {
const results = (data as { articles: Article[] }).articles;
setArticles(results);
}
}, [loading, data]);
if (loading) return <Loader />;
if (error) return <ErrorMessage error={error} />;
return (
......@@ -171,15 +183,14 @@ const ListArticles: FC<Props> = ({ navigation, route }) => {
</View>
)}
<Filters articles={filteredArticles} applyFilters={applyFilters} />
<Filters articles={articles} applyFilters={applyFilters} />
<View style={styles.listContainer}>
<SecondaryText style={styles.headerListInfo}>
{_.filter(filteredArticles, (article) => !article.hide).length}{" "}
{Labels.listArticles.articlesToRead}
</SecondaryText>
{_.filter(filteredArticles, (article) => !article.hide).map(
(article, index) => (
{showArticles ? (
<View style={styles.listContainer}>
<SecondaryText style={styles.headerListInfo}>
{filteredArticles.length} {Labels.listArticles.articlesToRead}
</SecondaryText>
{filteredArticles.map((article, index) => (
<Animatable.View
key={index}
animation="fadeInUp"
......@@ -232,9 +243,11 @@ const ListArticles: FC<Props> = ({ navigation, route }) => {
</ListItem.Content>
</ListItem>
</Animatable.View>
)
)}
</View>
))}
</View>
) : (
<Loader />
)}
</ScrollView>
);
};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment