I want to invite the community to join a few of us (including our friends from Pivotal Act ) who will be having a follow on conversation about improvements to ODK Collect's UI.
The call will be held at https://uberconference.com/opendatakit and we will put the notes, audio, and transcript of this call in this document .
The call will be Friday, Jan 25th from 16–17 UTC (see in your time zone ). Will you be there?
I will be there!
I can't make it this time, but I'm interested in calls like this
As much as I'd like to and am keenly intertested, Saturday @ 5am is just too hard (I can only manage one 5am-er a week
The agenda for the call is:
Pivotal presents redesign using Material
Talk about next steps
See you all tomorrow!
Some recent updates requested by The Carter Center that might be relevant to this conversation:
getodk:master ← cooperka:form-list-polish
opened 12:54AM - 25 Jan 19 UTC
Closes https://github.com/opendatakit/roadmap/issues/29
Comprehensive before/… after screenshots can be seen on Google Drive [here](https://drive.google.com/open?id=1LcxscAB5OlXJKbpdWmJFOwKWHIHw0FIB). One example:
<div>
<img width="180" alt="Delete Saved (before)" src="https://user-images.githubusercontent.com/2047062/52128653-85058680-2603-11e9-93b9-c83465dc7ecc.png">
<img width="180" alt="Delete Saved (after)" src="https://user-images.githubusercontent.com/2047062/52128652-85058680-2603-11e9-8b5b-3d9b953bd68f.png">
</div>
*Delete Saved before/after*
Note: The screenshots on Drive have a blue icon for "finalized" forms but the latest icon is deep purple as shown in the screenshot above.
Several layout files were also renamed and/or consolidated; see the end for a table describing the changes.
#### Resources
- [Material Design 'list' spec](https://material.io/design/components/lists.html#specs)
- [Material Design 'list item divider' spec](https://material.io/design/components/dividers.html#specs)
- [Material Design 'icons' spec](https://material.io/design/iconography/system-icons.html#design-principles)
- [Material Design color palette](https://material-ui.com/style/color/#color-palette)
#### What has been done to verify that this works as intended?
Manual testing on every screen of the app:
- Fill Blank Form
- Edit Saved Form
- Send Finalized Form
- View Sent Form
- Get Blank Form
- Delete Saved Form: Saved Forms
- Delete Saved Form: Blank Forms
With every possible form state:
- Blank, not yet an instance
- Blank with updates available
- Saved
- Finalized
- SMS submission in progress
- Submitted
- Submission Failed
In every possible mode:
- SMS submissions
- Google Drive forms
- Toggle "Show Sent and Unsent Forms" on Send Finalized
- Light/dark themes
- Portrait/landscape
And down to API level 16.
If I missed anything, please let me know and I'll add to the list.
#### Why is this the best possible solution? Were any other approaches considered?
This updates every form list in the app to conform with Material Design specs without any change in behavior. It also consolidates several redundant layouts and classes.
The new icons use Material Design's blue/green/red/deepPurple/amber **500** for icon colors, which is consistent with the existing blue icons and status bar color already used throughout the app.
See the discussion on the [roadmap](https://github.com/opendatakit/roadmap/issues/29) for more context on why these particular icons were decided on.
#### How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?
The behavior of the app shouldn't be affected by this PR, aside from disabled form items showing a Toast showing the reason they're disabled (e.g. if they've been encrypted or deleted from the device). Previously there was no Toast for these items.
#### Do we need any specific form for testing your changes? If so, please attach one.
No specific form, just various form states.
#### Does this change require updates to documentation? If so, please file an issue [here]( https://github.com/opendatakit/docs/issues/new) and include the link below.
Probably updating screenshots? TODO
#### Table of changed layouts
Several layout files were renamed and/or consolidated:
| Screen | Main class | Screen layout (OLD) | Screen layout (NEW) | List item layout (OLD) | List item layout (NEW) |
|---|---|---|---|---|---|
| Fill Blank | FormChooserList | chooser_list_layout | form_chooser_list | two_item | form_chooser_list_item |
| View Saved | InstanceChooserList | chooser_list_layout | form_chooser_list | two_item | form_chooser_list_item |
| Send Finalized | InstanceUploaderList | instance_uploader_list | instance_uploader_list | instance_upload_list_item | form_chooser_list_item_multiple_choice |
| View Sent | InstanceChooserList | chooser_list_layout | form_chooser_list | two_item | form_chooser_list_item |
| Get Blank (default) | FormDownloadList | remote_file_manage_list | form_download_list | two_item_multiple_choice | form_chooser_list_item_multiple_choice |
| Get Blank (with Drive) | GoogleDriveActivity | drive_layout | google_drive_list | two_item_image | form_chooser_list_item_multiple_choice |
| Delete Saved (abstract) | FileManagerTabs | file_manager_layout | file_manager_tabs | - | - |
| Delete Saved: Saved | FileManagerFragment (DataManagerList) | tab_layout | file_manager_list | two_item_multiple_choice | form_chooser_list_item_multiple_choice |
| Delete Saved: Blank | FileManagerFragment (FormManagerList) | tab_layout | file_manager_list | two_item_multiple_choice | form_chooser_list_item_multiple_choice |
#### Before submitting this PR, please make sure you have:
- [x] run `./gradlew checkAll` and confirmed all checks still pass OR confirm CircleCI build passes and run `./gradlew connectedDebugAndroidTest` locally.
- [x] verified that any code or assets from external sources are properly credited in comments and/or in the [about file](https://github.com/opendatakit/collect/blob/master/collect_app/src/main/assets/open_source_licenses.html).
- [x] verified that any new UI elements use theme colors. [UI Components Style guidelines](https://github.com/opendatakit/collect/blob/master/CONTRIBUTING.md#ui-components-style-guidelines)
The new icons are entirely composed of [Material Design (MD) icons](https://material.io/tools/icons/?style=baseline), though they have been combined in some cases (e.g. MD checkmark inside MD cloud inside a circle). MD's [Apache 2.0 license](https://tldrlegal.com/license/apache-license-2.0-(apache-2.0)) permits modification. Whether this particular modification is "significant" enough to warrant additional specific mention on the [attributions page](https://github.com/opendatakit/collect/blob/master/collect_app/src/main/assets/open_source_licenses.html) is up to the reviewers.
During this conversation an example "reskinning" of the app was presented to demonstrate what might be a nice balance between remaining conservative but picking up Material more seriously. I realized when talking to @LN the other day that there wasn't a link to this so I've exported the Sketch project to a PDF and linked it in the agenda.
I'll link here as well so you don't have to search through the agenda.
). Will review doc. Thnx.