Commit graph

25 commits

Author SHA1 Message Date
Piotr Miazga (polishdeveloper) 82724b3c44 Add data-mw="interface" attribute to Menu elements
While dropping support of smart logout in favour of core ready.js
logout, we noticed that the logout selector is a little bit too weak.
Editors could make a link on a page that would work as a logout
button. The easiest way to prevent this (and any other possible
problems) is to add `data-mw="interface"` attribute to all generated
menu entries.

Change-Id: I22611b9641d82328623beb3f693bf7cddb2289ff
2021-02-11 20:35:40 +00:00
Volker E 4cef1791c2 Use correctly named variables background-color-base and color-base--inverted
Depends-On: I7b7534223c672a47a11e69fc07bea535ec0085a1
Bug: T255230
Change-Id: Ibf5c0410e446cff18fc26fe2e80d120a72209c04
2020-06-25 19:07:12 +00:00
Ed Sanders a32999e641 build: Update eslint-config-wikimedia to 0.16.0
Change-Id: Icabf6e065ed5685207731262db72faf848a0a04d
2020-06-04 08:39:32 -07:00
Ed Sanders d3f1b6830a PageActionsMenu: Reduce spacing between icons and text in tablet mode
Bug: T237019
Change-Id: Ibec3ce5bb97fa6147fa07fbc2fb5e324c3e03680
2020-02-12 22:29:06 -08:00
Nicholas Ray c22eab914e Add minerva-animations-ready CSS class in Minerva
Per T234570, browser support for animations is solid now so we no longer
need to check for browser support.

However, due to some browsers firing css transitions on page load (see
https://bugs.chromium.org/p/chromium/issues/detail?id=332189), we still
need JS to add this wrapping class after CSS transitions are loaded to
prevent the transitions firing on page load for some components
(DropDownList and MainMenu). See MainMenu.less or DropDownList.less for
an example of how this is used.

MobileFrontend adds an animations class too rn, but that will be removed
in in I58f754740f7146f09c38220a7614285e57684924.

Bug: T234570
Change-Id: If0cf7113b40f7217a22b66a8669138466af2cf5d
2020-01-09 13:58:37 -07:00
Krzysztof Witucki 3ec0ca1e6e Remove border-radius
ToggleList.less: remove border-radius style from .toggle-list__list
userMenu.less: add border-radius to .minerva-user-menu-list
pageactions.less: add border-radius to .page-actions-overflow-list
design feedback: (see T231205#5771626)

Bug: T231205
Change-Id: Ia06e230a53ddba7931a2869209e0851b11ca8030
2020-01-06 21:47:55 +01:00
Piotr Miazga 99f3c97c3c Logout users via API Ajax call to prevent extra step on Special:Logout
Currently the Special:Logout page will ask "do you want to logout"
even if we pass the logout token. To avoid that first let's log out
user via API Ajax call.

Bug: T232734
Change-Id: Ia4cc4253b99254d7a893a55d9e05918c5d8c87e5
2019-11-26 14:45:21 -08:00
jdlrobson bfc7540f7f Menu groups have identifiers
For compatibility and consistency/convergence with Vector, Minerva's
menus are linked to their Vector counterparts.

This allows us to get mw.util.addPortletLink to work inside Minerva

Bug: T231925
Change-Id: I121f12497eac6fcf0b63b9ccce561320eb8b3e62
2019-10-25 19:00:54 +00:00
Volker E 19b1ea2297 Unify transition values across board
Using newly introduced variables instead of fixed values.
Also adding `transition` to property blacklist to ensure using
mediawiki.mixin.

Bug: T236224
Change-Id: I3d2d05f4e50e7b6bba0fe84fae1dde5de5b75492
2019-10-24 12:11:52 -07:00
jdlrobson bf8d325388 Use core watchstar code
Apply the mediawiki core watchstar to the
Minerva skin. Note, watchstars in search and other locations will
continue to be provided by the MobileFrontend library (see
follow up patch I7b748dc87089389400b0035c62a3b9a00c2e43f9)

Bug: T234970
Change-Id: I11bbe976412b50dba76a55f37887e4c9235d0be1
2019-10-15 15:33:25 -07:00
Jan Drewniak d79f68500f Modify padding on .toggle-list-item
Bug: T233050
Change-Id: I219c4195cfc0ea399e4dd62e1283403b42c8c253
2019-09-25 00:12:51 +02:00
jdlrobson 2a76493a56 Labels for mw-ui-icon-before elements should be vertically aligned inside
This also resolves the issue with the language menu item being grayed out
for pages without languages

Bug: T233167
Bug: T233050
Change-Id: I05c54c0d35e4990717a8c3dc4ab42841349535f1
2019-09-20 10:37:46 -07:00
jdlrobson 1735325f47 Correct personal and overflow menu padding and positioning
Bug: T233050
Change-Id: I09d1c53d2088034ab4eec0fa6b4af3daf66e2003
2019-09-16 20:32:19 +00:00
jenkins-bot d01dcb4d6a Merge "Remove the mw-ui-icon hacks and overrides" 2019-09-10 18:42:54 +00:00
jdlrobson c0f08790ea Remove the mw-ui-icon hacks and overrides
Note: this agitates T230232 again - when merging this please
make sure a merge for I929090848f3e04647a97f4979ec78682623fa070
is pending.

In various places we try to override the default mw-ui-icon behaviours
The hacks need to be removed as part of addressing the core problem.

Changes:
* Wherever we use mw-ui-icon-before in PHP - wrap the label with a span
so that label font-size is altered where needed - not the icon
* Where a small icon is needed us isSmall parameter for the Icon component
* Apply font-size to labels of mw-ui-icon-before elements
* The browser tests need a slight update to access the span element inside
a menu item - in the case of the logout button the label is always hidden,
so we need to check the visibility of the parent element (secondary_action)

Bug: T229440
Depends-On:  I3f803ec4c9068b30aa93b803391aa4d65d8310ff
Change-Id: I07e4ae233979636b739f1117dd7703571e0a9366
2019-09-10 10:53:20 -07:00
Piotr Miazga 05e1bc60bf Show darker background when toggle list is open
Bug: T230034
Change-Id: I2ae41e5ddfda26d9d3fb72896b8f2b7a70cfd44a
2019-09-10 14:10:08 +02:00
Volker E 1f27981ed1 Consistently use .transform() mixin
Make use of mediawiki.mixins' `.transform()` mixin for widest available
browser support.
Follow-up to I720e62a578f0c7a14f4b5a698004471c85e54bc8

Change-Id: I771a5a6e2020e323bf4cefdb944c26bdcce26ee2
2019-09-03 15:33:10 -07:00
jenkins-bot a75049f4b4 Merge "Track all menu interactions" 2019-08-27 10:01:47 +00:00
Piotr Miazga c5f38e466d Track all menu interactions
Changes:
 - added support of event-data-name to toggle list and all menu
 entries
 - track main menu open actions
 - prefix all menu interactions with `menu.`
 - prefix menu opening with `ui.`
 - track tab clicks (also a part of new ui)
 - track notification icon clicks

We're not tracking the Download icon as it has it's own
instrumentation.

Bug: T220016
Change-Id: I442103c1f8967c6710429329f024f266c9b11ea6
2019-08-26 11:43:16 -07:00
jdlrobson 7280d255c0 Dev: Prep for storybook
* Remove ambiguity in imports - say the file extension
'less' for all instances of variables and mixins.
* Separate toast styles from drawer styles so they can be
imported separately
* associate header-action selector with its parent
(.overlay-header) not parent's parent (.overlay) so it can be imported
and rendered without the Overlay.

Change-Id: Ib7e19a440ba095d6424d35305fb41d643ca9764c
2019-08-21 12:20:26 -07:00
Stephen Niedzielski 95eefc5b24 [fix] [UI] [menu] animate page actions & user menus out
Add a workaround to animate the page actions and user menus out instead
of only in. This functionality was intentionally disabled to avoid to
avoid a Chromium bug[0] but can be worked around by setting transition
duration in JavaScript. The effect is no animations in no-JS mode and
full animations in JS mode.

[0] https://bugs.chromium.org/p/chromium/issues/detail?id=332189

Change-Id: Ife8c0304783dc175ebefd53f3d7b104c8a5db01d
2019-08-08 10:29:52 -06:00
jdlrobson c63fceea6e Normalize small fonts
We use 0.9em in a variety of places, to shrink font-size from the
default font-size. However given we use 16px as a base font this results
in a font-size of 14.4px. This can also cause problems with icons resulting
in rounding errors when used with multiple icons

This changes the font-size to 14px for those areas and makes future usages
centralized by adding a specific variable.
Also amending `@font-size-browser` variable to be aligned to naming convention
and equal to Vector one.

Bug: T229399
Change-Id: I8e31bca2982c049a9be73c89aa9e8e2aa8141269
2019-08-01 16:11:29 +00:00
Stephen Niedzielski 93f930ce3e [UI] [menu] remove menu height resizing
Remove the page action overflow and user menu height sizing. Previously,
a maximum menu height was set so that the menu itself would scroll. A
minimum height was also used so that the menu couldn't be shrunk down to
a silly size. Both the minimum height LESS and maximum height JS are now
removed.

Bug: T225959
Change-Id: I201374ab8b249272ee5dbb1401b844ffe034ea66
2019-07-31 20:05:54 +00:00
jdlrobson 72df451bd3 Embrace packageFiles
Help with readability by using module.exports and require rather than the MobileFrontend
provided mw.mobileFrontend module manager (and avoid adopting webpack at this time)

Replace usages of mw.mobileFrontend.require with local require and module.exports
(compatible with RL or Node implementation)

Changes:
* Notifications modules are merged into skins.minerva.scripts and initialised
via a client side check.
* new file overlayManager for exporting an overlayManager singleton
rather than being hidden inside resources/skins.minerva.scripts/init.js
* All M.define/M.requires swapped out for require where possible
The `define` method is now forbidden in the repo.

Bug: T212944
Change-Id: I44790dd3fc6fe42bb502d79c39c4081c223bf2b1
2019-07-16 18:04:10 +00:00
Stephen Niedzielski edb4385345 Hygiene: extract ToggleList to a reusable component
A list that toggles visibility via the checkbox hack is needed in at
least two spots: the page actions overflow menu and the user menu. This
patch makes several refactors to turn what was previously hardcoded into
page actions a reusable component:

- Start a new components directory. Components are reusable and
  composable. The subdirectories are organized by function, not
  ResourceLoader module bundling which greatly improves the ability to
  see a component's full functionality in one directory instead of
  examining the entire codebase. See updates to README.

- Extract pageactions.less into:
  - ToggleList.less: LESS for any checkbox hack list.
  - DropDownList.less: LESS for lists that open downwards.
  - MenuListItem.less: LESS for list items of menus.
  The division makes it easier to see concerns, dependencies, and change
  code.

- Move pageActionMenu.mustache to a component and extract ToggleList
  template.

- Extract ToggleList.js from Toolbar.js.

Bug: T214540
Change-Id: I171831469a6733c458bc5c7ba249a5096ca975b8
2019-07-04 13:48:13 -06:00