Add menu option description functionality and description texts

[wkyoshida]

Terms

• I have searched open and closed design issues
• I agree to follow Scribe-iOS' Code of Conduct

Description

This issue is for menu option info tooltips - tooltip boxes that pop up with quick information on a menu option (purpose of the option, how it could change user experience, etc.) These would:

• Be an info icon ℹ️ that can be clicked to display the tooltip text for the menu option
• Perhaps not necessarily needed for all the menu options, if some options are already straightforward (can determine which in design phase)

Contribution

• Info tooltips planned as part of GSoC work by @SaurabhJamadagni
• Designs for the info tooltips will be made by @andrewtavis

[wkyoshida]

This will likely build on top of the work done on Scribe/Components/InfoChildTableViewCell/InfoChildTableViewCell.swift

[andrewtavis]

Designs are all done and there's one linked up in the prototypes at this point 😊 Here's an image for documentation:

[andrewtavis]

Hey @damien-rivet 👋 @SaurabhJamadagni let me know that he's a bit backed up at the moment and can't get to this. Would you be able to support?

[damien-rivet]

Hey @damien-rivet 👋 @SaurabhJamadagni let me know that he's a bit backed up at the moment and can't get to this. Would you be able to support?

Of course, I will gladly help.

@SaurabhJamadagni let me know what I can do to help you contribute to the project 😉

[andrewtavis]

Thanks @damien-rivet! Sorry I misspoke a bit :) Would you be able to pick this issue up for @SaurabhJamadagni? He mentioned that he'll be able to jump back into issues at the end of the month, but we need this for the 3.0 release that ideally would be before then 😊

[andrewtavis]

We have the menu option (i) icons, but there's no tooltip. This would ideally be done so we don't need to comment them out before release :)

[damien-rivet]

@andrewtavis can you add me as an assignee, I'll start working on it asap.

[andrewtavis]

Thank you, @damien-rivet! Really appreciate you helping out here :)

[SaurabhJamadagni]

Hey @damien-rivet! Thank you so much for picking this issue up! I have been meaning to attend to it for a long time now but haven't been able to. Really appreciate your help! Thanks once again 😊

[damien-rivet]

@andrewtavis @SaurabhJamadagni I've been looking at the necessary code to make this happen and I must say I'm not satisfied by the result at all.

Expected implementation

Presenting a popover from a view controller from a cell contained within another cell on the information UIImageView tap requires to set up a chain of delegates to be able to present it correctly (presentation needs to be done from a ViewController).

We can either display a popover but it would require to be able to capture a reference to the UIImageView that triggered the popover which is required on iPad to display a popover, otherwise it will crash.

We can also display an overlay above the whole screen to display the description but it would be overkill for something so "trivial" and will disrupt user's flow.

Both of those solutions are sub-optimal in terms of both code quality and user experience.

Suggested implementations

What I suggest is to stick with Apple's own HIG and own Apps (like the Settings App) that encourages us to stick with a more direct approach.

The quickest implementation would be to replace or improve the custom cells to add a short description label underneath the first line (if there is something to show), it would work but would require to refactor the cells a bit.

The longest implementation and the closest to Apple way of doing things would be to do things in a similar fashion as the Settings App by displaying under each section the short description if there is any.

It would look like this (not captured from my phone):

[andrewtavis]

Thank you for the research and the comments here, @damien-rivet! Definitely was not expecting this level of differences between implementation for iOS and iPadOS. Your suggestion makes sense to me :) We have the small horizontal lines between the options, so we could get rid of the icons and then have the descriptive text be between the option title/chevron/toggle and the line in a bit smaller text and maybe a bit more grey? Shall I redo the designs with this in mind and send them for a check?

Again thanks for this! Great to have these insights before we dig a hole :)

[andrewtavis]

Doing a quick as of yet unfinished designs, let's get rid of a lot of the menu icons all together. I think that having the icons on the about tab looks good, but we don't need the ones that are on installation and settings. Generally for a menu option I was thinking (see on Figma):

I still need to design the other variants, and the vertical spacing could likely be bigger. I've done a partial redesign of the app screen in light mode so we can take a look at it for minor feedback before getting started and finishing the designs. The menu options don't have the descriptions yet, but just to show what it's looking like without the menu option icons on installation and settings :)

Thanks again for the suggestions here, @damien-rivet! Should be able to finish the designs tomorrow if the start's looking like where we should go 😊

[andrewtavis]

We could also replace the icon (i) with a settings cog if we want to keep the icons next to all the options, but I'd say that this is a case where less is more :)

[damien-rivet]

We could also replace the icon (i) with a settings cog if we want to keep the icons next to all the options, but I'd say that this is a case where less is more :)

I'm not even sure we need an icon for that, the users knows that they are interacting with settings, adding a cog icon does not convey any additional information 🤔

[andrewtavis]

Yes I agree, @damien-rivet :) Just wanted to open it up. Appreciate the feedback! I think we're good with the decision to remove the icons from the app screens except for on the About page where say the GitHub icon would convey some information to the user 😊 I'll try to finalize the designs on Figma today and also update the ones for Desktop as well!

[andrewtavis]

Ok I've just finished the update of the designs on Figma. Note that I got rid of the clickable prototype as I needed to replace most of the page elements. I can remake it if there's a need for it 😊

What's changed:

• We have new menu option components that are applied throughout (see below)

• If there's a description under the option then there's no horizontal line, but if not there is a horizontal line so that we maintain a degree of consistency and spacing
  • I feel like the horizontal line helps convey that the full span is a button (in the cases that it is - not for radio/button options via Prevent menu options with toggles or radio selectors from being clicked #350)
  • Note that the radio-looking option without a label is actually a spinner for checking if there's data from Scribe-Server
• I switched the coloration on dark mode so that we don't have white over an orange background anymore, but rather orange over the same color with a high transparency
  • Buttons for dark mode have a border, but for light mode they don't
• I got rid of the borders for menu option groups
• Added some descriptions to menu options that were missing them

Big thing is that as things progress we need to make sure that we don't mix menu options that have a description under them with those that have a line separator within the same group as I feel this would just look off... Then again the designs reflect plans for the app for the foreseeable future, so we should be good 🙌

Thanks for the feedback on all this and the great suggestion, @damien-rivet! Let me know what you think of the changes :)

[andrewtavis]

Updated the title of the issue given the new scope :) :)

[damien-rivet]

Hey @andrewtavis,

Here's the current state of the code on my side:

Refactoring

In order to make the new description field show / hide and the cell to resize accordingly, I had to remove the extra layer of tableview contained in the ParentTableViewCell (the PR is gonna be nice to review 😅).

I also used this occasion to generate a maximum of UI stuff using the native controls like the section header, the accessory type for the cells (the chevron in that case).

There are still a few stuff I need to complete before opening a PR though:

• Refactor the header section generation function so it can be used by any tableview (not just settings)
• Check if the switch control can be inserted into the accessory view instead of adding a view manually with IB
• Make sure it works everywhere (about tab, etc.)
• General cleanup

Screenshots

	iPhone	iPad
Settings tab
Language settings

[andrewtavis]

In order to make the new description field show / hide and the cell to resize accordingly, I had to remove the extra layer of tableview contained in the ParentTableViewCell (the PR is gonna be nice to review 😅).

Looking forward! 😊 Thanks for taking the initiative on this refactor, @damien-rivet :) So far it really is looking great. So happy that you've been willing to support here. I think that it makes sense that I hold off a bit on #351 until the PR is made, but I'll merge that ASAP and then work in the changes I've already made for that in relation to the new architecture.

Let me know if you have any questions or comments on the designs!

[damien-rivet]

Hey @andrewtavis 👋

Would you be available to review my PR? Thanks in advance.

[andrewtavis]

I have it in mind and you have my apologies, @damien-rivet. Was in the US for the holidays and am now feeling a bit sick, but I'll try to get to it this evening :)

[andrewtavis]

#384 was merged and I've made a few minor issues for the final changes needed for the menu, so we can now close this 🥳 Thanks for all the work and the immense help in guiding the decisions for this, @damien-rivet! Really was so key to the project to get your help here!