Page MenuHomePhabricator

Create more aesthetic cohesion between components in New Discussion
Closed, ResolvedPublic

Description

Problem: The current design looks like several different chunks of content, but we want it to read as a group and as distinct from the content that already exists on the page.
Proposed Solution: Add a background color [i]

Design

Logged OUT/sourceLogged OUT/visualLogged IN/visual
A- Source - Not Logged In.png (1×2 px, 367 KB)
A - Visual - LOGGED OUT.png (1×2 px, 336 KB)
A - Visual.png (1×2 px, 296 KB)

Done

  • The designs shown in the ===Design section above are implemented
    • Note: while the "Logged IN/source" state is not depicted above, the general design being proposed – a light border surrounding/encapsulating the tool and its related components – should be implemented for the tool and all of its various "states" (e.g. logged IN/OUT, source/visual).

i. Things to consider:

  • historically we have not had color behind toolbars
  • there might be a situation where a contributor is exposed to many blocks of competing colors with the background, the preview and the notification messages.

Event Timeline

ppelberg added a subscriber: Tacsipacsi.

Task description update

  • ADDED the following language to the "Problem" section, inspired by the feedback @Tacsipacsi shared in T267595#6663423: "...and as distinct from the content that already exists on the page."

@Tacsipacsi, can you please give the task description a read and let us know if the issue you raised in T267595#6663423 is accurately and exhaustively represented in the "Problem" section?

@Tacsipacsi, can you please give the task description a read and let us know if the issue you raised in T267595#6663423 is accurately and exhaustively represented in the "Problem" section?

Mostly yes. I couldn’t write it any better.

In Description, @ppelberg wrote:

Proposed Solution: Add a background color

This looks risky to me—pages can have all sorts of background colors coming from different sources, including colors set in wikicode (within that page or via some template), on-wiki CSS (MediaWiki:Common.css, MediaWiki:Vector.css, user common.css, user vector.css, user global.css, gadgets etc.), skins’ stock CSS (see e.g. Cologne Blue), or even set on client side using JavaScript (e.g. MediaWiki:Gadget-userpage-customization.js on huwiki). These (and probably more) techniques can set any color (or even a background image), and no matter what color DT uses, it will look awful together with some of these or become simply indistinguishable from them. I’d like to rather see something around spacing and/or a border/separating line that uses standard text color.

This looks risky to me—pages can have all sorts of background colors coming from different sources, including colors set in wikicode (within that page or via some template), on-wiki CSS (MediaWiki:Common.css, MediaWiki:Vector.css, user common.css, user vector.css, user global.css, gadgets etc.), skins’ stock CSS (see e.g. Cologne Blue), or even set on client side using JavaScript (e.g. MediaWiki:Gadget-userpage-customization.js on huwiki). These (and probably more) techniques can set any color (or even a background image), and no matter what color DT uses, it will look awful together with some of these or become simply indistinguishable from them. I’d like to rather see something around spacing and/or a border/separating line that uses standard text color.

Yes agreed. I think that we should go an approach that lightly outlines the component as a unit, and to balance out the spacing. I made a few mockups that show what this will look like on a user talk page (but of course this will work in other Talk environments):

Source Mode:

A- Source - Not Logged In.png (1×2 px, 367 KB)

Visual Mode:

A - Visual.png (1×2 px, 296 KB)

A - Visual - LOGGED OUT.png (1×2 px, 336 KB)

Action(s)

Action(s)

✅done; see task description.

I made a few mockups that show what this will look like on a user talk page (but of course this will work in other Talk environments):

Could you please make some mockups that include edit notices? That is what’s most confusing right now (it just seems to be part of the previous section). Otherwise, it looks good to me.

I made a few mockups that show what this will look like on a user talk page (but of course this will work in other Talk environments):

Could you please make some mockups that include edit notices? That is what’s most confusing right now (it just seems to be part of the previous section). Otherwise, it looks good to me.

We appreciate you having a look at these mockups, @Tacsipacsi.

Regarding the edit notice component, we're going to implement this after the tool is initially made available as a beta feature. This work on the "edit notice component" will happen in T269033.

Change 655990 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/DiscussionTools@master] Padding and border around new topic tool

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

This comment has been deleted.

Change 655990 merged by jenkins-bot:
[mediawiki/extensions/DiscussionTools@master] Padding and border around new topic tool

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

ppelberg added a project: Skipped QA.