From 49cb192574a52b4427d3377f709d5474676051d1 Mon Sep 17 00:00:00 2001 From: James Gosbell Date: Mon, 30 Oct 2017 01:36:19 +1000 Subject: [PATCH 1/9] fix: Updated section-list styles to used styled-components fix: Updated contributors list --- .all-contributorsrc | 7 +++ CONTRIBUTORS.md | 2 +- README.md | 2 +- src/components/section-list.component.js | 58 ++++++++++++------------ 4 files changed, 38 insertions(+), 31 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 47d05e58b..f4ad71510 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -599,6 +599,13 @@ "code", "design" ] + }, + { + "login": "jamesg1", + "name": "James G", + "avatar_url": "https://avatars3.githubusercontent.com/u/3621147?v=4", + "profile": "https://github.com/jamesg1", + "contributions": [] } ] } diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 87d0026ff..542677ee1 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -14,5 +14,5 @@ Thank you to all the people who have already contributed to GitPoint! | [
siderio2](https://github.com/siderio2)
[🌍](#translation-siderio2 "Translation") | [
Kodo Verkisto](https://github.com/kodisto)
[🌍](#translation-kodisto "Translation") | [
Sarah Vessels](http://sarahvessels.com/)
[πŸ“–](https://github.com/gitpoint/git-point/commits?author=cheshire137 "Documentation") | [
Thales Sousa](https://github.com/tminussi)
[🌍](#translation-tminussi "Translation") | [
Aseem Sood](https://github.com/asood123)
[πŸ“–](https://github.com/gitpoint/git-point/commits?author=asood123 "Documentation") | [
Eliott hauteclair](https://eliott.be)
[🌍](#translation-Eliottiosdevs "Translation") | | [
Peter Blazejewicz](http://www.linkedin.com/in/peterblazejewicz)
[🌍](#translation-peterblazejewicz "Translation") | [
Eric Adamski](https://github.com/ericadamski)
[πŸ›](https://github.com/gitpoint/git-point/issues?q=author%3Aericadamski "Bug reports") | [
Jouderian Nobre Junior](https://github.com/jouderianjr)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=jouderianjr "Code") | [
Phi Dong](http://www.phidong.com)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=pdong "Code") | [
John Patrick Salcedo](https://github.com/jpls93)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=jpls93 "Code") | [
Γ“scar Carretero](https://github.com/ocarreterom)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=ocarreterom "Code") | | [
Dyesse YUMBA](https://github.com/dyesseyumba)
[πŸ”§](#tool-dyesseyumba "Tools") | [
Bink](https://binkpitch.me/)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=binkpitch "Code") | [
khvilaboa](https://github.com/khvilaboa)
[🌍](#translation-khvilaboa "Translation") | [
James Glover](http://jamesmglover.com)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=jglover "Code") [⚠️](https://github.com/gitpoint/git-point/commits?author=jglover "Tests") | [
Jose Luis Naranjo](https://co.linkedin.com/in/josenaranjo/en)
| [
Tobias Lohse](http://MrLoh.se)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=MrLoh "Code") | -| [
Serhii Baraniuk](https://www.facebook.com/serhii.baraniuk)
[⚠️](https://github.com/gitpoint/git-point/commits?author=kenitive "Tests") | [
Ben Snider](http://www.bensnider.com/)
[⚠️](https://github.com/gitpoint/git-point/commits?author=stupergenius "Tests") | [
Simon Hoyos](https://www.linkedin.com/in/simonhoyos/)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=shmesa22 "Code") [🎨](#design-shmesa22 "Design") | +| [
Serhii Baraniuk](https://www.facebook.com/serhii.baraniuk)
[⚠️](https://github.com/gitpoint/git-point/commits?author=kenitive "Tests") | [
Ben Snider](http://www.bensnider.com/)
[⚠️](https://github.com/gitpoint/git-point/commits?author=stupergenius "Tests") | [
Simon Hoyos](https://www.linkedin.com/in/simonhoyos/)
[πŸ’»](https://github.com/gitpoint/git-point/commits?author=shmesa22 "Code") [🎨](#design-shmesa22 "Design") | [
James G](https://github.com/jamesg1)
| diff --git a/README.md b/README.md index 87ad9f450..917e6234a 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ [![Build Status](https://img.shields.io/travis/gitpoint/git-point.svg?style=flat-square)](https://travis-ci.org/gitpoint/git-point) [![Coveralls](https://img.shields.io/coveralls/github/gitpoint/git-point.svg?style=flat-square)](https://coveralls.io/github/gitpoint/git-point) -[![All Contributors](https://img.shields.io/badge/all_contributors-63-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-64-orange.svg?style=flat-square)](#contributors) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/) [![Gitter chat](https://img.shields.io/badge/chat-on_gitter-008080.svg?style=flat-square)](https://gitter.im/git-point) diff --git a/src/components/section-list.component.js b/src/components/section-list.component.js index ae44f64b5..7ce7711c5 100644 --- a/src/components/section-list.component.js +++ b/src/components/section-list.component.js @@ -1,6 +1,7 @@ import React from 'react'; -import { StyleSheet, Text, View, ActivityIndicator } from 'react-native'; +import { StyleSheet, View, ActivityIndicator } from 'react-native'; import { List, ListItem, Button } from 'react-native-elements'; +import styled from 'styled-components/native'; import { colors, fonts } from 'config'; @@ -16,33 +17,38 @@ type Props = { buttonAction: Function, }; +const Section = styled.View` + margin-top: 15px; +`; +const SectionTitle = styled.Text` + color: ${colors.black}; + padding: 15px; + ${fonts.fontPrimaryBold}; +`; +const StyledTitleView = styled.View` + padding: 15px; +`; +const LoadingIcon = styled(ActivityIndicator)` + margin: 20px 0px; +`; +const StyledButton = styled(Button)` + background-color: ${colors.white}; + border-color: ${colors.primaryDark}; + border-width: 1px; + border-radius: 3px; + padding: 5px 10px; +`; const styles = StyleSheet.create({ - section: { - marginTop: 15, - }, topHeader: { flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }, - sectionTitle: { - color: colors.black, - padding: 15, - ...fonts.fontPrimaryBold, - }, listTitle: { color: colors.black, ...fonts.fontPrimary, }, - button: { - backgroundColor: colors.white, - borderColor: colors.primaryDark, - borderWidth: 1, - borderRadius: 3, - paddingVertical: 5, - paddingHorizontal: 10, - }, list: { marginTop: 0, }, @@ -50,9 +56,6 @@ const styles = StyleSheet.create({ borderTopWidth: 0, borderBottomWidth: 0, }, - loadingIcon: { - marginVertical: 20, - }, }); export const SectionList = ({ @@ -69,9 +72,7 @@ export const SectionList = ({ let listDisplay; if (loading) { - listDisplay = ( - - ); + listDisplay = ; } else if (noItems) { listDisplay = ( {title}; + sectionTitle = {title}; } else { - sectionTitle = {title}; + sectionTitle = {title}; } return ( - +
{sectionTitle} {showButton && !loading && ( -
); }; From 94672b40d4510fad8453a5f1742e85896df17b77 Mon Sep 17 00:00:00 2001 From: James Gosbell Date: Tue, 31 Oct 2017 21:30:52 +1000 Subject: [PATCH 2/9] fix: Refactored section list and updated contributors --- .all-contributorsrc | 4 +++- src/components/section-list.component.js | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index f4ad71510..bc66205ae 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -605,7 +605,9 @@ "name": "James G", "avatar_url": "https://avatars3.githubusercontent.com/u/3621147?v=4", "profile": "https://github.com/jamesg1", - "contributions": [] + "contributions": [ + "code" + ] } ] } diff --git a/src/components/section-list.component.js b/src/components/section-list.component.js index 7ce7711c5..4781a497f 100644 --- a/src/components/section-list.component.js +++ b/src/components/section-list.component.js @@ -18,7 +18,7 @@ type Props = { }; const Section = styled.View` - margin-top: 15px; + margin: 15px 0 0; `; const SectionTitle = styled.Text` color: ${colors.black}; @@ -29,7 +29,7 @@ const StyledTitleView = styled.View` padding: 15px; `; const LoadingIcon = styled(ActivityIndicator)` - margin: 20px 0px; + margin: 20px 0; `; const StyledButton = styled(Button)` background-color: ${colors.white}; From 5f5a6e10ac7323af4d84979a195861bbd6911275 Mon Sep 17 00:00:00 2001 From: James Gosbell Date: Tue, 20 Feb 2018 00:03:51 +1000 Subject: [PATCH 3/9] Updated section-list with changes after merge --- src/components/section-list.component.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/components/section-list.component.js b/src/components/section-list.component.js index 38a786151..32f176295 100644 --- a/src/components/section-list.component.js +++ b/src/components/section-list.component.js @@ -1,6 +1,7 @@ import React from 'react'; import { StyleSheet, Text, View, ActivityIndicator } from 'react-native'; import { List, ListItem, Button } from 'react-native-elements'; +import styled from 'styled-components'; import { colors, fonts } from 'config'; @@ -15,6 +16,28 @@ type Props = { buttonAction: Function, }; +const Section = styled.View` + margin-top: 15; +`; +const SectionTitle = styled.Text` + color: ${colors.black}; + padding: 15px; + ${fonts.fontPrimaryBold}; +`; +const StyledTitleView = styled.View` + padding: 15px; +`; +const LoadingIcon = styled(ActivityIndicator)` + margin: 20px 0; +`; +const StyledButton = styled(Button)` + background-color: ${colors.white}; + border-color: ${colors.primaryDark}; + border-width: 1px; + border-radius: 3px; + padding: 5px 10px; +`; + const styles = StyleSheet.create({ section: { marginTop: 15, From c4a3d22f6810b81ad463a8449a322cd395bf7c47 Mon Sep 17 00:00:00 2001 From: James Gosbell Date: Tue, 20 Feb 2018 00:34:08 +1000 Subject: [PATCH 4/9] Updated styling for Section list to use styled_component --- src/components/section-list.component.js | 84 ++++++++++-------------- 1 file changed, 33 insertions(+), 51 deletions(-) diff --git a/src/components/section-list.component.js b/src/components/section-list.component.js index 32f176295..d45010dd3 100644 --- a/src/components/section-list.component.js +++ b/src/components/section-list.component.js @@ -19,11 +19,30 @@ type Props = { const Section = styled.View` margin-top: 15; `; +const Header = styled.View` + flex: 1; + flex-direction: 'row'; + justify-content: 'space-between'; + align-items: 'center'; +`; const SectionTitle = styled.Text` color: ${colors.black}; padding: 15px; ${fonts.fontPrimaryBold}; `; +const SectionList = styled(List).attrs({ + containerStyle: { + margin-top: 0; + border-bottom-color: ${colors.grey}, + border-bottom-width: 1, + }, +})``; +const SectionListItem = styled(ListItem).attrs({ + titleStyle: { + color: colors.black, + ${fonts.fontPrimary}, + } +})``; const StyledTitleView = styled.View` padding: 15px; `; @@ -33,48 +52,11 @@ const LoadingIcon = styled(ActivityIndicator)` const StyledButton = styled(Button)` background-color: ${colors.white}; border-color: ${colors.primaryDark}; - border-width: 1px; - border-radius: 3px; + border-width: 1; + border-radius: 3; padding: 5px 10px; `; -const styles = StyleSheet.create({ - section: { - marginTop: 15, - }, - topHeader: { - flex: 1, - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - sectionTitle: { - color: colors.black, - padding: 15, - ...fonts.fontPrimaryBold, - }, - listTitle: { - color: colors.black, - ...fonts.fontPrimary, - }, - button: { - backgroundColor: colors.white, - borderColor: colors.primaryDark, - borderWidth: 1, - borderRadius: 3, - paddingVertical: 5, - paddingHorizontal: 10, - }, - list: { - marginTop: 0, - borderBottomColor: colors.grey, - borderBottomWidth: 1, - }, - loadingIcon: { - marginVertical: 20, - }, -}); - export const SectionList = ({ loading, title, @@ -89,13 +71,14 @@ export const SectionList = ({ if (loading) { listDisplay = ( - + ); } else if (noItems) { listDisplay = ( - ); @@ -106,30 +89,29 @@ export const SectionList = ({ let sectionTitle = ''; if (typeof title === 'string') { - sectionTitle = {title}; + sectionTitle = {title}; } else { - sectionTitle = {title}; + sectionTitle = {title}; } return ( - - +
+
{sectionTitle} {showButton && !loading && ( -
+ {listDisplay} +
); }; From 7282f032e38fabbfd0355adb27f55acbee95f6ac Mon Sep 17 00:00:00 2001 From: James Gosbell Date: Tue, 20 Feb 2018 00:51:19 +1000 Subject: [PATCH 5/9] Updated section list styling --- src/components/section-list.component.js | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/components/section-list.component.js b/src/components/section-list.component.js index d45010dd3..6ad5688b4 100644 --- a/src/components/section-list.component.js +++ b/src/components/section-list.component.js @@ -3,7 +3,7 @@ import { StyleSheet, Text, View, ActivityIndicator } from 'react-native'; import { List, ListItem, Button } from 'react-native-elements'; import styled from 'styled-components'; -import { colors, fonts } from 'config'; +import { colors, fonts, normalize } from 'config'; type Props = { loading: boolean, @@ -30,6 +30,9 @@ const SectionTitle = styled.Text` padding: 15px; ${fonts.fontPrimaryBold}; `; +const TitleView = styled.View` + padding: 15px; +`; const SectionList = styled(List).attrs({ containerStyle: { margin-top: 0; @@ -43,15 +46,13 @@ const SectionListItem = styled(ListItem).attrs({ ${fonts.fontPrimary}, } })``; -const StyledTitleView = styled.View` - padding: 15px; -`; const LoadingIcon = styled(ActivityIndicator)` margin: 20px 0; `; const StyledButton = styled(Button)` background-color: ${colors.white}; border-color: ${colors.primaryDark}; + border-width: 1; border-radius: 3; padding: 5px 10px; @@ -71,27 +72,22 @@ export const SectionList = ({ if (loading) { listDisplay = ( - ); } else if (noItems) { listDisplay = ( - + ); } else { listDisplay = children; } let sectionTitle = ''; - if (typeof title === 'string') { sectionTitle = {title}; } else { - sectionTitle = {title}; + sectionTitle = {title}; } return ( From 09ce9d1f36126ea7c52beec2ec8d01831670fe5e Mon Sep 17 00:00:00 2001 From: James Gosbell Date: Tue, 20 Feb 2018 01:00:32 +1000 Subject: [PATCH 6/9] Added self to contributions list and updated section-list component --- .all-contributorsrc | 9 +++++++++ src/components/section-list.component.js | 1 - 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 4e5b5a853..19e950193 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -731,6 +731,15 @@ "bug", "translation" ] + }, + { + "login": "jamesg1", + "name": "James Gosbell", + "avatar_url": "https://avatars3.githubusercontent.com/u/3621147?v=4", + "profile": "https://github.com/jamesg1", + "contributions": [ + "code" + ] } ] } diff --git a/src/components/section-list.component.js b/src/components/section-list.component.js index 6ad5688b4..c06e9d58f 100644 --- a/src/components/section-list.component.js +++ b/src/components/section-list.component.js @@ -52,7 +52,6 @@ const LoadingIcon = styled(ActivityIndicator)` const StyledButton = styled(Button)` background-color: ${colors.white}; border-color: ${colors.primaryDark}; - border-width: 1; border-radius: 3; padding: 5px 10px; From 87b04f2b7d0aa31c7dc7bce24f20ee5d255e3df6 Mon Sep 17 00:00:00 2001 From: James Gosbell Date: Wed, 21 Feb 2018 01:31:12 +1000 Subject: [PATCH 7/9] feat: Refactor of section-list stylesheet to styledComponents --- src/components/section-list.component.js | 65 +++++++++++------------- 1 file changed, 29 insertions(+), 36 deletions(-) diff --git a/src/components/section-list.component.js b/src/components/section-list.component.js index c06e9d58f..c1b335aca 100644 --- a/src/components/section-list.component.js +++ b/src/components/section-list.component.js @@ -1,9 +1,9 @@ import React from 'react'; -import { StyleSheet, Text, View, ActivityIndicator } from 'react-native'; +import { ActivityIndicator } from 'react-native'; import { List, ListItem, Button } from 'react-native-elements'; import styled from 'styled-components'; -import { colors, fonts, normalize } from 'config'; +import { colors, fonts } from 'config'; type Props = { loading: boolean, @@ -20,10 +20,10 @@ const Section = styled.View` margin-top: 15; `; const Header = styled.View` - flex: 1; - flex-direction: 'row'; - justify-content: 'space-between'; - align-items: 'center'; + flex: auto; + flex-direction: row; + justify-content: space-between; + align-items: center; `; const SectionTitle = styled.Text` color: ${colors.black}; @@ -33,29 +33,32 @@ const SectionTitle = styled.Text` const TitleView = styled.View` padding: 15px; `; -const SectionList = styled(List).attrs({ +const StyledList = styled(List).attrs({ containerStyle: { - margin-top: 0; - border-bottom-color: ${colors.grey}, - border-bottom-width: 1, + marginTop: 0, + borderBottomColor: colors.grey, + borderBottomWidth: 1, }, })``; -const SectionListItem = styled(ListItem).attrs({ +const StyledListItem = styled(ListItem).attrs({ titleStyle: { - color: colors.black, - ${fonts.fontPrimary}, - } + color: colors.black, + ...fonts.fontPrimary, + }, })``; const LoadingIcon = styled(ActivityIndicator)` margin: 20px 0; `; -const StyledButton = styled(Button)` - background-color: ${colors.white}; - border-color: ${colors.primaryDark}; - border-width: 1; - border-radius: 3; - padding: 5px 10px; -`; +const StyledButton = styled(Button).attrs({ + buttonStyle: { + backgroundColor: colors.white, + borderColor: colors.primaryDark, + borderWidth: 1, + paddingVertical: 5, + paddingHorizontal: 10, + ...fonts.fontPrimaryBold, + }, +})``; export const SectionList = ({ loading, @@ -70,19 +73,15 @@ export const SectionList = ({ let listDisplay; if (loading) { - listDisplay = ( - - ); + listDisplay = ; } else if (noItems) { - listDisplay = ( - - ); + listDisplay = ; } else { listDisplay = children; } let sectionTitle = ''; + if (typeof title === 'string') { sectionTitle = {title}; } else { @@ -96,16 +95,10 @@ export const SectionList = ({ {showButton && !loading && ( - + )} - {listDisplay} + {listDisplay} ); }; From a20dadc6ca5309432a5a9b9919fb2b6fc5d72b0d Mon Sep 17 00:00:00 2001 From: James Gosbell Date: Thu, 22 Feb 2018 22:44:40 +1000 Subject: [PATCH 8/9] feat: StyledButton and Header flex style fix --- src/components/section-list.component.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/section-list.component.js b/src/components/section-list.component.js index c1b335aca..97cd31232 100644 --- a/src/components/section-list.component.js +++ b/src/components/section-list.component.js @@ -20,7 +20,8 @@ const Section = styled.View` margin-top: 15; `; const Header = styled.View` - flex: auto; + flex-grow: 0; + flex-basis: 0; flex-direction: row; justify-content: space-between; align-items: center; @@ -50,13 +51,18 @@ const LoadingIcon = styled(ActivityIndicator)` margin: 20px 0; `; const StyledButton = styled(Button).attrs({ + textStyle: { + ...fonts.fontPrimaryBold, + }, + fontSize: 13, + color: colors.primaryDark, buttonStyle: { backgroundColor: colors.white, borderColor: colors.primaryDark, borderWidth: 1, + borderRadius: 3, paddingVertical: 5, paddingHorizontal: 10, - ...fonts.fontPrimaryBold, }, })``; From cab7e0809baebef3b9a28a613759b474634a5e09 Mon Sep 17 00:00:00 2001 From: James Gosbell Date: Fri, 23 Feb 2018 07:43:32 +1000 Subject: [PATCH 9/9] feat: Removed default flexbox styles from header --- src/components/section-list.component.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/section-list.component.js b/src/components/section-list.component.js index 97cd31232..d999fd8ed 100644 --- a/src/components/section-list.component.js +++ b/src/components/section-list.component.js @@ -20,8 +20,6 @@ const Section = styled.View` margin-top: 15; `; const Header = styled.View` - flex-grow: 0; - flex-basis: 0; flex-direction: row; justify-content: space-between; align-items: center;