Placed help button location to after question title #1984

khyativyasargus · 2023-04-24T11:45:04Z

IMPORTANT: All PRs must be linked to an issue (except for extremely trivial and straightforward changes).

Fixes #1965

Description
Move help button location to after question title as subtitle might be empty in some cases.

Alternative(s) considered
Have you considered any alternatives? And if so, why have you chosen the approach in this PR?

Type
Choose one: Feature

Screenshots (if applicable)

Checklist

I have read and acknowledged the Code of conduct.
I have read the Contributing page.
I have signed the Google Individual CLA, or I am covered by my company's Corporate CLA.
I have discussed my proposed solution with code owners in the linked issue(s) and we have agreed upon the general approach.
I have run ./gradlew spotlessApply and ./gradlew spotlessCheck to check my code follows the style guide of this project.
I have run ./gradlew check and ./gradlew connectedCheck to test my changes locally.
I have built and run the demo app(s) to verify my change fixes the issue and/or does not break the demo app(s).

santosh-pingle · 2023-04-25T06:06:06Z

@khyativyasargus
I noticed a slight cut on the right side of the help button. Could you please confirm this?

Can you also try the following precondition and see how the help button aligns?
Please modify questionnaire.json and add 1. precondition text 2. long question text

khyativyasargus · 2023-04-26T05:32:40Z

Thanks @santosh-pingle for drawing my attention. Sure will check and provide requested details. Just one doubt can you elaborate about precondition here?

santosh-pingle · 2023-04-26T06:13:03Z

Thanks @santosh-pingle for drawing my attention. Sure will check and provide requested details. Just one doubt can you elaborate about precondition here?

Actually, i just wanted to see if prefix text is present and question text is 2-3 line text in the json file then how help button get aligns`.

In the component_help.json, you can add "prefix":"3." and "text": "Adding long text to just see how help button get aligns, its just testing.Adding long text to just see how help button get aligns, its just testing.Adding long text to just see how help button get aligns, its just testing",

khyativyasargus · 2023-04-27T14:30:28Z

I noticed a slight cut on the right side of the help button. Could you please confirm this?

@santosh-pingle This is because for help button, Button widget is used which is ideally in square shape with edges and we are putting round shape image into that.
so to solve that there are 2 options in my mind right now,
1)increase button width and height by 1dp and put 1dp padding
2)change widget type from Button to ImageView

what do you suggest? Let me know if you have any other option on your mind , I'll do changes accordingly.

khyativyasargus · 2023-04-27T14:34:24Z

Actually, i just wanted to see if prefix text is present and question text is 2-3 line text in the json file then how help button get aligns`.

In the component_help.json, you can add "prefix":"3." and "text": "Adding long text to just see how help button get aligns, its just testing.Adding long text to just see how help button get aligns, its just testing.Adding long text to just see how help button get aligns, its just testing",

@santosh-pingle I've done some corrections to manage long text, but I'll commit them with help button changes together. Here it is SS for how it looks

santosh-pingle · 2023-05-03T05:46:32Z

Actually, i just wanted to see if prefix text is present and question text is 2-3 line text in the json file then how help button get aligns. In the component_help.json, you can add "prefix":"3."and"text": "Adding long text to just see how help button get aligns, its just testing.Adding long text to just see how help button get aligns, its just testing.Adding long text to just see how help button get aligns, its just testing",`

@santosh-pingle I've done some corrections to manage long text, but I'll commit them with help button changes together. Here it is SS for how it looks

@shelaghm Can you please review attached screenshots by @khyativyasargus

@khyativyasargus, you mean, changes will be updated to this pr, correct?

khyativyasargus · 2023-05-03T14:37:44Z

@khyativyasargus, you mean, changes will be updated to this pr, correct?

Yes @santosh-pingle , once you & @shelaghm approves screenshots I'll commit changes in this PR only.

jingtang10 · 2023-05-03T16:20:54Z

https://stackoverflow.com/questions/63130800/place-a-view-at-the-end-of-multiline-textview does this work?

jingtang10 · 2023-05-03T16:22:14Z

@khyativyasargus thanks for this change, would it be possible to also refactor the header so that the prefix is also inline the same way the icon is inline in the link i posted above?

khyativyasargus · 2023-05-04T07:24:46Z

@khyativyasargus thanks for this change, would it be possible to also refactor the header so that the prefix is also inline the same way the icon is inline in the link i posted above?

Yes @jingtang10 this option sounds more convenient to me as per UI perspective. so you want prefix & help icon both inline with title right? I'll give it check and will update you with changes.

khyativyasargus · 2023-05-10T12:07:34Z

@khyativyasargus thanks for this change, would it be possible to also refactor the header so that the prefix is also inline the same way the icon is inline in the link i posted above?

Hi @jingtang10 @santosh-pingle ! As per our conversation, I've done with refactoring the question header view in such a way that the Prefix, Title, and icon stay inline with the help of Spannable.
But I think Text & Icon within spannable should also be customized with custom style attributes and I am not sure how we can achieve that. Can you guide me about the possibility?

jingtang10 · 2023-05-11T17:43:20Z

hey @khyativyasargus thanks for the update. can you add new screenshots, especially for long titles?

khyativyasargus · 2023-05-12T11:36:26Z

hey @khyativyasargus thanks for the update. can you add new screenshots, especially for long titles?

Sure @jingtang10 , Here is a screenshot of inline headerview with longer title

shelaghm · 2023-05-17T15:06:26Z

Thanks @khyativyasargus Looks better, one small adjustment would be to make the help button aligned to the text line height? See screenshot as an example

aditya-07

If we are not depending on any kotlin code to place the Help Button, then we should remove it from this PR.

aditya-07 · 2023-07-19T08:52:57Z

datacapture/src/main/java/com/google/android/fhir/datacapture/extensions/MoreHeaderViews.kt

+fun setSpan(clickableSpan: ClickableSpan) {
+
+}


Remove it if not required.

aditya-07 · 2023-07-19T08:53:10Z

datacapture/src/main/java/com/google/android/fhir/datacapture/extensions/MoreHeaderViews.kt

+//  helpButton.visibility =
+//    if (questionnaireItem.hasHelpButton) {
+//      VISIBLE
+//    } else {
+//      GONE
+//    }


aditya-07 · 2023-07-19T08:53:23Z

datacapture/src/main/java/com/google/android/fhir/datacapture/views/HeaderView.kt

+//    question.setIconifiedText(questionnaireViewItem.questionnaireItem.localizedPrefixSpanned ,
+//            questionnaireViewItem.questionnaireItem.localizedTextSpanned,
+//      R.drawable.ic_help_48px,
+//      helpCardView = findViewById(R.id.helpCardView),
+//      helpTextView = findViewById(R.id.helpText),
+//      questionnaireItem = questionnaireViewItem.questionnaireItem)


aditya-07 · 2023-07-19T09:02:32Z

datacapture/src/main/java/com/google/android/fhir/datacapture/extensions/MoreHeaderViews.kt

+internal fun TextView.setIconifiedText(localizedPrefix: Spanned? = null,
+                                       localizedText: Spanned? = null, @DrawableRes iconResId: Int,
+                              helpCardView: MaterialCardView,
+                              helpTextView: TextView,
+                              questionnaireItem: Questionnaire.QuestionnaireItemComponent) {
+  text = if(!localizedPrefix.isNullOrEmpty() && !localizedText.isNullOrEmpty())
+    TextUtils.concat(localizedPrefix, localizedText)
+    else localizedText
+  visibility =
+    if (text.isNullOrEmpty() && !questionnaireItem.hasHelpButton) {
+      GONE
+    } else {
+      VISIBLE
+    }
+  val clickableSpan = object : ClickableSpan() {
+    override fun onClick(widget: View) {
+      helpCardView.visibility =
+        when (helpCardView.visibility) {
+          VISIBLE -> GONE
+          else -> VISIBLE
+        }
+    }
+  }
+  SpannableStringBuilder("$text#").apply {
+    val attrs = context.obtainStyledAttributes(intArrayOf(R.attr.questionnaireHelpButtonStyle))
+    val helpButtonStyleResId = attrs.getResourceId(0, 0)
+
+// Retrieve the color defined in questionnaireHelpButtonStyle attribute
+    val helpButtonStyleAttrs = context.obtainStyledAttributes(helpButtonStyleResId, intArrayOf(R.attr.tint))
+    val helpButtonColor = helpButtonStyleAttrs.getColor(0, Color.BLACK)
+
+// Create a new ImageSpan and apply the color to it
+    ContextCompat.getDrawable(context, R.drawable.ic_help_48px).apply {
+      this!!.setTint(helpButtonColor)
+    }
+    val imageSpan = ImageSpan(context,R.drawable.ic_help_48px, DynamicDrawableSpan.ALIGN_CENTER)
+
+    setSpan(
+      imageSpan,
+      text.length,
+      text.length + 1,
+      Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+    )
+    setSpan(clickableSpan,
+      text.length,
+      text.length + 1,
+      Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+    )
+  }.let {
+    text = it
+    movementMethod = LinkMovementMethod.getInstance()
+  }
+
+  helpTextView.updateTextAndVisibility(questionnaireItem.localizedHelpSpanned)
+}


Can we remove this code if it is not being used anywhere?

aditya-07 · 2023-07-19T09:04:39Z

@khyativyasargus Please update the PR to latest changes.

khyativyasargus · 2023-07-19T09:10:20Z

If we are not depending on any kotlin code to place the Help Button, then we should remove it from this PR.

Hi @aditya-07 these changes are required but as we haven't been able to find a way to configure Image using style attribute with Spannable so it's still pending. We can refactor the code of this PR once we find the final solution.

jingtang10 · 2024-06-10T17:20:25Z

Given the status of this PR I'm going to close this for now until we have a proper solution that works well. @khyativyasargus if this becomes blocking please feel free to reopen.

Placed help button location to after question title

dcfacef

khyativyasargus requested review from aditya-07, deepankarb, jingtang10, jjtswan, joiskash, kevinmost, ktarasenko, omarismail94, santosh-pingle, stevenckngaa, vvikramraj, wantingzhang77 and yigit as code owners April 24, 2023 11:45

santosh-pingle assigned khyativyasargus Apr 26, 2023

help icon positioning

f56cd60

khyativyasargus requested a review from a team as a code owner July 7, 2023 15:53

aditya-07 suggested changes Jul 19, 2023

View reviewed changes

khyativyasargus mentioned this pull request Jul 24, 2023

Help icon cropped (a bit on the right side) #2093

Closed

jingtang10 closed this Jun 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Placed help button location to after question title #1984

Placed help button location to after question title #1984

khyativyasargus commented Apr 24, 2023 •

edited

Loading

santosh-pingle commented Apr 25, 2023

khyativyasargus commented Apr 26, 2023

santosh-pingle commented Apr 26, 2023

khyativyasargus commented Apr 27, 2023

khyativyasargus commented Apr 27, 2023 •

edited

Loading

santosh-pingle commented May 3, 2023 •

edited

Loading

khyativyasargus commented May 3, 2023

jingtang10 commented May 3, 2023

jingtang10 commented May 3, 2023

khyativyasargus commented May 4, 2023 •

edited

Loading

khyativyasargus commented May 10, 2023 •

edited

Loading

jingtang10 commented May 11, 2023

khyativyasargus commented May 12, 2023

shelaghm commented May 17, 2023

aditya-07 left a comment

aditya-07 Jul 19, 2023

aditya-07 Jul 19, 2023

aditya-07 Jul 19, 2023

aditya-07 Jul 19, 2023

aditya-07 commented Jul 19, 2023

khyativyasargus commented Jul 19, 2023

jingtang10 commented Jun 10, 2024

Placed help button location to after question title #1984

Placed help button location to after question title #1984

Conversation

khyativyasargus commented Apr 24, 2023 • edited Loading

santosh-pingle commented Apr 25, 2023

khyativyasargus commented Apr 26, 2023

santosh-pingle commented Apr 26, 2023

khyativyasargus commented Apr 27, 2023

khyativyasargus commented Apr 27, 2023 • edited Loading

santosh-pingle commented May 3, 2023 • edited Loading

khyativyasargus commented May 3, 2023

jingtang10 commented May 3, 2023

jingtang10 commented May 3, 2023

khyativyasargus commented May 4, 2023 • edited Loading

khyativyasargus commented May 10, 2023 • edited Loading

jingtang10 commented May 11, 2023

khyativyasargus commented May 12, 2023

shelaghm commented May 17, 2023

aditya-07 left a comment

Choose a reason for hiding this comment

aditya-07 Jul 19, 2023

Choose a reason for hiding this comment

aditya-07 Jul 19, 2023

Choose a reason for hiding this comment

aditya-07 Jul 19, 2023

Choose a reason for hiding this comment

aditya-07 Jul 19, 2023

Choose a reason for hiding this comment

aditya-07 commented Jul 19, 2023

khyativyasargus commented Jul 19, 2023

jingtang10 commented Jun 10, 2024

khyativyasargus commented Apr 24, 2023 •

edited

Loading

khyativyasargus commented Apr 27, 2023 •

edited

Loading

santosh-pingle commented May 3, 2023 •

edited

Loading

khyativyasargus commented May 4, 2023 •

edited

Loading

khyativyasargus commented May 10, 2023 •

edited

Loading