From 9dcfc1ff27b6103847f4c9708589a2bb12348369 Mon Sep 17 00:00:00 2001 From: Clare Ming Date: Tue, 7 Dec 2021 13:28:58 -0700 Subject: [PATCH] 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 --- i18n/en.json | 2 + i18n/qqq.json | 2 + includes/Constants.php | 20 ++++++ includes/ServiceWiring.php | 25 ++++++++ includes/SkinVector.php | 62 ++++++++++++++++++- includes/templates/Sidebar.mustache | 9 +-- includes/templates/SidebarAction.mustache | 9 +++ .../components/Sidebar.less | 33 ++++++++-- skin.json | 7 +++ 9 files changed, 158 insertions(+), 11 deletions(-) create mode 100644 includes/templates/SidebarAction.mustache diff --git a/i18n/en.json b/i18n/en.json index b19b351..75c27ee 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -11,8 +11,10 @@ "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-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-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-action-addsection": "Add topic", "vector-action-delete": "Delete", diff --git a/i18n/qqq.json b/i18n/qqq.json index 788841f..c0523f6 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -23,8 +23,10 @@ "vector.css": "{{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-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-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-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}}", diff --git a/includes/Constants.php b/includes/Constants.php index 4f33181..bae1c63 100644 --- a/includes/Constants.php +++ b/includes/Constants.php @@ -276,6 +276,26 @@ final class Constants { */ 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. * @throws FatalError diff --git a/includes/ServiceWiring.php b/includes/ServiceWiring.php index f17ba5b..ab9e243 100644 --- a/includes/ServiceWiring.php +++ b/includes/ServiceWiring.php @@ -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 // ================================ $featureManager->registerRequirement( diff --git a/includes/SkinVector.php b/includes/SkinVector.php index 2194346..865e955 100644 --- a/includes/SkinVector.php +++ b/includes/SkinVector.php @@ -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 */ @@ -492,13 +526,24 @@ class SkinVector extends SkinMustache { if ( $skin->getUser()->isRegistered() ) { // 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( 'Preferences', false, 'mw-prefsection-rendering-skin-skin-prefs' )->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() ) { @@ -507,6 +552,21 @@ class SkinVector extends SkinMustache { $commonSkinData['is-anon'], $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; diff --git a/includes/templates/Sidebar.mustache b/includes/templates/Sidebar.mustache index 635872b..d3394af 100644 --- a/includes/templates/Sidebar.mustache +++ b/includes/templates/Sidebar.mustache @@ -11,14 +11,11 @@
{{#data-portlets-first}}{{>Menu}}{{/data-portlets-first}} - {{#data-emphasized-sidebar-action}} -
- {{msg-vector-opt-out}} -
- {{/data-emphasized-sidebar-action}} + {{#data-emphasized-sidebar-action}}{{>SidebarAction}}{{/data-emphasized-sidebar-action}} {{#array-portlets-rest}}{{>Menu}}{{/array-portlets-rest}} {{^is-language-in-content}} {{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}} {{/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}}
diff --git a/includes/templates/SidebarAction.mustache b/includes/templates/SidebarAction.mustache new file mode 100644 index 0000000..e45b8e0 --- /dev/null +++ b/includes/templates/SidebarAction.mustache @@ -0,0 +1,9 @@ +{{! `heading` is optional. }} +
+
+ {{#heading}}

{{.}}

{{/heading}} +
+ {{{html-content}}} +
+
+
diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less index cde6c96..630449e 100644 --- a/resources/skins.vector.styles/components/Sidebar.less +++ b/resources/skins.vector.styles/components/Sidebar.less @@ -8,11 +8,36 @@ // Align with the portal heading/links // `.portal` + `.portal .body` margin: 8px @margin-end-portal 8px @margin-start-portal + @margin-start-portal-body; -} -.mw-sidebar-action-link { - font-size: @font-size-portal-list-item; - font-weight: bold; + // Styles for SidebarAction template. + .mw-sidebar-action-item { + 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 { diff --git a/skin.json b/skin.json index 8de49d1..6f6510f 100644 --- a/skin.json +++ b/skin.json @@ -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." }, + "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": { "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."