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
Includes adding a less file for minerva layout rules. To make best
use of the less shortcuts and avoid duplication, some selectors
have been slightly changed. Outcome should still be identical.
Change-Id: I92179ecf6045c938cace0e7e809b7ad4cf035727
In some cases ve-ui-mwTransclusionDialog-newSidebar could just removed
when there are specific enough classes present so that we can be
sure to not overwrite rules outside our use case.
e.g with the new ve-ui-mwTwoPaneTransclusionDialogLayout-stackLayout
Note that this will also remove some right padding on descriptions
where it seems that it was applied for no reason.
Bug: T310859
Change-Id: I6612fe1cb2ea6bd75e9bc3e6f4d6d8d0c4addc63
This class was (accidentally?) removed in 2014 so the styles had
no effect since then. I decided on removing the code that was
unused for 8years. - Alternativly the class could be re-added but
I'm not sure if it makes sense.
See I4b2ba31bed5c4f80940623702d635cacd19e0a66 where this got lost.
Change-Id: Ifcbfc4273e41c08431c6f5b0ca2f2b6d25c34edd
Bring over the ES and Less implementation from ooui-js and rename to
fit it into the VE hierarchy, but don't make any other substantial
changes.
Inlines the wikimediaui-themed styles, ignoring apex styles, and
hardcodes the Less constants.
Bug: T310865
Change-Id: Id43dafdf11c5df0d7d78112e5f62a8599bdbc879
Value changes are triggerd and tracked from the parameter page and
change events will be forwared to the outline, if they are relevant.
Initial value is read from the model.
Bug: T308730
Change-Id: I0a3b0faf40aee44889404dcce31d850714360580
Parameters do not have an "OutlineItem" anymore so the code for
that was completely removed.
Bug: T310859
Change-Id: Ie57f462b8fda4505b99ee5bc9d788908d18d9c64
Removing a class name that's going to be deleted from places where
it's not strictly needed, e.g. comments.
Bug: T307188
Change-Id: Ifb14695d05510d2c0e25623afa99c4e84af3aaf9
This patch adds top and bottom margins for each transclustion
part, excluding the top of the first element and the bottom
of the last if those are non-indended ones (ButtonWidget).
Bug: T309584
Change-Id: Ibdcf1293676bd59c7868f3d197805c8b9e743cdc
Follow-up for what was done in I37505af. I don't fully understand why
these two extras are sometimes needed and sometimes not. But this exact
combination of 3 properties is used in multiple places already, so
let's just do the same here.
Bug: T300008
Change-Id: I1eba5fc378475d365111add58a141c3114dc0118
Will implicitly set a max width for the button due to the margin.
Long words will break in the middle of the word.
Also includes a shorter label.
Bug: T300008
Change-Id: I37505af8383d8c0c2bd4af3987ec5e2a3049688a
Will be removed when parameters are added. Needs different margins
depending on beeing shown in the single transclusion mode without
header or on multiple transclusions.
Bug: T300710
Change-Id: Ieb95d7276aa4d4b0fcbb74f87ab734e4a393dc21
In the mobile view, parameters don't have left padding so some styles
should only be applied to the desktop stylesheet.
Bug: T304167
Change-Id: I1846512c21aae36f212fe142b7d96ac91e46854b
This fixes a styling issue with inline descriptions, for the scenario
when the inline description feature is enabled but the new sidebar is
disabled.
Bug: T304167
Change-Id: Ida4da4605da5143de2a27725d87d5876aea7065c
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
The checkboxes are actually indented a bit more than the search box
with this change the extra indentation is applied and the hide
button text is alligned accordingly.
Bug: T298259
Change-Id: I5508ab883c23e7285c023dc127529ffa4dbe58c7
From the user's perspective this is the same as before: When a
template doesn't have any parameters, there is no search field. The
moment the first (undocumented) parameter is added the search field
appears.
This is just delayed now. The widgets are only created the moment
they are actually needed.
This saves loading time and memory, especially in a multi-part
transclusion with many zero-parameter templates.
This also makes it a lot easier to change the minimal number of
parameters from 1 to e.g. 4.
Includes reverting the flexible header composition done in
Ib050e30a50ef965c1524e977d3a600c3ff836774
Bug: T298259
Change-Id: Ied7541d8d5c0b478a439dd31ce072e634287f181
The search field will stay at the top of the window while scrolling a
single template. In multi-part transclusions, the header will also
be sticky.
Hides the template header in single-part transclusions.
Bug: T298618
Change-Id: Ib050e30a50ef965c1524e977d3a600c3ff836774
These pieces are only relevant when the new "inlineDescription"
feature is enabled. In other words: This can't have an effect on
the old dialog.
The 2.5em left and right are from an old styling when the
parameter pages have been indented.
Change-Id: I022b0dd94ee66f7de114c055c3f453317a7f6131
This is only relevant with the old design. It's only noticable when
a field shows all 3 action icons: info, raw wikitext mode, and
trashcan. The last icon can wrap to the next line when the screen
is very narrow.
I tried to apply nowrap, but this causes other style issues.
Removing the arbitrary width allows the action container to be
as wide as it needs to be. I can't tell why this restriction was
there. It is in no way necessary, as far as I can see. I can only
guess it's a temporary artifact from when the dialog was designed.
Bug: T296730
Change-Id: I77129ccc3afe002ba697b1787b41d0a388d5f4b8
In OOUI the close button is always on the left side. See
https://doc.wikimedia.org/oojs-ui/master/demos/?page=dialogs&theme=wikimediaui&direction=ltr&platform=desktop
The CSS hack to move it to the other side doesn't work and must be
removed. You can see the problem the moment the text is longer (which
can easily happen in translated versions).
I tried to come up with a more official way to move the button to the
other side, but gave up. One way is to replace the existing
flags: [ 'safe', 'close' ]
with:
flags: [ 'primary', 'close' ],
framed: false
But this causes other style problems. Let's remove the bogus CSS
first and possibly try again in a later patch.
Bug: T294839
Change-Id: Ia6ddefd99e4a03a87b0450ab94712ff19bb268e4
There was a remaining issue when the window was made very narrow in
desktop mode (smaller than 500px). This patch doesn't aim to really
"fix" the dialog's design in this case. The goal is to make the popup
window appear less broken, so the text can stil be read and the
buttons clicked. That's all.
This patch should not have any effect in:
a) mobile mode,
b) desktop mode when the window is wider than 500px.
Bug: T294839
Change-Id: I3171dbb991533b91eaadba63b78d0ff40aa486dc
When changing the source in the described-by attributes the screen
reader will read the text of the new source when the status changes.
Just changing the text within the elements holding the descriptions
does not work.
Bug: T291284
Change-Id: I31cc3061cf6c1f699babe41e99e0711f0eb03646
This patch fixes two issues:
* The bottom corner of the new sidebar was never correct because of
a `padding: 2px` that was introduced later, but never compensated
for.
* The moment the toolbar is shown it's not a single-template dialog
any more. This implies minor style changes.
Bug: T290262
Bug: T292727
Change-Id: I08da73880c469085994ee4beb3fcdd973f80ae11
I can't really tell what insight we get from the word "container".
Every widget is a "container" in some sense, isn't it?
This widget is just _the_ outline, I would argue.
Other suggestions?
Change-Id: I1fb27ee58c1a3dd790022504e978198dadf7ea02
The previous patch I15aa2c0 (approved by UX) was incomplete. The
required indicator was still shown, depending on the skin.
This patch also reduces the amount of generated HTML when it
doesn't have an effect anyway. At the moment an empty <span></span>
is generated for _every_ parameter in the dialog. That's potentially
hundreds. But the element is only needed for deprecated and
(in the old UI) required parameters.
A missing space is added while we touch this code anyway. The
missing whitespace between label and indicator icon is confirmed to
be a bug by UX.
Styles that are the same on all skins are moved to the .css file
that's loaded for all skins. Missing word-wrapping for overly long
template parameter names (on the right side of the dialog) is added.
The position of the indicator icon was broken on Minerva the moment
a parameter name is a bit longer. Fixed by replacing `inline-block`
with `inline`.
Bug: T290492
Change-Id: Ie346d88969cec2effaf90d328d08567ab7b7bf75
This just copies the colors from the old sidebar.
* When hovering with the mouse (without click/press) the background
is gray, and the text black. Relevant for readability via WCAG
AAA.
* On click/press the background is blue (slightly darker than a
selection), and the text is dark blue as well.
As noted in
https://docs.google.com/document/d/1V0rXMPr6upNjHF9AkROx4R8IF1LDZUzrG4K6oWT08sU
Change-Id: I443045b55826ef390688b32616dfdcfdc6555eb3
Before, the content pane (the right half of the dialog) was moved
to the right, outside of the visible viewport. But it was still
active and could i.e. be navigated to via the tab key. Only truly
hiding it solves this issue.
Bug: T274554
Change-Id: I8925a9cca0099528aca8e98452816b5f9dd23a76
* Use a more specific …-top property, as this is the only thing
we need to overwrite.
* Bring some selectors in a hierarchical order that makes more
sense.
Change-Id: If36db87d83f699fe0a43ac67d439cac42cbb1fa3
Proof of concept: while flex is – well – flexible, it feels like
this should be possible with some good old block containers and
margins. It's pixel-perfect in my test.
Bug: T288465
Change-Id: I1458900fff197e08ce318398524a3cf2b6b9ee2a
This fixes a few style issues:
* The buttons that represent top-level elements have a proper
2px focus rectangle again. Back to the OOUI default.
* The list of parameters does have a 1px focus rectangle all
around. Intentionally thin because there is a 2nd level of
keyboard navigation (via cursor keys) in this element.
* All these focus rectangles look the same in Firefox. Before,
it was a thin dotted line on the parameter list.
* Parameters with long names don't wrap on a 2nd line any more.
I believe this was working before but got lost in I92e8fd2.
Bug: T285323
Change-Id: I0229b6395a64a9903335bf96349af70fb20ad047
When I press the button to expand the input field for
undocumented parameters, it needs to be focused. Otherwise I
have to click it manually all the time.
We probably forgot to list this as an acceptance criteria when
working on Ic5dcd36.
This also replaced a bit of JavaScript with CSS. I do this
mainly because I found the mixture before (one piece was
hidden via JavaScript, another via CSS) a bit confusing.
Bug: T272487
Change-Id: I0cbee63c65a37f2f1860bde007c1e5c8408ba006
This is mostly, if not exclusively visual, at the moment. The
actual state is still managed by the old sidebar.
I made the element OptionWidgets for convenience. This gives us
all the functionality we need (primarily setSelected and
isSelected), without to much clutter. However, I didn't made
the container a SelectWidget. This comes with to much stuff we
don't need at this level, e.g. cursor key navigation.
Bug: T285323
Bug: T289043
Change-Id: I20dbd2ba23ceaa9125947b25e037c0bb3c91a471
