Commit graph

46 commits

Author SHA1 Message Date
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
Volker E 09d0feb287 Add @font-size-root var and rename @font-size-body-mobile
Following Vector and OOUI in `@font-size-root` and put it in central
file. Removing duplicated code in `html` and `body` achieving the
same thing.
Also renaming `@font-size-body-mobile` to a distinct
`@font-size-body--feature-phone` ending the confusion that it's a
variable only used at `@width-breakpoint-mobile - 1`.

Change-Id: Ie355d015d882f61c813991c3244bfcb67f161791
2019-12-12 17:34:44 -08:00
Volker E d021f2fc9e Remove LESS @fontScalingFactor variable
It dates back before MinervaNeue was its own skin in Iff1f7e63e796cc
and was probably an idea to provide a simple one-stop solution for
a typography change of font size.
It isn't very well setup for this and also provides no value as of now,
for code simplicity's sake, let's remove it.
From a design perspective, we would approach this problem differently
nowadays.

Change-Id: If43ea2590468832e135b3f654022e8b2064b06c1
2019-12-05 21:28:38 -08:00
Volker E ea00e7cb28 Align LESS typography variable naming scheme to WikimediaUI Base
Another step into unified naming scheme, here all typography
variables.

Change-Id: Ic0ee64fc924ccc2b04a6b9d040e2f00dc6c45799
2019-12-05 21:15:33 -08:00
Jan Drewniak 77a1424e4e Show labels in page-actions menu on desktop widths
Adds labels to page-actions menu via a new
`.mw-ui-icon-with-label-desktop` class that shows labels at the
desktop break-point.

Bug: T226562
Change-Id: If57ab44660e0dc2a58c04fbf22dee6c27dd1f45f
2019-10-28 12:53:38 -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
Volker E 3d6b2b29bd Add standard transition to icon elements
While working on I05c4e5f7a8b18a3 I've noticed the missing transition.
Also adding standard WikimediaUI variables in support of this.

Change-Id: I30c75ed306bf826ae40db3703ef423dfad85fa74
2019-10-24 16:51:05 +00:00
Volker E 02ac4be0fa Replace color with WikimediaUI palette color
Leftover from our color changes a while ago. Use blue shade for
background like in most other products.

Change-Id: Ic6e7e7a50d5698dfcd302f5988df1327f7435976
2019-10-19 11:56:54 -07:00
jdlrobson 56b8c43404 Bump icon touch areas to 44x44
Bug: T230033
Change-Id: I90c9616f1df38de51a92d55b56eb7dbb8662d0d0
2019-10-02 12:20:39 -07:00
jdlrobson 81bbd6eb48 Use consistent small font sizes
* Add @font-size-minerva-smallest and use it in place
of font-size: 0.8em across the site so that we get a round
number for our font sizes.

Bug: T229568
Change-Id: I4270225c07941b4c164d5e044f70d4b131dbc19d
2019-10-01 22:29:55 +00:00
jdlrobson b15fa199a2 Clear search alignment
* Refactor less variables to make icon touch-area sizes flexible 
* Search input is bumped up 1px to an even number

Bug: T233156
Change-Id: I156d09bfca8db9506c0e9cee21e4d6e0a2e91689
2019-09-25 22:15:21 +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
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
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
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 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
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
Jan Drewniak 5e7a35946c Adding skin styles for the changeslist module.
The changeslist module is the list of results on special
pages such as recent changes, watchlist, and parts of action history.

Adds a skin style to special.changeslist module.

Bug: T228419
Change-Id: I324b1f136f5314cb6acdba3155b07136bbde363a
2019-07-30 19:00:09 +02: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
Volker E 378ba416ac Replace fixed value with LESS variable
Replacing with newly invented LESS variable for readabiliity and
maintainability.

Change-Id: I9d7ede1b163af49fa941d934e4fa22b57f9b035a
2019-07-22 07:44:28 -07:00
jdlrobson 4a5561257c Set header height to 54px equivalent in ems
Same patch as I4eed89f6a64eeb369c1ab0bb47f0462de7b0ceb3 but
destination is `em`s.

Bug: T195795
Change-Id: I1165f1e3f6fe1b86f843c2acb7a87681eda3aec6
2019-07-22 07:40:40 -07:00
Niedzielski 1bf2f51cdf [Revert] "Set header height to fixed pixel"
This reverts commit 625720420e. Setting height in
px results in variable (font-size) contents overflowing.

Change-Id: I510a4136be97ffd3f1dec63a39eec696c227ab25
2019-07-18 22:20:14 +00:00
jdlrobson 625720420e Set header height to fixed pixel
Bug: T195795
Change-Id: I4eed89f6a64eeb369c1ab0bb47f0462de7b0ceb3
2019-07-17 10:17:53 -07:00
Volker E 671027649b Replace special message variables with mediawiki.ui ones
Replacing messages variables with mediawiki.ui ones to ensure following
Style Guide color treatment.
Also renaming `@colorErrorText` with new default `@colorError`.

Bug: T228022
Depends-On: I49ca4b8f510888dff7a2487470174666143bcd76
Change-Id: Iefb881ab2eec1fa0ac83b40730853d449da595f4
2019-07-16 20:59:16 +00:00
Jan Drewniak 20013d1e3d Add a LESS z-index variable for elements that sit above page content
`@z-indexAboveContent` is a variable that places element above the
page content, but below the drawers. Initially added for the
fixed/sticky position button on the action=history page.

Bug: T219895
Change-Id: Ib773dd976221a60a0ea666c1a9a1104a0ba17613
2019-05-14 12:17:45 +02:00
Stephen Niedzielski 815f3386e3 Update: add secondary page actions submenu in AMC mode
When advanced mobile contributions mode is enabled and
`$wgMinervaOverflowInPageActions` is set, show a secondary overflow menu
on main namespace articles and user namespace pages. The menu content
varies for each namespace. The new submenu is *disabled* by default,
even when AMC is active. This feature should not be deployed until
instrumentation is available.

The secondary menu is rendered in PHP using the existing menu system
with some changes to the template. The checkbox hack is needed for no-
JavaScript keyboard navigation until :focus-within is supported. CSS
additions are documented in the source.

All client side toolbar execution occurs in Toolbar.js. Enhancements are
documented in the source.

Minor changes to the existing download button:
- Move download and edit button initialization to Toolbar.
- Update copy (not visible) from "Download" to "Download PDF".
- When the overflow menu is present, use the "hasText" / label style.

Wikimedia UI icons are copied from OOUI at d00a0ac and seem useful to
expose as HTTP URIs (not data URIs).

The overflow menu does not show for pages provided by the content proxy
since its entries depend on $tpl->data['nav_urls'] being populated.

Bug: T216418
Depends-On: I0781151a8232b6a7b52f79a34298afcecb8e4271
Change-Id: I4b50a0e519024a7ab91dae6ab40b23cf14a03861
2019-04-19 14:51:17 +00:00
Volker E 9b117122c4 Use operating system font stack for monospace fonts
Using Design Style Guide defined operating system font stack for
monospace fonts, to align to similar sans serif choices.

Bug: T221043
Change-Id: Ic5e2fd4d4803a830c61678aafd8411ac607dd08d
2019-04-15 18:05:29 -07:00
Volker E e052e436f3 Improve code comments on system sans-serif fonts
Follow-up to Id00fbe7ca90a3b31524c618de4441c413fe4afbe.

Change-Id: I2c77a990aca0fac8a4ef59cf6a0abcddce65939e
2019-03-27 15:35:33 -07:00
Volker E a738f25c05 Use system font stack as sans-serif choice
Using system font stack provides better reading experience on wider
range of operating systems and languages combinations.

Adding `fontFamilyBase` variable to easier update and clarify usage.

Bug: T175877
Change-Id: Id00fbe7ca90a3b31524c618de4441c413fe4afbe
2019-03-27 10:01:01 -07:00
jdlrobson 44ed0f5e69 Talk tab select should sit on top of page actions
Per design review with Alex.

Bug: T212216
Change-Id: Id4e1f5167c50a8d75a0682c4e8ed219c36b93be3
2019-02-13 11:42:15 -08:00
jdlrobson 577b72a14d Remove backwards compatible CSS
This is no longer needed when Varnish cache has cleared (About a
week from I7e989a3d4553eb3357598a5cad3ccebf51dc9fae being deployed

Bug: T212216
Change-Id: I1afb68f68cc90d89c442907426bd046ddc68f488
2019-02-12 17:40:49 -08:00
jdlrobson 7e423c07b7 Talk tabs in AMC mode
A new feature/skin option is added that is enabled safely inside
a MobileFrontend available/unavailable hook that changes the skin
to place talk tabs at the top of the page.

These new talk tabs purposely show on the main page, user page
and standard pages and do not show on special pages.


Depends-On: Ie1a583657176acc6f7046c569c2e94fa2f72ff93
Bug: T212216
Change-Id: I57b70cd325666a287678dc897159b5bf9d089b78
2019-02-13 00:02:35 +00:00
Volker E 4496292268 Hygiene: Remove 'blockquotes.less' in print and screen
There's no reason to have this as separate style file in content.styles
as common text styles are taken care of in 'text.less' and
'print/articles.less' for print. Moving contents rule there.

Change-Id: Ie613d95488e9b5a814b6be8f0c856e9e92ab5aed
2018-10-17 08:25:30 -07:00
Bartosz Dziewoński 73d724a72f mobile.editor.ve: Simplify left/right border of toolbar on >1000px screens
There should be no visual changes in this commit.

The goal of this change is to stop using variables from
minerva.variables, and thus to be able to move this file
to mediawiki/extensions/MobileFrontend (T202978).

Bug: T202978
Change-Id: Ib4b3206f724c3e6f089e626b704dc8ff790a76ae
2018-09-17 21:55:18 +00:00
jdlrobson 62f248503f Update link color for Minerva skin
This adds consistency with the Apps, Wikimedia Portal
and wikimedia base ui.

Bug: T178862
Change-Id: I5ecd8d1e9c69c61ef784d61b435af4240dd79c57
2018-03-14 21:56:18 +00:00
jdlrobson 4389b67989 Explicitly use LESS variable for breakpoint defined in mediawiki ui
$wgResourceLoaderLESSVars is deprecated. Let's not use it anymore.

Change-Id: If28ab6884668700bc46533c8e2c377f17e6be696
Depends-On: Ib9f843147db4473ce5590741e0fb490384b0007e
Bug: T171365
2018-02-06 22:23:32 +00:00
Volker E eaeea5dd5e Replace unique color with standard subtle print color
Replacing `#9aa0a7` with standard subtle `#999` print color.
Also clarfiying LESS variable naming and removing unused variable
`@printBorderColorLight`.

Change-Id: I2c1b36099935aa99d63a3316b3a107a23ffa0afd
2017-11-30 17:44:25 +00:00
jdlrobson 038103299a Minerva owns BacktoTopOverlay
Not used in MobileFrontend so it is moved here from that repo.
t r
Change-Id: I97e6010026daf4c6610bcfbedf140fb2a45b1130
2017-10-26 16:34:16 -04:00
jdlrobson 734ac36f1e Correct feature phone threshold detection
max-width should actually be one smaller than the threshold

Additional changes:
* Also rename to  @width-breakpoint-mobile and
rename @width-breakpoint-desktop for desktop variable in
anticipation of T171365

Bug: T176286
Change-Id: Ia37bceb46a6b780f473828ff38749543bdfcc9f6
2017-10-04 13:51:19 -07:00
Volker E bf6d1768bd Unify monospace font family stack
Additionally adding MinervaNeue specific variable.

Bug: T176636
Change-Id: I4450508be0b7836602f6fdea603ed5f4d9a0b16d
2017-09-27 20:52:55 +00:00
jdlrobson 91795fa257 Port over minimum required LESS variables from MobileFrontend
From now on Minerva will maintain its own variables outside
MobileFrontend.

Bug: T171016
Change-Id: I05430963cc2fb66b50c063bc8e95621abcbbbea1
2017-09-05 21:20:56 +00:00
Volker E b3e0ce2bae Replace abandoned color with current WikimediaUI one
Replacing abandoned `@colorGray13` (`#ddd`) with
appropriate variable from WikimediaUI color palette and
remove unneeded `@chromeContentSeparator` var, which is
just used once and not in place with `.header` anyways.

Additional changes:
* Also aligning `border` values to each other.

Bug: T146799
Bug: T172850
Change-Id: Ia9a1736b1ea5fa080b4673038b2c23ddce90f135
2017-08-10 18:06:24 +00:00
Volker E f4aaea0401 Replace @colorGray6 with appropriate WikimediaUI palette color
Replacing `@colorGray6` with appropriate closest color (semantic variable)
with slightly increased contrast.

Bug: T146799
Change-Id: I067973dca580eddc09b770362183d7a5b1634b7c
2017-08-08 11:29:30 +02:00
jdlrobson 2cc9516cde Minerva is its own skin
This is programmatic output from python3 scripts/migrate.py

This will result in a Minerva skin dependent on MobileFrontend.

Post merge we will rename message keys to have minerva- prefix

Bug: T166748
Change-Id: Iff1f7e63e796cc5d4a6d2ab0370e0c33248d2fce
2017-07-12 08:12:40 -07:00