Commit graph

10 commits

Author SHA1 Message Date
Jan Drewniak edd2f4ff85 Reorganize LESS files to match ResourceLoader conventions
Separating most LESS files into 2 ResourceLoader modules and a common
folder:

- skins.vector.styles
- skins.vector.styles.legacy
- common

This changes aims to clearly separate the old (“legacy”), the new
(“modern”) and the common styles which were previously all placed under
`skins.vector.styles/`.

Inside each directory are separate folders for `layouts` and
`components`.

The entry files, `skin.less` and `skin-legacy.less` are moved into the
specific folders and a third, `common.less` entry file is created that
contains the common imports for both old and new Vector.

Aliases have been added to the Storybook Webpack config to avoid adding
the story file changes to this patch. Images coming from CSS `url()`'s
have also been temporarily disabled in Storybook until Storybook can be
upgraded to use Webpack 5, and use array values for aliases, in a
follow-up patch.

This patch also slightly changes a footer layout specific rule so that
existing `padding` remains unchanged in rendering due to new common and
component structure.

Bug: T264309
Change-Id: I1cd2681a2b61edb7be56c38f9bb3994827d7e322
2021-04-08 15:47:56 +01:00
Jan Drewniak 88dcdab6db Removing temporary .body selectors.
Per the comment, it's been a week. These selectors should be removed.

Change-Id: Ifebb7939596827fc8ade7213f3acf6bf80eebb40
2021-03-24 13:53:48 +01:00
jenkins-bot d8750377f3 Merge "Drop unsupported skin CSS classes" 2020-10-05 19:32:55 +00:00
Volker E b23a809c44 [docs] Add support note to linear-gradient fallback
Change-Id: I9db03e4f2a0fe3eb52aeb9273f871150d2c93375
2020-10-05 18:41:26 +00:00
jdlrobson 89fee04f0b Drop unsupported skin CSS classes
Drop support for vectorMenu, vectorTabs and
vectorMenuCheckbox, body, menu selectors in preference
for standard selectors.

This change will impact a large amount of user scripts/styles but should
not impact any gadgets.

These classes were kept around for user scripts and styles however are not
needed internally. As we transition to a more maintainable skin menu
system, it is time to lose these selectors even though this will cause
disruption.

Vector now will use the mw-portlet class rather than the vector-menu
class in its own CSS styling, however it keeps the other classes to
allow differentiation of the different types of menu.

Changes to test: Previously the tests assumed all portlets were empty
when checking the classes. This is very rare, so its better to check
the classes of non-empty portlets, so several tests are updated
accordingly to drop the emptyPortlet class.

Bug: T262092
Change-Id: I1824335eb47d613c2a4804ec1f1106c0f4c16101
2020-10-01 19:50:24 +00:00
jdlrobson aa45edd2f2 Refactor: Drop legacy selectors
These are no longer needed. The classes remain where necessary for
gadgets but the CSS rules no longer need to apply to them.

Change-Id: I18afa15ddab75128463dc83c916e11436db0575a
2020-08-18 12:39:13 -07:00
Volker E 97566a026b [less] Amend subtle color to WikimediaUI Base default
Replace former non-base variables color with one from the standard
variables files in preparation for iit's usage in core and Vector.
Color is still confirming to WCAG level AA contrast ratio.

Bug: T254474
Change-Id: I06d981f05554b6429d11f19b8f5848ba5a7441a0
2020-06-15 22:20:41 +00:00
Volker E 3888b4075e Fix portal heading border in Safari
By using `rgba()` instead of `transparent` the color gradient
calculation works as expected in Safari as it does in all
other browsers.
Also using same distance 33%/66% for gradient start and end.

Bug: T254489
Change-Id: I64ec6aa51a9ea931a2351c9c7a9ffaf28c8d130b
2020-06-08 14:02:09 -07:00
jdlrobson e048c2a729 Refactor: Simplify and standardize menu definitions
* Standardise the menu markup. This means all menus in Vector will now
be wrapped in a div and will have a heading.
* All menus now have the vector-menu class. Styles specific to personal tools
are moved to layout since these are concerned with placement.
* The ul class will always have menu class.
* emptyPortal class is generalised into vector-menu-empty for consistency
with other classes and moved from common.less into Menu.less
* Standardise hooks - BaseTemplateAfterPortlet can now be run on any
menu.

Changes to HTML:
* lang and dir attributes are moved from the h3 up to the div element
.vectorTabs, .portal(s) and #p-personal now has hidden span element inside h3
* for non portals ul.menu" is now wrapped in a div.vector-menu-content

This change does impact the following CSS selectors which will need to be updated:

I see no matches for these selectors in code search.

```
 #p-variants > ul
 #p-namespaces > ul
 #p-personal > ul
 #p-views > ul
 #p-cactions > ul

```
Using global-search.toolforge.org I see one match
for p-variants, 26 for p-namespaces, 30 for p-personal,
36 for p-views and 7 for p-cactions. I see this as acceptable
breakage provided a user notice is sent out which it has been
(T252447)

Bug: T249372
Change-Id: Id59234aa6b822a24848386bdc04d8d7ed37ca145
2020-05-12 15:17:38 -07:00
jdlrobson 9f2ca0d072 Refactor: Portal is also a Menu
To complete the refactor, the Portal is also refactored
as a Menu using the getMenu function.

An old code path supporting portals outputted by hooks with
strings is marked as deprecated to simplify this code in future.

array-portals-first -> data-portals-first (the value is not
an array)

Changes:
* $this->getLanguages and  $this->getToolbox() always returns an array (see BaseTemplate)
but we previously supported portals made using raw HTML. Let's move away from that
behaviour and deprecate it.
* Hooks are moved into buildSidebarProps and marked as deprecated where possible
(SkinTemplateToolboxEnd). SidebarBeforeOutput can be used instead.

Bug: T249372
Change-Id: I2549af3e24e5d51c09e9a88ca50a0d9b2e154c3f
2020-05-07 16:56:59 -07:00
Renamed from resources/skins.vector.styles/Portal.less (Browse further)