Commit graph

29 commits

Author SHA1 Message Date
Steph Toyofuku 88caf181e5 Rework tabs to use unordered list
As part of my work on fixing addPortletLink for tabs on mobile (T340728)
we need these tabs to be correctly designated as an unordered list (note,
this is also how they are rendered in Vector).  In addition, update the
styles to account for the link being nested in a list item now

There should be no visual change as a result of this, but if there is
please let me know!!  I will be testing locally in pixel after pushing
to ensure the change is transparent

Bug: T340728
Change-Id: I922558a59aa909ce76079bab057811d76467f644
2023-12-19 15:28:11 -08:00
bwang 7bbb240db1 Make menuGroup.mustache use togglelist classes, ensuring ToggleList HTML is consistent. Remove duplicated CSS
Bug: T343920
Change-Id: I567d20171b0e511d00922adf250f97b9b8ed146b
2023-08-25 17:57:47 +00:00
Jon Robson 952789bc17 Switch Minerva button template to use Codex and remove mw-ui-button
- Removes 'mw-ui-icon-with-label-desktop' as that is now the default behavior for icon only buttons in Minerva
- Removes icon flushing classes, use codex mixins instead

80 Visual changes relating to minor icon/button subpixel changes in the heading, edit section links, and page actions

Bug: T319260
Change-Id: I503b643d33e43196483af4b5f9dd312237322ac8
2023-08-24 15:57:01 -05:00
Volker E 38ca243e39 styles: Replace 'mediawiki.ui/variables' call with skin variables
Replacing 'mediawiki.ui/variables.less' @import with
new skin-aware 'mediawiki.skin.variables.less' standard.
Removing calls for 'mediawiki.skin.variables.less' in favor for
'minerva.variables.less' for consistency.
Also
- replacing several static values with new Codex design token featuring
  skin variables of `background-color`, `color`, `border-*` and
  `transition` categories
- renaming several Less variables to variable naming standard
- moving a small number of MinervaNeue specific variables into
  'minderva.variables.less' file. Those should be replaced in mid-future
  by Codex design tokens

Please note, that this patch is not replacing all values with
possible Codex tokens. It's just applying them on selected
categories for consistency for now to keep the patch easier reviewable.
Further replacements will be done in follow-up patches.

Bump MediaWiki core required version to >= v1.41.0.

Bug: T319381
Bug: T332541
Depends-On: I98c8cc27527533e2efb3b987ee34bc403e988b75
Change-Id: I86c5a35377541a784552c29456e0b8b507b3ee9c
2023-04-24 16:08:27 +00:00
Umherirrender 5bd834e0c7 build: Updating npm dependencies
* stylelint-config-wikimedia: 0.13.0 → 0.14.0

Run stylelint fix to fix the new stylelint rule

Change-Id: I7738ae421e84dd3171355391ebc82dd812b39ca4
2023-03-31 21:50:36 +02:00
Ed Sanders d926771bd8 Remove deprecated vendor prefixes and their mixins
Additional change:
* The animation stylesheet pulled down for the storybook instance
in dev-scripts/setup-storybook.sh is no longer referenced anywhere
in assets so can be removed.

Bug: T306486
Bug: T308351
Bug: T308360
Change-Id: Ia9f2a05cde2724486f7e449261c5d4875388f5ab
2022-05-23 23:18:43 +00:00
jdlrobson 17968826fa Move components files up one level into Skins directory
Follow up to I4c2e115451c0a76c742734730712814c1f1d838d.
This will allow us to load the templates directly into skin.mustache
via {{>PartialName}}

Templates partials can only be resolved relative to the folder given
to the TemplateParser.

Change-Id: I5783d49c25d2efcf4781dd912500bf8b413b8cb6
2021-10-22 18:45:38 +00:00
Inductiveload c4e5cbc9a7 Make missing links in tabs red like all other skins
It's extremely annoying to not know if the link you're about to click in
a Minerva tab is a link to an existing page or not.

So, make the new link red, as is customary in all other skins.

Bug: T236608
Change-Id: I3445f91fe0bcf1ddb305f8c350753e10c2dda0b0
2021-10-19 11:33:42 +01:00
jdlrobson aba173efc6 Remove non-standard components folder
For skins, all templates should be in the same folder. This
is for security reasons, to limit access of templates to files
that are not templates. This also adds consistency with other skins
where templates are all in the same subdirectory. It also allows
us to reduce the creation of TemplateParser instances.

Note: All styles and scripts should be in the resources folder but this
is not rectified by this patchset. Will be done in follow ups following
more discussion.

This begins this work in the least disruptive way possible and drops
the README note to avoid this pattern growing.

Bug: T292558
Change-Id: I4c2e115451c0a76c742734730712814c1f1d838d
2021-10-06 20:13:48 +00:00
Nicholas Ray cb79cbb010 Add max-width to AMC user menu
Note: This menu already has text-overflow: ellipsis, but didn't have a
max-width applied.

Bug: T287522
Change-Id: I51fd7f4b822410190290bef6c962997bb5e47e4f
2021-08-03 17:02:17 -06:00
Volker E fea419f543 Use default @border-radius-base variable
Following WikimediaUI Base variable naming scheme.

Bug: T255230
Change-Id: I71f49d2b554dbca726aee43b19b1554969449403
2020-06-25 19:07:17 +00:00
Volker E c9461c9dd8 Replace skins.minerva.mainMenu.advanced.icons with OOUI icons
Additional changes:
* Address a fixme relating to the overflow icon and move some AMC styles
out of the critical path for non-AMC pages

Note about ellipsis:
The class mf-mw-ui-icon-rotate-clockwise cannot be used as it's part of
MobileFrontend and loaded via JS. Minerva must work without MobileFrontend
and this rotation is needed without JS.

Bug: T244444
Change-Id: Ifd02c50305cf036dd6df640d778678668507e5eb
2020-05-01 12:18:35 -07:00
Umherirrender 78dc3baf5c Use single quotes on less @import
Change-Id: I370dd866e9e3836fe6de4c86a54861f055424d7d
2020-02-07 17:51:49 +00:00
jenkins-bot 6f571aa4ed Merge "Remove border-radius" 2020-01-06 21:20:38 +00:00
Krzysztof Witucki 3ec0ca1e6e Remove border-radius
ToggleList.less: remove border-radius style from .toggle-list__list
userMenu.less: add border-radius to .minerva-user-menu-list
pageactions.less: add border-radius to .page-actions-overflow-list
design feedback: (see T231205#5771626)

Bug: T231205
Change-Id: Ia06e230a53ddba7931a2869209e0851b11ca8030
2020-01-06 21:47:55 +01:00
jdlrobson cd0a86045a Do not load toggle list CSS twice
Now that ToggleList is loaded in skins.minerva.mainMenu.styles
which is loaded for all users, we should not load it again in
skins.minerva.amc.styles

Change-Id: I6d33a83f20a20956427f261f1900f3cfd8e0153b
2020-01-06 20:09:30 +00:00
jdlrobson 1735325f47 Correct personal and overflow menu padding and positioning
Bug: T233050
Change-Id: I09d1c53d2088034ab4eec0fa6b4af3daf66e2003
2019-09-16 20:32:19 +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
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
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
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
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
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
Jan Drewniak 8ae59453de Reduce margin below article/discussion tabs.
Bug: T225230
Change-Id: I318848d8e47b0a7d4f47946a1f2ae22a5c7878bb
2019-07-22 13:42:12 +02: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 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
Jan Drewniak f92b117158 Remove margin from tagline and add .page-heading element
Even though on most pages the tagline is empty, it still
has a bottom margin associated with it. This patch moves
that bottom margin into a container element that wraps
both the h1 and tagline.

This approach allows us to remove the bottom-margin from the tagline
as well as the top-margin from the AMC tabs in favour of just
one bottom margin on the .page-heading element.

Bug: T214195

Change-Id: I67d3938ab4a75f994acc28a8eefdf19e531c1f3d
2019-02-19 12:37:27 +01: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 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