[MGNLUI-751] Contact dialog is needs overhaul on V7 Created: 01/Mar/13  Updated: 03/Feb/16  Resolved: 25/Jun/13

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: 5.0

Type: Bug Priority: Neutral
Reporter: Samuli Penttilä Assignee: Samuli Penttilä
Resolution: Fixed Votes: 0
Labels: contacts, dialog
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Choose contact dialog.png     PNG File Contact chooser field.png     PNG File Screen Shot 2013-03-01 at 10.57.06 AM.png     PNG File Screen Shot 2013-03-01 at 11.19.57 AM.png    
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:

 Description   

Contact dialog layout is different after update to Vaadin 7. It needs to be ported. See screenshots for comparison.



 Comments   
Comment by Mikaël Geljić [ 01/Mar/13 ]

I actually did not find style guides for such contact linking dialog, we should ask for proper input from Andreas.

Comment by Andreas Weder [ 04/Mar/13 ]

There's no design for the entire dialog. However, what seems to be affected mainly is the layout of the image upload field, the design for this can be found here:

Unfortunately, interaction-wise, that style guide is a bit out of date:

  • there should be an button to upload a new image (effectively creating a new image asset in the asset pool)
  • a second button allows you to select an existing image asset
  • an icon featuring the trash can will allow you to remove the image asset from the contact again
  • the magnifying glass for showing a lightbox-style preview is now a button inside the thumbnail image

I suggest to first fix the design of the existing functionality allowing you to select an image from Assets only*. We can then deal with the upload function later on and in a different issue.

You can find a more current design of a similar field, the media upload field in the Assets app, here: http://wiki.magnolia-cms.com/display/UX/Media+upload+field . This is where I plan to take the image upload field as well.

Comment by Mikaël Geljić [ 04/Mar/13 ]

Actually, this is nothing about upload here, it's the contact selection dialog, as seen when editing the contact component in Pages/News & Events. What difference does that make? There is obviously no image-upload field here at all, just triggering the contact chooser dialog.

Comment by Andreas Weder [ 04/Mar/13 ]

Oops... yes. This is about the edit dialog for the Contact component.

The principal design of the upload field applies here as well. Its made to represent a chosen content item outside its default app:

  • a box represents the chosen contact
  • it contains a thumbnail image on the left. On that image, there eventually will be
    • a magnifying glass for opening the lightbox-style, larger preview of the image in the bottom left corner
    • a secondary menu containing two actions
      • "open": for opening the preview of the contact in the Contacts app
      • "edit": for in-place editing of the contact
  • on the right, there's the summary of the contact chosen
  • below that summary, there is a button for selecting a different contact
  • a trash icon for removing the reference
    • a button "select other contact..." opening up the Chooser dialog for selecting a different contact.

I've attached a screen shot showing an earlier visual design, which shows part of this.

Comment by Andreas Weder [ 04/Mar/13 ]

Added mockup illustrating the UI design and states of the contact chooser field.

Comment by Samuli Penttilä [ 25/Jun/13 ]

Moved to CNTCTSAPP-37

Generated at Mon Feb 12 08:39:55 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.