Commit graph

2278 commits

Author SHA1 Message Date
jdlrobson 41d30615a2 [modern] Usability improvements to dropdown
* Don't reveal the menu on hover
* Don't flip the dropdown arrow when open
* Menus close when clicked outside

Bug: T275681
Change-Id: I36f5c46422725a935c962be3194fd37bde1fa769
2021-03-07 18:59:41 +00:00
jdlrobson c9c00e71b0 Disable margin in ext.uls.compactlinks module
On beta cluster, ULS is adding a margin to the language button
meaning it is not vertically aligned.

Follow up to ac62386909

Change-Id: I4b85c391543078da7ef813cf4ddaf30d92be3b8d
2021-03-04 23:25:55 +00:00
jenkins-bot e827eb0518 Merge "Languages should not appear in side bar on modern Vector special pages" 2021-03-04 00:04:51 +00:00
jdlrobson 0d2e38375c Languages should not appear in side bar on modern Vector special pages
Follow up to 52edeee

Bug: T273144
Change-Id: I22b33d2090dcd814658ecc2f155d86a5b1791fc3
2021-03-03 22:48:00 +00:00
jenkins-bot cf187653a8 Merge "Correct the height of the language button" 2021-03-03 19:53:23 +00:00
jdlrobson ac62386909 Correct the height of the language button
In wvui quiet buttons have a minimum height of 32px
Given the importance of vertical alignment, here inside Vector
seems the best place to define this.

Bug: T268241
Change-Id: I95b61a0c239ccfb7fa1b2ddaa6980ad2737e8f26
2021-03-03 10:03:17 -08:00
jdlrobson 1d01f70e32 Refactor: Separate Language button code into its own JS file
Having this outside the init function makes the code more
easy to understand.

Change-Id: I6bdcb385738ceb986e21075b006db40567386e7b
2021-03-03 00:13:45 +00:00
jenkins-bot 9bdd6c0130 Merge "[icons] Amend 'search' icon" 2021-03-02 18:40:52 +00:00
jenkins-bot 175723f2e5 Merge "Disable language button on certain pages" 2021-03-02 08:04:34 +00:00
jdlrobson 8d8e2d85e6 Language button is quiet with focus, active and hover states
* Add mediawiki ui button styles to Vector and convert language
button to a quiet button
* Restore the arrow for language button with ULS
* Vertically align button to first line of header
* Add a storybook entry for LanguageButton

Additional changes:
* Fix issues revealed by storybook - menu dropdown should
reset generic typography rule for `ul` tags
* Allow quotes usage in storybook without disable rule

Bug: T268241
Change-Id: I483350084fb46a51c50af6aab78c62db6d02df89
2021-03-01 20:01:45 +00:00
jdlrobson 52edeeea1c Disable language button on certain pages
The logic is based on the existing logic for the "Add language links"
however with the additional constraint that the page is not a special
page.

To avoid multiple expensive calls to getLanguages method,
the getLanguagesCached method is introduced.

Bug: T273144
Change-Id: I1085efca1e10c9b6f1305c2238664e0b2ec69123
2021-03-01 18:03:26 +00:00
Translation updater bot b97ff7e827 Localisation updates from https://translatewiki.net.
Change-Id: I203577c22c2a617d033890a3ab206cb183f679a4
2021-03-01 08:57:06 +01:00
Umherirrender ee4b7fb9b5 build: Updating mediawiki/mediawiki-codesniffer to 35.0.0
Change-Id: If3ede1c45ba7cbbcd2ed91ff600d4c2396087130
2021-02-26 23:21:17 +01:00
Translation updater bot 763ba39a09 Localisation updates from https://translatewiki.net.
Change-Id: I3a039232b53274efb9f648731e09f4309bae7f19
2021-02-25 08:41:01 +01:00
Jan Drewniak d8bdba0026 Reorganize layout variables
Reorganizes the variables into sections in layout.less.

Also removes a few variables that were only used once for the calculation
of other variables (e.g. `@min-width-container-base`,
`@margin-horizontal-sidebar-button-icon-ems`) as well as
variables that were just multiplied by 2, e.g.
`@padding-horizontal-page-container-total`.

Change-Id: I4a3fc3111f7983a55b7992bee09c03a7ab4092b8
2021-02-24 22:23:07 +00:00
Volker E 35ce451498 [icons] Amend 'search' icon
Following Design Style Guide guidelines slightly decreasing icon on
canvas in accordance with designers.

Bug: T213580
Change-Id: I0ea2426f4e0873b9aac12fe2143203a765e42c3a
2021-02-23 13:01:59 -08:00
Translation updater bot 31a9e6feff Localisation updates from https://translatewiki.net.
Change-Id: If1426f962e1edb124851d753de8ba3063eedd419
2021-02-22 08:57:55 +01:00
Translation updater bot 159ad59806 Localisation updates from https://translatewiki.net.
Change-Id: Ib9b48576d85a71238024974a0076c4f55491ff0a
2021-02-19 08:34:47 +01:00
Translation updater bot 10364af3b2 Localisation updates from https://translatewiki.net.
Change-Id: Ic190490375dd9730946d2bd1aaf95b0f836b9985
2021-02-16 08:33:34 +01:00
Translation updater bot eb28fba3e7 Localisation updates from https://translatewiki.net.
Change-Id: Ica3fb28f0c32ce99f60156fd54ca6f94acbb4b3a
2021-02-15 10:10:20 +01:00
Nicholas Ray f549eb58d2 Replace mediawiki.util dependency with mediawiki.Uri in skins.vector.search module
I can't find any usages of `mw.util` in the Vector search code, but
there is a usage of `mw.Uri` in instrumentation.js.

Change-Id: I358295301403bc33be3a183392ed9e39c2378f6c
2021-02-12 11:23:59 -07:00
jdlrobson 4035d3575f Move resource loader definition to skin.json
Now `wvui` is in core, there is no need for this to be conditional.

Depends-On: I91db16946e7ea46f69a6b57b116962f77ce3cd20
Change-Id: Icceaefc63d227ca772a986ad2c6ce28cbdb0a7d6
2021-02-12 01:49:21 +00:00
jenkins-bot fdd713b244 Merge "Search results should overlay personal tools" 2021-02-12 01:36:06 +00:00
jdlrobson a4f126a76f Search results should overlay personal tools
This removes the problem with the Echo icon being visible on top
of search when the browser is resized to 500px with Echo installed.

Change-Id: I6aba17cb85979617a55e9879518eacdb916ac18b
2021-02-12 00:53:50 +00:00
jdlrobson daf6a798c4 TypeError: data.collapseCondition is not a function
Lots of logspam relating to this error. If data is {}
this error will be thrown which is possible given the
code.

This is possible if a gadget rewrites tabs

e.g.
$( '#p-views ul' ).remove().append($('<ul>'))

Change-Id: I0d3f391fccdb38758fb3cfd7e84889143d479b1e
2021-02-11 21:19:28 +00:00
jdlrobson 6f16af4212 Round up to nearest kb
The precision we are currently using leads to lots of issues with
core changes and as we grow the new vector.

I think checking in at every 1kb margin seems like a better state
of play for now.

Bug: T270883
Change-Id: Iaa4fb44a471777fdebfb906c465ea67b5bdb3903
2021-02-11 16:51:41 +00:00
jdlrobson 591fd316cf Switch back to skin version 1 for now
Per conversation with Bartosz this should have been done in an
explicit commit and probably needs better messaging.

Change-Id: I63f286d1c22dcb7d0bad956f01e8482e5111face
2021-02-11 14:20:09 +00:00
Translation updater bot febecb5db2 Localisation updates from https://translatewiki.net.
Change-Id: I8cc97b71de43e3ddde1fd726bb7908dbf04d8e89
2021-02-11 08:43:52 +01:00
Jan Drewniak e1f2d2896f Convert max-width layout to relative units
The max-width layout uses a mix of ems and px.
the var `@max-width-margin-start-content` uses ems to define a max
width breakpoint, however the workspace and content containers
`@max-width-content-container` are defined in px.

This leads to layout bugs like the sidebar ovelapping when the base
em unit is not the assumed 16px.

This patch changes the layout px units to ems.

(There should be no visible difference at the assumed 16px font size).

Bug: T270104
Change-Id: If8f284dc5e27c8e1c10f3a6897b7a5e4b8bb357d
2021-02-10 22:58:14 +01:00
jenkins-bot b4a8287589 Merge "Simplify responsive Vector implementation" 2021-02-10 14:29:21 +00:00
jdlrobson 68b989efb6 Simplify responsive Vector implementation
Vector has a wgVectorResponsive flag. This adds a ResourceLoader
module as well

I propose the configuration is repurposed to disable the min-width
on Vector and enable the viewport tag. This will allow us to use
test.wikipedia.org to test Vector at lower resolutions in future
as well as provide a suitable option for 3rd parties wanting to run
a responsive version of Vector that can be opted into using:

```
$wgVectorResponsive = true;
$wgVectorDefaultSkinVersion = '2';

```

As part of this change, the default skin version is set to 2, in
preparation for the next MediaWiki release. Note on Wikimedia wikis we
explicitly set this version so this will not impact any of our deployed
wikis.

Bug: T242772
Change-Id: I878920f49d18c5d60efd3ac45dc7912d2c62086e
2021-02-10 13:05:14 +00:00
Translation updater bot 28388de910 Localisation updates from https://translatewiki.net.
Change-Id: I0910a73a0735d78bed4122b1f61bc86b54e874dd
2021-02-10 08:40:50 +01:00
Translation updater bot e220bc9e74 Localisation updates from https://translatewiki.net.
Change-Id: Ic4ff4f00e898e60b12e6b52ee8c85be61b8592c6
2021-02-09 08:44:05 +01:00
Nicholas Ray b8f1d8c8a5 Bring back hoverability of dropdown menu (e.g. "More" tab)
Looks like I72165ba3784da3fcc9d1dd7076b3a6c96e670a2f removed the hover.
This brings it back.

Note this also makes the language button hoverable and will probably
need an additional specific selector (although the language button has
not been enabled anywhere yet)

Bug: T273143
Change-Id: Iac0539313eca5ba8d7ac165d31d2c028e803eacc
2021-02-08 23:11:43 +00:00
jdlrobson 0e0ec99c81 Language button - design fixes
* change color to #202122 (currently it's #54595d)
* padding-right for button text should be 30px (currently it's 40px)
* language icon seems to be displaying at 21x21px (should be 20x20px)
* language icon's margin-right should be 7px (currently is 14px)
* the down arrow should be 10px from the right edge of the button (currently it's 8px)
(requires core change in 661497 to apply)
* increase font-size to 16px (currently it's 13px)
* add a max-height of ~65vh (or something similar)
* add overflow: scroll
* add a border-top (since the menu is wider than the button)

Bug: T268241#6805123
Change-Id: I8891556cb82450db77b90837eeeb72ac78926e29
2021-02-08 19:03:02 +00:00
jenkins-bot 0e0d04b92b Merge "Add mw-interlanguage-selector class to language button & hide menu/arrow when appropriate" 2021-02-05 23:22:01 +00:00
Nicholas Ray e3abac06a6 Add mw-interlanguage-selector class to language button & hide menu/arrow when appropriate
* We add the `.mw-interlanguage-selector` class to the
.vector-menu-heading in the server rendered HTML. `ext.uls.interface.js`
later attaches a click handler to this selector that loads the rest of
ULS.

* We hide the dropdown arrow for js users and only show it again if
ext.uls.interface module isn't installed or is not being loaded.

* When the `ext.uls.interface` module has been loaded, we hide the checkbox
and checkbox hack menu in favor of showing the ULS popover.

Additionally:

* Adds '.vector-menu-heading' class to menu headings.

* Change h3 selector to `.vector-menu-heading`.

Bug: T273232
Change-Id: I6f4572c16ca4096dcda3aac4d585003b93dcccfa
2021-02-05 15:03:07 -07:00
Umherirrender 44cdd3290d build: Remove maxWarnings: 0 from eslint configuration
This interferes with LibUp's ability to automatically downgrade newly
failing errors to warnings and is a deviation from the settings we
typically use.

Bug: T263922
Change-Id: Ia44038a1df1052f633ce18ac6f35253e870ab0c6
2021-02-05 20:16:27 +01:00
Translation updater bot d74ab5ce5c Localisation updates from https://translatewiki.net.
Change-Id: Ia940248550ab2f7ef3a2698e3b10a5b2814f9118
2021-02-05 08:49:16 +01:00
jenkins-bot 3cb3b08ee5 Merge "Style the language button" 2021-02-05 00:06:21 +00:00
jdlrobson 98e7bce753 Style the language button
For now the core button mixins are used. In the longer
term we should aim to leverage wvui.

Bug: T268241
Change-Id: I334af039567c52462bcb4c15f07242c6de8eeace
2021-02-04 23:02:48 +00:00
jdlrobson 36eda30e0f Language button should use a new id to identify itself
This breaks existing integrations with extensions which will need
to be revisited as part of this redesign.

Change-Id: Iabf627e6926d4574f27448400d76210386ebdaa2
2021-02-04 20:27:13 +00:00
Translation updater bot d50eef9cf6 Localisation updates from https://translatewiki.net.
Change-Id: I678abaa7e2df7f484e823cebfb2c745e7af17514
2021-02-04 08:45:50 +01:00
jenkins-bot 0c330185b1 Merge "Add language icon to language button" 2021-02-04 04:03:32 +00:00
jenkins-bot 497b0aad8a Merge "The label of the language button refers to the number of languages" 2021-02-04 02:59:48 +00:00
Jan Drewniak 5014c17570 Place indicators under page title
Fixes error in 03d61e12, indicators should be placed below
page title.

Bug: T248761
Change-Id: I61dcef0567373f28fd479b21ffa940a6e223ac16
2021-02-03 23:19:30 +01:00
jdlrobson f083eb2716 Add language icon to language button
The sidebar currently uses mw-ui-icon so we continue this
practice, however we provide a general rule to ensure all icons
rendered through it default to 20x20. This didn't impact the side
bar icon as that already specifies a height of 20px.

Bug: T268241
Change-Id: I6f8e8400da048a97cbf59c3e6ad918763fc91041
2021-02-03 15:38:30 +00:00
jdlrobson ef0ab0724e The label of the language button refers to the number of languages
Instead of "In another language" the button label will be
"0 languages", "1 language" or "X languages"

Bug: T268241
Change-Id: I293a1d5f4885f76cc5f62169ee24b52c234f9229
2021-02-03 15:34:43 +00:00
jenkins-bot 4b171bf74f Merge "After portlet is included in display of menu dropdown" 2021-02-01 11:02:44 +00:00
Translation updater bot 6a6e95d404 Localisation updates from https://translatewiki.net.
Change-Id: I5f0cd5aefe32a7b6d40b6c490f1acd8819e72518
2021-02-01 08:51:54 +01:00