Commit graph

15 commits

Author SHA1 Message Date
jdlrobson 1e64fc8f3d Dev: Address some FIXMEs
* Drop non-existent pointer-overlay selector
* Drop redundant icon class for arrow
* Drop unnecessary !important
* Drop transparent-shield class
* Reword an existing FIXME about a contensious decision and
add a new FIXME for moving some code to a more appropriate place.
* Move an image into a ResourceLoaderImage module (test with
`mw.notify('error', { type: 'error'} )`)

Change-Id: I6e38f07772afae6f13c4851ca17a67d52ca7d331
2020-02-03 08:43:18 +00: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
jdlrobson 28d8c52664 Remove primary-navigation-enabled
This CSS became dead when openNavigationDrawer was removed
in If4831fc700c7df3a2a389b5f95b6fbaea4b7d954

Bug: T225213
Change-Id: I67b5d9bc596be3cff93f3da96fa04c417f741a66
2019-12-24 08:03:48 -08:00
Krzysztof Witucki 0887552619 Fix shadow on notification overlay and navigation-drawer
minerva.variables.less: added gray color variable
MainMenu.less: added shadow to navigation
NotificationOverlay.less: changed alpha color of shadow
drawers.less: replaced rgba color with the same color variable

Bug: T231205
Change-Id: Ib1e16804b941a8f3b0cc639673baf73dc749a60a
2019-12-24 12:00:15 +00:00
Jan Drewniak f5bef2ea5c Main menu button works without JS
Converts the main menu button to work without JS using the CSS-only
"checkbox" hack, using the ToggleList module from the dropdown menus.

Bug: T225213
Change-Id: I0eff0439f7284ec74f6304324fab409e8a1b6245
2019-12-19 19:55:39 +00:00
Volker E 52f37a5f2a Enable stylelint 'selector-max-id' rule and disable only on occurrence
Enabling 'selector-max-id' rule, and changing in rare exceptions like
`#bodyContent` to `.mw-body > .content` where there's only one less
specific option.

Bug: T239183
Change-Id: I9d929eaae09475b2e20d96cb19081aba3aec5877
2019-11-27 17:36:59 -08:00
jdlrobson 7f68c3d3ad MainMenu is a controller not a View and server rendered (take 2)
There should be no caching implications for this change, as the main menu
has been server side rendered on all wikis since 10th October.

As Stephen pointed out somewhere, this is a bit of a micro-optimisation
Let's simplify this code by always rendering it in the HTML. MainMenu.js
as a result becomes a controller that just decides when to show it.

The geolocation check for Nearby is removed given the fact that all
grade A browsers for mediawiki have Geolocation support.

ev.preventDefault in onSkinClick is dropped since the link to the '#'
(the default behaviour) is wanted

Additional changes
* Browser support suggests "animations" class is redundant now
* `open` event no longer filed - not being used anywhere
* Transparent shield is now managed by the MainMenu controller not
the skin (which was confusing)
* Test geolocation using a simple feature tests
rather than abstracting it away inside Browser
* The main menu button is always hidden under either a translucent shield
and/or the main menu itself when it has been opened
so so it's not possible to ever click it while the menu is open
 - the click handler is thus simplified
removing a check for the class of the button

Bug: T234650
Change-Id: If101eebbdbda1519af922745917237648722820e
2019-10-29 16:37:04 -07:00
Volker E 3da637156f Use default duration LESS variable and align timing function one
Bug: T236224
Change-Id: I5c709a0989ab22839453e64bcefab201c666bf3c
2019-10-24 14:50:38 -07:00
jdlrobson e72c0d7ba4 Render main menu and shield on server side
This is a second attempt at I3892afb5ed3df628e2845043cf3bbc22a9928921
that is cached HTML friendly and won't cause T234599.

This time rather than solving the entire problem, we'll start rendering
the menu on the server, to allow us in future to drop the Menu code

Bug: T234650
Change-Id: Iea5406ef1c561f2907ec6132481007673aabf1e9
2019-10-04 19:35:28 +00:00
Jdlrobson 93b16db1c5 Revert "MainMenu is a controller not a View and server rendered"
This reverts commit 111757970e.

Although I cannot replicate the performance issue, the menu doesn't seem to be rendering at all on cached HTML so this is a deal breaker. Back to the drawing board..

Bug: T234599
Change-Id: Idadc5a079340f44ec66d20a38259b6b337d2dcee
2019-10-04 15:03:19 +00:00
jdlrobson 111757970e MainMenu is a controller not a View and server rendered
As Stephen pointed out somewhere, this is a bit of a micro-optimisation
Let's simplify this code by always rendering it in the HTML. MainMenu.js
as a result becomes a controller that just decides when to show it.

The geolocation check for Nearby is removed given the fact that all
grade A browsers for mediawiki have Geolocation support

Additional changes
* Browser support suggests "animations" class is redundant now
* `open` event no longer filed - not being used anywhere
* Transparent shield is now managed by the MainMenu controller not
the skin (which was confusing)
* Test geolocation using a simple feature tests
rather than abstracting it away inside Browser
* The main menu button is always hidden under either a translucent shield
and/or the main menu itself when it has been opened
so so it's not possible to ever click it while the menu is open
 - the click handler is thus simplified
removing a check for the class of the button

Depends-On: I7fd243366cceae780bd46e1aef2c08dae073f647
Change-Id: I3892afb5ed3df628e2845043cf3bbc22a9928921
2019-10-03 13:13:09 -07: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
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 bfdfc1165c [UI] [menu] slide the main menu over the page
Slide the main menu over the page instead of sliding the page over the
menu. Also, use viewport units for the main and notification menus.

Note, this lays foundation work for T225213.

Bug: T206354
Change-Id: I14b67d1e97b84086ea13e28df8148824a1f493e3
2019-08-12 18:22:45 +00:00
Stephen Niedzielski 10076c1b61 [dev] divide main menu LESS
Split apart the extensive mainmenu.less file into a few component-like
files: MainMenu, MainMenuFooter, MainMenuItem, and NotificationsOverlay.
Two variables, @duration and @easing, were moved to minerva.variables.
The separation is imperfect as some overlap still exists but is far
better than before.

This patch is focused on division without regression. Please limit any
refactor requests.

No user visible changes intended. The only selector that was cognizantly
changed was to duplicate the drawer visibility on main menu and
notifications overlay:

  // Old: mainmenu.less
  .navigation-drawer,
  .transparent-shield {
    visibility: visible;
  }

  // ---

  // New: MainMenu.less
  #mw-mf-page-left,
  .transparent-shield {
    visibility: visible;
  }

  // New: NotifcationsOverlay.less
  .navigation-enabled {
    .notifications-overlay {
      visibility: visible;
    }
  }

The is unfortunately useless. It is best to reproduce these changes
locally by renaming mainmenu.less to MainMenu.less and extract parts to
MainMenuFooter, MainMenuItem, and NotificationsOverlay LESS files until
the result matches.

Bug: T206354
Change-Id: I8d37c5346efcf39a4d76322fd6e6af3fff96ac53
2019-08-07 16:48:31 +00:00