Commit graph

630 commits

Author SHA1 Message Date
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
jdlrobson e09a6930b8 Go back before replacing current overlay
There are 2 ways to reach the talk topic create overlay
1) Navigating via link in page directly (currently only possible
on talk pages via new topic button)
2) From the list of talk topics

After saving in both cases you want to "GO BACK" and exit the overlay
before replacing it - otherwise what happens is you end up
replacing the create talk topic overlay with a list of talk topics
with the old instance of the talk overlay underneath (which causes
the OverlayManager a lot of confusion)

You need to go back before replacing stuff.

Bug: T229972
Change-Id: I7cc65dab8883744496380f4e1119cdc31f18f791
2019-08-12 20:33:33 +00:00
jdlrobson 59fe37cde1 Use showReference function rather than deprecated ReferenceDrawer
Bug: T217295
Depends-On: I2ef762dbc1458411dd8ed746b7e829a2924740e3
Change-Id: Ia90ba47f152315fd39da368edac986b55f8bd5a0
2019-08-12 18:58:25 +00: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
Ed Sanders aad8addcec AMC actions: Increase touch target size to 44px
Bug: T230033
Change-Id: I3ec9091380d48e2fcedb8d222fa22b0143f7bceb
2019-08-11 12:42:05 +01:00
Stephen Niedzielski 83f90dacad [fix] [Visual Editor] [LESS] [content] create stacking context differently
b96ab7bd created a new CSS stacking context[0-1] for .content.
Unfortunately, this triggered a browser bug[2] which affects VE edit
cards (an unwanted margin appears around them). This also occurs when
creating a stacking context with filters. The issue does not occur when
the stacking context is created by changing position or opacity. Replace
the identity transform a `position: relative`.

[0] https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
[1] https://stackoverflow.com/questions/16148007/which-css-properties-create-a-stacking-context?answertab=votes#tab-top
[2] https://bugs.chromium.org/p/chromium/issues/detail?id=20574

Bug: T230154
Change-Id: I23ad776f0bcde8f7eec5ffbdefb8f0825db084ec
2019-08-08 13:17:13 -06:00
jenkins-bot 78748794c6 Merge "[dev] [LESS] use z-index symbol instead of hardcode" 2019-08-08 16:42:31 +00:00
jenkins-bot fb383c6356 Merge "[LESS] [content] lower content render order" 2019-08-08 13:56:41 +00:00
jenkins-bot 15434e6267 Merge "[fix] [LESS] remove main menu styles duplicate" 2019-08-08 00:45:07 +00:00
jenkins-bot 4cbba412d6 Merge "Revert "MainMenu no longer manages classes on the body tag"" 2019-08-08 00:45:05 +00:00
Stephen Niedzielski de29b14be6 [fix] [LESS] remove main menu styles duplicate
MainMenu.less was unintentionally duplicated in a previous commit as
mainmenu.less. Remove it.

Change-Id: I37103432fcee3fbfe6b57db435f9cc727f61a3f6
2019-08-07 18:14:11 -06:00
Niedzielski 6241c8dad7 Revert "MainMenu no longer manages classes on the body tag"
This reverts commit 354de09fa7.

When tapping notifications, both main and notification
menus are shown.

Change-Id: Iaa3ca4d2c7eadb1c9888b514d08895c658336d10
2019-08-07 23:43:43 +00:00
Stephen Niedzielski b1cbc639da [dev] [LESS] use z-index symbol instead of hardcode
@z-indexBase is 0. @z-indexBase - 1 is -1 which is identical to the
symbol @z-indexOccluded. The calculation didn't seem to add much to the
clarity of the code so use the symbol for grepability.

Change-Id: Ie8dcbca00a0a3e1d08a4ffe0b4fb3b71257f69c0
2019-08-07 14:44:56 -06:00
jenkins-bot 095f0f245f Merge "MainMenu no longer manages classes on the body tag" 2019-08-07 20:37:23 +00:00
jdlrobson 354de09fa7 MainMenu no longer manages classes on the body tag
The responsibilities of managing the classes on the body tag are
pulled upwards from the Menu code.

Due to the absence of global state/Redux like thing, the open and close
navigation drawer methods remain for the time being.

Bug: T206354
Change-Id: I77cd8ff75b0d4487ad19c1506a2911791542d70f
2019-08-07 20:11:09 +00:00
Stephen Niedzielski 73a95866bc [menu] [UI] [notifications] make notifications slide over top
Animate the notifications menu over the content instead of the content
over the menu. Try to trim unnecessary CSS.

Bug: T206354
Bug: T226125
Change-Id: I08f65798ef41da3c7c48fb5c65e31c6a3dd71af1
2019-08-07 19:42:48 +00:00
Stephen Niedzielski b96ab7bd40 [LESS] [content] lower content render order
Create a new stacking context for page content. Previously, it was
possible for on page content to defeat the skin's z-index values with
superior numbers. This occurred with StructuredDiscussion OOUI widgets
on https://test.m.wikipedia.org/wiki/Talk:Main_Page and the
`position: sticky` header on Special:Notifications.

`scaleY(1)` is an identity transform that is terse and unlikely to be
confused when RTL flipping.

Bug: T225959
Change-Id: If8f718a707d9dd07e1182bc26e63e6e665bf98c2
2019-08-07 13:24:02 -06: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
Ed Sanders b836141c9f Remove outer border from overflow tables
Bug: T206762
Change-Id: Ice5e85d10d932a93094228629201afd98a9cc1f4
2019-08-05 12:40:18 +01:00
Stephen Niedzielski 0867ff03aa [fix] [notifications] fix icon width
When notifications are present, the wrong icon width was used. Set the
icon width and remove a useless class, main-header-button.

https://codesearch.wmflabs.org/search/?q=main-header-button&i=nope&files=&repos=

Change-Id: Ie274ffcc93cf576f36eb0fccee80ecd3d4ac3a21
2019-08-02 14:39:04 -06:00
jenkins-bot 77d0632959 Merge "Do not hide notifications icon when drawer open" 2019-08-02 15:17:03 +00:00
jenkins-bot 7c869ec86a Merge "Remove all main_menu tracking related code.""" 2019-08-02 14:06:23 +00:00
jdlrobson 223f22d1c9 Do not hide notifications icon when drawer open
Bug: T228890
Change-Id: I7af7d4d760a443bd2c7dcce04fabb7e80dd35524
2019-08-01 21:35:25 +00:00
jenkins-bot df7abeae25 Merge "Empty subtitle elements should not have margin" 2019-08-01 17:48:58 +00:00
Jdlrobson 8d703b7758 Remove all main_menu tracking related code.""
This reverts commit de353c06c9.

Bug: T228681
Change-Id: Idfd964c31e09e271dca9ac39f7932df49cdcb5f6
2019-08-01 10:40:09 -07:00
jenkins-bot d688190547 Merge "Don't show download button on missing pages" 2019-08-01 17:24:08 +00:00
jdlrobson 64896669e2 Empty subtitle elements should not have margin
I considered not outputting the subtitle, but the PHP mustaching
templating library requires truthy values and that seemed like overkill

Bug: T217197
Change-Id: I3ebe550bad8b5eb0f24d742261ea696950c91a59
2019-08-01 17:18:32 +00:00
jdlrobson a0e5139e40 Don't show download button on missing pages
Additional: Pass in a page rather than a skin - skin is not
used anywhere other than to get the page

Bug: T211775
Change-Id: Ia7c56158773ac16992fb1ebf002131e9c24dda14
2019-08-01 16:11:57 +00: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
jdlrobson 02c43249cd partly correct the transitions between talk overlays
Tapping browser back button now does not show the underlying article
However clicking the back icon does (which can be fixed by a hack
see I80328b388b2e2da105bd670a3679b4ed3061b33a )

This works because displaying the talk overlay triggers a load
to mobile.talk.overlays (for talk topic board) so the other overlays
are guaranteed to be ready by the time you want to transition to them.

Bug: T221978
Change-Id: Ic3b448169d52880b38408da47af9e4576c585e16
2019-07-31 23:40:34 +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
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