[MGNLUI-3896] Adjust column widths in the "move" dialog Created: 30/May/16  Updated: 09/Feb/17  Resolved: 18/Aug/16

Status: Closed
Project: Magnolia UI
Component/s: dialogs
Affects Version/s: 5.4.6
Fix Version/s: 5.5

Type: Improvement Priority: Neutral
Reporter: Andreas Weder Assignee: Ngoc Nguyenthanh
Resolution: Fixed Votes: 0
Labels: usability, ux, working-with-items
Remaining Estimate: 3h
Time Spent: 2d 5h
Original Estimate: 3d

Attachments: PNG File 1 Pages app.png     PNG File 2 Assets app.png     PNG File 3 Tours app.png     PNG File 4 Config app.png     PNG File 5 Adjusted columns.png     PNG File move-dialog-title-alignment.png     PNG File page-chooser-edited.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)
Date of First Response:
Epic Link: AX: "Move" dialog imprv
Sprint: Saigon 57
Story Points: 8

 Description   

In the Tree view of the "Move" chooser dialog, the most important bit of information shown is the hierarchy of nodes in the first column (named "Page", "Asset name", "Node name" or the like). Often however, this column is too narrow to allow for easy browsing of hierarchies. We should thus adjust its width the maximize the amount of space available to navigate hierarchies.

To maximize the width of the first column:

  1. Remove the empty column or space to the left of the first column.
  2. Ensure that the second column occupies at most 30% of the width available to the Tree view ("Title" in Pages and Assets, "Tour operator" in Tours) .
    Note that this will have to be adjusted in several apps and on a as-needed basis. In some cases (e.g. Assets or Tours), the column width is already fine and needs no adjustment.
    If there's more than two columns, (e.g. "Value" and "Type" in Configuration), we leave column widths how they currently are.

For an examples how this will then look in the Pages app, see 5 Adjusted columns.png.

More than two columns

If a "move" dialog has more than three columns, we leave things as they are. Here, we can only optimize column widths if we also truncate or shorten values shown. The ideal way to truncate the value depends on the value, and should thus be customizable. E.g.

  • For Java class names, we would truncate in-line (show three, four characters of the package name, then an ellipsis, then the class name): "ch.livelife...AbstractStorageSpace"
  • For people's names, the abbreviation could be "A. Weder" instead of "Andreas Weder".

However, this should be the topic of a separate issue.



 Comments   
Comment by Ngoc Nguyenthanh [ 09/Aug/16 ]

Hi weder
As current implementation of Move dialog. I can see it always show just only one column.
How can you have those pictures with multiple columns? Do we miss a ticket to support multiple columns in Move dialog?
Ref: info.magnolia.ui.contentapp.movedialog.MoveDialogPresenterImpl#removeAllColumnsAfterFirst

Comment by Mikaël Geljić [ 11/Aug/16 ]

As we discussed it yesterday (cc weder, apchelintcev), showing only the first column is how the move dialog was initially designed.
Due to some older side-effects, it was eventually no-longer hiding the extra columns properly—this was reinstated with commit 827cd84, as part of the definition cloning/wrapping changes lately.

So we simply keep this behavior (unlike in the screenshots); this ticket is now merely about the gap on the left side.
If there is any compelling use case or demand to restore some additional columns, we'll reevaluate.

Also note that this does not apply to choose dialogs—there we still show multiple columns, as per the displayInChooseDialog property in column config.

Comment by Ngoc Nguyenthanh [ 11/Aug/16 ]
INFO
  • The magical spacing comes from VMagnoliaTable.MagnoliaTableBody.MagnoliaTableRow#initCellWithText or VMagnoliaTable.MagnoliaTableBody.MagnoliaTableRow#initCellWithWidget. If a table is in single mode, it'll try to add a placeholder for a checkbox instead.
SOLUTION
  • Add a css to remove the placeholder in choosedialog.scss. Because of Move Dialog is sharing the same style with choose dialog, then we don't need to create a new scss file for move dialog. Check in MoveDialogPresenterImpl#start
  div.v-selection-cb {
    display: none;
  }
CONCERN
  • Because of Choose Dialog and Move Dialog are sharing a same style. The change will affect to Choose Dialog also. Should we separate them or keep it as the current?
  • Column title alignment, icons (tree, list): Should we change it or keep as current?
Comment by Mikaël Geljić [ 12/Aug/16 ]

ngoc.nguyenthanh
Removal of padding in choose-dialogs as well => OK, there's no checkbox there either (for now).
Column header alignments => Yes we need to fix this too

Comment by Milan Divilek [ 08/Sep/16 ]

Reverted from UI-5.4.x, because the "Move improvements" are meant only for M5.5

Generated at Mon Feb 12 09:11:12 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.