Commit graph

26 commits

Author SHA1 Message Date
bwang 51457a78e7 Replace incorrectly mw- prefixed classes
Rename template and CSS files to match updated naming conventions, replaces instances of "sidebar" with "main menu"

Bug: T316570
Bug: T317437
Change-Id: Ib4050768f20b1734d356104f18aa539f657099d8
2022-10-25 10:28:31 -05:00
Jon Robson c8d2c6e460 [Storybook] Fixes state of various components
Change-Id: Icd3fef87485aaa7abc2f10534ccdc8960ef06f1d
2022-07-08 11:36:43 -07:00
Jon Robson 6efcf775c0 Technical: Use unambigious menu template
Follow up to 49c8b5f514
Our PHP parser resolves >Menu to the parent directory which
differs from the frontend Mustache library.

Best to have different names for these files to avoid this problem.

Bug: T311319
Change-Id: Iea708718a0b928c4902dc7bac0c5ee304b89f961
2022-06-27 12:29:03 -07:00
jdlrobson 44aeee5d83 Vector uses html-title-heading
The H1 is available with the correct attributes in core now, so
we can use that instead of our own markup. This also means Vector
will benefit from updates to the heading in core such as main page
special handling.

Bug: T297728
Change-Id: I4d10370678fad6455d73994bf340891760543b71
2021-12-15 22:27:48 +00:00
Ed Sanders 90b5ff5149 Define documentable types in eslintrc instead of inline
Change-Id: I80f0557a6355208d2694f3776cce2ee858573a9c
2021-10-18 18:08:32 +00:00
jdlrobson 31dba307ed [refactor] SearchBox uses Icon template partial
Change-Id: I8ff49b85dd2151618e48251e0fc38152a50ca381
2021-09-09 18:57:37 +00:00
jdlrobson 6300923601 Storybook should include UserLinks
Merge UserMenu into UserLinks for legacy and modern
Add a story for the UserLinks menu

Fixes: rendering of Skin (legacy) personal tools (the user icon
no longer overlaps)

Change-Id: I491ebb3962780bf2cf7f1dfb4dd09d576c294366
2021-05-27 19:27:27 +00:00
Jan Drewniak c22dc8d95b Refactor: Renaming mustache variable page-isarticle to is-article
Modifies this variable name to use proper hyphen-case and
prioritizes the type of variable rather than it's source.

This prioritization makes sense in Mustache templates because the
variable is a boolean and is used exclusively in if statements,
e.g. {{#is-article}} ... {{/is-article}}

Change-Id: I72e9baf0a979d922b8217aabe8cf0c40699f891b
2021-05-10 08:55:06 +00:00
jdlrobson 8d8e2d85e6 Language button is quiet with focus, active and hover states
* Add mediawiki ui button styles to Vector and convert language
button to a quiet button
* Restore the arrow for language button with ULS
* Vertically align button to first line of header
* Add a storybook entry for LanguageButton

Additional changes:
* Fix issues revealed by storybook - menu dropdown should
reset generic typography rule for `ul` tags
* Allow quotes usage in storybook without disable rule

Bug: T268241
Change-Id: I483350084fb46a51c50af6aab78c62db6d02df89
2021-03-01 20:01:45 +00:00
jdlrobson 9f1a1fa829 Simplify menu code
SkinMustache in core provides most of what is required for Vector to
generate its menus.  In the interest of having a canonical source of
truth for menus across all skins, Vector should use this data.

To ensure the HTML generated is (mostly) the same after this patch to
prior, a few modifications are necessary:

* The data from core is decorated so that Vector can continue having its
  own custom class names on menus. This is done using the
  decoratePortletClass method.
* There is no support for a menu having a header representing the
  selected menu item, as is currently the case with variants. This is
  achieved via an extension to getPortletData. It's assumed that later
  when variants are merged with languages, this can be removed.
* Menus are agnostic to how they are displayed, so we must continue to
  add the is-dropdown template variable to drop down menus. In future we
  may want to rethink our Menu partial to make this unnecessary in PHP.
* The portal-first class is redundant in the modern Vector as we can
  use the first-child selector. Previously we introduced a class to
  service the legacy skin where this rule doesn't apply as #p-logo is
  the first child.  However, the legacy skin can do this using a special
  next sibling selector instead.

Bug: T268157
Change-Id: I5f7adc1840441b508ffee40139b85b64021789e6
2021-01-04 19:02:34 +00:00
jdlrobson 227534102a Separate opt out data from sidebar
In preparation for using the data provided by SkinMustache class
we need to separate the opt out data from the rest of the sidebar.
The opt out data is specific to Vector.

Change-Id: I4461da92c1787d272bbf99e6644bdb9e6c388a68
2020-11-05 22:08:00 +00:00
jdlrobson edb8872c95 Fix storybook instance display of footer and personal menu
* The classes provided on the personal menu are incorrect. Rectify these
by creating a menu helper
* Register the footer template partials

Change-Id: I4b73be54c073f0dd350c107b18f10456c9ee1b17
2020-10-08 16:08:43 -07:00
jdlrobson 5ac25943a2 Refactor: All messages should be listed from skin.json
This allows us easily to identify in templates what messages are
used and where, as well as allow us an easy way to tell when
messages are no longer being used.

Change-Id: I610224d551ebea54ae32e9e79901befe80cfd5ce
2020-08-28 17:12:10 +00:00
Ammar Abdulhamid a7c983a2ed Remove VectorBeforeFooter hook
Bug: T255214
Change-Id: Iac66823119c7279f5e922b0e258602dd6c4ca5c4
2020-07-30 13:27:04 -07:00
jdlrobson 39a333452b Refactor: html-userlangattributes -> html-user-language-attributes
This matches the name in core and is needed in preparation for
switching to SkinMustache

Additional change:
The JS variable htmluserlangattributes is renamed
"htmlUserLanguageAttributes"

Change-Id: I306ebb615f720852fb35c25ac240d6b802d05ecc
2020-07-15 10:18:45 -07:00
jdlrobson 7a16ae249e Rename template variables to mirror SkinMustache
The renames made in this patch mirror the upstream change in
I3f7b2e5f07d03ac04ecdcba585194d619abe35e0 in preparation for adopting
the SkinMustache class.

Renames:
* 'data-indicators => 'array-indicators'
* 'html-bodycontent' => 'html-body-content'
* 'html-undelete' => 'html-undelete-link'
* 'html-sitenotice' => 'html-site-notice'
* 'html-catlinks' =>  'html-categories'
* 'html-dataaftercontent' => 'html-after-content'
* 'html-userlangattributes' => 'html-user-language-attributes'

Adjustments
* 'html-debuglog' is moved into html-printtail for consistency with
SkinMustache in core
* html-printfooter is now a part of html-bodycontent for consistency with
SkinMustache in core
Note: the activity of removing html-printtail and html-headelement from
the templates will be done when we adopt SkinMustache.

Bug: T257630
Depends-On: Ibac9729eaa96a38bc730a0132b102a894f6a172d
Change-Id: Ie92bda7846767c3cc9a1937c96a7fc08415b1bae
2020-07-13 21:57:40 +00:00
Ed Sanders 36e91dc04f build: Update devDependencies
Applies new ESLint documentation rules

Change-Id: I7fe458cf52e98baf92f3baec2d9ff54484326673
2020-07-01 14:43:39 -07:00
jdlrobson 823c3f0bb9 Separate languages portal from other portals in sidebar
In preparation for moving the languages out of the sidebar (T256023)
and to facilitate experimentation in the Universal Language Selector
extension, we should separate the data from the languages portal
from other portals.

Note the languages portal has traditionally appeared at the bottom
of the sidebar, so this can be done safely in the same way we
introduced data-portals-first

Change-Id: I4be06278ec256cc55aee36c2946339fb49d21b46
2020-06-22 15:28:02 -07:00
jdlrobson a6dd9b25c5 Model indicators as their own template rather than a block of HTML
This reverts commit be3843e2a3 and
makes a few corrections.

Bug: T251212
Change-Id: Icb17f94e7fa4a70b0a0ea0b9cb9a12f2e727946f
2020-06-09 14:30:08 -07:00
Jdlrobson be3843e2a3 Revert "Model indicators as their own template rather than a block of HTML"
This reverts commit 0536bda116 which had a few problems. Thanks Timo for pointing them out.

Change-Id: Ie43a2068fdb14cc7c65eb670e93787f1fe12c6b3
2020-06-03 19:41:15 +00:00
jdlrobson 0536bda116 Model indicators as their own template rather than a block of HTML
Bug: T251212
Change-Id: I44b1e17f21112896d2bef54d04f17df861bb3dbb
2020-06-03 18:25:51 +00:00
jdlrobson e84809c44b Cleanup: Standardise msg keys
Keys prefixed with msg- should relate to i18n keys. Fix the existing
template variables where that's not the case.

Change-Id: I33587a09a9803a3667eaeea95ce3e1753439f413
2020-06-01 21:05:56 +00:00
jdlrobson 9cd47c5339 Refactor: VectorMenu merged in to Menu
Bug: T249372
Change-Id: Ifaf78b507c12aa251228213c89751cbb4d111d9a
2020-05-06 16:09:22 -07:00
jdlrobson a43e79c1d3 Refactor: Merge VectorTabs into Menu
Bug: T249372
Change-Id: Ib6ae191b31564dc23a3b1d6aedf48cbaaad006af
2020-05-06 10:23:58 -07:00
jdlrobson a3bb097cf8 Refactor: Generalise personal menu
the PersonalMenu should be generalised. In future we will use it as
the template for all menus

Bug: T249372
Change-Id: Id1c43d2e9eefef1d7aec45f0137e27f10ad935df
2020-05-05 17:34:44 -07:00
jdlrobson 6a9ee465bc [modern] A new version of Vector with a new logo
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.

Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.

Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.

Sample config:

$wgLogos = [
        'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
        'tagline' => [
                'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
                'width' => 117,
                'height' => 13,
        ],
        '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
        'wordmark' => [
                'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
                'width' => 116,
                'height' => 18,
        ],
];

Coauthor: Aron Manning

Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-04-30 14:11:54 -07:00
Renamed from stories/skin.stories.js (Browse further)