Add language switching alert in sidebar for language in header
- Add i18n messages. - Update relevant data methods in Vector. - Update sidebar template + styles. - Add new template partial for sidebar actions. - Add feature flag to turn on/off alert. Bug: T295555 Change-Id: I232ce13770917d51495391f4b8d8d1a3a8a7afb8
This commit is contained in:
parent
a7c16c7f30
commit
9dcfc1ff27
|
@ -11,8 +11,10 @@
|
||||||
"vector.css": "/* All CSS here will be loaded for users of the Vector skin */",
|
"vector.css": "/* All CSS here will be loaded for users of the Vector skin */",
|
||||||
"vector.js": "/* All JavaScript here will be loaded for users of the Vector skin */",
|
"vector.js": "/* All JavaScript here will be loaded for users of the Vector skin */",
|
||||||
"vector-action-toggle-sidebar": "Toggle sidebar",
|
"vector-action-toggle-sidebar": "Toggle sidebar",
|
||||||
|
"vector-languages": "Languages",
|
||||||
"vector-language-button-aria-label": "Go to an article in another language. Available in {{PLURAL:$1|$1 language|$1 languages}}",
|
"vector-language-button-aria-label": "Go to an article in another language. Available in {{PLURAL:$1|$1 language|$1 languages}}",
|
||||||
"vector-language-button-label": "{{PLURAL:$1|$1 language|$1 languages}}",
|
"vector-language-button-label": "{{PLURAL:$1|$1 language|$1 languages}}",
|
||||||
|
"vector-language-redirect-to-top": "On this Wikipedia the language links are at the top of the page across from the article title. [[#p-lang-btn|Go to top]].",
|
||||||
"vector-language-variant-switcher-label": "Change language variant",
|
"vector-language-variant-switcher-label": "Change language variant",
|
||||||
"vector-action-addsection": "Add topic",
|
"vector-action-addsection": "Add topic",
|
||||||
"vector-action-delete": "Delete",
|
"vector-action-delete": "Delete",
|
||||||
|
|
|
@ -23,8 +23,10 @@
|
||||||
"vector.css": "{{optional}}",
|
"vector.css": "{{optional}}",
|
||||||
"vector.js": "{{optional}}",
|
"vector.js": "{{optional}}",
|
||||||
"vector-action-toggle-sidebar": "Accessibility label for the button that toggles the sidebar's visibility, as well as audible presentation for screen readers.",
|
"vector-action-toggle-sidebar": "Accessibility label for the button that toggles the sidebar's visibility, as well as audible presentation for screen readers.",
|
||||||
|
"vector-languages": "Label for language alert in sidebar when language switching is in header",
|
||||||
"vector-language-button-aria-label": "Accessibility label for language button dropdown menu in modern Vector.\n* $1 - the count of languages available, supports plural",
|
"vector-language-button-aria-label": "Accessibility label for language button dropdown menu in modern Vector.\n* $1 - the count of languages available, supports plural",
|
||||||
"vector-language-button-label": "Label for language button in modern Vector.\n\nArguments:\n* $1 number of languages, supports plural",
|
"vector-language-button-label": "Label for language button in modern Vector.\n\nArguments:\n* $1 number of languages, supports plural",
|
||||||
|
"vector-language-redirect-to-top": "Explains language links location at top of page and provides link to top",
|
||||||
"vector-language-variant-switcher-label": "Label for the language variant switcher.",
|
"vector-language-variant-switcher-label": "Label for the language variant switcher.",
|
||||||
"vector-action-addsection": "Used in the Vector skin. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n{{Identical|Add topic}}",
|
"vector-action-addsection": "Used in the Vector skin. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n{{Identical|Add topic}}",
|
||||||
"vector-action-delete": "Used in the Vector skin, as the name of a tab at the top of the page. See for example {{canonicalurl:Translating:MediaWiki|useskin=vector}}\n\n{{Identical|Delete}}",
|
"vector-action-delete": "Used in the Vector skin, as the name of a tab at the top of the page. See for example {{canonicalurl:Translating:MediaWiki|useskin=vector}}\n\n{{Identical|Delete}}",
|
||||||
|
|
|
@ -276,6 +276,26 @@ final class Constants {
|
||||||
*/
|
*/
|
||||||
public const FEATURE_LANGUAGE_IN_MAIN_PAGE_HEADER = 'LanguageInMainPageHeader';
|
public const FEATURE_LANGUAGE_IN_MAIN_PAGE_HEADER = 'LanguageInMainPageHeader';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @var string
|
||||||
|
*/
|
||||||
|
public const REQUIREMENT_LANGUAGE_ALERT_IN_SIDEBAR = 'LanguageAlertInSidebar';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @var string
|
||||||
|
*/
|
||||||
|
public const CONFIG_LANGUAGE_ALERT_IN_SIDEBAR = 'VectorLanguageAlertInSidebar';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @var string
|
||||||
|
*/
|
||||||
|
public const QUERY_PARAM_LANGUAGE_ALERT_IN_SIDEBAR = 'languagealertinsidebar';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @var string
|
||||||
|
*/
|
||||||
|
public const FEATURE_LANGUAGE_ALERT_IN_SIDEBAR = 'LanguageAlertInSidebar';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This class is for namespacing constants only. Forbid construction.
|
* This class is for namespacing constants only. Forbid construction.
|
||||||
* @throws FatalError
|
* @throws FatalError
|
||||||
|
|
|
@ -166,6 +166,31 @@ return [
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Feature: T295555: Language switch alert in sidebar
|
||||||
|
// ================================
|
||||||
|
$featureManager->registerRequirement(
|
||||||
|
new OverridableConfigRequirement(
|
||||||
|
$services->getMainConfig(),
|
||||||
|
$context->getUser(),
|
||||||
|
$context->getRequest(),
|
||||||
|
null,
|
||||||
|
Constants::CONFIG_LANGUAGE_ALERT_IN_SIDEBAR,
|
||||||
|
Constants::REQUIREMENT_LANGUAGE_ALERT_IN_SIDEBAR,
|
||||||
|
Constants::QUERY_PARAM_LANGUAGE_ALERT_IN_SIDEBAR,
|
||||||
|
null
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
$featureManager->registerFeature(
|
||||||
|
Constants::FEATURE_LANGUAGE_ALERT_IN_SIDEBAR,
|
||||||
|
[
|
||||||
|
Constants::REQUIREMENT_FULLY_INITIALISED,
|
||||||
|
Constants::REQUIREMENT_LATEST_SKIN_VERSION,
|
||||||
|
Constants::REQUIREMENT_LANGUAGE_IN_HEADER,
|
||||||
|
Constants::REQUIREMENT_LANGUAGE_ALERT_IN_SIDEBAR
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
// Feature: Use Wvui Search
|
// Feature: Use Wvui Search
|
||||||
// ================================
|
// ================================
|
||||||
$featureManager->registerRequirement(
|
$featureManager->registerRequirement(
|
||||||
|
|
|
@ -430,6 +430,40 @@ class SkinVector extends SkinMustache {
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate data needed to create SidebarAction item.
|
||||||
|
* @param array $htmlData data to make a link or raw html
|
||||||
|
* @param array $headingOptions optional heading for the html
|
||||||
|
* @return array keyed data for the SidebarAction template
|
||||||
|
*/
|
||||||
|
private function makeSidebarActionData( array $htmlData = [], array $headingOptions = [] ): array {
|
||||||
|
$htmlContent = '';
|
||||||
|
// Populates the sidebar as a standalone link or custom html.
|
||||||
|
if ( array_key_exists( 'link', $htmlData ) ) {
|
||||||
|
$htmlContent = $this->makeLink( 'link', $htmlData['link'] );
|
||||||
|
} elseif ( array_key_exists( 'html-content', $htmlData ) ) {
|
||||||
|
$htmlContent = $htmlData['html-content'];
|
||||||
|
}
|
||||||
|
|
||||||
|
$htmlClasses = array_key_exists( 'html-class', $htmlData )
|
||||||
|
? [ 'html-class' => $htmlData['html-class'] ]
|
||||||
|
: [];
|
||||||
|
|
||||||
|
return $headingOptions + $htmlClasses + [
|
||||||
|
'html-content' => $htmlContent,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Determines if the language switching alert box should be in the sidebar.
|
||||||
|
*
|
||||||
|
* @return bool
|
||||||
|
*/
|
||||||
|
private function shouldLanguageAlertBeInSidebar(): bool {
|
||||||
|
$featureManager = VectorServices::getFeatureManager();
|
||||||
|
return $featureManager->isFeatureEnabled( Constants::FEATURE_LANGUAGE_ALERT_IN_SIDEBAR );
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @inheritDoc
|
* @inheritDoc
|
||||||
*/
|
*/
|
||||||
|
@ -492,13 +526,24 @@ class SkinVector extends SkinMustache {
|
||||||
|
|
||||||
if ( $skin->getUser()->isRegistered() ) {
|
if ( $skin->getUser()->isRegistered() ) {
|
||||||
// Note: This data is also passed to legacy template where it is unused.
|
// Note: This data is also passed to legacy template where it is unused.
|
||||||
$commonSkinData['data-emphasized-sidebar-action'] = [
|
$optOutUrl = [
|
||||||
|
'text' => $this->msg( 'vector-opt-out' )->text(),
|
||||||
'href' => SpecialPage::getTitleFor(
|
'href' => SpecialPage::getTitleFor(
|
||||||
'Preferences',
|
'Preferences',
|
||||||
false,
|
false,
|
||||||
'mw-prefsection-rendering-skin-skin-prefs'
|
'mw-prefsection-rendering-skin-skin-prefs'
|
||||||
)->getLinkURL( 'wprov=' . self::OPT_OUT_LINK_TRACKING_CODE ),
|
)->getLinkURL( 'wprov=' . self::OPT_OUT_LINK_TRACKING_CODE ),
|
||||||
|
'title' => $this->msg( 'vector-opt-out-tooltip' )->text(),
|
||||||
|
'active' => false,
|
||||||
];
|
];
|
||||||
|
$htmlData = [
|
||||||
|
'link' => $optOutUrl,
|
||||||
|
'html-class' => [ 'link-only' ],
|
||||||
|
];
|
||||||
|
$commonSkinData['data-emphasized-sidebar-action'][] = $this->makeSidebarActionData(
|
||||||
|
$htmlData,
|
||||||
|
[]
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( !$this->isLegacy() ) {
|
if ( !$this->isLegacy() ) {
|
||||||
|
@ -507,6 +552,21 @@ class SkinVector extends SkinMustache {
|
||||||
$commonSkinData['is-anon'],
|
$commonSkinData['is-anon'],
|
||||||
$commonSkinData['data-search-box']
|
$commonSkinData['data-search-box']
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// T295555 Add language switch alert message temporarily (to be removed).
|
||||||
|
if ( $this->shouldLanguageAlertBeInSidebar() && !$parentData['is-mainpage'] ) {
|
||||||
|
$languageSwitchAlert = [
|
||||||
|
'html-content' => $this->msg( 'vector-language-redirect-to-top' )->parse(),
|
||||||
|
'html-class' => [ 'messagebox' ],
|
||||||
|
];
|
||||||
|
$headingOptions = [
|
||||||
|
'heading' => $this->msg( 'vector-languages' )->plain(),
|
||||||
|
];
|
||||||
|
$commonSkinData['data-vector-language-switch-alert'][] = $this->makeSidebarActionData(
|
||||||
|
$languageSwitchAlert,
|
||||||
|
$headingOptions
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return $commonSkinData;
|
return $commonSkinData;
|
||||||
|
|
|
@ -11,14 +11,11 @@
|
||||||
|
|
||||||
<div id="mw-panel" class="mw-sidebar">
|
<div id="mw-panel" class="mw-sidebar">
|
||||||
{{#data-portlets-first}}{{>Menu}}{{/data-portlets-first}}
|
{{#data-portlets-first}}{{>Menu}}{{/data-portlets-first}}
|
||||||
{{#data-emphasized-sidebar-action}}
|
{{#data-emphasized-sidebar-action}}{{>SidebarAction}}{{/data-emphasized-sidebar-action}}
|
||||||
<div class="mw-sidebar-action">
|
|
||||||
<a class="mw-sidebar-action-link" title="{{msg-vector-opt-out-tooltip}}"
|
|
||||||
href="{{href}}">{{msg-vector-opt-out}}</a>
|
|
||||||
</div>
|
|
||||||
{{/data-emphasized-sidebar-action}}
|
|
||||||
{{#array-portlets-rest}}{{>Menu}}{{/array-portlets-rest}}
|
{{#array-portlets-rest}}{{>Menu}}{{/array-portlets-rest}}
|
||||||
{{^is-language-in-content}}
|
{{^is-language-in-content}}
|
||||||
{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
|
{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
|
||||||
{{/is-language-in-content}}
|
{{/is-language-in-content}}
|
||||||
|
{{! T295555 Add language switch alert message temporarily (to be removed). }}
|
||||||
|
{{#data-vector-language-switch-alert}}{{>SidebarAction}}{{/data-vector-language-switch-alert}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -0,0 +1,9 @@
|
||||||
|
{{! `heading` is optional. }}
|
||||||
|
<div class="mw-sidebar-action">
|
||||||
|
<div class="mw-sidebar-action-item">
|
||||||
|
{{#heading}}<h3 class="mw-sidebar-action-heading">{{.}}</h3>{{/heading}}
|
||||||
|
<div class="mw-sidebar-action-content{{#html-class}} {{.}}{{/html-class}}">
|
||||||
|
{{{html-content}}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -8,11 +8,36 @@
|
||||||
// Align with the portal heading/links
|
// Align with the portal heading/links
|
||||||
// `.portal` + `.portal .body`
|
// `.portal` + `.portal .body`
|
||||||
margin: 8px @margin-end-portal 8px @margin-start-portal + @margin-start-portal-body;
|
margin: 8px @margin-end-portal 8px @margin-start-portal + @margin-start-portal-body;
|
||||||
}
|
|
||||||
|
|
||||||
.mw-sidebar-action-link {
|
// Styles for SidebarAction template.
|
||||||
font-size: @font-size-portal-list-item;
|
.mw-sidebar-action-item {
|
||||||
font-weight: bold;
|
h3.mw-sidebar-action-heading {
|
||||||
|
display: block;
|
||||||
|
background-image: url( ../common/images/portal-separator.png ); // Support: IE 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25
|
||||||
|
background-image: linear-gradient( to right, @border-color-portal-heading-transparent 0, @border-color-portal-heading 33%, @border-color-portal-heading 66%, @border-color-portal-heading-transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
|
||||||
|
background-position: center bottom;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% @border-width-base;
|
||||||
|
color: @color-base--subtle;
|
||||||
|
margin: 0.75em 0;
|
||||||
|
border: 0;
|
||||||
|
padding: 0.3em 0;
|
||||||
|
font-size: @font-size-nav-main-heading;
|
||||||
|
font-weight: normal;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-only a {
|
||||||
|
font-size: @font-size-portal-list-item;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
// T295555 style overrides for temporary language switch alert (can be removed later ).
|
||||||
|
.messagebox {
|
||||||
|
padding: 0.75em;
|
||||||
|
font-size: @font-size-portal-list-item;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#mw-sidebar-button {
|
#mw-sidebar-button {
|
||||||
|
|
|
@ -365,6 +365,13 @@
|
||||||
},
|
},
|
||||||
"description": "@var When `VectorLanguageInHeader` is enabled, determines whether the Main Page's language button should be at the top or bottom of the content. The default position on the main page is at the bottom."
|
"description": "@var When `VectorLanguageInHeader` is enabled, determines whether the Main Page's language button should be at the top or bottom of the content. The default position on the main page is at the bottom."
|
||||||
},
|
},
|
||||||
|
"VectorLanguageAlertInSidebar": {
|
||||||
|
"value": {
|
||||||
|
"logged_in": false,
|
||||||
|
"logged_out": false
|
||||||
|
},
|
||||||
|
"description": "@var When `VectorLanguageAlertInSidebar` is enabled, the language switch alert box is shown in the sidebar."
|
||||||
|
},
|
||||||
"VectorLanguageInHeaderTreatmentABTest": {
|
"VectorLanguageInHeaderTreatmentABTest": {
|
||||||
"value": false,
|
"value": false,
|
||||||
"description": "@var boolean Enables or disables the language in header treatment A/B test. See https://phabricator.wikimedia.org/T280825 and associated tasks for additional detail."
|
"description": "@var boolean Enables or disables the language in header treatment A/B test. See https://phabricator.wikimedia.org/T280825 and associated tasks for additional detail."
|
||||||
|
|
Loading…
Reference in New Issue