tool-suite-X
tool-suite-X copied to clipboard
odk-x
Services sync dialogue UI: update color and layout
The current service sync dialogue uses purple in the progress bar and OK button text.
Colour update
The progress bar should be updated to the blue specified in the design guidelines
Layout update
- Apply padding of 20px top, right, bottom and left.
- Align all internal elements left.
- Apply a fixed, increased height to the dialogue box to prevent the element from changing height and 'flickering' when the sync details change from single line to multiple line.
Outreachy
This issue can be used for an Outreachy application for the project Custom UI components for ODK-X mobile apps
Multiple people can work on this issue simultaneously.
You do not need to be assigned to this issue to work on it for an Outreachy application
@wbrunette I also want to work on this issue. Please assign me this project. I will surely resolve this issue.
@AnshuKumari197, thanks for the inquiry. Unless the issue says it's a "placeholder issue" or "an open issue for multiple people" we generally do not assign multiple people. We are going to give @jmlengineering some time to complete the issue before we even think about re-assigning.
I have lost a link to the resources, is there a how to for setting up the environment?
It's fine by me.
On Sun, Oct 9, 2022 at 12:51 PM Augusta2 @.***> wrote:
Hello @wbrunette https://github.com/wbrunette, can I work on this issue?
— Reply to this email directly, view it on GitHub https://github.com/odk-x/tool-suite-X/issues/331#issuecomment-1272582642, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWQJHZ5EONDLEJXVDJ7DVCDWCLZY7ANCNFSM5OLFLHFA . You are receiving this because you were mentioned.Message ID: @.***>
It's fine by me. …
Thanks @jmlengineering - I will unassign you and open this up for Outreachy participants to work on.
@maprehensive
Services sync dialogue UI update :
- I used auto-layout for the sync dialogue and put its resizing properties to fixed width and height .The contents in the auto-layout resizing properties are also set to fixed width and height. This would to prevent the element from changing height and 'flickering' when the sync details change from single line to multiple line
- I used changed the color of the progress bar to the recommended blue.
- I increased the height of the progress bar to 8px to enable clear visibility
Hi again @maprehensive
I’ve updated the colour of the progress bar as specified in the design guidelines and improved the layout to meet the acceptance criteria.
For the dialogue;
- I applied padding of 20px to all sides within the dialogue.
- Aligned its content to the left
- I increased and fixed the height of the text in the sync details to stop the 'flickering'. This would prevent the height of the dialogue from changing rapidly as it currently does.
- I adjusted the layout and spacing of the App's content using the 8-point grid system as indicated in the design guidelines.
Other updates;
- I used my initial iteration of the Services logo, to see it in action (let me know if this is okay).
- You might also notice I improved the microcopies of the labels to make the sync feedback clearer and easy to understand for almost anyone. This is to make ODK-X accessible to non-tech-savvy users in resource-constrained environments.
- Also, I figured that simply improving the UX texts of the sync details made the texts concise and solved the problem of flickering.
- I also used percentages to inform users of the wait to the completion time of syncing, to improve the UX.
- I updated the OK button text to 'DONE'. It is clearer and more inclusive.
- The dialogue now has a rounder corner of about 8 px to make it easier on the eyes and less cognitive effort. Sharp corners have been known to be a sign of danger or lack of safety.
View my iteration in action here:
https://user-images.githubusercontent.com/80982139/197083393-3fdbc880-5fdb-4797-b74c-062a49114d26.mp4
Thanks. What do you think?
@maprehensive Kindly review my redesign for feedback and approval. Thank you!
https://user-images.githubusercontent.com/115473782/197557409-8f0e2c84-85f1-4206-aaed-331efaeb1efd.mp4
Hi @Redeem-Grimm-Satoshi, @maprehensive, I have updated and redesigned the sync UI to meet the Material Design Guidelines here;
Guidelines
- 24px padding on all sides.
- 28px for the corner radius.
- 16px padding between the title and the content.
- 24px padding between the Content and the Text button.
- The content within the dialogue is aligned to the left.
- The button label is in all CAPS @Redeem-Grimm-Satoshi
- Fixed the height of the content to avoid flickering during syncing.
See it in context;
Feature implemented already
Is there a way for me to see the implemented ones?
@Cveman1 Looks great! Question - why is "Hide sync details" blue and "Show sync details" not blue?
Hi @Redeem-Grimm-Satoshi, kindly check the update I've made. The button labels are also in all CAPs
@Redeem-Grimm-Satoshi @Cveman1 until an issue has code written and a PR, we should keep it in the Design or Develop columns. It makes the process clearer.
@Cveman1 Changes implemented, Looks good.. thanks!
Hi @Redeem-Grimm-Satoshi, please check the title of the modal 'Syncing table and for...' should be aligned with the loading bar and 'hide/show details' button below.
Please check