Commit graph

600 commits

Author SHA1 Message Date
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
jenkins-bot eb157118f0 Merge "[UI] [main menu] make menu scrollable" 2019-07-31 18:30:26 +00:00
Stephen Niedzielski 2c070409f4 [UI] [main menu] make menu scrollable
Adds a scrollbar as needed to the main menu.

Bug: T218206
Change-Id: I71f75128939eba56dea10a8092b67820736934ce
2019-07-31 11:15:27 -06:00
Roan Kattouw ec17da76c1 Improve tab scrolling logic
* If the leftmost tab is selected, scroll all the way to the left
* If the rightmost tab is selected, scroll all the way to the right
* If a tab in the middle is selected, scroll to center it
* If the selected tab is wider than the tab container, make sure its
  start (left edge in LTR, right edge in RTL) is always made visible.

As Bartosz reminded me, .scrollLeft in RTL is a cross-browser nightmare
(see https://github.com/othree/jquery.rtl-scroll-type), so add a bunch
of code working around this. Some of this logic is in OOUI already, but
what's there is not enough for what we need here, and we also don't want
to load OOUI for this.

Bug: T223142
Change-Id: Ica298954b42f9daa4819043ec24bc0266290a927
2019-07-30 18:35:14 -07:00
jdlrobson dfb3e0b8c7 Restore MobileWebMainMenuClickTracking logging (old way)
menu/schema is never imported so it never executed.
Move it into initLogging which seems to the be the logic place
for this code to execute

Change-Id: Iec85548cf96fcc7ea96977d0aa89f601dbd8599f
2019-07-30 15:41:35 -07:00
jenkins-bot fd38627869 Merge "Subtitle appear below page actions" 2019-07-30 20:26:32 +00:00
jenkins-bot 13475413e7 Merge "Dev: Simplify red link drawer" 2019-07-30 20:06:37 +00:00
jenkins-bot 2ca195c98f Merge "[UI] [AMC] add recent changes to the AMC menu" 2019-07-30 19:58:40 +00:00
Stephen Niedzielski 805cc92e73 [UI] [AMC] add recent changes to the AMC menu
This mostly reverts commit 692309090d and
updates the icon.

Bug: T224216
Change-Id: I7200aaef5a15479afb4bc99f5195e900351a055a
2019-07-30 11:27:34 -06:00
jdlrobson 87a0795ed8 Subtitle appear below page actions
Bug: T217197
Change-Id: I6582db82ac750783dffa5612c9a0b3ccc86749a1
2019-07-30 09:59:58 -07:00
jdlrobson 0443f9936f Dev: Simplify red link drawer
* Remove event and add class .hide so that it uses event defined in
Drawer class
* Use actionAnchor - it achieves the same purpose

Change-Id: I2570de1e692a22c9383a850460eabb75b3d8eaf5
2019-07-30 08:29:29 -07:00
jdlrobson afecb58a88 Restore desktop MMV
Changes in the MultimediaViewer extension mean Minerva's onClick event
is preventing the default of the click handler in MultimediaViewer.

Explicitly do not setup our multimedia viewer version when the desktop
MMV is present!

Bug: T227034
Change-Id: I94e22d045346d53bb2c50035281398799fb6c7ac
2019-07-29 23:36:16 +00:00
jenkins-bot e9a879e635 Merge "Drop lazy loading references feature usage" 2019-07-26 19:58:47 +00:00
jdlrobson d1cd558821 Drop lazy loading references feature usage
This temporarily and quietly breaks references display in beta
on the assumption
that I2dcf9b0cbfe2f46eb6763e0add4ed892d1fbecd9 will be merged swiftly
afterwards.

Bug: T123328
Change-Id: I2dcf9b0cbfe2f46eb6763e0add4ed892d1fbecd9
2019-07-26 19:04:46 +00:00
jdlrobson f0503a52d0 Refresh the user, bell and search icon
* New module skins.minerva.icons.wikimedia provides icons
from Wikimedia UI in Minerva
* search selector in skins.minerva.content.styles.images is
retained for cached HTML
* skins.minerva.icons.loggedin now a
ResourceLoaderOOUIIconPackModule and bell removed from repo.
* userAvatar replaced with userAvatarOutline

Bug: T224070
Change-Id: Ibed609371060acc4b69e5cd4cd4f20edc871b3ba
2019-07-25 16:35:01 +00:00
jenkins-bot 84b950da58 Merge "[UI] [new] add user menu" 2019-07-24 18:41:46 +00:00
Stephen Niedzielski 0a4f5b6126 [UI] [new] add user menu
Add new user menu. The changes required include:

- Break up AuthMenuEntry into reusable components. They're now simple,
  independent, static functions in AuthUtil that are easy to reason
  about and compose.

  There's lots of verbose code because of the builder and director
  patterns. That is, most of the code is for building the thing we
  actually want to build instead of just building it. It's easy to write
  but no fun to read--even simple configurations are extremely verbose
  expressions that must be threaded through the system.

  These builders are also single purpose and unlikely to be reusable
  unlike a URI builder, for example. As objects, they're not especially
  composable either.

- Similarly, break up Menu/DefaultBuilder into BuilderUtil and ban
  inheritance. Inheritance has not worked well on the frontend of
  MobileFrontend. I don't think it's going to work well here. E.g., I
  could have made changes to the base class' getPersonalTools() method
  such that the client passes a parameter for the advanced config or
  maybe I just override it in the subclass. In either case, I think it
  makes the whole hierarchy nuanced and harder to reason about for
  something that should be simple.

- Add ProfileMenuEntry and LogOutMenuEntry for the user menu.

- Rename insertLogInOutMenuItem() to insertAuthMenuItem() which matches
  the entry name, AuthMenuEntry.

- Extension:SandboxLink is needed to display the sandbox link in the
  user menu.

- Performance note: the toolbar is now processed in MinervaTemplate,
  which corresponds to removing the buildPersonalUrls() override.

- To mimic the design of main menu, the following steps would be
  necessary:

  1. Create a user/Default and user/Advanced user menu builder and also
     a user/IBuilder interface.
  2. Create a user/Director.
  3. Create a service entry for Minerva.Menu.UserDirector in
     ServiceWiring. The Director is actually powerless and doesn't get
     to make any decisions--the appropriate builder is passed in from
     ServiceWiring which checks the mode.
  4. Access the service in SkinMinerva to set a userMenuHTML data member
     on the Minerva QuickTemplate.
  5. In MinervaTemplate, access the userMenuHTML QuickTemplate member
     and do the usual song and dance of inflating a Mustache template.

  This patch does everything except add a service, which was agreed to
  be unnecessary, so that logic is now in SkinMinerva.

- Wrap the existing echo user notifications button and new user menu
  button in a nav element. This seems like a semantic improvement.

- The existing styling and logic for the search bar and search overlay
  are pretty messy and delicate. Changes made to that LESS endeavored to
  be surgical. There's lots of room for improvement in the toolbar but
  it's out of scope.

- Rename logout icon to logOut.

Bug: T214540
Change-Id: Ib517864fcf4e4d611e05525a6358ee6662fe4e05
2019-07-24 18:24:07 +00:00
jdlrobson 0c5ca96031 Drop mobile.init dependency
Depends-On: If0de2d74139131be592d8edc2dbf063e9b98860c
Bug: T216537
Change-Id: I4b8011f5b73000a01d9cea032a6287b24b10f6ec
2019-07-24 15:28:49 +00:00
Pmiazga de353c06c9 Revert "Remove all main_menu tracking related code."
This reverts commit d11c84d08b.

We decided to track both old MobileWebMainMenuClickTracking and new MobileWebUIActionsTracking for some time. Then once everything goes stable and it's proven to work correctly we will merge d11c84d08b.

Bug: T220016
Change-Id: Ib4d52e8b8c870774041284e575564a9933af6136
2019-07-22 18:31:55 +00:00
Jan Drewniak 8ae59453de Reduce margin below article/discussion tabs.
Bug: T225230
Change-Id: I318848d8e47b0a7d4f47946a1f2ae22a5c7878bb
2019-07-22 13:42:12 +02:00
jenkins-bot 9352a70023 Merge "Remove all main_menu tracking related code." 2019-07-19 16:24:49 +00:00
Piotr Miazga d11c84d08b Remove all main_menu tracking related code.
This code should live in WikimediaEvents extension, not in
Minerva.

Bug: T220016
Depends-On: Ic2d6d1b21b0eb72ad68b0c447bc63f7d1bb021f4
Change-Id: Iaeb12704dcd257f0783f1ebec3def01cb2848228
2019-07-19 15:30:28 +00:00
jdlrobson 0320d1a9af Talk overlays for creating new topics now use callback
This copies across code from MobileFrontend and gives
Minerva full control of the lifecycle of this talk
overlay.

Depends-On: Ie2d54659ae746acc3d18368b19918aaafb236202
Bug: T228418
Change-Id: Ice1a56fbb24d9b314dfa7b2d73a4642ad1bc0593
2019-07-18 15:19:12 -07:00
Bartosz Dziewoński 1fed815868 Allow .transparent-shield styles for navigation to be reused
Define the color etc. in the base styles, so that other drawers will
not have to redefine them to display the shield.

Bug: T214049
Change-Id: Ife957374cb0d21446db2067171e68fb726ad8347
2019-07-17 23:32:37 +02:00
jenkins-bot 2d9be80368 Merge "Use wikimedia.ui from core directly" 2019-07-17 15:15:12 +00:00
jdlrobson 0a4f88b317 router.navigate is deprecated use router.navigateTo
The navigate method does not accept a second parameter for
replacing state. navigateTo was what was wanted.

Mark navigate as deprecated (to match ooui router) to make
sure this doesn't happen again.

Bug: T226106
Change-Id: Ie86fa632b2175727417b166c222c29bdf12bfea4
2019-07-16 16:50:58 -07:00
jenkins-bot e6b4f4f2b2 Merge "Make sure lazy loaded images display in printed PDFs" 2019-07-16 23:39:27 +00:00
jdlrobson e27debc1dd Use wikimedia.ui from core directly
There's no reason to copy and paste all this here. These icons
can be imported directly from core using ResourceLoaderOOUIIconPackModule

Depends-On: I7800da87a6a10399f705b43e05c8592c766bae6f
Change-Id: I1f25aaca9b7313cd95cefc7f5629b8a7e65c887f
2019-07-16 22:20:25 +00:00
jdlrobson a9d73060fa Restore table of contents and error logging
When moving to packageFiles, the modules errorLogging and toc
were not imported by init.js meaning they were not run.

ResourceLoader should probably error in this situation, but until
then we should fix this problem.

This is a follow up to I44790dd3fc6fe42bb502d79c39c4081c223bf2b1

Bug: T212944
Change-Id: I86efb7be1c39b03f63c8f1e0b107216cd30ff6de
2019-07-16 14:45:35 -07:00
jenkins-bot 6076c61772 Merge "Embrace packageFiles" 2019-07-16 21:21:42 +00:00
jenkins-bot 937d2b48ea Merge "On user pages, move language icon from Toolbar to Overflow menu" 2019-07-16 20:09:04 +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 21b24830b5 [dev] match page issues LESS filename to JS naming
Bug: T212944
Change-Id: I0fa44cdb26b24fff87a7c4dfd424fe4400ceee22
2019-07-16 18:03:44 +00:00
Piotr Miazga dee1c197b9 On user pages, move language icon from Toolbar to Overflow menu
The Language icon is not useful on user pages as most probably there
are no translated user pages, thus there is no need to show all-time
disabled Language icon.

If overflow menu is available, don't show Language switcher icon in
toolbar, show it as first item in the overflow menu.

Bug: T224735
Follow-Up: I46d58758356e870c408a74b2c087a42d6ad0ddea
Change-Id: I05be9e6457257a1f2eb224ca9ec5808814bc9ed7
2019-07-16 17:51:11 +00:00
jenkins-bot 4e2458aeba Merge "Make Minerva use new PageHTMLParser.js and refactored Page.js" 2019-07-15 23:12:58 +00:00
Nicholas Ray 331df226f5 Make Minerva use new PageHTMLParser.js and refactored Page.js
In I02f8645aac1d7b081eaba8f2ac92a2ef51f78182, Page.js was made into a
model and its html parsing responsibilities were moved to
PageHTMLParser. Additionally, a singleton for the current page
(currentPage.js) and a singleton for the curent page html parser
(currentPageHTMLParser.js) were introduced to replace the usage of
M.getCurrentPage().

This commit refactors Minerva to make use of these changes.

Notable changes:

* 🐛 The event bus singleton was added to references.js since it
previously relied on an instance of Skin to listen for the
`references-loaded` event. However, this event is emitted on the event
bus singleton.

* Additionally, I didn't see a reason why the `references-loaded` event
needed to also pass the current page instance when the only file
listening to it is references.js (which already has the current page
instance) so I removed that and the convoluted passing of page.js within
the file. I assumed this logic was unecessary.

* The call to drawer.showReferences in references.js now was made to
pass the currentPage instance as well as the currentPageHTMLParser. This
is to prepare for I6e858bbe73f83166476b5b2c0fdac1cca7404246 where the
getReferences() interface for ReferencesMobileViewGateway.js and
ReferencesHtmlScraperGateway.js is refactored to accept both of these
instances. Additionally, references.js was refactored to support event
delegation which gets rid of some parsing/setup logic.

Bug: T193077
Depends-On: I02f8645aac1d7b081eaba8f2ac92a2ef51f78182
Change-Id: I2f32dbcc4ebaa4bebb297cda1ecce3457922b343
2019-07-15 16:43:51 -06:00
jdlrobson 6df395f141 Guard against undefined config variable
Bug: T225423
Change-Id: Icfbd90c52d9f27ee58bde15c010f705b081285ab
2019-07-12 13:06:52 -07:00
jdlrobson d996008e9a Make sure lazy loaded images display in printed PDFs
The CSS animation will never complete in print media so will not display
in PDF rendering. A note is added to explain this rule.

Bug: T220668
Change-Id: I82260fa4e18a13970243d3cb2fc585aefb3c1d09
2019-07-09 10:50:46 -07:00
jdlrobson 9b4c22f31f Update page issues folder structure
Tests are untouched as these will be moved to headless
node-qunit in a follow up.

Bug: T212944
Change-Id: I3d9b43387e34fd49827e3ab62420f3555ff4b3cd
2019-07-08 23:07:28 +00:00
jdlrobson b9862d7d24 skins.minerva.options uses packageFiles
I want to remove the need for M.define in the Minerva repository.
It's no longer necessary with packageFiles and will help tame
a lot of the code we have here!

Change-Id: If6a35a23e84a44adb965fd9c41265ba37eb8368e
2019-07-08 17:22:11 +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
jenkins-bot 141d9a89ed Merge "Don't scroll vertically when scrolling active tab into view" 2019-06-25 14:13:24 +00:00
jenkins-bot 62090bcd69 Merge "Use wgRelevantPageTitle when setting up talk overlay" 2019-06-25 10:21:53 +00:00
Roan Kattouw b64b4c1b9f Don't scroll vertically when scrolling active tab into view
Do the scrolling math manually, and only do horizontal scrolling on the
tab container. Don't do vertical scrolling, and don't scroll the
viewport.

Bug: T226112
Bug: T223142
Change-Id: Ie67e15bd51252906897a213505ae82cf29ba5cf2
2019-06-24 15:18:56 -07:00
Stephen Niedzielski 1e61706e0e Hygiene: rename "secondary button" to "user notifications"
The secondary button is not generic. Rename it to match its specific
purpose.

Bug: T214540
Change-Id: I50b7e7fa7bea91a029a8ca71199b0309dff1c518
2019-06-19 11:31:16 -06:00
jenkins-bot 1aa31ea5b8 Merge "Correct Wikidata icon color in overflow menu" 2019-06-19 14:10:38 +00:00
Nicholas Ray 9676395529 Correct Wikidata icon color in overflow menu
This icon's stroke was explicitly set to `#000` before this commit, but
we need its color to be `#54595d` to match the other icons in the
overflow menu [1]. Unfortunately, although we set a variant in skin.json
for the icon to be colored this way [2], there are 2 problems that
prevent it from displaying this color:

1) The icon sets an explicit black color for its stroke attribute
2) ResourceLoader currently only sets the fill color on the `g` element
when applying the variant style [3]. It does not set the stroke color. Even
if problem 1) was removed, we would need RL to set the stroke color, but
I'm not sure how that would affect other variant icons that RL deals
with.

The simplest possible solution is to to change the stroke attribute on
the icon itself, although it unfortunately introduces technical debt as
this icon now differs slightly from the OOUI one :(

[1] https://phabricator.wikimedia.org/T222630#5266575
[2] https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/skin.json#L262-L267
[3] 4e59467427/includes/resourceloader/ResourceLoaderImage.php (L331)

Bug: T222630
Change-Id: I8c10a6012c7d32ab8555b874e766bc2f36437cf8
2019-06-18 17:05:26 -06:00
Ed Sanders 240280b906 Tabs: Remove unnecessary flexbox styles
white-space:nowrap is simpler and better supported.

Change-Id: I8c44cdd3c30a4cad1817b7912f9bbaae9e5ef641
2019-06-18 21:36:28 +01:00
Stephane Bisson 5a3a8efc31 Use wgRelevantPageTitle when setting up talk overlay
wgRelevantPageTitle is generally the same as wgPageTitle.
It is different on special pages that act on a page.
For example, on Special:WhatLinksHere/Moai
  wgPageTitle => Special:WhatLinksHere
  wgRelevantPageTitle => Moai

This change would allow Special:Homepage to have the talk overlay
connected to its talk tab.

If Minerva has such special pages that act on a page AND those
pages have talk links AND the 'skins.minerva.talk' happens to
be loaded, those links would now show the talk overlay.
I found no such cases but I cannot say they don't exist.
I also don't know if this change would be a regression
or an improvement.

Bug: T225659
Change-Id: I5d60ff3f0295f44a6d59cd772e27656b69ef0972
2019-06-18 15:38:33 -04:00
Stephane Bisson 4f5dbf7d55 Make the tabs scrollable horizontally
* Add a container around the tabs and use flexbox
  to position the tabs on one line and make it
  scrollable.
* Add some JS to scroll the currently selected
  tab into view.

Bug: T223142
Change-Id: Ie2205e6836797c2ac000e12a01f78a4aa7bc5b81
2019-06-14 13:50:23 -04:00