Skip to content

Add new feature about screen#14

Merged
davidepanidev merged 10 commits intoCoinTrend:developfrom
ZineeEddine:Add_new_feature_AboutScreen
Feb 28, 2023
Merged

Add new feature about screen#14
davidepanidev merged 10 commits intoCoinTrend:developfrom
ZineeEddine:Add_new_feature_AboutScreen

Conversation

@ZineeEddine
Copy link
Copy Markdown
Contributor

Hi, @davidepanidev Here is a preview of the new About Screen feature

We try to apply what you have asked us. @beastboym

The logo in the center as well as the title "About", we chose to make cards with the logo and the title and information.

Different sections to realize (Source Code, Contact, Support)

which open the different links

Do you want us to leave the arrow for the return?

We don't think it has any use, because that's what the navigation buttons below are for.

Here are 2 screenshots and 1 video to illustrate.

20230222152520368.mp4

@davidepanidev
Copy link
Copy Markdown
Member

Hi @ZineeEddine!

in order to accept the pull request it needs to be 100% compliant with the requirements. Here are the points that are not compliant with what was specified in #12:

  • no new fourth About tab is expected. You just have to submit the Screen which will not be visible until the next release when we will add the Settings tab.
  • no About title is expected
  • the items of a same section must be grouped toghether and not placed on separate cards. The items must share the same rounded corner background and be separated by a white line separator. It must follow exactly the same structure of CoinDetailScreen.
  • The Donate item must not contain the address but the link to the support section of the README (https://github.com/CoinTrend#support)

Below are the UI improvement that also must be followed to make the UI consistent with the rest of the App:

  • The CoinTrend title should be a little larger in terms of text size than the sections' titles.
  • Each section must be properly spaced from the above one. E.g. add a spacer of 16dp between each section.
  • The title of each item, like "Mail" should follow exactly the same style (size, style, color) of the crypto name in the crypto cards.
  • The subtitle of each item, like "[email protected]" should follow exactly the same style (size, style, color) of the crypto symbol (e.g. BTC) in the crypto cards.
  • The right padding of each of the items is greater than the padding on the left. It must be the same and exactly the same one of the Market Data section of CoinDetailScreen.

Below are the code improvements:

  • The outer Column item below the TopAppBar that I see on your file seems to me useless. The outer item should be the LazyList.
  • All the items inside the LazyList must be placed each one in seperate item {}.

Moreover I expect to see exactly the following changes in your commit:

  • A new file called AboutScreen placed in a new packed called about inside the existing ui package;
  • One or more added drawables in the presentation module

No other changes to any other file will be accepted, unless properly motivated.

Please, take your time to submit quality code that is consistent with the style of the rest of the App. When ready we will do another iteration like this one.

@ZineeEddine
Copy link
Copy Markdown
Contributor Author

@davidepanidev apologies, @ZineeEddine @beastboym we'll start over and the interface and removing all other changes and we will come back to you for more details.

@davidepanidev davidepanidev linked an issue Feb 23, 2023 that may be closed by this pull request
@ZineeEddine
Copy link
Copy Markdown
Contributor Author

Hi @davidepanidev,
we @ZineeEddine @beastboym have made the following changes,
Can you tell us, if we are working well, if it meets your expectations?

We kept the navigation, just to see the AboutScreen screen at compile time (interface changes), we will remove all the changes later, and we will keep the AboutScreen.kt file

Section elements, for example Github Issues, should they be clickable and open the link, or just display the link?

Should the background of the elements be gray like cypto or dark like market data?

Here is an illustration of the changes (we tried to respect the instructions as much as possible: padding, sections, size, divider)


What do you think of this new improvement?

Copy link
Copy Markdown
Member

@davidepanidev davidepanidev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok great! I made here a detailed review line-by-line so that you know what has to be changed to fine tune the UI. Thanks

build.gradle Outdated
Comment on lines +39 to +40
id 'com.android.application' version '7.2.2' apply false
id 'com.android.library' version '7.2.2' apply false
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This have to be reverted

@ZineeEddine
Copy link
Copy Markdown
Contributor Author

Hi, @davidepanidev
I applied the following changes and here is the result obtained on the screen:

I removed the "about" item from the navigation bar but also from the MainActivity.kt, Screen.kt and Enum.kt file.

Unless I am mistaken.
Here are the changes to be made that can be seen on the screenshot above.

  • ✅ reverted 7.2.2 to 7.3.1
  • ✅ Supress the focusManager
  • ✅ copying lines from 58 to 67 of CoinDetailScreen
  • ✅ Deletion and moved the attributes to the LazyColumn below
  • ✅ Added the same background color of the crypto cards
  • ✅ Deletion padding 'start'
  • ✅ Added a content description "CoinTrend logo icon" for the logo
  • ✅ Deletion padding 'start'
  • ✅ Dont't specify directly the fontSize. Use the style attribute below
  • ✅ Here try other styles which have a larger text size than the 'MaterialTheme.typography.titleLarge' one
  • ✅ Apply also this .clip(shape = MaterialTheme.shapes.medium)
  • ✅ reduce 2dp
  • ✅ Try to remove those padding (after text=info,style,color 2nd composable )
  • ✅ Try with 16.dp 👇
  • ✅ Try with 16.dp, at least for the horizontal one
  • ✅ Remove this Spacer
  • ✅ Use of white color with Color.White
  • ✅ Added correct URL 'https://github.com/CoinTrend#support' and 'Donate' title
  • ✅ Correction GitHub, not Github
  • ✅ Added Spacer 16dp after CoinTrend()
  • ✅ Added item "Changelog" -> "https://github.com/CoinTrend/CoinTrend/releases"
  • ✅ Added new mail icon

We hope that the modifications correspond to your expectations, what do you think ?

Copy link
Copy Markdown
Member

@davidepanidev davidepanidev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are some changes that are still to be made. Check them out and submit the final pull request. Please, make sure to check the Android Studio options inside the commit dialog before committing: "Cleanup code", "Rearrange code", "Optimize imports", "Analyze code" so that the code follows the Kotlin formatting standards.

title = {},
navigationIcon = {
IconButton(onClick = { navController.pop() }) {
IconButton(onClick = {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All changes to this file must be reverted

Text(
modifier = Modifier.padding(top = 2.dp, start = 115.dp),
text = "CoinTrend",
fontSize = 38.sp,
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here you have not removed the 'fontSize = 38.sp' yet

modifier = Modifier
.padding(8.dp)
.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(8.dp),
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here change "Arrangement.spacedBy(8.dp)" with "Arrangement.spacedBy(16.dp)"

) {
Row(
modifier = Modifier
.padding(horizontal = 16.dp)
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here add padding ", vertical = 8.dp"

maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Spacer(modifier = Modifier.size(4.dp))
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This Spacer has to be removed yet

@ZineeEddine
Copy link
Copy Markdown
Contributor Author

@davidepanidev
We @beastboym @ZineeEddine made the following changes, here is the result of the screen below:

We have deleted in the AboutScreen.kt file, the imports never used, we have carried out a kotlin formatting, and clean code.
The SectionItemInfoTest composable is called now SectionItemInfoAbout for a better understanding of the code.

We hope you like it and meet your expectations.

Copy link
Copy Markdown
Member

@davidepanidev davidepanidev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok there is one last change to be reverted in CoinDetailScreen. Then, I think we are ready.

@davidepanidev davidepanidev merged commit c7d4011 into CoinTrend:develop Feb 28, 2023
@davidepanidev
Copy link
Copy Markdown
Member

@ZineeEddine @beastboym welcome aboard! Thanks for contributing 🙏

@ZineeEddine
Copy link
Copy Markdown
Contributor Author

@davidepanidev Thank you for allowing us to work on the project.

It was my first time using JetPack Compose, and I enjoyed it.

Thank you, and good luck with your future updates.

@beastboym
Copy link
Copy Markdown
Contributor

@davidepanidev Thank you for allowing us to work on the project.

It was my first time using JetPack Compose, and I enjoyed it.

Thank you, and good luck with your future updates.

Same for me, good luck 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

AboutScreen

3 participants