Commit graph

44 commits

Author SHA1 Message Date
Jon Robson e7b4edf7a6 [Refactor] Rethink Dropdown component
The Dropdown component should be considered the dropdown folder going
forward. This should be distinguished as a different component that
composes the Dropdown component

Since the template itself is rather simple it seems preferable to have
duplicate templates that describe the actual component (PageTools,
VariantsDropdown and LanguageButton)

MenuDropdown is renamed Dropdown and styles that don't correspond to the
Dropdown component are moved to the relevant components.

MenuContents mustache template (future component) is added to DRY up
several of the new templates.

Bug: T320927
Change-Id: I220d0a477b3f05b278bd2cec7dd601c7b3b17c6f
2022-11-29 17:33:03 -08:00
Jon Robson 7c24aa46fb Drop the VisualEnhancementsNext feature flag
Bug: T320101
Change-Id: I6d536af034dafd66c6478183de8029be9ed3e8b7
2022-11-21 13:27:34 -08:00
bwang 6bff0011c1 Fix ToC dropdown menu spacing when visual next flag is enabled, address icon related feedback
Causes 20 visual progressions regardless of visual next flag, the ToC moves 1px when in the sidebar

Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06

Bug: T321504
Change-Id: I4b3ec90d8e79791a1bf17ba02c9f9d722499bec8
2022-11-11 18:56:12 +00:00
Jon Robson ea07136e73 Fix alignment between icons on left and right of screen
- Table of contents arrows are now aligned with sticky header search/hamburger
- The user menu dropdown now aligns with more and languages button

Bug: T321504
Change-Id: If3aed0ac401b0abc80c3ad52806eb85b33d43f06
2022-11-04 17:06:48 +00:00
bwang 099eed0487 Remove CSS classes and selectors from cached HTML
Bug: T316570
Depends-on: Ib4050768f20b1734d356104f18aa539f657099d8
Change-Id: I97f87b32402d7f4fd790f9a8b9abab42efd9d890
2022-11-03 11:12:39 -05:00
Jon Robson a1199a0917 Use standard utility classes for flushing icons left and right
Restricted to the feature flag (?vectorvisualenhancementnext=1)
 for now to allow us to not worry about caching.

mw-ui-icon-flush-left and mw-ui-icon-flush-right have been in core
for some time and using them means we don't have to manage hardcoded
values for these.

We'll need to think of .mixin-vector-flush-left-left
and .mixin-vector-flush-right-margin-left separately - I wonder
if these could be revised to use these 2 standard classes.

Additional changes:
- Drop unused mixin-vector-flush-right-margin-left mixin

Bug: T321504
Bug: T317583
Change-Id: I51f8e31be6771a3fb32fb07dc22d0c2872b5706d
2022-10-26 10:01:12 -07:00
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 785926d8ba Technical: Generalize icon flushing
This code is not resilient to changes in the mw-ui-icon definition
In preparation for changing touch areas we need an easy way to
flush these correctly based on feature flag.

No expected visual changes.

Bug: T314323
Change-Id: Ia10a7c696c690887a37851684215e515474fbd90
2022-09-30 20:12:14 +00:00
Jon Robson 83458dd8dd Icons: Globally set icon colors to @opacity-icon-base
Also use other icon opacity variables where applicable.

Bug: T317800
Depends-On: If2f99124b01ce99b5131fdb960c60952075f6343
Change-Id: Ib8b3d11bd1bd6f902ff846eeb2a8f9cf3c7077b2
2022-09-19 19:28:19 +00:00
bwang fd783b0499 Update collapsed TOC menu width
Visual changes:
- Collapsed TOC menu width depends on TOC content, with a max width of 51em or 75vw
- Collapsed TOC menu in sticky header no longer has a horizontal scrollbar

Bug: T316056
Bug: T316609
Change-Id: I1da9c16366b55c77ef13bac899ed8ecb2d77fdb9
2022-09-15 17:37:28 +00:00
bwang e28e197f1f Prevent language button in sticky header from word breaking
Bug: T316609
Change-Id: Ie4d9efad0850dce52a6e383574b14d986a824d4a
2022-09-15 16:28:26 +00:00
bwang 4c622fe8de Correct ContentHeader source order to match design
- Use flexbox instead of float

Visual changes:
- The title wraps differently when the title is very long

Bug: T313947
Change-Id: I2915e36286b21c8fd1a07247ada7754a08a0b574
2022-09-08 19:10:55 +00:00
jenkins-bot e60716e63d Merge "Align language button" 2022-09-07 22:21:27 +00:00
bwang cdae8b1937 Align language button
- Add margin-right to language button
- Remove @margin-start-sidebar-content CSS variable as it's name isnt accurate anymore, and its value is derived from @icon-padding-md

Bug: T315615
Change-Id: I75dd87536f70da55c9fa7e0e29ed6b4040d2ddf4
2022-09-07 09:47:55 -05:00
Jon Robson 742f659b10 FeatureManagement: All features have an associated class on the body tag
This is a common need for features, and having these use a standardized
class name will make using them a lot easier.

Change-Id: I0e16c26878e7d4399d2bf57f236523d214951a27
2022-09-01 22:09:48 +00:00
jenkins-bot ee91a813d3 Merge "styles: Replace LanguageButton variable nomenclature" 2022-07-27 20:28:18 +00:00
Volker E ee7f59171f styles: Replace LanguageButton variable nomenclature
`height-lang-button` => `height-button-lang`
First component, then subtype.

Bug: T313243
Change-Id: Icd053cb64ef0af84b37e27b0dbfc0e8ceb521863
2022-07-26 07:46:42 -07:00
Santhosh Thottingal 40f6c5e29d Show ULS button when article exist only in single language
When the article exist only in one language, currently we do not show
language selector. This prevents showing the entry points to create article
in other languages by various means.

Show the language selector so that options like translate, interlanguage
links, language settings can be shown.

Bug: T275147
Bug: T290436
Depends-On: I42c5d44ec15e291d71723c9738ddb8f0d1cf0b09
Change-Id: I7fb68457c1203d824fe7433c9f272f300a483c44
2022-07-21 16:28:22 -07:00
Jan Drewniak 3c0559a71d Refactor chevron across components + separate watchstar
Consolidates the CSS responsible for styling chevrons into one
implementation. This removes the need for custom padding and
background positioning for the following components:

- "more" menu
- user menu
- watchstar
- language button
- languge button in sticky header

Instead of absolutely positioning the chevron on these components,
the parent label element is set to `display: inline-flex` so that
the chevron is vertically aligned and given enough space by default.

The watchstar, although not a chevron, is also given the
`display: inline-flex` treatment so that it can be aligned with
other elements in the toolbar.

This new implementation requires splitting the watchstar
component into legacy and modern due to a quirk in Firefox that
causes a bug with the watchstar in legacy Vector.

NOTE: This change causes visual changes due to the difference in
centering the chevrons via flexbox vs percentage positions.

Bug: T308344, T310838
Change-Id: Ie9e0fce1366cd25a5899fee49770de4a09424fe2
2022-07-21 10:14:21 -04:00
Jon Robson a3905e9acd CSS cleanup: Revise CSS that is no longer needed per FIXME guidelines
Bug: T311773
Bug: T308344
Change-Id: Idf943449b5e4358749be47435b3032215e533353
2022-07-11 15:43:44 +00:00
bwang 61e723c541 TOC: Ensure TOC spacing is correct when grid is enabled
Fix usage of CSS calc

Change-Id: I6dcf3751a4b478a14d8052a70720e138238203d3
2022-06-24 23:09:50 +00:00
bwang d6e1dbd843 Move menu border style to legacy
Bug: T309398
Change-Id: Idfd88d98cb51ee35a359eef90ed54bc0a9feea87
2022-06-08 21:23:23 +00:00
Ed Sanders 7f7d5c4ae5 build: Update stylelint-config-wikimedia to 0.13.0
Change-Id: I122005b6817cf1997002dbe7a1bcbd249c9842cb
2022-05-16 17:44:12 +01:00
Volker E e4d8c573a9 styles: Replace deprecated Less .box-sizing() mixin with standard CSS
Bug: T306488
Change-Id: I299e50397c4bf6f99b9892e83c966fffadd24048
2022-05-12 13:41:30 -07:00
bwang 40045c6e0e Scope ULS styles to when language button is in header
Bug: T304468
Change-Id: Iebacb6a7bf3412a6ee76eb5c9fdb9471c02dd16c
2022-04-07 14:47:44 -05:00
Jon Robson b86dbc756c Address some code FIXMEs
- Remove references to the removed wgVectorUseWvuiSearch
configuration
- Remove mw-body qualifier on Indicators component.
- Drops some cache related FIXMEs

Change-Id: I6823b9c5bf19a067b56badf29f874a7127867a09
2022-03-21 20:29:58 +00:00
jenkins-bot 9c9d8693c5 Merge "Only show scrollbars when needed in language menu" 2022-03-01 20:20:09 +00:00
BrandonXLF 936bbc427a Only show scrollbars when needed in language menu
Bug: T301058
Change-Id: I19af6c27b7adf8a35ccbc4163c585e338240eb72
2022-02-05 21:24:47 -05:00
Clare Ming 19e5d2885a Fixes for sticky header:
- Make page title width fill container.
- Remove page title fadeout, replace with ellipsis.
- Prevent language button contents from wrapping.

Bug: T298885
Bug: T300036
Bug: T298887
Change-Id: I6b09f89ed89a9da7406cdf8b3a00698a9dd66d10
2022-02-04 15:36:35 -07:00
bwang b79290f5c9 Make ULS in header quiet progressive button
Bug: T291286
Change-Id: Id1e056330606b87bafb8f43e7ff28d96290465b4
2021-12-09 15:27:04 +00:00
jdlrobson f0ed70d709 Restores language button icon font size
The font size of icons should never be changed. Since it's also a span

Bug: T296212
Change-Id: I8bf4e9a7d43a9e5206d3ff6d89e2c3f74fa0d25a
2021-12-01 01:08:49 +00:00
bwang 809a972676 Fix sticky header language button
- Fixes blank sticky header language button when no languages are present
- Adds arrow to sticky header language button

Bug: T289815
Change-Id: I36dc5fb0aad9c3ca1fced0d46e5167e8707f6731
2021-09-21 19:59:16 +00:00
jenkins-bot 82832b137a Merge "Remove disable dropdown behavior" 2021-09-13 07:05:25 +00:00
jdlrobson b88f2970f7 Simplify how we generate icons and button classes in Vector
- Separate icon classes from button classes in user links/language
- Upgrades the personal tools language button preference to
a mw-ui-button with icon
- Adds a generic selector for dropdown menus without an icon
- Cleans up user links CSS now mw-list-item class is available
- Removes icon hack CSS

Bug: T289630
Bug: T283757
Change-Id: Ib518858e06549f252d73d57fd4768f446cc561b9
2021-09-03 19:25:31 +00:00
jdlrobson c8dd4e9ed1 Remove disable dropdown behavior
Now that we bind the ULS dialog to the checkbox element,
(see c08ae11) the default behaviour of the checkbos is prevented,
so it is impossible for the dropdown to ever
be shown when ULS is enabled and clicked so this code no longer
serves any purpose.

Depends-On: I97a69c30b27cb1ded06451389e086229561c3589
Change-Id: Ic9d03dea12ee8bb2d7430eccd70e4343e3805d36
2021-08-31 20:53:41 +00:00
bwang c08ae1152e Update ULS button states to be consistent with other quiet buttons
- JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox
- JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style)
- JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states
- Old styles and skinStyles are removed

Bug: T283757
Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556
2021-08-31 10:59:59 -05:00
Clare Ming 129bf5c350 Update vector menu hide dropdown class to use BEMish convention.
- Keep double-dash class name for cached HTML.
- Update instances of renamed class in less + js.

Bug: T253671
Change-Id: Ieb1ce630e8fa84167e2ca8497f66a20183fdaf90
2021-08-24 15:33:41 +00:00
bwang a27b6f7096 Copy interwiki links into sidebar
Bug: T287206
Change-Id: I951b2a277f9484f8e2735951d85c0766098607b5
2021-07-27 12:08:11 -05:00
jdlrobson e96cce7207 Restore the true height of the language button
Drop the override, now that the skinStyles have been identified
that were causing this irregularity.

Depends-On:   I9d62ad8a79168bdaebace07fb82f22da4c534b5c
Bug: T191021
Change-Id: Ic5bc639186477570028efa1cb2a09cd64a5aaca1
2021-07-22 16:27:48 -07:00
jdlrobson 96136a0e2d Remove Vector skinStyles for icons and fix language button
Depends-On:  Id08590f6a3fbbfda8226f2899f50f0b64cbb1481
Change-Id: I5be642f2e20d67e1d27c74ddb6ec086738a261aa
Bug: T191021
2021-07-21 11:02:42 -07:00
Jan Drewniak 9027d57804 Fix: update to 80d734b4, hide language dropdown when ULS loads
Bug: T276140
Change-Id: I70997fbc54554b8d1b9c271a5ca93f2a47f1ee92
2021-05-07 12:24:30 +02:00
Jan Drewniak 80d734b4d2 Place language button near bottom of Main page.
In modern Vector, the language button that is placed inside
the page header should appear near the footer, if the page is a
Main page.

This changes some CSS selectors to not depend on the language
button having the `.mw-body-header` parent element.

Bug: T276140
Change-Id: I97bf0c11d0321752d472ac4988618a1db92b7271
2021-05-05 13:42:19 +02:00
Jan Drewniak f52c2f8a4a Scope right-aligned dropdown menus to #right-navigation & .mw-portlet-lang
Removes the global rule for right-aligning the Vector dropdown menus
and instead scopes that alignment to dropdown menus that appear
inside #right-navigation and the language button in modern Vector.

Bug: T275158
Change-Id: I6c00ccc365f70682841d9eda9d31bbe25c757aa0
2021-04-14 23:31:59 +02:00
Jan Drewniak edd2f4ff85 Reorganize LESS files to match ResourceLoader conventions
Separating most LESS files into 2 ResourceLoader modules and a common
folder:

- skins.vector.styles
- skins.vector.styles.legacy
- common

This changes aims to clearly separate the old (“legacy”), the new
(“modern”) and the common styles which were previously all placed under
`skins.vector.styles/`.

Inside each directory are separate folders for `layouts` and
`components`.

The entry files, `skin.less` and `skin-legacy.less` are moved into the
specific folders and a third, `common.less` entry file is created that
contains the common imports for both old and new Vector.

Aliases have been added to the Storybook Webpack config to avoid adding
the story file changes to this patch. Images coming from CSS `url()`'s
have also been temporarily disabled in Storybook until Storybook can be
upgraded to use Webpack 5, and use array values for aliases, in a
follow-up patch.

This patch also slightly changes a footer layout specific rule so that
existing `padding` remains unchanged in rendering due to new common and
component structure.

Bug: T264309
Change-Id: I1cd2681a2b61edb7be56c38f9bb3994827d7e322
2021-04-08 15:47:56 +01:00
Renamed from resources/skins.vector.styles/LanguageButton.less (Browse further)