Commit graph

1411 commits

Author SHA1 Message Date
jenkins-bot e257e626a6 Merge "Consolidate sticky pinned element styles under .vector-sticky-pinned-container class" 2023-04-24 19:38:38 +00:00
bwang bae8b3d717 Consolidate sticky pinned element styles under .vector-sticky-pinned-container class
Bug: T335155
Change-Id: I988f3c7e70d602b4dbd5fd2cbd124b86b104caa7
2023-04-24 19:08:49 +00:00
jenkins-bot 399116cabe Merge "popupNotification Javascript tests" 2023-04-21 17:19:53 +00:00
Jan Drewniak bd05ff4ae5 Add initial Zebra design update for page layout
Implements the zebra design update via the
skins.vector.zebra.styles module.

Refactors:
- Moves common variable and mixin imports from
individual files to skin.less file.
- Applies font-sizes to menu containers instead
of individual menu links.
- Adds mixins for dropdown and content-box styles.
- Unifies padding for pinned and unpinned menu states
  (including TOC).

Bug: T332600
Change-Id: I3d49095d84fa205cb5dcc889574133f42f1fd4ea
2023-04-21 11:02:56 -05:00
Moh'd Khier Abualruz ecdf2ced2c popupNotification Javascript tests
Bug: T333345
Change-Id: If65a86b2d6a8345f127a0803fd64cfa9f13a8630
2023-04-20 14:09:33 -07:00
Nicholas Ray 630d47792a Fix InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList'
Bug: T335149
Change-Id: I9dad78af21ca7ee272a3661f5869e6337909dc05
2023-04-20 13:44:36 -06:00
Nicholas Ray c61d57c72a Fix TypeError: trigger.attr is not a function
Code was assuming jQuery.Object when it is now an Element.

Bug: T335148
Change-Id: I4755607f991889468294e022015a6a7e4becbb6c
2023-04-20 13:05:21 -06:00
Jan Drewniak 3cea6d4132 Scope styles related to zebra feature flag
This change scopes the styles related to the Zebra
update by wrapping the imports in a top-level feature
flag selector,
i.e

.vector-feature-zebra-design-enabled {
    @import "./screen.less"
}

To account for this extra selector, ampersands are
added wherever the html element is targeted in the
affected files. This applies to both zebra enabled
and disabled files.

getDefaultModules() is used in SkinVector22.php to
conditionally load the new skins.vector.zebra.styles
module when the feature is enabled.

Bug: T332600
Change-Id: I5e673df383ff31f296010f982e4188c82f095590
2023-04-19 23:09:08 -04:00
Jan Drewniak 5852e320a3 Create skins.vector.zebra.styles module
Creates a new skins.vector.zebra.styles module that
will hold style modifications for the Vector Zebra update.

Affected files are copied from skins.vector.styles
without modification (at this point) to improve
revision history in git.

The new module should compile without error and existing
styles should not be affected.

Bug: T332600
Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:12:53 -04:00
Jan Drewniak da92ecf7cc [Refactor] Prepare existing styles for zebra module
This refactor seeks to make it easier to separate
feature flagged styles by wrapping the imports in
a top-level feature-flag selector, e.g:

    .vector-feature-zebra-design-disabled {
        @import './layouts/preZebra.less';
    }

This change does the following:
- Moves all file @imports to skin.less
- Removes unnecessary @import from MainMenu.less
- Moves .mixin-page-container() to mixins.less
- Moves @min-width-supported variable to variables.less
- Scopes existing Zebra styles at the skin.less file @import level
- Removes selectors ending with ampersands

The last changes makes it easer to reason about changes
specifically when wrapping entire file imports in a selector
since the ampersand ends up inheriting its value
from the skin.less file.

No visual differences are expected with this change.

Bug: T332600
Change-Id: Ife05e28ff38f9c5077e2d9eac653df656566e443
2023-04-19 18:53:11 +00:00
jenkins-bot 9e5bea1ff2 Merge "Add custom limited width popup" 2023-04-17 23:18:29 +00:00
jenkins-bot 81ffde7668 Merge "Forbid jQuery usage in Vector 2022" 2023-04-17 23:13:04 +00:00
bwang 4f76994970 Add custom limited width popup
Bug: T333601
Change-Id: I663d6a391aeeb05c27f2f2b8829c22325b528b39
2023-04-17 22:35:52 +00:00
jenkins-bot 5899cf25d6 Merge "Clean up leftover Sidebar CSS" 2023-04-17 21:27:57 +00:00
bwang 4698583307 Clean up leftover Sidebar CSS
- Delete unused CSS variables
- Move CSS variables to legacy
- Consolidate Sidebar.less into LegacySidebar.less

Change-Id: Idc47fda1c20fe3bbf3b9f1c1fcb889fe5b297aa4
2023-04-17 21:02:58 +00:00
Moh'd Khier Abualruz 592b33cc23 Page tools have long labels in certain languages
Bug: T332085
Change-Id: Ibdae716abc706267d63ffe25460b48fe44daf46b
2023-04-17 20:55:49 +00:00
Jon Robson 97a640945f Forbid jQuery usage in Vector 2022
Change-Id: I9d07acffa6f8133ec3e44ceba3d1fa5b27b81258
2023-04-17 17:20:59 +00:00
Jon Robson 080b6958e8 Use modern ES6 methods
* Prefer dispatchEvent to $.trigger
* Prefer Object.assign to $.extend
* Prefer URLSearchParams to $.params
* Prefer getAttribute / properties to $.attr
* Prefer document.querySelectorAll over $.find

Change-Id: I5f4464e5bfa11b401e663f0b8761fc6092380627
2023-04-14 13:38:38 -07:00
Jon Robson 2622472983 Point out the limited width control
The limited control will be pointed to on page load
When wgVectorPageLoadIndicator is set to true (defaults
to false)

Clicking the button should show the indicator.

Additional change:
* Update config.json to reflect new state
(Follow up to 28ada2dc)

Bug: T333601
Change-Id: I188ed7226b9a1530e54b1aaa80caa0830bf73633
2023-04-14 17:15:56 +00:00
Jon Robson 10033b294e Drop ES5 compatible code
Drop usages of $.closest in favor of ES6 closest

We also no longer need to check for whether closest is available
now that we do not need to worry about ES5 code.

Change-Id: I2442a4f69f8181dd761ca7ac418839cfca26a36f
2023-04-13 00:27:22 +00:00
Jon Robson 2499e834bb Remove Eslint disable and TypeScript ignore rules, bump coverage
Follow up to 87dd101a
* bump coverage to reflect improved test state
* remove ts-ignore statements
* Drop eslint-disable-next-line compat/compat rules in ES6 code
* Drop TypeScript checking on Jest files
* Identifies an existing usage of ES7 includes method in place
where ES6 browsers need to be supported.
* Update App.vue booleans to default to false. Note this doesn't
impact our usage of the search app as we always pass these values
in.
* Drop unused eslintEs6.json configuration file

Change-Id: Ib6f1ef77bf4e27ecdcc54b5fb963818437f8195c
2023-04-13 00:20:44 +00:00
Jon Robson d4a7fb6479 Rearrange setupIntersectionObservers
Update setupIntersectionObservers so it only contains code
that uses observers. Other code is moved to the skin.js entry point
along with other features.

Change-Id: Ia11b4e07f899426687c616ce2054e0df9d36ab7c
2023-04-12 17:39:36 +00:00
Jon Robson 87dd101a69 Consolidate and fix eslint errors, dropping ts-ignores
* Upgrade @wikimedia/types-wikimedia to allow us to drop several
@ts-ignores
* Merges eslint rules now that ES6 is default everywhere
* Runs autofix command
* Fixes various prefer-const errors

Change-Id: Iee5bcb93f10a76d80dbeec813f6387c13438263e
2023-04-11 16:56:31 -07:00
Jon Robson c3e57e0ecd Merge skins.vector.es6 into skins.vector.js
With T178356 ES6 is the default, so these can now be
managed in the same module. Keeping them in the same module
will hopefully allow us to make more optimizations on the long
term.

Change-Id: I3fe9e50143b85b4cdc3d9171a60c3720a7c26b4b
2023-04-11 23:18:46 +00:00
Jon Robson 28ada2dc78 Refactor: Separate A/B test configuration from site configuration
Making it easier to add configuration variables to JavaScript
in future. This will be used for the pointer indicator.

Change-Id: I65396a3867e7e92d7385ebaa573fb48105ecb9fd
2023-04-11 22:40:45 +00:00
Jan Drewniak 40130dbf5f Follow-up to 6e8a98ca removing checkbox.js
Removes checkbox.js and related styles as well
as rules for #mw-sidebar-checkbox which was removed
in a previous patch.

Bug: T332090
Change-Id: I168c1161a1d3365e79c2ff6b1c2ab5455f7c4c00
2023-04-06 01:01:21 -04:00
bwang 2bc51bef44 Clean up cached grid CSS from moving the Header
Can be merged after 04/07
Follow-up: I038fc17cbb88a29dbe8d7841b824761a91d38405

Bug: T332449
Change-Id: I8bfee300fe9d164143dbf1acac26015e9ca4df89
2023-04-05 23:29:05 +00:00
jenkins-bot 16dc80fdd1 Merge "Remove custom checkbox-hack implementations" 2023-04-05 22:52:40 +00:00
bwang ac73b57465 Follow-up: add border to zebra header
Bug: T332449
Change-Id: I93704a647b6c3d1dfd1741f223379019816a60e6
2023-04-05 16:25:15 +00:00
bwang 628804871e Implement new zebra design for the header under the flag
Bug: T332449
Depends-On: Ia21c14f72631e607e0d626408557eacb83529a03
Change-Id: I9a7d6fac7c44be1983281a44766d34a16f515b40
2023-04-04 21:27:31 +00:00
jenkins-bot 4994a6df8e Merge "Adjust table of collapsing auto-collapse algorithm for articles with few top level sections" 2023-04-04 16:19:00 +00:00
Jan Drewniak 6e8a98ca8b Remove custom checkbox-hack implementations
Removes several styles that were used for
expanding/collapsing the table of contents at narrow
widths for non-js users as well as the main menu
for no-js users.

Existing `.vector-menu-checkbox` styles address this
use-case with the addition of a display:none rule for the
two affected checkboxes.

Related to the Page Tools clean-up since these styles
were once scoped to the .vector-page-tools-disabled
class.

Bug: T332090
Change-Id: I13efd4a87bacecb0e9f5a5e44d5e15861d632c62
2023-04-04 10:01:09 -04:00
jenkins-bot 5d4115fdcd Merge "build: Updating npm dependencies" 2023-04-04 13:33:32 +00:00
Moh'd Khier Abualruz 098811f200 Adjust table of collapsing auto-collapse algorithm for articles with few top level sections
Bug: T333021
Change-Id: I9eef0fc0715f5f1917c205b7b7987b0ed76f31a2
2023-04-04 10:35:12 +02:00
Umherirrender d2b8ce8a3e build: Updating npm dependencies
* eslint-config-wikimedia: 0.22.1 → 0.24.0
* grunt-banana-checker: 0.9.0 → 0.10.0
* @wikimedia/codex: 0.7.0 → 0.8.0
* @wikimedia/codex-icons: 0.7.0 → 0.8.0
* @wikimedia/codex-search: 0.7.0 → 0.8.0
* @wikimedia/mw-code-qunit: 6.4.1 → 7.0.0

Change-Id: I3982576a6e8e932efa0ae00be58af343b29ef59c
2023-04-03 23:44:22 +02:00
bwang 2121a05012 Fix sticky header search
Follow up to fix bug introduced in: I038fc17cbb88a29dbe8d7841b824761a91d38405

Bug: T332449
Change-Id: I5cc6cabb766a744e103d48abc380dda509edc936
2023-04-03 19:23:13 +00:00
jenkins-bot 6a2204682a Merge "icons: Remove unnecessary code from SVG files" 2023-04-01 12:42:23 +00:00
thiemowmde f32daab81a icons: Remove unnecessary code from SVG files
The extra complexity provided by these SVG source code constructs is
apparently not needed. They look the same as before.

Change-Id: Iff2ef6b8549d182655b6eb1f3f93d0389e1b4c6b
2023-04-01 12:23:11 +00:00
jenkins-bot 206138f241 Merge "Remove custom sidebar config" 2023-03-31 23:28:01 +00:00
jenkins-bot edc75c5d8f Merge "Setup header and sticky header to be able to be full width" 2023-03-31 18:50:54 +00:00
Jan Drewniak 15be8a0340 Remove custom sidebar config
Removes configuration for
1. Custom sidebar pinning
2. Default sidebar visibility for logged in & anons

The first config is no longer necessary because
the main menu now uses the pinnable header for
showing/hiding and persisting it's state.

The second config is no longer necessary since
the Page Tools menu moves many sidebar items into
a different location.

Bug: T332090
Change-Id: Iaf25237757dc1e43e096b8c5991e9dd31ad25c2d
2023-03-31 13:09:04 -04:00
Jan Drewniak 3aaf8666cd Remove CSS selectors for Page Tools feature flag
This removes CSS selectors associated with the Page tools
feature flag, i.e. `vector-feature-page-tools-disabled` as
well as `vector-feature-page-tools-enabled` by removing
the 'disabled' styles and integrating the 'enabled' styles
into the default page tools code.

Bug: T332090
Change-Id: I382e12ca7ce741a3071582ffa84da03c2ba9e343
2023-03-31 11:34:37 -05:00
bwang 8d9b148cf7 Setup header and sticky header to be able to be full width
- Move the header and skip link out of .mw-page-container-inner and the grid
- Wrap the header and sticky header with a .vector-header-container element, allowing us to easily update header styles in the future
- Update sticky header to use a <div> to fix a11y error. Update searchToggle.js to use .vector-header-container rather than <header>

Bug: T332449
Bug: T330438
Change-Id: I038fc17cbb88a29dbe8d7841b824761a91d38405
2023-03-30 16:37:15 -05:00
jenkins-bot ff7735edde Merge "styles: Increase line-heading-heading slightly to follow Codex" 2023-03-29 00:38:08 +00:00
jenkins-bot 9fc1dee7a3 Merge "build: Updating npm dependencies" 2023-03-28 21:54:43 +00:00
Jan Drewniak 2cf705bf79 Refactor languageButton.js using mw.util.addPortletLink
Per comment in related patch d05f251

Change-Id: If49dfe55e8450f1a7ed6968f4907ae458072560a
2023-03-28 20:53:23 +00:00
Volker E ee03c15c4a styles: Increase line-heading-heading slightly to follow Codex
[EXPECTED VISUAL CHANGE]
Following Codex typography definitions. This minor change results in a
2px higher heading.

Bug: T332171
Change-Id: I5ac39492d8efc5c24e4340983e2b6973b7252c8f
2023-03-28 20:52:21 +00:00
Umherirrender f3dfc9df1e build: Updating npm dependencies
* stylelint-config-wikimedia: 0.13.0 → 0.14.0

Run stylelint fix to fix the new stylelint rule

Change-Id: I3f9e528ca9f8292a9e3630356f0e8bf5df5f6609
2023-03-28 22:22:36 +02:00
Volker E 6fa5e1758c build: Update SVGO to v3.0.2 & re-crush icons
svgo         ^2.8.0  →   ^3.0.2

Amending to new `cleanupIds` plugin name.
Re-crushing SVGs while at it.

Bug: T333158
Change-Id: I29e74ec1240142af3440004b68ac985558836410
2023-03-27 06:10:37 -07:00
Moh'd Khier Abualruz 25f5f4975a Add indicator that appears when TOC & page tools menu have been hidden
Show a popup to the user to point them to the new location of the element

Bug: T311160
Change-Id: I967d027b23931d99767b31bd7a6af5f6410c8f5d
2023-03-23 21:46:51 +00:00
Moh'd Khier Abualruz bd7be711df Linting: run npm -s run lint:js -- --fix
reduce the number of warnings on precommit hook

Change-Id: Iad9fa273f9a661614fa3e40e1af6e9aa7697ea42
2023-03-22 20:22:33 +00:00
jenkins-bot 6d2e4d5d37 Merge "Import Codex tokens into mediawiki.skin.variables.less" 2023-03-17 21:34:24 +00:00
jenkins-bot 66c547d452 Merge "styles: Remove obsolete @z-index-sidebar-button variable" 2023-03-17 20:36:47 +00:00
jenkins-bot 6cbb3baa32 Merge "Use clearer folder structure for Vector and Vector 2022 skin variables" 2023-03-16 21:39:58 +00:00
jenkins-bot cefa5eeab9 Merge "Reduce height of the article toolbar" 2023-03-16 20:15:20 +00:00
Roan Kattouw 17a3f91c9f Import Codex tokens into mediawiki.skin.variables.less
I04f9e48a1cf9dee915cf51e1e12b17ff0a595a06 provides neutral values for
the Codex tokens in mediawiki.skin.defaults.less in MW core, and expects
skins to import the appropriate Codex themes in their
mediawiki.skin.variables.less.

For both legacy Vector and Vector 2022, import the Codex tokens for the
wikimedia-ui-legacy theme. We need to use the legacy theme because
Vector and Vector 2022 have a base font size of 14px; the non-legacy
theme assumes a base font size of 16px.

Remove some variable assignments that are now redundant, because their
values are the same as the Codex tokens we're importing.

After importing the Codex tokens, override some of their values where
necessary so that all variables' values stay the same(*). We should
consider whether to remove some of these overrides in a follow-up patch,
but keeping everything the same for now makes this change less
disruptive.

(*) As in the core change, one variable's value does change:
- @max-width-breakpoint-tablet from calc(719px) to 719px
but this change has no visual impact.

Bug: T325237
Depends-On: I3a8c89d8558022077be1f32c6a6f4733b6302948
Change-Id: I3c5c8f9fc4b1841f8f8bdbcf27de82291d1fabbd
2023-03-15 21:15:01 +00:00
jenkins-bot 0433bb9fea Merge "Update how pinnable elements are handled with no-js and gradeC cases" 2023-03-15 21:05:32 +00:00
jenkins-bot 53620bbc50 Merge "Change margin-top element from .mw-body-content to #mw-content-text" 2023-03-15 15:49:36 +00:00
bwang f36c58db2f Update how pinnable elements are handled with no-js and gradeC cases
Bug: T331563
Bug: T331168
Change-Id: Ibd5aaa605c45216783a2707b3813e1e7e2c46b9b
2023-03-14 17:35:59 -05:00
Jon Robson a79fa9f00a Use clearer folder structure for Vector and Vector 2022 skin variables
Follow example in skinStyles and give these their own folders.
The problem with using "legacy" is that it could be interpreted as meaning
legacy LESS variables e.g. deprecated variables.

Change-Id: Ie456dfbd703a0e7a0ad783909ca3ef5e86450d9c
2023-03-14 21:48:58 +00:00
jenkins-bot 860ccc1458 Merge "Ensure the TOC works across all pinned/unpinned cases when JS is disabled" 2023-03-14 19:45:36 +00:00
sushrith bbdc66fcd3 Reduce height of the article toolbar
[Visual change]
Height of the article toolbar is reduced, this is done by reducing the
padding on the top of the tabs and reducing the margin on the
top of the Watchstar and Wikilove icons.

Bug: T316950
Change-Id: Ic2a3146eab901c834712d23f80277e313c42d907
2023-03-14 19:01:16 +00:00
jenkins-bot 637d99918d Merge "styles: Remove outdated fallback width" 2023-03-14 17:55:16 +00:00
Volker E ca9ab0c0b7 styles: Don't include the "jump to" links when copy-pasting article text
They are included in the DOM for screen readers but there's a good
chance the user copy-pasting text from an article does _not_ wish to
copy-paste these visually-hidden-for-most-users accessibility
helper links.

Bug: T295647
Change-Id: I13f4cbb88930becf38bc0f10d4288c8c9c496522
2023-03-14 05:24:19 -07:00
Volker E 593a88f10d styles: Remove outdated fallback width
All browsers that needed the fallback have been excluded from basic
support already.

Bug: T306486
Change-Id: I309c2a2d998af05364974f908f55378e672746f6
2023-03-14 05:19:09 -07:00
Volker E e74e9396e7 styles: Remove obsolete @z-index-sidebar-button variable
Change-Id: I6bd9f4c9b24df2f73fde9951bac0fd21b88656d3
2023-03-14 04:02:50 -07:00
bwang 62da66047f Ensure the TOC works across all pinned/unpinned cases when JS is disabled
- Also consolidates how we hide the pin/unpin buttons into a single CSS block

Bug: T331176
Change-Id: I359bde8abee48596186486d48fa6e59297094153
2023-03-13 23:48:18 +00:00
Ed Sanders d290b98f56 Fix inconsistencies in sticky header font-size and spacing
* Ensure 8px spacing between all icons and buttons
* Move buttons to separate container, so they aren't
  grouped with -icons.
* Reducing horizontal padding of quiet labelled buttons
  to 5px to match spec.

Bug: T326571
Change-Id: I71c3aee82152f048c347f80747972d526039a8f0
2023-03-13 23:29:35 +00:00
bwang 0006324f55 [cleanup] Factor out bindPinnableBreakpoint for readability, ensure auto unpinning logic doesnt apply to TOC
Change-Id: I3ba6b42ac3a2c79c2ff8018cf929d3153809ffed
2023-03-13 15:58:07 -05:00
ksarabia aba94865c2 Removes old style rule
This patch removes the old style rules for .vector-toc-pinned after one
week of cache.
Also removes 'data-name' which was no longer used

Bug: T325032
Change-Id: I7c8d8e51a61646151706b71a1733b1daac5dbd45
2023-03-10 14:31:44 -06:00
Nicholas Ray 17433b63fc Add hash fragment support to table of contents
Per T325086, the TOC should expand and activate the section that corresponds to
the window's hash fragment.

Additional changes:

* Moves logic  that runs on page load to determine the
intersection from section observer to main.js, since the hash fragment can
take precedence over the scroll position (e.g. when scrolled all the way to the
bottom).

* Make section observer's pause() cancel any pending intersection calculations
so that it doesn't interfere with other async logic.

* Moves onHeadingClick and onToggleClick logic to activate and expand a section
to tableOfContents.js to facilitate unit testing this behavior with clicks and
hash fragment changes.

Bug: T325086
Change-Id: I8a2cf0e6a96467fae97608450b321c181155e424
2023-03-09 00:33:37 -07:00
jenkins-bot 80c75fdafe Merge "Break words for long links" 2023-03-08 10:11:17 +00:00
Jon Robson abb2cc5a48 Break words for long links
Follow the solution we have on Minerva (mobile site)
and break long links in page.

Additional change:
Mostly whitespace updates. Use git diff -w to see.

Bug: T327334
Change-Id: I8d7e6a31b3a76375245da312e99f637766ffff8c
2023-03-08 01:37:03 +00:00
jenkins-bot 0e01a9cad0 Merge "styles: Update opacity values to align with Codex design system" 2023-03-08 00:26:32 +00:00
Volker E fdeb3187d9 styles: Update opacity values to align with Codex design system
Also replacing `opacity-base--disabled` with updated token key
`opacity-icon-base--disabled`.

Depends-On: I68a39002314b9c5a185ffa2856076922bfeab638
Change-Id: I0e28579c92df9880b98cfeb4d4b5c3b8b085965e
2023-03-07 13:42:46 -08:00
David Lynch a5820ff1e9 Change margin-top element from .mw-body-content to #mw-content-text
There's a lot of .mw-body-content out there that shouldn't have this
margin applied. Switch it to #mw-content-text so that it's only applied
to the actual article content.

Bug: T331458
Change-Id: Ia040f85ed484db21129c3673808bc2ad71962ec3
2023-03-07 14:36:26 -06:00
jenkins-bot c0aa8c2a87 Merge "Update scroll threshold to be the same as scroll padding top" 2023-03-07 18:44:27 +00:00
bwang c9389b7dab Update scroll threshold to be the same as scroll padding top
Bug: T317661
Bug: T314419
Change-Id: Ia2d14dca1e3e2069828b201d6d3a053e4df712fc
2023-03-07 18:28:23 +00:00
jenkins-bot a1b8ac9b4e Merge "Increase @scroll-padding-top to 75px" 2023-03-07 18:01:50 +00:00
Ed Sanders 091705df88 Switch order of "Add topic" and language dropdown
Bug: T267444
Change-Id: I09ed155b43665dd13c258e37870778a3c7ce446d
2023-03-07 16:02:36 +00:00
Ed Sanders 2f9cf813fe Fix selector for add topic button
Bug: T267444
Change-Id: Icd75f16c794f6f990a194fd57f99490934ded9de
2023-03-06 22:50:11 +00:00
Jan Drewniak 7e6606b5ef Increase @scroll-padding-top to 75px
Increasing scroll-padding-top on HTML element
to account for TOC button placement on mobile
resolutions.

Bug: T314419
Change-Id: I5c3efa0f20f052ec74e91a6287f561c9e0105f90
2023-03-06 18:28:55 +00:00
Jon Robson 07c12c14fc Register sticky header dropdown as icon capable
Needed by the language team.

Bug: T327369
Change-Id: I9e9022d27a308974f27ea31008fea1adf7c46624
2023-03-03 17:09:41 +00:00
bwang a274c9bcde Add threshold to TOC section observer
- Also renames 'header' to 'stickyHeaderElement' to be more clear

Bug: T317661
Change-Id: Iad519036d4622ff28115abb7de544f69fe8eb597
2023-03-01 16:26:42 -06:00
jenkins-bot 5f6932c605 Merge "Increase scroll-padding-top for page sections" 2023-03-01 19:46:33 +00:00
jenkins-bot 16e9c8c40d Merge "Remove TableOfContents mustache template and mark layout rules" 2023-03-01 17:10:02 +00:00
ksarabia 74addde337 [WIP] Removes the TOC class in body and adds in html
Adds new constants for TOC and registers feature.

Bug: T325032
Change-Id: I5e0f5f3a6d186b245bdbc98c2bb9e4cc17a03fdb
2023-02-28 17:21:16 -06:00
Jan Drewniak cfc454f615 Increase scroll-padding-top for page sections
This introduces a general scroll-padding-top value of 50px
for Vector 2022's HTML element.

This changes makes it so that when navigating sections via the
TOC, the section headings are 50px lower on the screen.

This change has been synced with the ToC active sections as well,
so that active sections become active at the same offset.

Bug: T314419
Change-Id: I99e5fe2047f5ad1e61ef51b6ba7e76a6cac36fc5
2023-02-28 14:48:31 -05:00
Jon Robson d4903b8e57 Remove TableOfContents mustache template and mark layout rules
Follow up to I3484a790ce8ebadf21054ac1d222d5632b2dc5a4

__Template__

The template is not particularly useful - it is only ever
used once in this context and features a static ID which means
it can never be reused. It is also tied to the #vector-toc-collapsed-checkbox
element. In current form it doesn't make sense to have this template.

Maybe in future, I could see an argument for a PinnableTableOfContents component
that wrapped the checkbox and nav element, and generalized the IDs but
currently there's no pressing need or value for that.

__Layouts__

The existing Pinned and Unpinned stylesheets are concerned with how the table
of contents is layed out holistically with regards to other components and
features enabled on the page. I think these should therefore be organized as such.
The way I reason with this, is these styles would be irrelevant in a component
library if the component was rendered in isolation.

Bug: T328719
Change-Id: I9ff0e0eeb35f215a8cae5950d08dc1277b662a71
2023-02-28 00:27:31 +00:00
jenkins-bot 605a63a998 Merge "Vector: Break long bare external links" 2023-02-27 23:25:05 +00:00
Derk-Jan Hartman e7a8d0f469 Vector: Break long bare external links
Break bare external links, which potentially would cause the
viewport or width restricted content to overflow.

Bug: T327334
Change-Id: Ia83e2cde7646670de0a1b09ba9457e1cfc47ce0f
2023-02-27 23:06:53 +00:00
jenkins-bot 53ea14904d Merge "2010: IP masked user icon should differ" 2023-02-26 23:58:50 +00:00
jenkins-bot eaf0e2d57e Merge "Table of contents: FIXME cleanup" 2023-02-24 20:55:28 +00:00
Jon Robson 28e5d9acb1 2010: IP masked user icon should differ
Per figma mock [1] the icon should be different for IP
masked users. Icon and text should also be gray.

[1] https://www.figma.com/file/xECM2hD7vEemP91M9YAQBC/IP-Masking?node-id=11%3A4681&t=iaM6G4xvjrBvkjlh-0

Bug: T328725
Change-Id: Ia8a06c3fd0bffb70e0dd0c26bcabbf02ab176994
2023-02-24 09:04:25 -08:00
Ed Sanders d90d1d17b1 Promote "Add topic" button to PageTitlebar
Bug: T267444
Change-Id: I813908d65640566a61eac51d6f55a3b4d3e9537d
2023-02-24 01:33:47 +00:00
Jon Robson c06c547b02 Table of contents: FIXME cleanup
Follow up to Ib42d532d4e900c01061e1c5e39c03b17f0619c46

Hoist hook binding into main.js and update tests

main.js now only tests hook wire up.
tableOfContents calls reloadTableOfContents directly.

Bug: T316025
Change-Id: Ia06feab7cfb47a64ac3519bd7bd0428dc661045a
2023-02-24 01:16:20 +00:00
jenkins-bot e40caf0c85 Merge "SectionObserver should be updated at certain points in MediaWiki lifecycle" 2023-02-23 20:16:28 +00:00
jenkins-bot af2c9c61c6 Merge "Revert "Only apply vertical margin to #siteNotice content when non-empty"" 2023-02-23 19:57:05 +00:00
Bernard Wang 41bd9569cf Revert "Only apply vertical margin to #siteNotice content when non-empty"
This reverts commit ff8a5bc034.

Reason for revert: T325219 is expected

Change-Id: Id153bcd5d365263dfa84e7c2e45d69d1c72fabdd
2023-02-23 19:32:54 +00:00
jenkins-bot 87e8137ba3 Merge "Update naming convention for TOC" 2023-02-23 17:39:43 +00:00
ksarabia e057a46d45 Update naming convention for TOC
Deploys vector-feature-toc-pinned-enabled/vector-toc-pinned-disabled additions to CSS.

Bug: T325032
Change-Id: Ifa9a33ad686080a8b630ecead3fafed1eddd7e2b
2023-02-23 16:30:19 +00:00
Jon Robson 450a395f95 SectionObserver should be updated at certain points in MediaWiki lifecycle
* When wikipage.tableOfContents is executed, the table of contents has been
replaced so we should update the sections associated with the section
observer as the old sections no longer exist in theDOM.
* If VisualEditor repaints the page, we should update the elements associated
with the table of contents as the body-content element no longer exists in the page.
* When VisuaLEditor is active we should disable the intersection observer as
there is no table of contents to update.

Minor changes:
* Light refactor of large function in main.js
* reloadTableOfContents returns a promise and now fires a new hook
wikipage.tableOfContents.vector to signal when it is finished which
has also been requested by community members. This allows the code in main.js
to update elements at relevant point in time
* Add FIXME note (doing this would have been considerable work)
* I've added a call to mw.log.warn which would have saved me considerable
debugging time for this issue to diagnose the issue.

Bug: T316037
Bug: T316025
Change-Id: Ib42d532d4e900c01061e1c5e39c03b17f0619c46
2023-02-23 01:39:46 +00:00
bwang d74abe5dd6 Clean up user links cached HTML code
Bug: T289212
Follow-up: Iac0586893fec26a8a6c2c904ce08fbf1e19b339c
Change-Id: I139750136b3b83ecfd87c2998aa0769f57d92aff
2023-02-22 23:30:26 +00:00
jenkins-bot 4c8f7a5652 Merge "Revert "Updates for core temp user autocreation feature"" 2023-02-22 22:41:02 +00:00
jenkins-bot 4cba003a6d Merge "Only apply vertical margin to #siteNotice content when non-empty" 2023-02-22 22:13:00 +00:00
Ed Sanders ff8a5bc034 Only apply vertical margin to #siteNotice content when non-empty
Bug: T325219
Change-Id: I7fd7600172e72707d1d8065ed2be235841a401be
2023-02-22 20:42:02 +00:00
bwang c72cacec71 Cleanup: Remove unused TOC scroll hooks code
Previously for the table of contents A/B test we triggered
scroll events when the table of contents was scrolled into
view. Now this is never referenced, so the code is cleaned
up to only apply to when the title is scrolled into view.

Change-Id: Ie9a5c4b6d88068d914cbbcc3d046ac288d49172b
2023-02-22 16:00:33 +00:00
jenkins-bot 0995b865d4 Merge "search: Undo v-i18n-html workaround" 2023-02-21 23:15:35 +00:00
jenkins-bot 874883536b Merge "Fix dropdown icon markup to match Codex button" 2023-02-21 22:52:20 +00:00
Moh'd Khier Abualruz efe33d5d76 Ensure ToC is always accessible via landmark region (<nav>)
- We had to add nav element to wrap TOC in all places
- Make sure proper nav is only displayed so landmark do not get confused
- Remove Eslint block on rules compat/compat for no support IE 11, this was blocking commit
- Run lint:fix:js and lint:fix:styles
- Fix maxSize in bundlesize.config.json

Bug: T324505
Change-Id: I36d26240b87de33318ff1edf97a410872a438103
2023-02-21 22:19:52 +01:00
bwang 8db112ddb3 Fix dropdown icon markup to match Codex button
- Fixes TOC button being transparent (https://jmp.sh/jbuivqlM). FYI the fixed width toggle button has the same issue.
- Add replace `html-vector-heading-icon` with Icon.mustache

Bug: T320453
Depends-on: I9a990ea8de63fb336391bea11b4503d447fb9d4f
Change-Id: I39397f8e98f79a2fdde9a8d785690133ea5a2619
2023-02-21 12:41:44 -06:00
Jon Robson f2fb827630 Revert "Updates for core temp user autocreation feature"
This reverts commit 8d0659b1e6.
The logic for temporary users is now centralized inside
MediaWiki core, so Vector has no need to check whether a user
is temporary and instead work with the data it's given.

Depends-On: I36815aaef81ec7368e240a780e90bd574785df74
Bug: T328725
Change-Id: Ie30dd6a77ef391f74a435e0b9df74793ffdf73bb
2023-02-21 11:30:27 -06:00
bwang ea1a0b0778 Shows TOC below page title for anon users
- Removes 'mw-ui-quiet' class from the TOC button when below the page title, meaning the TOC is just using default button styles. However, these styles are still not to spec due to button/icon tech debt (https://jmp.sh/jbuivqlM). The styles are fixed in the following patch
- DRY up TOC CSS
- Fix no-js collapsed TOC styles

Results in 4 expected visual changes. Note, the button styles are still incorrect and will be fixed in the next patch
https://jmp.sh/nHujNdVK

Bug: T315932
Bug: T320453
Depends-on: I490eb6244a35f18149844a87297c5f1ccc5b7df9
Change-Id: Id11805029b78847734d15041d31c2538412cf20a
2023-02-21 10:41:44 -06:00
Bartosz Dziewoński f0fdd8b6da Disallow scroll anchoring in navigation grid columns
To improve user experience when using gadgets and extensions that
cause layout shifts after page load, we want the anchor node selection
algorithm to only pick nodes in the content column or spanning full
width of the page.

Bug: T330108
Change-Id: Id996f766a535a487fb6bafe6a06a98d1a60ac8e3
2023-02-21 03:48:40 +01:00
Jon Robson 5c39353d6d [Refactor] Split out table of contents code
Large diff mostly to
hoist setupTableOfContents above main where it is used
(originally part of Id11805029b78847734d15041d31c2538412cf20a)

Change-Id: Icc41a86546ebc90ae35989ccd4dbb38b214efbb8
2023-02-18 00:36:23 +00:00
Jan Drewniak e4af2b5df3 Prevent addPortletLinkHandler from looping over links twice
- Prevents the addPortletLinkHandler function from looping
over the same links multiple times by indexing
the HTMLElement instead of just the ID, which is an
optional parameter.
- Conditionally adds the icon class if the ID parameter
exists.
- Refactors the function to calculate the width of the
vector toolbar.
- Adds Jest tests to account for the dual icon scenario
and updates existing Jest tests.

Bug: T327369
Change-Id: I2a0934405efebd0e95919bc523d711866236a7e6
2023-02-16 20:05:54 +00:00
bwang fca03c873b Update user links dropdown id
- Update naming convention to use dropdown instead of menu

Follow-up: Iac0586893fec26a8a6c2c904ce08fbf1e19b339c
Change-Id: Ie51f7fc280eeef8470613c07850dad83e4435ee8
2023-02-16 11:21:56 -06:00
jenkins-bot 21932c9800 Merge "Work around browser inconsistencies with 'clear' + 'margin-top'" 2023-02-14 19:43:38 +00:00
Nicholas Ray 0440eeada4 Make space between top of TOC/Page tools and top of viewport/bottom of sticky header 30px
Per T318169#8601576, the space between the top of the TOC and Page tools to the
top of the viewport or bottom of the sticky header should be 30px.

* Revises the page tools columnEnd grid to begin at the top of the titlebar to
enable 30px of top padding on the page tools

* Consolidates some styles in TableOfContentsPinned.less

VISUAL CHANGE: table of contents moves down page.

Bug: T318169
Bug: T319315
Change-Id: If8d8f87942d6265461b1a1a8ccf1c447d6e8b0d6
2023-02-10 19:43:05 +00:00
bwang 9e4bdd00bf Remove custom handling of user links menu items and handle case when anon editor links are disabled
Rather than try to build individually build login, logout, and create account menu items, we handle them the same as all other user links menu items in Hooks.php. While Hooks isnt ideal, there currently isnt a good path for moving that code to SkinComponents until core provides menu data. In the meantime, this patch reduces code complexity and prevents bugs like T324638.
This approach also allows us to move user links logic from SkinVector22 to VectorComponentUserLinks.php, and ensures the user links dropdown contains multiple menus, which allows us to reuse styles from page tools dropdowns.

Expected 11 visual changes:
* minor visual change where the user links dropdown has an
additional 4px vertical padding.
This padding was originally added to the page tools dropdowns
per Alex's request, but Alex also said that dropdowns should share
the same spacing. This change makes the styles all consistent
* Order of talk and contribution links have been swapped

Bug: T289212
Bug: T319356
Bug: T328954
Change-Id: Iac0586893fec26a8a6c2c904ce08fbf1e19b339c
2023-02-09 13:37:17 -06:00
bwang f415a556dd Additional FIXME cleanup relating to moving feature classes from body
Additional follow up to Id5afe2c60dc0067e7c74433eda5cd7858f54b0d7
(55bb37f2a)

Change-Id: Id98161572a09b1d3fc340d75bd8e28b277d68e30
2023-02-08 10:49:13 -06:00
jenkins-bot ef77ee37de Merge "Moving padding-bottom to mixin-vector-scroll-indicator" 2023-02-08 00:00:23 +00:00
Nicholas Ray 0243a0125b Moving padding-bottom to mixin-vector-scroll-indicator
Follow-up to 886437, which suggested moving the bottom padding of the scroll
indicator's parent to the `mixin-vector-scroll-indicator-mixin`. This makes
sense because if the correct amount of bottom padding isn't applied, the scroll
indicator could overlap the text when scrolled all the way to the bottom.

Bug: T318169
Change-Id: I94f98ae75f9b80484114a2413caf2cb0c237e8ba
2023-02-07 16:33:44 -07:00
jenkins-bot efc2b5f337 Merge "Make page tools sticky" 2023-02-07 20:11:33 +00:00
Nicholas Ray ffda1975e3 Make page tools sticky
* Adds sticky behavior to pinned page tools

* Moves scroll indicator styles into a mixin shared by TOC and page tools

* Replaces the 10px magic number in the TOC used to calculate the bottom padding with the
@padding-vertical-dropdown-menu variable.

* Increases the pinned TOC max-height per T319315

* Corrects spacing between bottom of sticky header and top of TOC after discussion with designer

* Causes 43 visual changes in Pixel that include intentional changes and subpixel
rendering changes associated with the `contain: paint` rule.

Bug: T318169
Bug: T319315
Change-Id: Ica0c4e0de1825d37d8136b589a9bf5decc96855e
2023-02-07 12:49:48 -07:00
jenkins-bot 137a8fb6be Merge "Languages should be in HTML at top whenever languages are added to page" 2023-02-06 23:52:36 +00:00
jenkins-bot 08068337b3 Merge "Sticky header logout goes via API avoiding a second click" 2023-02-06 23:02:44 +00:00
Jon Robson d16d7e80d9 Sticky header logout goes via API avoiding a second click
Bug: T324638
Change-Id: I59a192863706f1d2a09ec59090c0b099ced8cde0
2023-02-06 21:40:30 +00:00
Jon Robson dcec7a3f1d Languages should be in HTML at top whenever languages are added to page
Use CSS to decide whether to show the button or not. This retains the
existing logic for hiding the button on any page where the action is not
view.

Bug: T327795
Change-Id: If74246418f87c871c01cb7b2b62f6c59263bf976
2023-02-06 17:34:00 +00:00
Roan Kattouw d5e9a75095 search: Adjust SearchBoxLoader for border-box change in Codex
The TypeaheadSearch component in Codex switched from using content-box
to border-box for the dimensions of its menu items, reducing their
height by 2px (because of the top and bottom border). Update the
height calculation for the loading indicator accordingly.

Bug: T322383
Change-Id: I5367e402fa8ac9891358bb2f7ba87584b2835a9a
2023-02-05 21:15:34 +00:00
jenkins-bot b5f051c70b Merge "Improve wikibase interlanguage link styles" 2023-02-03 19:51:00 +00:00
Jan Drewniak 443955249b Improve wikibase interlanguage link styles
Overrides the `wikibase.client.init` module to
better style the interlanguage link button in
Vector 2022.

Also adds the `.mw-list-item` class to that link
so that it maintains consistency with the other
menu list items.

Bug: T328069
Change-Id: I5c84b7f036afb4b8dc11e92a59dff8000f068e67
2023-02-03 14:14:08 -05:00
Roan Kattouw 3541a9a28f search: Use relative sizing for the search icon
Only do this when JS is enabled and the Vue search (Codex
TypeaheadSearch) is going to be loaded. Without this, when viewing
Vector with an increased browser font size, Codex's icon scales up but
ours doesn't, causing the icon to grow and jump when Codex loads.

Set the icon's size in relative units (em instead of px), and change the
background position so it stays in the same place.

Change-Id: Ie0b33797f9da75dc758a8afbe58eb004d90f3776
2023-02-03 01:58:31 +00:00
bwang f3ddc51534 Add setFocusToToggleButton function to pinnableElement.js
Bug: T325020
Change-Id: I3829b146551ea55b84ae717a5db27003b0f2b97b
2023-02-01 14:31:53 -06:00
jenkins-bot 24b5f902fb Merge "Revert "Add setFocusToToggleButton function to pinnableElement.js"" 2023-01-31 23:01:47 +00:00
Nray 6af76a6d7a Revert "Add setFocusToToggleButton function to pinnableElement.js"
This reverts commit 45247802db.

Reason for revert: This is causing the TOC button to become focused on page load

Change-Id: Ib3d5ca79372dd40587879cbb39846e4c9ed9eb21
2023-01-31 22:35:21 +00:00
jenkins-bot a0afec8fb4 Merge "Fire a simluated window resize event when toggling limited width" 2023-01-31 17:41:45 +00:00
jenkins-bot 4c65b5ec59 Merge "Add setFocusToToggleButton function to pinnableElement.js" 2023-01-31 16:59:59 +00:00
Ed Sanders 50c8d1631e Fire a simluated window resize event when toggling limited width
Bug: T328121
Change-Id: I07695bb359ce849a80e8839744511a6f74a4320f
2023-01-31 10:08:10 -06:00
bwang 45247802db Add setFocusToToggleButton function to pinnableElement.js
Bug: T325020
Change-Id: I0b2f528dd71c9842ac5d04f9affdf938bcddcbb8
2023-01-31 14:48:37 +00:00
Catrope 26daf88d8c search: Undo v-i18n-html workaround
No longer needed now that the underlying cause has been fixed.

This reverts commit 5bcc1597ca.

Bug: T327229
Change-Id: I69ae0634446ea546a1d221932caf3e61bebaa6d0
Depends-On: I71f1cc0d08bfd02e1a9edb6cbfd849f10f929f3c
2023-01-30 23:54:51 +00:00
jenkins-bot dcce19c56f Merge "Add check for activeTopSection in activateSection" 2023-01-30 23:35:59 +00:00
bwang 15cd69b169 Add check for activeTopSection in activateSection
Bug: T328089
Change-Id: Ibe3b407e15b9b9c0ccc475f5632b4b7db7261d24
2023-01-30 22:03:23 +00:00
jenkins-bot ce0002916c Merge "search: Fix unclickable search footer" 2023-01-30 21:23:20 +00:00
jenkins-bot 7812db242e Merge "Make sticky header edit the default" 2023-01-30 19:02:31 +00:00
Roan Kattouw 5bcc1597ca search: Fix unclickable search footer
Clicking the bolded text in the search footer didn't work. This change
fixes that by working around the underlying issue, rewriting the search
footer template to use v-html instead of v-i18n-html. I don't know
exactly know why this works, but it does. Hopefully we'll be able to
fix the underlying issue and undo this workaround in the future.

Bug: T327229
Change-Id: I5d05d6ade1a34b12163bb96aa888ed3cfee78b4d
2023-01-30 18:18:29 +00:00
Bartosz Dziewoński 7077fedcbd Enable sticky header on all talk pages
Bug: T328133
Change-Id: Ib72d7aa9334bdb67a11dc0220eb731d94f050243
2023-01-27 15:30:55 +00:00
Jon Robson 2c54053ba7 Print: Hide table of contents and nav menus in print
Additional change: use !important to make sure this change
is final.

Bug: T327448
Change-Id: I8bc919bd24bfa21d4a11ba3a2b2ffa55801b698f
2023-01-26 08:37:25 -08:00
Jon Robson 8173c91a4e Limited width made persistent for anonymous users
Depends-On: Ic3b6eec19953932c697ab5bf48c33a4ac1841b07
Bug: T321498
Change-Id: I141a744abe7528203e6e05bf89ea225125319eb4
2023-01-25 17:51:02 +00:00
jenkins-bot 4e0c95b130 Merge "Account for temporary row in grid template row" 2023-01-25 01:08:05 +00:00
bwang a4f0fef502 Account for temporary row in grid template row
Bug: T327714
Change-Id: I8e68a0c562a3972055ce204192e070d5944d455e
2023-01-25 00:38:03 +00:00
Jon Robson 55bb37f2ab Moves feature classes from BODY element to HTML element
Move feature classes to HTML element - this is significant
for anonymous as placing the classes on the body tag breaks
the browser's ability to parse the article concurrently
with the stylesheet download, because inline scripts
are spec'ed to be able to see document.styleSheets.

Changes:
* Feature classes are moved from BODY tag to HTML tag
* For now disable localStorage storage until we've worked out
the storage mechanism in core.

Bug: T321498
Change-Id: Id5afe2c60dc0067e7c74433eda5cd7858f54b0d7
2023-01-24 18:22:13 -06:00
Jon Robson 93c833030b Make sticky header edit the default
In production this is always true, so remove feature flag.
Retain A/B testing code in case it is still needed.

Bug: T324799
Change-Id: Ia2057eb69d0a8d3e6e51acb5729a4399fb17a18b
2023-01-24 19:48:48 +00:00
bwang 05c6f9ecd4 Define grid template row for .mw-body grid container to ensure the grid cell containing the content will expand in height when needed
Bug: T327714
Change-Id: I8f2f9e8a0f6009be5ffa7f9319172169df253180
2023-01-24 11:22:22 -06:00
jenkins-bot 2843a7ebd9 Merge "Add temporary extra grid-area for content translation extension" 2023-01-24 15:55:59 +00:00
Jan Drewniak f93dbd3c79 Add temporary extra grid-area for content translation extension
Adds an extra grid area for content translation
so that it doesn't interfere with the page header
on user contribution pages.

Bug: T327715
Change-Id: I68d2c9dbe50dcdfe1924f29a96b48ab07bcc5f10
2023-01-24 07:38:45 -08:00
jenkins-bot 07faf76311 Merge "Fix grid blowout with limited width turned off" 2023-01-24 14:16:18 +00:00
jenkins-bot a8eaee8d1d Merge "Work around sticky-positioned layers disabling subpixel rendering" 2023-01-23 21:37:33 +00:00
Bartosz Dziewoński 1d45abb015 Work around sticky-positioned layers disabling subpixel rendering
Adding 'contain: paint' to the TOC container works around the issue.
This property is intended to prevent element's rendering from
affecting other elements, so it makes sense that this works.
https://developer.mozilla.org/en-US/docs/Web/CSS/contain

Because this property also clips the rendering of the element to its
bounding box (similar to 'overflow: hidden'), we need to move some
negative margins to this element from its children, otherwise the TOC
expand/collapse arrows would be cut off.

Bug: T327460
Change-Id: I34f414a99608450882e83c0ff22e64c05dff8807
2023-01-23 21:51:40 +01:00
jenkins-bot 1ebe553429 Merge "Change limited-width toggle to appear at 1400px" 2023-01-23 18:29:01 +00:00
jenkins-bot f25eccaac7 Merge "DI: Make pinnable elements work on Safari 13 and earlier" 2023-01-23 18:12:42 +00:00
Jan Drewniak 40d1a89b42 Change limited-width toggle to appear at 1400px
Bug: T326887
Change-Id: I256866f615c8c0f10b29e6135faca6add16ff195
2023-01-23 17:59:13 +00:00
jenkins-bot 9650eae741 Merge "Remove code to disable new search on Wikidata" 2023-01-23 14:25:22 +00:00
Derk-Jan Hartman ff830f201e DI: Make pinnable elements work on Safari 13 and earlier
The pinnable element would cause exceptions on older versions of
Safari during the setup and the ToC menu would show instead of being
pinned and hidden.

Bug: T327602
Change-Id: I99b656d0070d3e9af5641274134736b742c28f58
2023-01-23 09:17:16 +00:00
bwang 68c52a1efa Fix grid blowout with limited width turned off
Bug: T327423
Change-Id: I64f33c88e8fb9f8db87befa393a48c4eaf0a8136
2023-01-19 17:10:45 +00:00
bwang 128a01bd35 [Clean up] Remove CSS and HTML from cached TOC html
Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da
Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-16 17:21:12 -06:00
Moh'd Khier Abualruz 96ff431213 Table of contents Collapse/Expand not working
Bug: T327064
Change-Id: Ica3b43d51169d33b01d7203c3672c301e775ec04
2023-01-16 18:06:30 +01:00
Moh'd Khier Abualruz 29a2254b9a Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element
Extra:
- Reactivated active list element, This still does not work if the current active gets edited.
- Removed pinning event reattach as we do not replace teh full element anymore.

Known Issues:
 - Collapse/Expand not working

Bug: T326839
Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 12:39:05 +01:00
jenkins-bot eb78a83856 Merge "Scale server-rendered search box with browser font size" 2023-01-13 23:04:25 +00:00
Jan Drewniak 0daa4da3c4 Followup to 4d1c0b89 Override PinnableElement behaviour at low resolutions.
The media query for the CSS portion of this feature
should not include the `screen` portion because
that's included in the top-level import in skin.less.

Bug: T326364
Change-Id: I1ab0e321dde908982834c92ee428b512218bbe3d
2023-01-13 17:18:20 -05:00
jenkins-bot 13cc033ab0 Merge "Remove extra border that show in a page tools dropdown when a menu is hidden" 2023-01-13 21:52:48 +00:00
Nicholas Ray 2b397d05d2 Scale server-rendered search box with browser font size
The server-rendered input's height was using pixels instead of relative units so
it did not scale with the browser's font size. This adjusts the styles of the
server-rendered input to match the styles used by Codex. In addition, the
magnifying glass dimensions were set to pixels to match the Codex icon.

Bug: T326863
Change-Id: I6aa5b60841087dfa5b32e873e3ed21a22c37353e
2023-01-13 14:36:02 -07:00
jenkins-bot 70ddd1f3f7 Merge "[Clean up] Remove unnecessary container and CSS in sticky header" 2023-01-13 20:57:24 +00:00
bwang 4bf1a7b6f6 Remove extra border that show in a page tools dropdown when a menu is hidden
Fixes this https://phabricator.wikimedia.org/F36201839, which you can see for anon users, who have an empty "Actions" menu inside the page tools dropdown

Follow-up: Ia2cba7eb60739f0af8153c6c4246aa80d2a189c0
Change-Id: I617b37fbdb7b300a4266fd9f927d81e6a63d74bc
2023-01-13 20:41:34 +00:00
jenkins-bot ac87bd6c1b Merge "Convert @width-column-start-desktop and @width-column-start-desktop-wide to relative units" 2023-01-13 20:29:09 +00:00
bwang 787b065f99 [Clean up] Remove unnecessary container and CSS in sticky header
Change-Id: I7a1f75e8997ea6c87955f72c971f6d1d08e6ab22
2023-01-13 20:11:21 +00:00
jenkins-bot 5f53d90e59 Merge "Override PinnableElement behaviour at low resolutions." 2023-01-13 19:52:28 +00:00
Nicholas Ray 112cd9a085 Convert @width-column-start-desktop and @width-column-start-desktop-wide to relative units
The search box was overlapping the logo when increasing the browser's default
font size as a result of the logo's width using relative units and the column
using pixels [1]. This converts the column to use relative units so that it can
scale with the logo's width and not overlap.

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

Bug: T326863
Change-Id: I08b54908f0f2b81ac4b8f506d4bfaea14350f399
2023-01-13 12:20:49 -07:00
Jan Drewniak 4d1c0b8940 Override PinnableElement behaviour at low resolutions.
At resolutions below 1000px, we want pinned elements
such as the Page Tools menu and Main Menu to collapse.
This behaviour is temporary and when the browser is resized,
the pinned elements should revert to their previous pinned state.

We also want to remove the ability to pin these menus at
low resolutions, so the "hide/move" button is hidden.

A new matchMedia event handler is added to PinnableElement.js
to handle this behaviour.

CSS is also added to hide the pinned menus at low resolution.
This is to account for the situation where the page is loaded
at narrow widths, with pinned elements,
and the JS hasn't loaded yet.

features.js is refactors so that class toggling can happen
independently of saving the state to user preferences
(since we want to toggle the classes but not save the state
at lower resolutions).

Bug: T326364
Change-Id: I3113ab83deb15843e04ed63ec767a85c522517b5
2023-01-13 18:09:11 +00:00
bwang 888170264f Misc page tools visual fixes
- Fixes extra spacing introduced in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/877239
- Addresses last of design adjustments in https://phabricator.wikimedia.org/T324877#8519138

Bug: T324877
Change-Id: Ia2cba7eb60739f0af8153c6c4246aa80d2a189c0
2023-01-12 15:42:47 -06:00
bwang d309544c80 Add default width and max width to dropdowns in modern Vector, preserve existing styles for legacy Vector
Bug: T324877
Change-Id: I2dc109e7601fa3a15b5710f0c1676066368a6e6e
2023-01-12 11:45:13 -06:00
jenkins-bot 3c761ff518 Merge "Ensure TOC in sticky header has correct margin, refactor TOC styles to be more consistent" 2023-01-12 16:22:58 +00:00
Jan Drewniak 98c92edbba Factor out functions in PinnableElement.js
Splits the click handler for pinnable elements into
separate functions to reduce indentation and
maybe improve testability.

The click handler for pinnable elements is now
placed in a function called `togglePinnableElement()`
and attached to the click event via `.bind()`.

Class toggling is split into a separate
function called `togglePinnableClasses()` as well.

This should have no functional impact.

Change-Id: Ib27a469f6eb7e28360203d09db3315c6bde5c890
2023-01-11 23:58:30 +00:00
bwang 8539ab3bd8 Ensure TOC in sticky header has correct margin, refactor TOC styles to be more consistent
Results in 16 visual progressions

- Simplify/remove mixins in TableOfContentsUnpinned.less

Bug: T325554
Change-Id: I8246b6ebbf91deac7896fd46834f090e259d75ca
2023-01-11 15:47:09 -06:00
bwang 5195949674 Fix mustache template rendering when TOC is rerendered after an edit
Bug: T326682
Change-Id: I7e8f5572a33c4440aed5e6e525a48d8abe4a2afb
2023-01-10 19:12:55 -07:00
bwang 4efafaf374 Fix TOC scrollable indicator
Causes 4 minor visual regressions where the collapsed toc width is slightly smaller
will be fixed when page tools is deployed.
https://jmp.sh/o3vlGVlb

- Remove @padding-vertical-toc, @padding-right-toc and @padding-left-toc variables, which would need to be removed after page tools is enabled anyway
- Remove @height-collapsed-toc-button, @padding-top-content-px and @max-width-collapsed-toc variables which weren't needed
- Greatly simplify CSS for collapsed TOC width

Bug: T324877
Change-Id: I6d44d4b49fb5dccd776dfe0e96740fdb9bff4c5d
2023-01-10 17:21:26 -06:00
bwang 22c0e38997 Fix alignment/spacing of grid column items
-Addresses this feedback: https://phabricator.wikimedia.org/T324877#8505388

Bug: T319348
Bug: T324877
Change-Id: Ic371716f016309fb105c30b8e02e106c1de8310d
2023-01-10 11:36:53 -06:00
bwang 96932f847c Fix alignment of searchbar by introducing CSS grid to the header on viewports greater than desktop-wide
- Addresses "when pinned, can we maintain the alignment between the search bar and the article title for larger screens?"
https://phabricator.wikimedia.org/T324877#8499980

Bug: T324877
Change-Id: I7d3447cccdff40fc5a5e0b8978c17db8ffab065c
2023-01-10 11:34:27 -06:00
bwang c298d5d1ea Page tools styling followup
- Address feedback in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/870996/10/resources/skins.vector.styles/components/TableOfContentsPinned.less#28
- Avoid handling MainMenuAction styles in PinnableElement.less, move to MainMenu.less
- Reduce top spacing of the language alert
- Allow labels in menus to wrap
- Update TOC line height to match prototype

Bug: T324877
Change-Id: Ic5dc456d6e6126d3ff6cee854e6023cf5cf2595d
2023-01-09 17:07:13 -06:00
NikG d39b5c958a Update language dropdown for pages not supported in other languages
Pages that are not supported in other languages should not display the
ULS when the language button is clicked. Instead, a simple message
explaining that the page contents are supported in other languages
should be displayed inside the dropdown. Additionally, the language
button should be modified for these non-content pages, to non include
any label and be quiet instead of progressive.

This patch implements these specifications by appropriately modifying
the mustache templates and the underlying skin classes.

Bug: T316559
Change-Id: I37d8e61a1287b31d1a304d2a955f532b9b8fa505
2023-01-06 16:40:36 +00:00
Jon Robson a43d522331 Fix language button fallback
* Don't hide language button
This code can be removed now  T287206 is resolved.
Also simplify legacy logic - as the language menu
is always a portlet there.

Additional changes:
* Create LanguageButtonDropdown component to distinguish
this code from the LanguageButton in the sticky header.
* Fixes a style in LanguageButtonDropdown.less which wasn't
accounting for multiple vector-menu-content classes

Bug: T320927
Bug: T325017
Change-Id: Ic331684c384c5d57b60b098f23485e44fb75fb8f
2023-01-06 00:45:31 +00:00
jenkins-bot aa9e3a8f3a Merge "Update TOC spacing to match spec" 2023-01-05 20:29:57 +00:00
bwang 9db08ef300 Update TOC spacing to match spec
Bug: T324877
Change-Id: Ifb51dd8b37c8489cd1e9e74ec50e6d2e84411845
2023-01-05 12:41:25 -06:00
Lucas Werkmeister 7842d15382 Remove code to disable new search on Wikidata
This should be a no-op since Wikibase change I6a7a42a64c (commit
19267799da), which enables the wikibase.vector.searchClient module on
wikidatawiki as well; assuming no problems turn up when that is
deployed, we should be able to merge this soon afterwards.

Bug: T316093
Change-Id: I8d7aaf67d98cc015d94bb6aa1c71a92905dad024
Follows-Up: I0aa0e432181b14cdb7b92e2550b78f2d7d48094d
2023-01-05 13:39:34 +01:00
jenkins-bot bffa375753 Merge "Add label and title attribute/tooltip to full-screen toggle button" 2023-01-05 02:11:16 +00:00
Jon Robson cf56a37b00 Add label and title attribute/tooltip to full-screen toggle button
Bug: T323625
Change-Id: If12837cd0e3c443a023671b2a9ab85098ffd6119
2023-01-05 00:56:39 +00:00
jenkins-bot 87794f6b0d Merge "Replace .sidebar-toc class with .vector-toc and use PinnableElement in TOC" 2023-01-05 00:35:57 +00:00
bwang 8e4da83908 Replace .sidebar-toc class with .vector-toc and use PinnableElement in TOC
Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway
Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector.
"sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term

Bug: T324877
Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
2023-01-04 17:48:03 -06:00
jenkins-bot 1aab03d7a5 Merge "Factor out TableOfContentsPinned.less and rename TableOfContentsCollapsed for better CSS organization" 2023-01-04 20:34:05 +00:00
jenkins-bot 18ff4cdced Merge "Update dropdown and pinnable element styles to match spec" 2023-01-04 20:34:02 +00:00