Commit graph

102 commits

Author SHA1 Message Date
Jon Robson d3748704ca Show limited width icon alongside help button
Depends-On: Ia4495f75b51626ab6dd2805574dfdc6199535015
Bug: T341740
Change-Id: I3b8881ad37fa0fb06b60e50f2a7608f7d7b3e0ab
2023-07-24 20:14:59 +00:00
bwang 3a3c6120e2 Fix echo icon sizing after ULS enhances them
Bug: T341490
Change-Id: Ic9142c318d8046fc19ae2faa8005a625859446d5
2023-07-10 15:43:57 -05:00
Jon Robson 24d69726f3 Drop styles for cached HTML
Performance: This reclaims 1.3kb of CSS.

Bug: T336526
Change-Id: I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d
2023-06-14 10:52:44 -07:00
Jon Robson 68239ae344 Use Codex for button styles, start transitioning icons to use Codex icon mixins
Changes:
- mw-ui-button to cdx-button
- mw-ui-quiet to cdx-button--weight-quiet
- mw-ui-icon-element to cdx-button--icon-only
- mw-ui-icon to vector-icon
- mw-ui-icon-flush-right/left to vector-button-flush-right/left
- Removes $isSmallIcon param in Hooks.php

85 Visual Changes
- ~36 changes from minor pixel changes from the new button classes in the main menu, language button
- 22 from standardizing the padding of the TOC in page title
- ~10 changes from addition of .cdx-button to the TOC toggle buttons

PERFORMANCE:
This will result in an overall increase of 2.7kb of render blocking
CSS, 1kb will be reclaimed when
I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged.

Co-author: Bernard Wang <bwang@wikimedia.org>
Bug: T336526
Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-06-12 16:26:28 -07:00
Jon Robson 54653554fc Tipsy has been removed from MediaWiki core
Bug: T282547
Change-Id: Ibb7a9e834ef5c8a9bb3fd819f00aa92c1efbfb77
2023-05-26 10:19:15 +03:00
bwang 9667d1e8a9 Ensure echo notifications counter is always visible
Bug: T336543
Change-Id: I736d76f815dcf8811a1a6d8d5aaf117d2b7c9581
2023-05-25 11:46:44 -05:00
Jon Robson 8815afad25 Vector 2022 should manage styles for ext.uls.pt
Since these are part of the interface they should evolve
with the interface. This is needed to support switching our markup
to Codex.

Bug: T335710
Change-Id: I9996696795f792567f770ac8bf57002bd5706d06
2023-05-10 22:14:41 +00:00
bwang d8bcb73647 Update user menu and watchstar buttons to be consistent with spec
Depends-on: Ibd762c810e1d89047e39ce3af792b43689bf11e3
Bug: T335909
Change-Id: I5b42780416b466cc3fc33d29220aef2979ac3239
2023-05-03 15:47:00 -07:00
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