Commit graph

9 commits

Author SHA1 Message Date
Jan Drewniak 1dad545f63 Adds loading indicator for new search module
Provides a loading indicator to show while the new Vue.js based
search widget loads. Given that the new widget will pull down the
entire Vue.js runtime, it's likely that there will be a delay
before the search suggestions appear. This loader is meant to
improve the perceived loading experience of the new widget.

Adds:
- New searchLoader.js file containing loading behaviour.
  - This overrides the code searchSuggest loading behaviour.
- New SearchBoxLoader.less file containing the loader styles.
- i18n message: 'vector-search-loader'.
- The Event type to jsdoc.json

Bug: T254695
Change-Id: I6b5f0a60018954e10b9e80792030b67b2ec33e5a
2020-09-08 13:59:41 +00:00
Peter Ovchyn 7b8bad23f2 Vector manages search functionality and provides config flag
Add onSkinPageReadyConfig hook that overrides module after page loaded
The new module is currently empty pending further work in the
feature branch.

Depends-On: I0dc38e74052027f26a70d58b5f520e5830e0d55d
Bug: T257706
Change-Id: Ib6c8f890fb3d6e751f5f01a6576614b9cc9b440c
2020-08-04 00:06:31 +00:00
Jan Drewniak 1fac82f895 Sidebar persistence for logged-in users in modern Vector.
- Creates a new user-preference called 'VectorSidebarVisible'
which stores the sidebar hidden/collapsed state for logged-in
users.
- Updates that user-preference on the client whenever the sidebar
is expanded or collapsed.
- Refactors the sidebar related javascript into a separate file.

Bug: T255727
Change-Id: Ib1ce934f3646cd8feebf0d3b15c38b5b969ec957
2020-07-09 00:28:52 +02:00
Ed Sanders 36e91dc04f build: Update devDependencies
Applies new ESLint documentation rules

Change-Id: I7fe458cf52e98baf92f3baec2d9ff54484326673
2020-07-01 14:43:39 -07:00
Nicholas Ray b40c3f3743 Update CheckboxHack interface for future placement of aria-expanded on label button
Currently, the `aria-expanded` attribute is placed on the checkbox
element. However, since Ife287fc8c6e0d2aee5facf42d5d4308dea918ee3, the
checkbox is excluded from the accessibility tree, and this attribute
should be placed on the label button instead.

This commit prepares for future changes [1] to the checkbox hack interface
in a backwards compatible way:

* Passes button to `updateAriaExpanded` function

* Passes button to `bindUpdateAriaExpandedOnInput` function

[1] Ia2755e189babbd70945b66a1a812fc3ece40b577

Change-Id: Icc6ba994d57ea1f8050aa408aebc8c81f03d8783
2020-06-29 13:31:24 -06:00
Stephen Niedzielski 3003724a3a [fix][Less] disable sidebar animations on page load
There's a longstanding Chrome bug that causes CSS transitions to show in
their terminal states. This patch works around the issue by limiting
transitions to JavaScript users only via the `client-js` class which is
added to the root `html` Node some time after page content loads. The
effect is a better overall experience for everyone but transitions
unfortunately no longer appear for no-JS devices.

I am unable to reproduce this issue in Vector's configuration. This
patch should only be merged as a last resort.

Bug: T246419
Bug: T234570
Change-Id: Ifcb2bf1fddb85113a4858b7a210ded3954952e6e
2020-06-09 12:18:59 -06:00
Stephen Niedzielski a0d2c2497b [fix][RTL] flip menu collapse button icon
Fix the icon button directionality in right-to-left languages.
Previously, the button was hardcoded to support left-to-right only.

- Replace the skin.vector.icons' `.mw-ui-icon-wikimedia-{name}:before`
  `selector` in skin.json with a placeholder, `{name}`. I don't think
  this selector should be needed but it seems to be erroneous not have
  one. I believe this issue of wanting a null selector was encountered
  in Minerva or MobileFrontend but am unable to locate the past
  discourse.

- Add check and unchecked menu button selectors to skin.json that set
  the appropriate background image. This shards some of the styles out
  of Less and into ResourceLoader-land but it's worthwhile.

- Revise the name of horizontal collapse icon to describe its form not
  function, "collapseHorizontal" to "chevronHorizontal". This has been
  an established convention that was missed a couple patches back.

- Add a flipped chevronHorizontal for RTL. I used Inkscape to do the
  flip and tried to match the style of the original by hand. Feel free
  to edit further.

- Drop the now unnecessary icon flipping JavaScript and initial Mustache
  class. This enables a real CSS-only solution for the icons.

Bug: T246419
Change-Id: I60f65b3c595bf18d309b667d9a0b066691b90c97
2020-06-03 17:09:38 -06:00
Volker E fd250975c4 Fix misconception on icon coloring
It's advisable to rely on default icon color and set it's color
by opacity. With that we've got a better playing field to respond
to user interaction with icon color changes, not relying on
several icons at once for different states and also being
backwards-compatible for a variety of browsers.

Change-Id: Iaff869774007ed962104d704103f0392a3516f4f
Bug: T246419
2020-06-02 23:06:49 -06:00
Volker E 4200a8665c Naming convention using 'skin' as entrance point
Using 'skin' as entrance point files, similar to already existing
convention in MediaWiki land with 'skin.json' or 'SkinVector.php' as
example in Vector skin. Replacing Apache inspired 'index' convention.
Also renaming legacy to 'skin-legacy' to be clear on file base that it's
a modification of 'skin'.

Bug: T249073
Change-Id: Ief1c469724d4ffe238d307407c3ddb46f2e1abfa
2020-05-28 20:58:01 -07:00
Renamed from resources/skins.vector.js/index.js (Browse further)