Page MenuHomePhabricator

Fix several design features of WikiEditor and CodeEditor to match the general style
Closed, ResolvedPublic

Description

I think we need to change top menu's colors of WikiEditor and CodeEditor. This will match to general Design Style Guide and OOUI implementation.

  • Delete background-image from .wikiEditor-ui-toolbar
  • Add background-color: #eaecf0 #f8f9fa to .wikiEditor-ui-toolbar – Updated color as it needs to be separate from textarea itself and not follow VisualEditor here.
  • Change border color in .wikiEditor-ui .wikiEditor-ui-view from #c0c0c0 to #c8ccd1
  • Change border color in .wikiEditor-ui .wikiEditor-ui-top from #c0c0c0 to #c8ccd1
  • Change border color in .wikiEditor-ui-toolbar .group from #c0c0c0 to #c8ccd1
  • Change border color .wikiEditor-ui-toolbar .sections .section from #ddd to #c8ccd1
  • Change background-color .wikiEditor-ui-toolbar .sections .section from #e0eef7 to #f8f9fa
  • Change background-color .wikiEditor-ui-toolbar .booklet .index .current from #fafafa to #eaecf0
  • Delete border from <textarea>
BeforeAfter
wikieditor1.jpg (633×1 px, 395 KB)
wikieditor2.jpg (633×1 px, 389 KB)

Event Timeline

What "general styleguide" do you have in mind that this is trying to ape? These changes don't look very much like the WikimediaUI design (which is what OOUI implements for Vector and Minerva users), and in general it's a really bad idea to try to duplicate styles ad hoc rather than actual using the UI library.

Changing the experience for established editors is always very concerning, which is why we've not made any changes here to date.

If you want a wikitext editor which implements the WikimediaUI design, the wikitext mode of the visual editor is designed to provide exactly this. Eventually I expect that to be made the default editor for all users (except those who opt out).

What "general styleguide" do you have in mind that this is trying to ape? These changes don't look very much like the WikimediaUI design (which is what OOUI implements for Vector and Minerva users), and in general it's a really bad idea to try to duplicate styles ad hoc rather than actual using the UI library.

https://wikimedia.github.io/WikimediaUI-Style-Guide/visual-style_colors.html

Changing the experience for established editors is always very concerning, which is why we've not made any changes here to date.

Im not sure that this update will change the user experisence.

If you want a wikitext editor which implements the WikimediaUI design, the wikitext mode of the visual editor is designed to provide exactly this. Eventually I expect that to be made the default editor for all users (except those who opt out).

Yes, I know about wikieditor 2017, but it is unconfortable for me :) And I think the all Wikimedia WikiEditors must be matched with general Style Guide.

Volker_E triaged this task as Lowest priority.Aug 25 2017, 9:47 PM
Volker_E edited projects, added UI-Standardization; removed OOUI.

@Iniquity As much as I understand (and in some ways would support) this cause, we are currently focussing our work on the new Wikitext Editor to bring an overall better experience to our contributors. There is not enough capacity to work on nor for the needed broader communication to the communities for this change right now.

@Volker_E ok:) Thanks for the answer, but I hope this issue will be fixed in future:)

@Ladsgroup While I would probably leave out the toolbar/textarea amendments due to lack of time communicating for it, background-color on .wikiEditor-ui-toolbar .booklet .index .current is still #fafafaif you want to push another patch.

Change 387664 had a related patch set uploaded (by Ladsgroup; owner: Amir Sarabadani):
[mediawiki/extensions/WikiEditor@master] More alignment with WikimediaUI color style

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

Change 387664 merged by jenkins-bot:
[mediawiki/extensions/WikiEditor@master] More alignment with WikimediaUI color style

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

Volker_E updated the task description. (Show Details)
Volker_E removed a subscriber: gerritbot.
Volker_E changed the task status from Open to Stalled.Oct 31 2017, 9:22 PM

Thanks @Ladsgroup for picking up the non-debatable adaptions. Putting the rest of the open requests on “Stalled” due to the arguments given above.

Uh... I was hoping that we would be gray colored :)

I don’t think anybody will object to dropping the gradient, tho (is not a part of the Wikimedia visual language).

Can this be closed or are there still things we want to change ?

Volker_E changed the task status from Stalled to Open.May 14 2019, 4:25 PM

There's only two of the suggested changes left:

  • Add background-color: #eaecf0 to .wikiEditor-ui-toolbar (currently #f8f9fa)
  • Add box-shadow: inset 1px 1px 0px 0px rgba(0,0,0,0.5) to <textarea>

I'm not sure either of these are actually needed to match current styles

Volker_E assigned this task to Ladsgroup.
Volker_E updated the task description. (Show Details)

@Pcoombe The inset box-shadow proposed originally in the task description wasn't aligned to our UI widgets, specifically textarea, hence removed from description.

Resolved as is with current state of UI

image.png (1×1 px, 206 KB)

@Pcoombe The inset box-shadow proposed originally in the task description wasn't aligned to our UI widgets, specifically textarea, hence removed from description.

Yes, I added a shadow to provide more similarity to the old design. It is not needed if we follow the style guide. Thank you! :)