Discussed in todays story time. The blue "active" color is mostly a
"reminder with which parameter I interacted last". It's more a
secondary, passive information. In contrast, the gray
highlighting/hover effect that appears when navigating the sidebar
with keyboard or mouse is an active, primary information ("this is
where you are right now"). It's really confusing when the keyboard
navigation indicator disappears behind the blue box.
This patch changes this for both top-level elements as well as
template parameters. The blue text color "shines through" the gray
highlight so we can still see both information.
Bug: T289043
Bug: T311204
Change-Id: Ief6a023d8fde4f6ca0c4b2ea2e831b66e1ea8c83
Generally the default button margin on the parts is 24px. The only
exception are the placeholder and wikitext when they are the last
parts in the outline.
Bug: T312644
Change-Id: Ie513bf1c022b2696cc92aacbbca59ddf6e55043e
This should make zero difference in most situations. Except you
navigate a list of parameters with the keyboard. In this case the
SelectWidget gets a dark blue outline which overlaps with the light
blue selection bar, but the outline disappears behind the bar. This
looks odd. Making the color transparent fixes this without the need
to fiddle with z-index or such.
Bug: T311204
Change-Id: I7049eb60dc0ea72c2c4620f4351525fe447e0f46
We would love to name this state "selected", but that term is already
used for a template parameter that is checked/used. The idea of "set"
was to have a list of parameters where one is "set". But the word is
confusing. I suggest "active page" because the entire purpose of the
blue selection is to highlight the currently active page (i.e. the
one you currently interact with on the right side of the dialog) in
the sidebar.
Change-Id: I5a16ab4c193ea05c21bb3bf89ada2ef550d8d6bc
This line was added as part of I0229b63. While what the comment says
is still true to some degree, the line stopped being helpful when
we introduced sticky headers. When scrolling the sidebar for a
multi-part template with many parameters the sticky header jumps up
and down by this 1 pixel.
TL;DR: This is one of these hacks where it's better to remove it and
look for a better solution when we notice the original issue again.
Bug: T312768
Change-Id: I2fedea4e1d4d6c95c74a63c522821a6ebc2ee2b2
Introducing a set method to have a different state for a set
parameter and a highlighted one in the selection.
Allows us to remove a lot of workarounds for missusing the
highlight state and fixes several issues with these workarounds.
Main implications:
- Keyboard navigation and mouse hover now sets the grey highlight
- If a parameter is set (blue highlight) keyboard navigation returns
when focusing the SelectWidget
- If nothing is set keyboard navigation starts at the top after focus
- Unchecking a parameter using space will not influence the keyboard
focus in the list
- Highlighting a parameter with the mouse lets keyboard navigation
continue from there.
Bug: T312647
Bug: T311204
Bug: T312213
Depends-On: I385dca1d95033961d3844e888521750443e49c95
Change-Id: Iaf089f4b271fd853b17c1aa7f5938510ea8f5431
The last checkbox in the entire sidebar should get the extra bottom
margin, but not the last checkbox in each template group.
Follow-up on I1edc5db98d16a4c0de8abd7f705776fb9eb65b97
Change-Id: I4ffade9c053191ce202340edadbd032c67bb39a4
Using a certain amount of depth to make sure to override OOUI
specificity.
More can be done in follow ups.
Change-Id: I1edc5db98d16a4c0de8abd7f705776fb9eb65b97
Should be a noop. Also moving one rule further up to the set of
similar selectors.
Removing one rule that was disabled for some time now.
Optimizations follow.
Change-Id: I8da70a52c13afd8ac1c3ff43bae63a203c3bf86a
This is a direct follow-up to I7f22e4b. I found that the way the
margins have been arranged became a little more complicated with
I7f22e4b. This patch tries to go back to the – I think – simpler way
it was done before.
It should look the same as before down to the pixel.
Bug: T311223
Change-Id: I2c7789922078fa98f15f0b65de4c0efdf878a13a
Includes moving CSS that already moved from the TemplateDialog CSS
file to the DialogLayout LESS file.
Width and height had no effect. Neither on desktop/mobile. I guess
the control's height covers for that. Float could be removed due to
the flex layout.
Some more specific rules could cover for the !important overrides.
Change-Id: I7f22e4be37c8f227845aed97281faefe26241091
This option was added in 0.43.0. Now that the close button is handled,
the remaining functionality (store a flag in local storage, and fixing
link targets) doesn't really justify a separate class, especially as
it's currently only used once.
Change-Id: I0fd81cadccc077dbf957302f9f41409c5a1f4f20
This ellipsis was there before we started working on this code,
but was never working properly.
We understand that the CSS was intentionally done like this (as
the comment explains). However:
* We changed the width of the dialog. The old value doesn't
match any more.
* The width is different when the sidebar is expanded vs. when
it is collapsed. Even if we update the number, it won't
always work.
* The 100% work fine in current browsers. I can only assume
this was different back in 2014 when this CSS was written
(see Ia8259e9).
Bug: T285044
Change-Id: I3de2b0ed0b6a05d2b9fa0b325a2b12277564b271
Reference images are moved to Cite and used by Citoid.
Bug: T170919
Bug: T171292
Depends-On: I02041246dda1b3d3ad1bcc0b014fa022e8259b62
Change-Id: Id97659ed1fa64a1223a8957fefaf2a149edd0e9c
The MWParameterSearchWidget that shows a list of all available
template parameters displays the (human-readable) label and
description of each parameter (both given via <templatedata>), as
well as the parameter's internal name and aliases, if there are
any.
This turns out to be non-helpful in the majority of situations:
* When there is no <templatedata> yet, there are no labels.
Instead, the names are used as labels, which means they are
*all* identical and everything is shown twice.
* The same happens when manually adding an "unknown field". Simply
start typing, and you can add parameters with any name. What you
type is shown twice (actually 3 times, 1 time in the input
field, 2 times in the result widget).
* Many template parameters are already nice, human-readable. Even
if <templatedata> exists and specifies labels, these labels are
often identical to the names. There is no need to come up with
something else if the name is already good enough. (Exception:
Localizations, but these are rare.)
Furthermore, this is a *search* result widget. The pretty much
only reason the names and aliases are shown is because the user
can search for them, and needs to understand why a parameter was
found. This still works fine.
For comparison, when a parameter is required you will *never* see
it's name, because the parameter is always there, and never shows
up as a search result.
Change-Id: I6b1dca1c94b2c496930b5bfdfe1c6f76898faa2a
Removing `0.8em` VE special base `font-size` for UI as we're unifying
OOUI interfaces to `14px` equals to `0.875em` at user agent default size.
Bug: T97631
Depends-on: I693d168d2ccf2babbcfe8952af3e1c262aa97773
Change-Id: I84edeec38ecfb90f5d53199f3b26fc3f83ab0611
OOjs UI v0.21.0 changed DraggableElement's padding. Override it here, so it doesn't look broken any more.
Bug: T163404
Change-Id: Ic0bc4f9e3e060cf89e6bc7cb22068d1fe1441d75
The floating tooltip breaks inside OOUI dialogs. In the absence
of an upstream fix, just anchor it to the bottom of the textbox.
Bug: T160245
Change-Id: I9055c4e4947f5581605bd490f076415c1edaf8ec
