Closed Bug 1129848 Opened 9 years ago Closed 9 years ago

Profile edit UI redesign

Categories

(Participation Infrastructure :: Phonebook, defect)

Product:
Participation Infrastructure
Component:
Phonebook
Version:
2016-1.1
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
VERIFIED FIXED

People

(Reporter: nikos, Assigned: nikos)

References

Details

(Whiteboard: [profile-edit-refactor]) 

This a (meta) bug for tracking redesign efforts of Profile edit UI.
Assignee: nobody → nikos
Commit pushed to master at https://github.com/mozilla/mozillians

https://github.com/mozilla/mozillians/commit/b58aafbb2b5cae64edee65582c5211cbed91378f
[bug 1129848] Use consistent border-color for both inputs and textareas
Blocks: Mozillians.next
Whiteboard: [Triage 2015-04-17]
Blocks: 1191848
No longer blocks: Mozillians.next
Status: NEW → ASSIGNED
Some notes after the initial take on UI here [1]

* Create/edit profile
** Separate template for new profile creation with only required fields
** We need to make sure that its clear for the user to go and complete the rest of the fields 
** Edit profile needs to have all the exposed fields
** For mobile devices we need all required fields easily accessible and not required/secondary fields accessible but hidden initially (probably collapsed

* We need to redirect to the correct settings tab after save (not redirect to user profile)

* Fix UI for link contribution story
** We need to enhance the current UI to be more clear that this is an external link 

* Fix UI for country/region/city
** We need to enhance it with some logic/frontend code to be more consistent on privacy (eg. it doesn't really make sense to have city field public but region mozillians only)

* Privacy tab
** It doesn't really make sense to have a different settings entry for this field
** Initially it was an automation to convert all fields to Mozillian/Public at once
** We need to move this functionality (preferably not with a dropdown) to each settings tab

* Icons on leaflet maps are broken

* Selenium tests are going to be broken after this refactor and we need some help on fixes/maintenance for mozillians-tests [2]

* Email settings templates still exist (we need to remove them)


[1] https://github.com/comzeradd/mozillians/commit/abf36410163afcf5a03ca6121e35dec3acae3642
[2] https://github.com/mozilla/mozillians-tests
Depends on: 1192832
Since edit profile is the only place using leaflet I suggest we upgrade to the latest mapbox.js/API version. This also fixes bug 1025093.
Depends on: 1025093
No longer depends on: 1025093
Commit pushed to master at https://github.com/mozilla/mozillians

https://github.com/mozilla/mozillians/commit/98d945b8f4e91316174abe2da22f4283daede143
[Fix bug 1129848] Profile edit UI redesign

* Update jquery (required by bootstrap)
* CSS changes to adjust to bootstrap's box-sizing
* Home template changes to adjust to bootstrap's box-sizing
* Split individual settings to templates
* Replace privacy fields with button groups
* Integrate email settings to profile settings
* Break settings to tabs with bootstrap grid
* Fix favicon on Settings due to location.hash
* Use jquery-ui for tooltips
* Fix Settings mobile grid spacing
* Fix Groups and Functional Areas mobile view
* Ensure profile fields fit in grid
* Make deleting profile harder
* Move profile photo to another template
* Simplify privacy toggles
* Remove unused `enctype` in `settings` subforms.
* Remove unused form in delete account section.
Status: ASSIGNED → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
Version: other → next
Reopening this one since dependency bug 1192832 is not yet resolved.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Commits pushed to master at https://github.com/mozilla/mozillians

https://github.com/mozilla/mozillians/commit/b0e0c15939960233143b1f8b7e872cac711b001f
[bug 1129848] Fix missing jquery library in admin.

https://github.com/mozilla/mozillians/commit/7c3478fbef3111da45f9cf924869280d112a8039
Merge pull request #1253 from akatsoulas/fix-admin-jquery

[bug 1129848] Fix missing jquery library in admin.
Status: REOPENED → RESOLVED
Closed: 9 years ago → 9 years ago
Resolution: --- → FIXED
Verified on stage that the email edit functionality is now under the 'setting' url.
Status: RESOLVED → VERIFIED
Please ignore the last comment, it was meant for another bug related to the profile edit redesign.
Status: VERIFIED → RESOLVED
Closed: 9 years ago → 9 years ago
Whiteboard: [Triage 2015-04-17] → [profile-edit-refactor]
A few minor comments:

* On the mobile view of the accounts section the privacy controls are located on the right side. Everywhere else are on the left side. Probably, these controls need to swap places with the `delete` button.

* External accounts are not using the same delete icon, similar to the languages formset.

* I would suggest to add the delete account option in the mobile view too, since it seems it's the only thing missing.
Manual testing on stage:

* Created new profile (and in mobile view)
 * Errors are shown as expected
 * You need to click the check box for the legal agreement
 * Message is shown as expected with correct link to settings
 * Privacy choices are saved as expected
* Default privacy selector is Mozillians
* Changed all form entries and permissions and seem to work fine
Some minor UI issues:

* I would expect month/year to be on the same line
 * http://pix.toile-libre.org/upload/original/1452004036.png
PR regarding comment #12 opened here:
https://github.com/mozilla/mozillians/pull/1279

It also makes wrapping consistent among various mobile resolutions.
Commits pushed to master at https://github.com/mozilla/mozillians

https://github.com/mozilla/mozillians/commit/e32b90579b20d30a4da34f9a73ff5e29de3c14f1
[Bug 1129848] Fix missing variable definition.

* Fixes chrome rendering issue

https://github.com/mozilla/mozillians/commit/9eccef8d0785737f02e26b25f56480110151beea
Merge pull request #1282 from johngian/fix-missing-variable-definition

[Bug 1129848] Fix missing variable definition.
Commits pushed to master at https://github.com/mozilla/mozillians

https://github.com/mozilla/mozillians/commit/9ca21903bba74ccb132294705c6736105401b7d3
[Bug 1129848] Minor UI fixes on External Accounts settings

* Move privacy controls on the left
* Add delete icon

https://github.com/mozilla/mozillians/commit/15d5fdf48f290d7da6fc29d95e61c8bb93d10e10
Merge pull request #1280 from comzeradd/1129848

[Bug 1129848] Minor UI fixes on External Accounts settings
Verified on stage:

* Edit profile works on chrome
* Fixed alignment and delete icon in external account edit section
Status: RESOLVED → VERIFIED
Version: next → 2016-1.1
Commits pushed to master at https://github.com/mozilla/mozillians

https://github.com/mozilla/mozillians/commit/8057da1f0e7cba3f155bd321a2fc5357ba0f66a0
[bug 1129848] Fix label id in profile registration.

https://github.com/mozilla/mozillians/commit/c07ba5d6fd487aa4593c28f53b71297f3de3ca6c
Merge pull request #1293 from akatsoulas/create-profile-label

[bug 1129848] Fix label id in profile registration.
You need to log in before you can comment on or make changes to this bug.