Plan out and implement customizable application table views

[andrewtavis]

Terms

• [X] I have searched open and closed feature requests
• [X] I agree to follow Scribe-Android's Code of Conduct

Description

One thing that's needed to improve the menu is that we create table views that allow for customization based on passed arguments. This issue will be a larger one, but will allow for many small issues to be made where individual menu components are added in :) Looking at the About tab from the Figma designs as shown below:

We'd need customizable cells that can have a custom icon to the left, an icon to the left that's either a right chevron, an external link icon or a counterclockwise circle, and we should also consider that we need text to the left of the right icons in some instances for menu options.

Contribution

Happy to discuss what's needed and help implement/review! 😊

[angrezichatterbox]

I implement those customizable cells where the icon is on the left and an icon on right with text in middle . Right ? .

[andrewtavis]

Yes exactly, @angrezichatterbox :) It would be great if we can easily create table view cells like the ones we already have that the needed icons. It makes sense to have a common cell with options, correct? Thank you!

[angrezichatterbox]

Ya, it makes sense. So I should create a view that can be reused with the input being the left and right icons and the title.

[andrewtavis]

That'll work for the start. We'll likely need to add things to it eventually, but that's fine for now 😊

Thanks, @angrezichatterbox!

[angrezichatterbox]

I have tried the reusable component in my personal app for testing. This is what I have so far. I have created a model that takes in 3 variables. Two images and a third button image. The button could be individually added to navigate to whatever it is prescribed to do. Is this what had to be done or I have to do something else as well.

[andrewtavis]

Ideally the entire field should be a button, @angrezichatterbox, and then the third option is an icon like the first :) Would that work?

[angrezichatterbox]

Ideally the entire field should be a button, @angrezichatterbox, and then the third option is an icon like the first :) Would that work?

Ya that would work and it is much easier to implement as well.

How exactly should I proceed with this in my hand. Should I implement these views in the about page? Or Should I push these implementations once its perfect for a pr.

[andrewtavis]

You can push whenever you'd like feedback, @angrezichatterbox :) Happy to take an intermediary look at it as well! As you see fit 😊

[angrezichatterbox]

This is what I have implemented so far. The data class could take in 2 icons and a text. We could also pass it a URL, activity or function. Depending on what is passed it executes it accordingly like opening a URL navigating to a new page or executing a function. Do you think I should consider anything else while implementing this? Any suggestions to make it better?

[andrewtavis]

Wow this is amazing, @angrezichatterbox 🤩 Only thing would be let's make the external link icons similar to the one in the designs. I find the one in the screenshot to be a bit busy.

Thanks so much!

[angrezichatterbox]

This is how the app looks currently in light and dark mode respectively. I have added functionality to the button according to how Scribe-iOS works. The buttons that are supposed to go to new pages will currently give a Toast message that no action is defined. Should I change any of the icons I have used in this. Any suggestion to make it better?

[andrewtavis]

No, this is perfect, @angrezichatterbox 😊 Thanks so much for all the work here! We can merge this in and then maybe you can make the issues for the needed actions? :)

[angrezichatterbox]

I have made a pull request.

[andrewtavis]

Closed via #50 🚀 Thank you, @angrezichatterbox! Really amazing to see one of the pages look so polished already! 🤩 I'll reach out about things on Matrix :)