Commit graph

675 commits

Author SHA1 Message Date
jdlrobson 98d91a66f3 Remove watch and watched icons from repository in favor of Wikimedia UI
Note, because of the two versions of the watch icon, this will temporarily
make the watchstar not display for JavaScript users. The accompanying patch
Ic974b4d6dff14b0d72b8ca71b02c5ef73b1b1d93 will restore this.

Bug: T231613
Change-Id: I16ca70f2892d7418ff245e15f838dfc2b092f3aa
2019-09-19 10:39:27 -07:00
jdlrobson c1b419f715 Drop empty toc.less file
Follow up to I720e62a578f0c7a14f4b5a698004471c85e54bc8

Change-Id: I2fbf3008d712f9e76a49ec194f4f638d4b59d08c
See: T233095
2019-09-17 10:59:39 -07:00
Ed Sanders 8e579c373b build: Update linters
Change-Id: Ie0983466ad0eed0a30d62f28b10efebd0f2eacba
2019-09-17 14:21:30 +01:00
jenkins-bot bbab3daf12 Merge "Remove obsolete .previewnote p selector" 2019-09-17 02:07:02 +00:00
jenkins-bot fde1955293 Merge "Add general messagebox (neutral) styling to shared.css" 2019-09-16 21:48:14 +00:00
Jdlrobson de480f2523 Merge "Fix icon alignment & padding of last-modified bar" 2019-09-16 21:32:34 +00:00
Jan Drewniak 11af0b28b5 Fix icon alignment & padding of last-modified bar
Bug: T229440#5490743
Change-Id: I253d2e680ab1b8ea2b52eb336bfe1648a5238b36
2019-09-16 22:44:16 +02:00
jdlrobson 1735325f47 Correct personal and overflow menu padding and positioning
Bug: T233050
Change-Id: I09d1c53d2088034ab4eec0fa6b4af3daf66e2003
2019-09-16 20:32:19 +00:00
Jan Drewniak 73e87fdc08 Align right-most header icon with content.
uses the CSS :last-child selector to align the last item in the header
with the edge of the container.
This is usually the notification icon in "normal" mode and
the user menu icon in AMC mode.

Bug: T229440
Change-Id: I4430f5659093f76896e2b86e076526a0b51d9630
2019-09-16 11:05:36 +02:00
jdlrobson f8b8074c24 Last modified bar background should fill entire bar
Bug: T232800
Change-Id: If1ff57042b15faa1eee998dc389a996603355208
2019-09-13 22:09:56 +00:00
Jdlrobson 9ec7217d47 Merge "Adjust notification icon to be the same size as the other icons" 2019-09-13 21:53:37 +00:00
Jdlrobson fd3599b603 Merge "Fix truncated text showing through icons & last-modified bar" 2019-09-13 21:53:27 +00:00
jdlrobson 109b24e0ee Adjust notification icon to be the same size as the other icons
Bug: T232011
Change-Id: I0300685d38551bc9ee2c2bd32d6348f32d4df4de
2019-09-13 13:55:01 -07:00
Jdlrobson 4542840cf6 Merge "Utilize the mw-ui-icon-flush-left/right classes to align icons" 2019-09-13 20:33:55 +00:00
Volker E c2fdf9404e Add general messagebox (neutral) styling to shared.css
Bug: T232553
Change-Id: I274471bad1fa402ede4b273444023ea31d2bd502
2019-09-13 13:24:30 -07:00
Jan Drewniak 633c48bddf Utilize the mw-ui-icon-flush-left/right classes to align icons
Affected icons:
- hamburger menu
- "search|notifications|user" menu in page header
- notification "circle" icon
- page actions menu
- section edit icon

Bug: T229440
Change-Id: I5587855d0d9ecf2fac20ce16845e6749c26ab7c2
2019-09-13 12:09:43 -07:00
Jan Drewniak 35e489de25 Fix truncated text showing through icons & last-modified bar
To accommodate for cached HTML a new class last-modified-bar__text
replaces last-modifier-tagline to help us distinguish between old
out dated HTML and the new HTML.

Bug: T232792
Bug: T232800
Change-Id: I53fa45058dbc81c91089840073e03113ff1a4b9c
2019-09-13 18:35:31 +00:00
Nicholas Ray a456e205f8 Fix Main Menu text alignment problems
Per https://phabricator.wikimedia.org/T229440#5490743, the text was not
aligned in the center. This should center it.

Bug: T229440
Change-Id: I4e49d98ad180e54b54255d2844f711f7fcda5fab
2019-09-13 12:34:59 -06:00
Jan Drewniak 2ef6119bed [ICONS] Fix icon positions in page-issues, inline and overlay
Bug: T232837
Change-Id: Ie24b38146b9361f86467d40db7b07b6a5d0655d1
2019-09-13 15:47:50 +02:00
Jan Drewniak be76f05ebb Prepare for new mw-ui-icon spec for Minerva
Includes icon fixes and removal of some CSS overrides.

This causes the following temporary defects to the skin:
* Last modified bar will temporarily be squashed
* clear search  icon will be misaligned vertically

Depends-On:  Ie811d25595d041c35e6c214190101821f3a5d466
Bug: T229440
Change-Id: I0a3a73421791ad353bbcebaeb8241ad062f67ae4
2019-09-12 18:44:44 +00:00
jenkins-bot 02986e7a85 Merge "Change height of overlay headers to 3em, keep site header unchanged" 2019-09-10 22:58:50 +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
Volker E d7f2ae030f Remove obsolete .previewnote p selector
This has been replaced in Ib678f03e908 by standard `.warningbox`

Bug: T232414
Depends-On: Ib678f03e908fa9dcd5af7632941475203478abf7
Change-Id: Ifb85ef51cdf1d39122e286cb8a7c6620a7bae09e
2019-09-09 16:58:50 -07:00
jenkins-bot 53ad4bac32 Merge "New table of contents icon, prepare for arrow->expand rename" 2019-09-09 19:25:29 +00:00
Timo Tijhof 6e4afbf3bb mediawiki.RegExp (deprecated) -> mediawiki.util
Bug: T218339
Change-Id: I6913330609c03a0418af2ab54aa31f27a52dc6d0
2019-09-09 18:10:35 +00:00
jdlrobson fea60ba244 New table of contents icon, prepare for arrow->expand rename
Bug: T231613
Change-Id: I86a4bdac83e1d6caef025ad025962127d74556dd
2019-09-09 10:39:52 -07:00
Nicholas Ray f7baa81b17 Remove skins.minerva.scripts/overlayManager.js
Instead, I think we can just use:

```
M.require( 'mobile.startup').OverlayManager.getSingleton()
```

Change-Id: I3c1d5d8ffb95eea7cf076c86e8e9578aff7f95a8
2019-09-06 14:32:01 -06:00
jdlrobson 96cee263fb Dev: Access OverlayManager via singleton method not M.define
Change-Id: Icb152f21bfd3a091676980a025dc651e49f49312
2019-09-06 19:30:22 +00:00
jdlrobson 497044290a MobileFrontend is now managing the toggling code. Remove.
Depends-On: I6bdeb7198082c4b1d0a32960cc4dc679ff4c6762
Change-Id: I1815a730fc12f68c287d58f2de6f92e05db3abd2
2019-09-06 15:50:00 +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
Bartosz Dziewoński ee80c16f2c Change height of overlay headers to 3em, keep site header unchanged
Split @headerHeight variable into @siteHeaderHeight and @overlayHeaderHeight.
@overlayHeaderHeight is now set to 3em (48px).

Use @siteHeaderHeight for the base skin interface, and @overlayHeaderHeight
for overlays.

skinStyles/mobile.notifications.overlay/minerva.less:
* Update footer height to remain the same as header height.

skinStyles/mobile.startup/search/SearchOverlay.less:
* Use @siteHeaderHeight even though it is an overlay, because it's
  supposed to exactly match the base skin interface.

Bug: T215426
Change-Id: Iaa36f581a12a8eea2b755ae583b8a2c6324ebe29
2019-09-03 22:30:20 +00:00
jdlrobson 15323b3d63 Use core table of contents in Minerva
No more using the TableOfContents component in MobileFrontend. It's
just creating more work for us. The end result is exactly the same - we can make
a table of contents using the checkbox hack rule and CSS that looks identical to
the current table of contents.

For now, this change can only be tested on Minerva desktop.
I2ea1c23bc86871e2a095c4c6674a08ff2f04b160
is the patch that goes for the jugular and applies this to mobile Minerva. It's
important we merge the two together to avoid disruption to this feature, as
currently MobileFrontend strips the table of contents from core from the HTML
using the MobileFormatter.

Change-Id: I720e62a578f0c7a14f4b5a698004471c85e54bc8
2019-09-03 19:02:31 +00:00
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