Commit graph

2548 commits

Author SHA1 Message Date
Clare Ming 3362e62ef2 Add page title to sticky header
- Fade out after 500px.

Bug: T289814
Bug: T290596
Change-Id: Ice3054f417707261d7c06769cb92aa170cfadba1
2021-09-14 19:12:29 +00:00
Clare Ming 755f10cd0b Add user menu to sticky header
- Remove unused button, data from sticky header.
- Simplify template to leave sticky user menu placeholder.
- Update js to clone user menu with new ids.
- Include gadget-injected items in sticky user menu.

Bug: T289816
Change-Id: I23fde537efc2a66a2df22cd2633fbab034b73eb6
2021-09-14 12:57:08 -06:00
jdlrobson ad5c127239 [Storybook] Add Header component
* Moves screen variables relating to Header to Header
* Adds a Header storybook entry
* Moves data-logo from Logo template to Header.mustache
* Updates UserLinks to use USER_LINK_PARTIALS
* Renames confusing SearchBox story names
* Updates package.json to use a static folder.
* Use mediawiki.org for sourcing mw-ui-button and mw-ui-icon styles
since deploys there come earlier
* Removes usages of ID selectors

Change-Id: I0e158fa7e62c56a50cfff497d75f0808effd1eed
2021-09-14 18:33:10 +00:00
bwang 687c6a50d8 Improve heading structure and heading semantics by removing redundant headings and labels for modern Vector
- Apply aria-hidden to h3 in Menu template, ensuring the nav landmarks are still properly labeled, but no longer reading duplicate labels to screenreaders
- Remove "Navigation menu" h2 element, which is not needed as the nav landmarks are already labeled
- Remove searchbox h3 element, which is redundant with the search landmark
- Scope all changes to modern vector

Bug: T265993
Change-Id: I4e5da7a0699160fa57234bd126b75243e0157778
2021-09-14 10:47:05 -05:00
Nicholas Ray 326e11dfbf Scope styles that should only apply to the main header to Header.less
We have many styles related to the layout and visibility of search that
are only useful in the context of the main header. Since many of these
elements have classes that will also be in the sticky header, we should
scope these rules to the main header so that we avoid an uphill battle
of styles trying to override eachother.

Additional changes:

* We previously had a mix of #p-search and .vector-search-box selectors
for the same element in the CSS. Header.less now only uses
.vector-searchbox to avoid specificity wars.

* Removed nearly all of the #p-search rules previously found on L147 -
L167 in screen.less after observing nothing relatively bad happening
when they were removed.

Bug: T289724
Change-Id: I2e6c269e29717cd20d8acfaddc3631ea1b8fedfa
2021-09-14 15:34:05 +00:00
Translation updater bot 1a56dbb8c4 Localisation updates from https://translatewiki.net.
Change-Id: I6ca0de5f93273df25d24e531c7654eefaf04b826
2021-09-14 08:34:45 +02:00
Volker E f68dab62a6 Remove obsolete code for non-supported browsers
As we continue to live with software like 2010 wikitext editor for
a chunk of our users in foreseeable future, let's at least remove some
obsolete code sent down the wire.
Note that I haven't touched this code as part of If51f20137a00, but
when thinking about this again while doing a final code search
it seems appropriate to remove this the highly customized code
here in contrast to normal 'library' styles.

Bug: T258766
Change-Id: Id4993dcb5b5be6a399800d9c07e26ebe145a8372
2021-09-13 15:24:11 -07:00
jenkins-bot 6a0607afdf Merge "Inherit link colors from core variables and override @color-link-new" 2021-09-13 18:23:06 +00:00
jdlrobson 0238078aaf Inherit link colors from core variables and override @color-link-new
Vector should use the variables defined in core for red links

Bug: T288739
Depends-On: I799b46664f01c5631fb9d1ae4f5c43caeeaac818
Change-Id: Idcf5a54d76a1343d3407821b8a5b8d8ece8af9d0
2021-09-13 17:56:26 +00:00
jenkins-bot 82832b137a Merge "Remove disable dropdown behavior" 2021-09-13 07:05:25 +00:00
Translation updater bot 95faa643b3 Localisation updates from https://translatewiki.net.
Change-Id: I1b3d26c3e5be0134b3189a1e344c64576cc8ed03
2021-09-13 08:32:47 +02:00
libraryupgrader 1a54f2daa8 build: Updating composer dependencies
* mediawiki/mediawiki-phan-config: 0.10.6 → 0.11.0
* php-parallel-lint/php-parallel-lint: 1.3.0 → 1.3.1

Additional changes:
* composer.json: Updated phpcs command in composer test (T280592).
* composer.json: Added phpcs command to scripts (T280592).

Change-Id: Icdd62e1e68c64f0137b11d1aeae5def531abac1d
2021-09-10 22:54:21 +00:00
Translation updater bot 2cbaa646ac Localisation updates from https://translatewiki.net.
Change-Id: If7f5871baeb47a694bd48bcae751169d262f4888
2021-09-10 08:17:16 +02:00
jdlrobson 31dba307ed [refactor] SearchBox uses Icon template partial
Change-Id: I8ff49b85dd2151618e48251e0fc38152a50ca381
2021-09-09 18:57:37 +00:00
Translation updater bot c97591189d Localisation updates from https://translatewiki.net.
Change-Id: I6b26a9165a12862012099563ab072ebc48e97a64
2021-09-09 08:19:47 +02:00
jdlrobson 0be41f3414 [storybook] ButtonAndIcons should use Button template
Change-Id: I391cd6b3f9d167c1ff659bba6a5e12be7ff9a439
2021-09-08 19:32:31 +00:00
bwang 62149265e9 Add ULS to sticky header
- Rework Icon template into Button template to support all button variants
- Update ULS helper functions in SkinVector
- Update StickyHeader template to use the new Button template
- Update Storybook

Bug: T289815
Depends-on: Iba6cbbd6c6e48a1abfda342421822e3ff2715362
Change-Id: I718b3e05a988e20beb82d599e4168d497fa4c299
2021-09-08 12:39:55 -05:00
Translation updater bot e33d2aa335 Localisation updates from https://translatewiki.net.
Change-Id: Ia025e615230f23d19230723f5e022a41a9adb37c
2021-09-08 08:11:54 +02:00
jenkins-bot 6a1783eacc Merge "Make sticky header functional/visible" 2021-09-07 22:38:24 +00:00
jenkins-bot 084aec1e38 Merge "[storybook] Document button usage and update broken stories" 2021-09-07 22:34:14 +00:00
Clare Ming e639c9287d Make sticky header functional/visible
- Show sticky header after bottom of first h1.
- Hide sticky header before bottom of first h1.
- Add media query for reduce motion preference.

Bug: T290101
Change-Id: I2b1ecd31ac360a1ef5bf2f016978d6e0665a316c
2021-09-07 16:10:21 -06:00
jdlrobson 3ed167f318 [storybook] Document button usage and update broken stories
* add stories for buttons and icons using wvui and mwui
* Update user link stories
* Add the vector-menu-dropdown-noicon class to more and
variants menu
* Fixes the language button story and simplifies its code.
* Updates Hooks::makeButtonIcon to Hooks::makeIcon which
reflects the method purpose more. It doesn't output button
classes.

Bug: T289514
Change-Id: Ifd750da0c0181ec56f39ff00d653e88bfc848038
2021-09-07 21:23:33 +00:00
jenkins-bot 9e9f3ec0cd Merge "[refactor] Remove common UserLinks code" 2021-09-07 16:31:18 +00:00
jdlrobson ff8e29d240 [refactor] Remove common UserLinks code
There is no common UserLinks code. These styles serve
legacy only.

Bug: T288852
Change-Id: Ied191bc1bc5dbd48491fa285b5def265c7d5262d
2021-09-07 15:37:13 +00:00
Translation updater bot df4717abec Localisation updates from https://translatewiki.net.
Change-Id: I70261e7ae11ef5b2e20b1f8360b3bb4ad3c87b1c
2021-09-07 08:12:19 +02:00
Translation updater bot a4ec24d7bc Localisation updates from https://translatewiki.net.
Change-Id: I70b3f62ee9c448ce47f3308abd4aa1724a9b7993
2021-09-06 08:23:15 +02:00
libraryupgrader aaac2ba4b7 build: Updating stylelint-config-wikimedia to 0.11.1
The following rules are failing and were disabled:
* declaration-property-unit-disallowed-list

Change-Id: I5252d63ec939a711022844ed9e4c2d247e154820
2021-09-04 17:38:00 +00:00
jenkins-bot 9ffb6cb044 Merge "Restrict sticky heaader visibility" 2021-09-03 21:05:17 +00:00
Clare Ming af317dbc58 Restrict sticky heaader visibility
- Hide if javascript disabled.
- Hide at lower resolutions.

Bug: T289714
Change-Id: I0c669c7fc46fda7bf5055d20cc1cd54d472a9330
2021-09-03 14:19:24 -06:00
jdlrobson 0a47c667d8 Skin style for ULS no longer needed
Fixes upstream in ULS (Ie9e30af5468aea9803d77c9a36e480ba2b2e86a0)
mean these are no longer necessary

Bug: T289630
Change-Id: I1edee874a42b070bc319648496ae80a01b6365fb
2021-09-03 20:13:24 +00:00
jenkins-bot fed987d079 Merge "Simplify how we generate icons and button classes in Vector" 2021-09-03 19:54:03 +00:00
jdlrobson b88f2970f7 Simplify how we generate icons and button classes in Vector
- Separate icon classes from button classes in user links/language
- Upgrades the personal tools language button preference to
a mw-ui-button with icon
- Adds a generic selector for dropdown menus without an icon
- Cleans up user links CSS now mw-list-item class is available
- Removes icon hack CSS

Bug: T289630
Bug: T283757
Change-Id: Ib518858e06549f252d73d57fd4768f446cc561b9
2021-09-03 19:25:31 +00:00
jenkins-bot 70c43d38d4 Merge "Add userGroup to skins.vector.icons" 2021-09-03 18:16:23 +00:00
Martin Urbanec 71539a7cc6 Add userGroup to skins.vector.icons
Will be used as part of Growth's mentor dashboard.

Bug: T289054
Change-Id: I0055890dcdb451e60b7176069bfcee8f3c8fa886
2021-09-03 14:37:29 +02:00
Translation updater bot 7074d990a6 Localisation updates from https://translatewiki.net.
Change-Id: I814d24544607b4c71a71ab3e58c6e0b181110eda
2021-09-03 08:16:26 +02:00
jenkins-bot 2efbbc7af8 Merge "Do not hard code Special:Search" 2021-09-02 21:53:10 +00:00
jdlrobson 520dfd2260 Do not hard code Special:Search
Bug: T287540
Change-Id: I234acbaa2cce8f43653507b4298090c50451699d
2021-09-02 20:20:56 +00:00
Nicholas Ray 1ab4600e4d Add 'is-language-in-header' key back in
Looks like this was an unintentional deletion from

I16223ce849267e718aad22b8a24b2327332ac8b7

Change-Id: I56350d7e936b4d179c1bd12376ffebf295897a99
2021-09-02 13:56:59 -06:00
Translation updater bot 877e001ea9 Localisation updates from https://translatewiki.net.
Change-Id: Ib2edf09d9700c012eead088de575bbd2a1a1fc6a
2021-09-02 08:28:23 +02:00
Clare Ming 21c45837ef Spoof aria-expanded for dropdown menus using checkbox hack
- Mimic expanded/collapsed state of menu without JS.
- Update template, styles, i18n to make accessibility of dropdowns accurate.

Bug: T253650
Change-Id: I58ecebf520d6107554dbb81470dee69a5d4a7f1d
2021-09-01 16:12:26 -06:00
jenkins-bot 94d135ecfa Merge "Build the sticky header skeleton" 2021-09-01 20:35:21 +00:00
jdlrobson 8657171471 Build the sticky header skeleton
The sticky header is currently disabled unconditionally
and nothing is wired up, with placeholders for data and
functionality which will be added in future.

Bug: T289716
Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-09-01 12:32:31 -07:00
jenkins-bot c34ba94a94 Merge "Set responsive max-width on username in header" 2021-09-01 15:01:46 +00:00
Translation updater bot 3f5abe98e0 Localisation updates from https://translatewiki.net.
Change-Id: I880ec5478d26f3b2088f2212566661ca3eb5e1bd
2021-09-01 08:18:13 +02:00
Nicholas Ray 5ca9d00d55 Set responsive max-width on username in header
Per T287522#7295558, the username should have a computed max-width of
200px above 1200px and a max-width of 155px below 1200px.

Additional changes:

* Use flex-wrap: nowrap on header instead of wrap. I think the former
may have been an unintended consequence of the consolidated links
feature flag clean up.

* Use core's text-overflow mixin for both the username and the usermenu
items

* Change the user menu's max-width to use relative units

Bug: T287522
Change-Id: I536e6371f85ccde75673af46c7667eb447eff081
2021-08-31 17:06:35 -06:00
jdlrobson c8dd4e9ed1 Remove disable dropdown behavior
Now that we bind the ULS dialog to the checkbox element,
(see c08ae11) the default behaviour of the checkbos is prevented,
so it is impossible for the dropdown to ever
be shown when ULS is enabled and clicked so this code no longer
serves any purpose.

Depends-On: I97a69c30b27cb1ded06451389e086229561c3589
Change-Id: Ic9d03dea12ee8bb2d7430eccd70e4343e3805d36
2021-08-31 20:53:41 +00:00
jenkins-bot 3ff5e1b6a4 Merge "Update ULS button states to be consistent with other quiet buttons" 2021-08-31 19:44:15 +00:00
bwang c08ae1152e Update ULS button states to be consistent with other quiet buttons
- JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox
- JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style)
- JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states
- Old styles and skinStyles are removed

Bug: T283757
Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556
2021-08-31 10:59:59 -05:00
Translation updater bot c2f7dd92d9 Localisation updates from https://translatewiki.net.
Change-Id: I0e63c84b56d3b8f3c354318048b7714f43c7f30d
2021-08-31 08:17:46 +02:00
Nicholas Ray a35b21d2cf Correct positioning of search icon before WVUI loads
WVUI sets the icon as `left: -11px` [1]. Vector should do the same to
ensure the icon doesn't move when WVUI loads. Also set top and bottom
properties to zero so that the height of the icon's container is the
same as in WVUI (32 px).

[1] https://phabricator.wikimedia.org/F34622194

Change-Id: I73fa55f9013dc1bdd51581d357109d4817638d91
2021-08-30 16:59:12 -06:00