Page MenuHomePhabricator

Action and timestamp position needs adjustment
Closed, ResolvedPublic

Description

The secondary actions for notifications and the timestamp define a secondary block of information below the main notification information. However, the actions and the timestamp look misaligned (notice the blue and green areas not matching), and slightly separated from the bottom border (highlighted in red):

Proposal
Align the items and remove the extra space below them:


Note that the final result will result in the total hight reduced by removing the extra space (in red), the space has not been reflown in the mockups for illustration purposes. For other space considerations, you can refer to F3363922.
The final result will also benefit from T125968: Increase separation between the content excerpt and the notification text.

Event Timeline

Pginer-WMF updated the task description. (Show Details)
Pginer-WMF raised the priority of this task from to Needs Triage.
Pginer-WMF added subscribers: SBisson, Mooeypoo, MGChecker and 3 others.

Another instance where the action labels, icons, timestamp and "..." menu is not aligned:

Pginer-WMF updated the task description. (Show Details)Feb 16 2016, 2:17 PM
Pginer-WMF set Security to None.

Change 272651 had a related patch set uploaded (by Mooeypoo):
Transform the notification action bar to css table layout

https://gerrit.wikimedia.org/r/272651

Change 272651 merged by jenkins-bot:
Transform the notification action bar to css table layout

https://gerrit.wikimedia.org/r/272651

Checked in betalabs - secondary links and a timestamp is seem to be properly aligned. @Pginer-WMF can you please take a final look?

I see some issues still:

Timestamp not sitting in the same baseline as actions

Note how the timestamp text is not sitting on the same line as actions:

After adding to the timestamp (".mw-echo-ui-notificationItemWidget-content-actions-timestamp") the same padding as the actions have ( padding: 0.25em 0.5em;) this was corrected:

Too much distance to the bottom of the notification
There is some additional space below the actions (marked in red in the screenshot below) that makes the notification white space unbalanced:

An alternative to remove the bottom space on the actions (marked in red) could be to remove the bottom padding for the whole notification (in blue),which will be visually equivalent (although it is usually preferred to keep the actual structure aligned with the logical one as much as possible).

For a reference of the expected distances check the image below:

Note also the 15px total distance between the actions and the copy text above them.

Change 274804 had a related patch set uploaded (by Mooeypoo):
Styling adjustments for notifications

https://gerrit.wikimedia.org/r/274804

Another attempt... and few comments for @Pginer-WMF :

  • The icons that come from ooui already have internal padding (about 4px in this size) so I had to take that into account.
  • The whitespace inside the icons also affects what we perceive as the size of the icon (it may be written as 15px but is actually 11px because of the internal padding) -- I've tried to correct that too.
  • The 'X' button was a bit of a challenge. The mockup above seems to still have a tiny distance (about 2 px?) between its top to the top of the line of the text, which is about what we currently have. Did you mean for the 'X' to stay where it is, or move slightly downwards so it is aligned perfectly with the top of the text? I made screenshots to see the difference:

Current situation (margin-top: -0.5em;)

Aligning with the top of the text (margin-top: -0.2em;)

(Again, the X itself is already surrounded by whitespace, which affects the calculation of the actual padding - instead I compared where the top of the actual icon is located in relation to the text)

I left the 'X' icon the way it is (-0.5em) because I wasn't sure if you wanted it corrected.

In the diagram below I tried to represent (in grey) the icon areas. Since icons will have different shapes and aspect ratios, there may be some differences in the white space around them.

I think we don't want to compensate in the layout side for that (i.e., adjusting how elements are placed to compensate for their internal shapes). If needed, we can adjust how the images are displayed inside the elements (i.e., background position) or modify the icon themselves.

Similarly, the text line has a size that is normally taller than the characters it contains. For example, the specific size of "bqbq" is not the same as for "ooo", but the line height is and that is the reference used for the layout. What I'm representing in colors above is the spacing (padding/margin, that's up to you) between those elements.

I created an example layout to try to illustrate the above distances (ignore other aspects such as font sizes, colors, hover states).

Change 274804 merged by jenkins-bot:
Styling adjustments for notifications

https://gerrit.wikimedia.org/r/274804

After adjustments in betalabs. @Pginer-WMF - the screenshots show positioning of timestamp & labels for secondary links for username and talk page. The labels are a little bit off in regards to the icons.



mw-echo-ui-notificationItemWidget-content-message {

line-height: 16px;

.mw-echo-ui-notificationG
roupItemWidget > .mw-echo-ui-notificationItemWidget-content {
margin-bottom:1em;
padding-right:0.8em;
padding-left:calc(30px + 1.6em)

@Pginer-WMF - bottom margin adjustment(s) is ok?

It has improved with respect to the original situation, but @Etonkovidova points to two aspects that can benefit from a bit of adjustment:

  • The space in red (or an equivalent amount from the bottom padding) should be eliminated or reduced as much a possible.
  • The labels from the actions would benefit for adjusting their vertical position so that their baseline aligns with the timestamp (i.e., resting on the red block in the screenshot).

@Mooeypoo, moving this back to Development. Are you able to address Pau's requests?

Change 277690 had a related patch set uploaded (by Mooeypoo):
Adjust bottom-alignment of action buttons in notifications

https://gerrit.wikimedia.org/r/277690

It has improved with respect to the original situation, but @Etonkovidova points to two aspects that can benefit from a bit of adjustment:

  • The space in red (or an equivalent amount from the bottom padding) should be eliminated or reduced as much a possible.

I tried to do this by reducing the line-height, but that doesn't work. Part of the reason is that part of the red line passes through an actual part of the icon (icons have built-in whitespaces) which makes it hard to remove.

Instead, I adjusted the bottom margin to be 0.5em instead of 0.8em, which looks to be more or less what you want (by eye).

We can reduce that space more if needed that way, it seems like the most straight-forward implementation rather than calculating the percentage of whitespace of the icons and calculating the remaining margins with calc().

  • The labels from the actions would benefit for adjusting their vertical position so that their baseline aligns with the timestamp (i.e., resting on the red block in the screenshot).

Semi-done. Up until now, the timestamp and buttons were vertically-aligned to the middle. I changed that to bottom.

The OOUI-buttons are a problem here; their design calls for the text to be aligned to the middle of the icon, and the icon is aligned to the base of the timestamp container, but icons also have built-in whitespace, which makes them slightly above that line, and the text a little more above that line.

I can force the text to be lower, but that will be (a) probably by eye, because of the issue of the whitespace in the icon, and (b) against what OOUI seems to be "designed" to do and look like. If it's okay that we're moving away from the ooui inherent design, I can hack something together.

We can reduce that space more if needed that way, it seems like the most straight-forward implementation rather than calculating the percentage of whitespace of the icons and calculating the remaining margins with calc().

You are right. The guidelines about the spacing the icons should have around is not clearly defined. I commented about it as a consideration to be improved in the design guidelines (M101#1951). So, I expect icon spacing to have some inconsistencies also from action to action and making the icons consistent in that regard seems a better long term solution than hacking around them in the places they are used.

I can force the text to be lower, but that will be (a) probably by eye, because of the issue of the whitespace in the icon, and (b) against what OOUI seems to be "designed" to do and look like.

As mentioned, I think it is ok to leave the icons as they are and not adapt the layout to compensate for issues of the icons themselves. However, I'm not convinced about (b). OOUI buttons have a padding that is not bigger than the one we need, there is a version for them with no borders, and I assume they are expected to be placed next to labels by keeping their text baselines aligned. We are basically placing some border-less buttons next to each other and a right aligned label at the end. I'm not disputing this may be complex with OOUI, but if that is the case we may want to open a separate ticket for OOUI to be improved in a way such things can be easily supported.

@Pginer-WMF , I can't tell from this discussion. Are we done with these or are further adjustments needed?

Change 277690 merged by jenkins-bot:
Adjust bottom-alignment of action buttons in notifications

https://gerrit.wikimedia.org/r/277690

@Pginer-WMF , I can't tell from this discussion. Are we done with these or are further adjustments needed?

Assuming the outer space for the notification is consistent for all four sides after T125969#2126911, we should be good to go, but a screenshot will help to confirm.

Checked in betalabs - the space marked as red by @Pginer-WMF is smaller now.

Regarding the second issue - the vertical positioning seems much more balanced now.

The labels from the actions would benefit for adjusting their vertical position so that their baseline aligns with the timestamp (i.e., resting on the red block in the screenshot).

The close-up screenshot shows good alignment for elements.

A bigger picture:

Great!
Looks good. The space around elements looks balanced now.

jmatazzoni closed this task as Resolved.Mar 23 2016, 3:08 PM