Page MenuHomePhabricator

VE Dialog on Test instance: Update template title, description, and help text
Closed, ResolvedPublic3 Estimated Story Points

Description

Summary
This ticket includes styling changes to the template title, description, and help text with link to template page.

Requirements:

  • The name/description/help area gets a background (Base90), with a 1px outline (Base70)

[] Template name/description box remains sticky at the top of the page. If there is a second template added, then it is added to the bottom, then scrolls up to the push the top box out of the page and then remains sticky while scrolling through the second template content. The same happens in reverse when scrolling up.

  • Template name/description box always scrolls (is not sticky)
  • Help text (Base0, italic): "For help filling in this template, find additional information on its page." Where 'its page' links to the template page, same as it currently does.
  • When a template has TemplateData, the description comes from TemplateData.
  • When a template is missing TemplateData, the description is always: "The “TEMPLATENAME” template doesn't yet have a description." (Base20, italic)

Mocks

With TemplateData:


Without TemplateData:

Multiple templates:

Specs:
Text styling: Template name is H4, the description is body text, the help text is body, italic with a link.

Event Timeline

Lena_WMDE set the point value for this task to 5.
Lena_WMDE renamed this task from Draft - update title and description header to Update template title and description header.Aug 24 2020, 8:59 AM
Lena_WMDE updated the task description. (Show Details)
Lena_WMDE moved this task from Backlog to Ready for pickup on the WMDE-Templates-FocusArea board.
ECohen_WMDE updated the task description. (Show Details)Aug 24 2020, 9:02 AM
Lena_WMDE updated the task description. (Show Details)Aug 24 2020, 9:04 AM
ECohen_WMDE updated the task description. (Show Details)Aug 28 2020, 3:25 PM
awight added a subscriber: awight.Sep 4 2020, 2:41 PM

Minor thing: the dialog title is currently the template name (see below), but should we change that to "Insert a template"?

awight added a comment.Sep 4 2020, 2:55 PM

Minor thing: the dialog title is currently the template name (see below), but should we change that to "Insert a template"?

Never mind, I see this happens in a sibling task.

Never mind, I see this happens in a sibling task.

Yup! But glad to see you also thought this was odd.

@awight - if you're starting to work on this, let me know if you run into this problem. It's become clear that this multi-template thing is probably not something that can be put off, but needs to be designed for now. I'm planning to work on it soon, but not sure if you need the designs for this ticket. If yes, then I'll prioritize it.

Basically, because the current template title/description block is not sticky, adding a second template just adds another one at the top of the new template /below the fist template and it all stacks. The new design means that when two templates are added, the top design needs to become a new 'combo' design which indicates that you are now editing multiple templates. It also means that there needs to be some kind of new divider. This is not planned to be in usability testing, so it's alright if it's not functioning perfectly and probably we don't need to sort out the divider yet. My question is, can you implement the design/task in this ticket without dealing with multi-template editing?

(Also I tried to write this in the least confusing way possible, but it's a weird thing. Might be easier to have a 5 min discussion about it? Let me know if it makes sense.)

Change 625594 had a related patch set uploaded (by Awight; owner: Awight):
[mediawiki/extensions/VisualEditor@master] [WIP] Updates to the template page header

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

ECohen_WMDE renamed this task from Update template title and description header to Update template title, description, and help text.Sep 9 2020, 9:31 AM
ECohen_WMDE updated the task description. (Show Details)
ECohen_WMDE updated the task description. (Show Details)Sep 9 2020, 9:42 AM
Lena_WMDE changed the point value for this task from 5 to 8.Sep 9 2020, 10:16 AM
ECohen_WMDE updated the task description. (Show Details)Sep 10 2020, 10:37 AM
ECohen_WMDE updated the task description. (Show Details)Sep 10 2020, 1:24 PM
ECohen_WMDE updated the task description. (Show Details)Sep 10 2020, 5:00 PM

Decided to take out the collapsing/expanding help link, now templates with and without TemplateData are more similar. These should be the final mocks/descriptions! Let me know if you have questions when you go through it because I know this ticket has changed a lot over time.

Rebased and resolved some minor merge conflicts. This is live on the test instance.

Thanks! At the moment I think this may be working well enough, but at the moment the stacking only works if the descriptions are the same size, which is unlikely. You can test this problem by adding a deprecated template with the warning first, then adding a normal one after. You can still see the yellow peeking through beneath. Just a note so we don't forget to find a solution on the final implementation. There are also some bugs to work out with the clicking the names of parameters/templates in the sidebar and getting it to jump correctly.

Overall though, I think the behavior is very close to as intended and works great with a single template (which should be all we need for the usability testing!)

"no description" text should be above deprecated warning. Wrong:

Per the review today, we decided not to deal with the stacking but to fix the jumping issue. I'm not sure the best time/place to do that, but it might make sense to deal with it during this ticket: T261504: VE on Test Instance: Change behavior for adding/removing params Part of the ticket is showing all parameters and there is a requirement about the jumping/using the sidebar as TOC.

Lena_WMDE changed the point value for this task from 8 to 3.
Lena_WMDE renamed this task from Update template title, description, and help text to VE Dialog on Test instance: Update template title, description, and help text.Sep 23 2020, 10:21 AM

Ok! After the first usability test, already have some changes - which will actually make this all much simpler.

Still fix the ordering change from @awight comment above, but don't worry about the jumping issue because it will be fixed by making the title un-sticky. It was a nice idea that turned out to be annoying in practice and reduces the working area too much. The styling of it and the content can stay the same (as already implemented from the main task), just remove the sticky-ness and let the whole template scroll. This will also solve the stacking issue.

Let me know if that's clear or if there are any questions!

ECohen_WMDE updated the task description. (Show Details)Sep 23 2020, 2:45 PM
Lena_WMDE updated the task description. (Show Details)Sep 24 2020, 1:53 PM
Lena_WMDE closed this task as Resolved.Tue, Oct 6, 11:46 AM
Lena_WMDE updated the task description. (Show Details)