Commit graph

643 commits

Author SHA1 Message Date
Stephen Niedzielski 17ffe01016 [hack] [toolbar] tighten the icon spacing
Reduce the spacing between toolbar icons in a kind-of sort-of hacky
kinda way.

Bug: T230232
Change-Id: I53d194bc0fe760d1b855ca84bcd4b40ce2ec4c2e
2019-08-30 17:58:26 +00:00
Stephen Niedzielski 936ec8dcb4 [LESS] remove unused variables
Identified by:

  find -type f -name \*.less|
  xargs -rd\\n sed -rn 's%^\s*(@[a-zA-Z0-9_]+):.*%\1%p'|
  xargs -rd\\n -I{} bash -c "rg '{}''[^:]' > /dev/null || echo '{}'"

Change-Id: I64e02731e9f8b69ce8e934502208c061d595b673
2019-08-29 16:35:00 +02:00
Stephen Niedzielski 3c55b23d61 [icon] revise icons
Update the icons.

Bug: T229440
Change-Id: I4460efba7b122b2a66e65924f311bb87f84160e5
2019-08-29 13:20:35 +02:00
jdlrobson e5aeeea2a8 Restore contributions icon to non-AMC menu
Bug: T231363
Change-Id: I82b9b06a83454cf4b49d906a8358b338d30f892a
2019-08-27 11:00:52 -07:00
jenkins-bot 505a191755 Merge "Avoid unnecessary stopPropagation usage so event click tracking can work" 2019-08-27 10:01:44 +00:00
jenkins-bot 03d82134f9 Merge "Separate AMC icons from non-AMC icons" 2019-08-27 00:16:33 +00:00
jenkins-bot 0a7608085d Merge "Disable hyphenation for links" 2019-08-26 23:30:07 +00:00
jdlrobson 062e067d49 Separate AMC icons from non-AMC icons
Currently a bunch of icons are loaded for all users that are only
ever used for AMC. Clean this up and add notes on the necessary steps
if these ever become the default.

Bug: T229295
Change-Id: I4e16028e7121b0b3e1a60b9404183d483db52ad8
2019-08-26 19:12:48 +00:00
jdlrobson 44954fe3fd Avoid unnecessary stopPropagation usage so event click tracking can work
Hamburger menu item - stopPropagation and associated comment seem
unnecessary.  Clicking page center is supposed to hide open menus!

Notification item - also unnecessary and outdated comment. Works as
expected without

Talk links - no reason to stopProgation (which happens when you return
false) - only event.preventDefault is needed.

Edit icon - see depends on

Depends-On: Ie23ae7d8dba31b5f524693e60580032e2ccd714f
Bug: T220016
Change-Id: Ica95076f4399d173d49087e5c866f55fe6aec597
2019-08-26 11:43:11 -07:00
jdlrobson 9150aec131 Feature flag overhaul
Two new feature flags:
1) MinervaPersonalMenu
2) MinervaAdvancedMainMenu

Changes:
* AMC defaults to false on desktop - desktop doesn't have AMC mode it just
enables several skin options.
* WHen inserting a link at the bottom of the page check whether the talk at top
of the page (tabs) is enabled.. not AMC
* Update ServiceWiring to construct menu based on MinervaAdvancedMainMenu
and  MinervaPersonalMenu - note when former is enabled but not latter there is
no way to logout. Noted in README.
* Use one entry point for skins.minerva.amc.styles/index.less
* Document files inside skins.minerva.amc.styles to make it clear which features
they are associated with
* Drop history page styles when AMC is disabled - it's not possible to ever get to
these as the history page redirects in non-AMC mode
* Rename the class .minerva--amc-enabled to minerva--history-page-action-enabled
to reflect its real purpose and move styles from skins.minerva.base.styles to skins.minerva.amc.styles
No need to worry about cached HTML as AMC runs without cache...
* Remove isAnyAMCOptionEnabled - it's an antipattern and should be discouraged as it discourages the
art of feature flagging. Nothing is using it after these changes.
* The AMC_MODE flag is disabled. There is no need for this - AMC is not a feature and therefore not a
skin option. It is a mechanism for turning on other skin options. Tests are updated.

Testing:
It should now be possible to enable any feature in `beta` and see it in the beta of the
site.

Bug: T229295
Change-Id: I48959905f5c09721b14a27aa1a5ad82849ac6263
2019-08-23 10:48:14 -07:00
jenkins-bot c543219d3a Merge "Dev: Prep for storybook" 2019-08-21 21:08:25 +00: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
Shreyas Minocha 9d6a5caf14 Disable hyphenation for links
Should fix a misleading "bug" I noticed wherein URLs sometimes break
over multiple lines with hyphenation, for example `www.exam-ple.com`.

Change-Id: Id96d708e6ba59d6e6a6a093c3195b5121160c899
Bug: T230860
2019-08-21 06:24:35 +00:00
jdlrobson ab8da137cb Provide access to original redirect page on toasts
Color progressive/destructive (blue and red) do not make
sense on a black background, so we use white and underlined
for both of these. Note these don't seem to be used currently
so this is not a breaking change.

Bug: T150189
Change-Id: I78a92b5b6c76638633b99fe32670911d355ce6f3
2019-08-12 22:48:14 +00: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