search

opensrp / fhircore

FHIR Core / OpenSRP 2 is a Kotlin application for delivering offline-capable, mobile-first healthcare project implementations from local community to national and international scale using FHIR and WHO Smart Guidelines on Android.
https://smartregister.org
Apache License 2.0
50 stars 39 forks source link

[UX] Adjustments and Updates to widgets on Questionnaire - SDC #1974

Open f-odhiambo opened 1 year ago

f-odhiambo commented 1 year ago

Describe the enhancement

Screenshot 1

image
  1. Header properties
  1. Bottom button and container

  1. Questions

    • the questions font weights and size is different from designs. We use big font in these forms for
    • For required questions, we shouldn’t use “*”, instead if a question is optional that’s when we will indicate the “(optional)” badge/text

  2. Spacing

-The sapcing between the question and the body has been updated from 24px to 16px.

  1. Select Options/Answers

Adjusted Designs

image image

Screenshot 2

image
  1. Header navigation - Use close button and not back button
  2. Spacing - space between input label and the text field is more than in design
  3. Input field label
  1. Input field. - input field borders have different color from design
  2. Save button

Adjusted Design

image

Screenshot 3

image

  1. Header Navigation

    • Use close button and not back button
    • top header navigation should have drop shadow on scroll

  2. Save button

    • input field borders have different color from design
    • and the corner raduis
    • the container should have dropdown shadow in the upward direction when there’s content below it, and just a border line at the top if no content below it i.e at end of the list
FikriMilano commented 1 year ago

The SDK allows us to override the QuestionnaireItem widget's style or dimension.

The catch is that dimens may be used not only by the component we want to change but also by other components.

e.g. say we want to change the margin top for widgets, in some parts of the SDK, padding_default is used as a top margin for widgets, but it is also used for check box view padding; if we override that dimens property, it will affect both, which we don't want to happen.

NOTE: I don't know why they use padding_default as margin top, it feels wrong.

For overriding styles, here's one example of the requirement we can implement on FHIR Core.

the questions font weights and size is different from designs. We use big font in these forms for

Here's one example of the requirement we can't implement on FHIR Core, need to do this in SDK.

For required questions, we shouldn’t use “*”, instead if a question is optional that’s when we will indicate the “(optional)” badge/text
FikriMilano commented 1 year ago

For the * or optional there is currently an open discussion here w @shelaghm https://github.com/google/android-fhir/issues/544#issuecomment-1401237554

dubdabasoduba commented 1 year ago

The SDK allows us to override the QuestionnaireItem widget's style or dimension.

The catch is that dimens may be used not only by the component we want to change but also by other components.

e.g. say we want to change the margin top for widgets, in some parts of the SDK, padding_default is used as a top margin for widgets, but it is also used for check box view padding; if we override that dimens property, it will affect both, which we don't want to happen.

NOTE: I don't know why they use padding_default as margin top, it feels wrong.

For overriding styles, here's one example of the requirement we can implement on FHIR Core.

the questions font weights and size is different from designs. We use big font in these forms for

Here's one example of the requirement we can't implement on FHIR Core, need to do this in SDK.

For required questions, we shouldn’t use “*”, instead if a question is optional that’s when we will indicate the “(optional)” badge/text

@FikriMilano are we overriding this by updating the styles.xml on FHIR Core? Just making sure we will not be adding anything that might increase the complexity of keeping up with the SDK.

FikriMilano commented 1 year ago

@dubdabasoduba yeah, styles.xml

FikriMilano commented 1 year ago

@f-odhiambo Analyzed these, whether the requirements needs to be implemented on FHIRCore or SDK or even both.

SS 1

  1. Header properties

    • [x] Should have a close button instead of back button when the form is scrolled [FHIRCORE]
    • [x] The header should have a dropdown shadow [FHIRCORE]

  2. Bottom button and container

    • [ ] Button container should have drop shadow if there’s more content down the list [SDK] [FHIRCORE] https://github.com/google/android-fhir/pull/1859
    • [x] The buttons have round edges in design and color of buttons is different - see action colors here [FHIRCORE]

  3. Questions

    • [x] The questions font weights and size is different from designs. We use big font in these forms for [FHIRCORE]
    • [ ] For required questions, we shouldn’t use “*”, instead if a question is optional that’s when we will indicate the “(optional)” badge/text [SDK] https://github.com/google/android-fhir/pull/1762

  4. Spacing

  5. Select Options/Answers

    • The design properties of these components are different from the original designs.
    • [x] Text is smaller [FHIRCORE]
    • [x] Padding not the same as in design [FHIRCORE]
    • [x] Icons used are different [FHIRCORE]
    • [x] Colors used are different [FHIRCORE]
    • [ ] Spacing between items in the components different from design [SDK] [FHIRCORE] https://github.com/google/android-fhir/pull/1852

SS 2

  1. Header navigation

    • [x] Use close button and not back button [FHIRCORE]

  2. Spacing

  3. Input field label

  4. Input field

    • [x] Input field borders have different color from design [FHIRCORE]

  5. Save button

    • [x] Input field borders have different color from design [FHIRCORE]
    • [x] And the corner radius [FHIRCORE]

SS 3

  1. Header Navigation

    • [x] Use close button and not back button [FHIRCORE]
    • [x] Top header navigation should have drop shadow on scroll [FHIRCORE]

  2. Save button

    • [x] And the corner radius [FHIRCORE]
    • [ ] The container should have dropdown shadow in the upward direction when there’s content below it, and just a border line at the top if no content below it i.e at end of the list [SDK] [FHIRCORE] https://github.com/google/android-fhir/pull/1859
shelaghm commented 1 year ago

@FikriMilano Thanks for looping me in. I see there's a couple of SDK padding issues, I'm hopeful that we can make these changes in the SDK. Can you file an issue on the SDK github with what the ideal padding would be and tag me in it? Thanks!

FikriMilano commented 1 year ago

@shelaghm thanks for commenting!

I will surely file an issue on the SDK and tag you.

FikriMilano commented 1 year ago

@f-odhiambo @dubdabasoduba is this still low priority? or do we need to get this merged soon?

FikriMilano commented 1 year ago

Blocked by https://github.com/google/android-fhir/pull/1852

f-odhiambo commented 1 year ago

@FikriMilano This is now unblocked

FikriMilano commented 1 year ago

Good reminder @f-odhiambo

f-odhiambo commented 7 months ago

@HenryRae to review and share an update on the widget styling for this ticket

HenryRae commented 6 months ago

@FikriMilano @Rkareko

  1. Paginated forms can have text buttons "back", "next" and "save/done"(any copy defined) at the last paginated form. See example here

  2. Non-paginated forms should have use a primary rectangular block button with background color. See example here which fills the whole container

Summary: Use text buttons on paginated forms, and rectangular buttons with background color on non-paginated forms