Commit graph

94 commits

Author SHA1 Message Date
Volker E 4efefdc420 styles: Remove 'mediawiki.ui/variables' call
Removing 'mediawiki.ui/variables.less' `@import`, which is now
fully replaced by skin-aware 'mediawiki.skin.variables.less'
standard.
Bumping required MediaWiki core version to >= v1.41.0.

Also
- replacing deprecated keys with new Codex token equivalent keys

Bug: T319381
Bug: T332541
Change-Id: I87bd258a24d8ca8b789f8355fe6495eca4cebb85
2023-04-25 12:58:30 -07:00
Simone Cuomo 64141c1f4a
Special Search: Improve the search layout and search preview widths on tablets
- [x] Add skin specific styles

Bug: T323843
Change-Id: I69fe0e4df2ec13fea2b4a5bc76881505b8bd8cf3
2023-04-06 10:59:14 +01: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
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
Jan Drewniak d05f25100e Remove skinStyles for wikibase.client module
Removing these styles removes the icon from the
"add interlanguage links" link in the Tools or main menu.

Bug: T328069
Change-Id: I99084060951e6f26ade1f95e3cdd58e0fd6e28ec
2023-03-06 14:28:43 -05:00
Bartosz Dziewoński 02698e06a2 Split off mediawiki.notification styles for legacy Vector
Bug: T328059
Change-Id: I69733d3efd2958ab1e02d12b1f252418c78cefef
2023-02-08 22:56:34 +01: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
Sam Wilson 2f761f3a19 Fix font-size adjustments for narrow width
Also change alignment of preview box to the left, to match
reading mode.

Bug: T322385
Bug: T322738
Bug: T323751
Change-Id: Iaee930d9ddc0c4539aad417a80a7c95d590e8099
2023-01-23 09:21:19 +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
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
Ed Sanders a44782d763 Restore z-index of mw-notification-area
Notifications have a deliberately high z-index in core (10,000) by
design. They are supposed to appear on top of every popup, including
modal windows (e.g. OOUI modals z-index of 101).

Notifications are ephemeral and dismissable with a single click
so the fact that they temporarily block a small part of the UI
is not usually an issue, although their placement tries to
reduce the likelyhood of this.

Bug: T312783
Bug: T312778
Change-Id: I2f426ec71995bf810355b071cb966a4dd922dc64
2022-12-01 01:09:11 +00:00
jenkins-bot 3381aa5c7e Merge "Add jQuery.UI styles to Vector 2022" 2022-11-23 23:29:28 +00:00
Ed Sanders 364b8a58f3 Add jQuery.UI styles to Vector 2022
Bug: T322000
Bug: T323673
Change-Id: I01621504c83cf2d0d961b829418dcf7340a9f31c
2022-11-23 23:12:51 +00:00
Jon Robson 7c24aa46fb Drop the VisualEnhancementsNext feature flag
Bug: T320101
Change-Id: I6d536af034dafd66c6478183de8029be9ed3e8b7
2022-11-21 13:27:34 -08:00
Jon Robson f31f0bbf50 [Cleanup] Address FIXMES relating to cached HTML
Change-Id: I6f5e97dde1f774e741a4236d1f6b49ad146cc236
2022-11-15 23:23:56 +00:00
jenkins-bot 4f6068ab33 Merge "Hide width toggle when performing suggested edit" 2022-11-10 12:15:31 +00:00
Jon Robson 2f56d5d649 Echo in Legacy Vector should not be impacted by feature flag
The feature flag seems to incorrectly be applying inside legacy
Vector causing an unexpected visual regression.

Bug: T322673
Change-Id: I3c66ddeb4de8c5a31a63025141e04b47e2bcb83c
2022-11-10 01:14:05 +00:00
Jon Robson e62b74acae Hide Echo notification count when zero
Bug: T322673
Change-Id: I125359d0d8c525e5d9867e21c6e3c16897013adb
2022-11-09 21:45:44 +00:00
Jon Robson 79ea216e77 Hide width toggle when performing suggested edit
Bug: T322597
Change-Id: I4290de12b2e79dc1121499341432c5f0221a5bb7
2022-11-09 12:18:46 -08:00
TheresNoTime 559a71638e
skinStyles: Move mw-parser-output out of more specific selector
`.mw-parser-output` needs to be can be present for both the normal
preview and the realtime preview. It appears only the normal preview
adds the "limited-width" classes.

Moving `.mw-parser-output` out of that selector seems to work.

Bug: T322337
Change-Id: I575cd50615b6bf0d1cfa73c827169f8bf17fa2d3
2022-11-04 09:43:45 +00:00
Jon Robson 614da1dc5e Features: Make max width a feature
Making this a feature part of the feature management system is integral
to making this a toggle and will allow us to explore making this
persistent in future.

Bug: T319447
Bug: T319449
Change-Id: I80c7b892a6891094854b4154db90917b67986102
2022-10-24 13:12:06 -07:00
Sam Wilson c2e7595809 Set width of preview to match reading
Preview width is set at 60em, but the container as a different
font-size to .vector-body and so the preview was displaying at
the wrong width.

This change removes the font-size from the grantparent and
re-sets it on the contents of #wikiPreview, ensuring that the
final size matches the actual non-editing width of the body
content.

In addition, the 'submit' action is added to the list of those
excluded from constrained width, so that the editing textarea
remains at full width even when previewing.

Bug: T312963
Change-Id: I1a1df32b00d5faecb73f8c53256342d356a9352c
2022-10-18 13:26:31 +08:00
Jon Robson 44ee12c717 [Visual enhancements next] Make the Echo buttons functional
This completes the changes to Echo inside the
vectorvisualenhancementnext=1 feature flag

Bug: T257143
Change-Id: I8f3904815c90ef1a10a2342c5c70363c8b9e1e47
2022-09-28 17:06:20 -05:00
Jon Robson d8f242c046 [Visual enhancements next] Restores the badge styling to Echo
Currently clicking on icons will result in the icon changing
style. This is fixed in the follow up patch
I4a0637fc19cf07d545b75fa55e15010b74fc474f

Bug: T257143
Change-Id: Ief51ac0bcab20fc87edf747b5347a5ef9dfdf36f
2022-09-27 23:11:45 +00:00
Jon Robson 452d59c7ef Echo: Move skinStyles from Echo extension to Vector
Bug: T257143
Change-Id: If52986fe56b65479adabe8233b0fc6df164b5376
2022-09-23 18:13:19 +00:00
bwang 8a88f61e89 Introduce media query breakpoint variables and replace all media query usage with new variables
Pixel shows 15 regressions, these are expected changes that are
fixing issues on specific viewports that fixes the following:

[At exactly the tablet breakpoint]
* the more menu dropdown was being
shown at the same time as the other menu items, resulting in duplicates
(see https://phabricator.wikimedia.org/F35285379)

[At exactly the desktop breakpoint]
* The table of contents AND the
table of contents toggle button to the left of the title were showing
(see https://phabricator.wikimedia.org/F35285392)
* The sticky header was not showing
* The fly out table of contents was showing instead of the sidebar
table of contents on scroll
* The top of the sidebar is brought into alignment with the tabs
(see https://phabricator.wikimedia.org/F35285408)

Bug: T310536
Change-Id: I6e870a032c8ba4ec003d00ff3f91732aaa2f38b0
2022-06-28 23:19:52 +00:00
Sam Wilson 0ebae6c4ef In max-width mode, constrain the width of page previews
This allows the editing form to be wide, but makes sure that the
preview seen will more closely match how the page will end up
after being saved.

Bug: T307725
Change-Id: Ib2085eece69fe08b7fca4aaeacef66b26cdd5f16
2022-05-30 11:52:59 +08:00
bwang 91e2e55a10 Simplify TOC spacing styles/logic by reusing the visible sticky header class
- Remove the 'vector-scrolled-below-table-of-contents' class, reducing the number of classes added with JS and simplifying the scrollObserver logic
- Move the 'vector-sticky-header-visible' class from the sticky header element to the body element. Hopefully, this is where other feature specific classes can go in the future
- This approach means the TOC will not need JS to update it's spacing when the sticky header is not enabled

Bug: T307345
Change-Id: I1084defc7025f5c946e22a36d373224fae6f8bd6
2022-05-10 11:39:05 -05:00
bwang 1d46d78ced Disable TOC in edit mode
Bug: T307112
Change-Id: Ic7bf195972d3f5bfe781a15fc805d7ef1b56e496
2022-04-28 20:09:05 +00:00
Jon Robson 5ef40f2f73 Always collapse Echo alert on "wide" headers
Bug: T301583
Change-Id: Ib4baab3ab814a79f45d8d19cfe4e499307852d52
2022-04-19 21:02:54 +00:00
bwang c761aa2067 Ensure sticky header ULS menu appears in default location right underneath the button
Bug: T298835
Change-Id: I2e061d87ccdc95e052d84ab8ba8a6d041801f184
2022-01-19 19:37:25 +00:00
Jon Robson 5a0932835a Cleanup: Only need to import one variable file
Change-Id: I120a66ec7013d249e8c42e6e631ae568effaa925
2022-01-12 20:58:16 +00:00
Jon Robson cb94cf0ab9 Hide language button in sticky header if compact links disabled
Bug: T297579
Change-Id: I8d5294a986d76574284419efc7d384fc954a86c8
2022-01-10 14:42:26 -08:00
jdlrobson 51cce2d0d4 Define sticky header ULS behaviour
* It sticks to the header on scroll
* It hides when the sticky header hides

Bug: T296680
Change-Id: I5a4e2ba42e172ea55fbdac8f35ec895f6b2756cd
2021-12-09 22:18:35 +00:00
Jan Drewniak aa44696222 Align mw.notify() alerts to avoid overlapping sticky header
Aligns the notifications produced by `mw.notify` so that they don't
obstruct the sticky header or usage of elements inside the sticky header.

Bug: T260338
Change-Id: If00f27ec19e71f6803231678fbb733ffaa6c6aaf
2021-12-07 14:41:46 -05: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
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
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
Jdlrobson b7464135cc Revert "Add wikibase skin style"
This reverts commit c595cc5106.

Reason for revert: Doesn't work. Must be done inside Wikibase extension.
See Ic576d8de9377813f7fe2d48841c1b6f303579728

Bug: T287206
Change-Id: I9904a72e4965a4124e4784501a3b4e77167a2971
2021-08-13 21:18:53 +00:00
jdlrobson c595cc5106 Add wikibase skin style
Bug: T287206
Change-Id: I6e38ad106eeaaafba21ac55b067be00b8d2a0972
2021-08-12 21:28:38 +00:00
bwang ade631ad40 Add max-width and text-overflow: ellipsis to Echo alert with modern user links
Bug: T287996
Change-Id: Ifcce663e86b5cf9162fa7ed20568ec83045ba998
2021-08-06 15:59:39 +00:00
Nicholas Ray f62e1997f5 Fix padding/positioning of the user menu orange talk message notification
The padding-top of the orange notification set in
ext.echo.styles.alert.less was being overriden by the `padding-top: 0`
set in UserLinks.less which was intended to only override the padding
set in Menu.less.

This commit:

* Scopes the li styles in Menu.less to apply only to the legacy user
menu (found in both legacy and modern vector with the consolidated user
links feature off) which appears to be the only menus that needs these
rules.

* The padding-top previously in UserLinks is no longer needed as a
result of the above point.

* Adjusts/cleans up the positioning of the orange notification by
removing an unneeded margin/padding-top and setting the top to 100% (the
previous `calc` statement was unintentionally resulting in 112%).

Bug: T287633
Change-Id: Ia7069d291f53d8e0e0e576d7b96b7a8b1a6cb29d
2021-07-28 16:35:08 -06:00
Nicholas Ray d8f62f780c User menu design tweaks
* Revises UserLinks.less according to the T285786 spec.

* Unsets 'createaccount' data in $content_navigation in favor creating
this link inside SkinVector which follows the same pattern as the Login
link. This is needed because the create account link needs to be on top
of the login link in the menu per T285786#7231671.

* Changes MenuDropdown.less to pad the anchor element instead of the li
element. This results in a more intuitive click target.

* Places an end margin on the search box to add space between the user
links and the search box.

Bug: T285786
Change-Id: Idb860e6b65c9f266a8027e3f486ccf4c4ec4ed3c
2021-07-27 14:25:32 -06:00
bwang f8ddffc26a Remove unnecessary user page breakpoint style
Bug: T276566
Change-Id: I1b48c91e499bf74185b4d584419d4a48af427bde
2021-07-26 19:05:02 +00:00
jdlrobson 96136a0e2d Remove Vector skinStyles for icons and fix language button
Depends-On:  Id08590f6a3fbbfda8226f2899f50f0b64cbb1481
Change-Id: I5be642f2e20d67e1d27c74ddb6ec086738a261aa
Bug: T191021
2021-07-21 11:02:42 -07:00
jdlrobson 13de4ff225 Prepare for updated mw-ui-icon implementation in Vector
We will couple the roll out of the consolidated user links code
with the roll out of the new icon styles.

This change is restricted to the user links feature and will result
in some slight UI discrepencies until
Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5
is merged.

Bug: T191021
Change-Id: Ia2d2c86e61341b9900f9ac337ddd763252e0515f
2021-07-20 18:52:40 +00:00
Clare Ming c4efbb3d6a Update styles for talk message at lower port widths.
Bug: T284243
Depends-On: Icb349987c5f5939b7f4ffa477ac1ecb35b5425e7
Change-Id: I69bc3a1aea6b5a640b91c67f5beae4c263c8d31a
2021-07-13 15:47:08 -06:00
jdlrobson 6777c5b1fe Collapse header at lower resolutions
Reduces the min-width to 340px with several changes at lower
resolutions
* collapses create account into dropdown
* hides language button and user messages
* The search component is updated to include a search toggle which
can be used to hide and show the search input at lower resolutions
- this leads to a slight HTML change with caching implications,
it also moves away from a BEM usage which is not standard for this
repository.
* limits width of logo based on the dimensions we display
in mobile

Bug: T276566
Change-Id: I89d75843ca7e33e6de93af5d7c22e46b7249c4b7
2021-06-30 21:43:35 +00:00
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
Volker E 5a1a382c17 [styles] LanguageButton: Amend icon color by setting opacity
Amending icon color by setting `opacity` accordingly to Design Style
Guide requirements.
Also using `em` base sizing for accessibility reasons in order to
make icon resizable on user text zoom preferences. And adding some
comments and mediawiki mixin usage.

Bug: T277660
Change-Id: Ia226857a38d3b3d5b4583e95905ef55e406c5cb2
2021-03-30 22:13:50 +00:00