mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-23 23:33:54 +00:00
Update language dropdown for pages not supported in other languages
Pages that are not supported in other languages should not display the ULS when the language button is clicked. Instead, a simple message explaining that the page contents are supported in other languages should be displayed inside the dropdown. Additionally, the language button should be modified for these non-content pages, to non include any label and be quiet instead of progressive. This patch implements these specifications by appropriately modifying the mustache templates and the underlying skin classes. Bug: T316559 Change-Id: I37d8e61a1287b31d1a304d2a955f532b9b8fa505
This commit is contained in:
NikG
Jdlrobson
parent
a43d522331
commit
d39b5c958a
|
|
@ -58,5 +58,6 @@
|
|||
"vector-2022-prefs-talkpage": "[[mw:Talk:Reading/Web/Desktop_Improvements|Discussion]]",
|
||||
"tooltip-vector-anon-user-menu-title": "More options",
|
||||
"vector-prefs-limited-width": "Enable limited width mode",
|
||||
"vector-prefs-limited-width-help": "Enable limited width mode for improved reading experience."
|
||||
"vector-prefs-limited-width-help": "Enable limited width mode for improved reading experience.",
|
||||
"empty-language-selector-body": "Page contents not supported in other languages."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,5 +74,6 @@
|
|||
"vector-2022-prefs-talkpage": "Link to the desktop improvements project talk page which is shown before the preview link in skin preferences. See T307113 for more information.",
|
||||
"tooltip-vector-anon-user-menu-title": "Used as title attribute for user menu icon on hover for anonymous users.",
|
||||
"vector-prefs-limited-width": "Used in [[Special:Preferences]]",
|
||||
"vector-prefs-limited-width-help": "Help message used on [[Special:Preferences]].\n\nSee also:\n* {{msg-mw|Mypreferences}}"
|
||||
"vector-prefs-limited-width-help": "Help message used on [[Special:Preferences]].\n\nSee also:\n* {{msg-mw|Mypreferences}}",
|
||||
"empty-language-selector-body": "Text of the body of the dropdown that explains to the user that the page is not supported in other languages. The dropdown opens when the less prominent language button is clicked, inside non-content pages"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<?php
|
||||
namespace MediaWiki\Skins\Vector\Components;
|
||||
|
||||
use Title;
|
||||
|
||||
/**
|
||||
* VectorComponentLanguageButton component
|
||||
*/
|
||||
|
|
@ -16,6 +18,8 @@ class VectorComponentLanguageDropdown implements VectorComponent {
|
|||
private $numLanguages;
|
||||
/** @var array */
|
||||
private $menuContentsData;
|
||||
/** @var Title|null */
|
||||
private $title;
|
||||
|
||||
/**
|
||||
* @param string $label human readable
|
||||
|
|
@ -25,11 +29,12 @@ class VectorComponentLanguageDropdown implements VectorComponent {
|
|||
* @param string $itemHTML the HTML of the list e.g. `<li>...</li>`
|
||||
* @param string $beforePortlet no known usages. Perhaps can be removed in future
|
||||
* @param string $afterPortlet used by Extension:ULS
|
||||
* @param Title|null $title
|
||||
*/
|
||||
public function __construct(
|
||||
string $label, string $ariaLabel, string $class, int $numLanguages,
|
||||
// @todo: replace with >MenuContents class.
|
||||
string $itemHTML, string $beforePortlet = '', string $afterPortlet = ''
|
||||
string $itemHTML, string $beforePortlet = '', string $afterPortlet = '', $title = null
|
||||
) {
|
||||
$this->label = $label;
|
||||
$this->ariaLabel = $ariaLabel;
|
||||
|
|
@ -40,23 +45,43 @@ class VectorComponentLanguageDropdown implements VectorComponent {
|
|||
'html-before-portal' => $beforePortlet,
|
||||
'html-after-portal' => $afterPortlet,
|
||||
];
|
||||
$this->title = $title;
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
public function getTemplateData(): array {
|
||||
$dropdown = new VectorComponentDropdown( 'p-lang-btn', $this->label, $this->class );
|
||||
$title = $this->title;
|
||||
$isContentPage = $title && $title->exists() && $title->isContentPage();
|
||||
// if page doesn't exist or if it's not a content page, we should
|
||||
// display a less prominent "language" button, without a label, and
|
||||
// quiet instead of progressive. For this reason some default values
|
||||
// should be updated for this case. (T316559)
|
||||
if ( !$isContentPage ) {
|
||||
$icon = '<span class="mw-ui-icon mw-ui-icon-wikimedia-language"></span>';
|
||||
$label = '';
|
||||
$headingClass = 'mw-ui-button mw-ui-quiet mw-portlet-lang-heading-empty';
|
||||
$checkboxClass = 'mw-interlanguage-selector-empty';
|
||||
} else {
|
||||
$icon = '<span class="mw-ui-icon mw-ui-icon-wikimedia-language-progressive"></span>';
|
||||
$label = $this->label;
|
||||
$headingClass = 'mw-ui-button mw-ui-quiet '
|
||||
. self::CLASS_PROGRESSIVE . ' mw-portlet-lang-heading-' . strval( $this->numLanguages );
|
||||
$checkboxClass = 'mw-interlanguage-selector';
|
||||
}
|
||||
$dropdown = new VectorComponentDropdown( 'p-lang-btn', $label, $this->class );
|
||||
|
||||
$dropdownData = $dropdown->getTemplateData();
|
||||
// override default heading class.
|
||||
$dropdownData['heading-class'] = 'mw-ui-button mw-ui-quiet '
|
||||
. self::CLASS_PROGRESSIVE . ' mw-portlet-lang-heading-' . strval( $this->numLanguages );
|
||||
$dropdownData['heading-class'] = $headingClass;
|
||||
// ext.uls.interface attaches click handler to this selector.
|
||||
$dropdownData['checkbox-class'] = ' mw-interlanguage-selector';
|
||||
$dropdownData['checkbox-class'] = $checkboxClass;
|
||||
// Override header icon (currently no way to do this using constructor)
|
||||
$dropdownData['html-vector-heading-icon'] = '<span class="mw-ui-icon ' .
|
||||
'mw-ui-icon-wikimedia-language-progressive"></span>';
|
||||
$dropdownData['html-vector-heading-icon'] = $icon;
|
||||
$dropdownData['aria-label'] = $this->ariaLabel;
|
||||
$dropdownData['is-language-selector-empty'] = !$isContentPage;
|
||||
|
||||
return $dropdownData + $this->menuContentsData;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -196,7 +196,8 @@ class SkinVector22 extends SkinVector {
|
|||
count( $this->getLanguagesCached() ),
|
||||
$langData['html-items'] ?? '',
|
||||
$langData['html-before-portal'] ?? '',
|
||||
$langData['html-after-portal'] ?? ''
|
||||
$langData['html-after-portal'] ?? '',
|
||||
$this->getTitle()
|
||||
) : null,
|
||||
'data-toc' => new VectorComponentTableOfContents(
|
||||
$parentData['data-toc'],
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
{{! Use `.mw-portlet-lang` to target styles at this element}}
|
||||
{{>Dropdown/Open}}
|
||||
{{>MenuContents}}
|
||||
{{#is-language-selector-empty}}
|
||||
<div class="mw-portlet-empty-language-selector-body">
|
||||
{{msg-empty-language-selector-body}}
|
||||
</div>
|
||||
{{/is-language-selector-empty}}
|
||||
{{^is-language-selector-empty}}
|
||||
{{>MenuContents}}
|
||||
{{/is-language-selector-empty}}
|
||||
{{>Dropdown/Close}}
|
||||
|
|
|
|||
|
|
@ -97,6 +97,19 @@
|
|||
// ensure there is a visual separation between the language links and additional links.
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
// styles for less prominent Language button (without label) to be used for non-content pages (see T316559)
|
||||
.mw-portlet-lang-heading-empty + .vector-menu-content {
|
||||
left: auto;
|
||||
right: 0;
|
||||
min-width: 300px;
|
||||
|
||||
.mw-portlet-empty-language-selector-body {
|
||||
padding: 20px;
|
||||
border-bottom: @border-style-base @border-width-base @border-color-portal-heading;
|
||||
color: @color-base--subtle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hides language button with CSS, ensures language button is in DOM for temporary JS hack for interwiki links
|
||||
|
|
|
|||
Loading…
Reference in a new issue