From 3450f90678ddfc3eb95894cce88ebd4eee061d8d Mon Sep 17 00:00:00 2001 From: Santhosh Thottingal Date: Thu, 23 Jun 2022 15:33:48 +0530 Subject: [PATCH] Add support for empty states to the current language selector Bug: T290436 Change-Id: I42c5d44ec15e291d71723c9738ddb8f0d1cf0b09 --- extension.json | 7 ++- i18n/en.json | 6 +- i18n/qqq.json | 6 +- resources/css/ext.uls.interface.less | 14 +++++ resources/js/ext.uls.interface.js | 86 ++++++++++++++++++++++++++-- 5 files changed, 111 insertions(+), 8 deletions(-) diff --git a/extension.json b/extension.json index de5b833b..2d15518c 100644 --- a/extension.json +++ b/extension.json @@ -265,7 +265,12 @@ "ext-uls-undo-language-tooltip-text", "ext-uls-undo-language-tooltip-text-local", "ext-uls-actions-menu-language-settings-item-label", - "ext-uls-actions-menu-header" + "ext-uls-actions-menu-header", + "ext-uls-actions-menu-language-settings-item-label", + "ext-uls-empty-state-header", + "ext-uls-empty-state-desc", + "ext-uls-empty-state-header-actions-available", + "ext-uls-empty-state-desc-actions-available" ] }, "ext.uls.interlanguage": { diff --git a/i18n/en.json b/i18n/en.json index b9db5f76..0087d9a2 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -74,5 +74,9 @@ "ext-uls-setlang-loading": "Applying...", "ext-uls-setlang-cancel": "Don't change", "ext-uls-actions-menu-header": "More options", - "ext-uls-actions-menu-language-settings-item-label": "Open language settings" + "ext-uls-actions-menu-language-settings-item-label": "Open language settings", + "ext-uls-empty-state-header": "No languages yet", + "ext-uls-empty-state-desc": "No languages are available for now", + "ext-uls-empty-state-header-actions-available": "No languages yet. Add a new one?", + "ext-uls-empty-state-desc-actions-available": " Make the content available in more languages." } diff --git a/i18n/qqq.json b/i18n/qqq.json index b083445c..2bed56fe 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -78,5 +78,9 @@ "ext-uls-setlang-loading": "Button label displayed while the API call is in progress after the user clicks on the accept button. See {{msg-mw|ext-uls-setlang-accept}}.", "ext-uls-setlang-cancel": "Button label for cancel on the language preference dialog.", "ext-uls-actions-menu-header": "Title of the dialog that contains the quick actions menu, that opens when user clicks on the settings icon inside content language selector", - "ext-uls-actions-menu-language-settings-item-label": "Label of the button that opens the language settings inside the quick actions menu of the content language selector." + "ext-uls-actions-menu-language-settings-item-label": "Label of the button that opens the language settings inside the quick actions menu of the content language selector.", + "ext-uls-empty-state-header": "Header text shown in languages selector when there are no languages to select", + "ext-uls-empty-state-desc": "Description text shown in languages selector when there are no languages to select", + "ext-uls-empty-state-header-actions-available": "Header text shown in languages selector when there are no languages to select, but selector provides ways to create new.", + "ext-uls-empty-state-desc-actions-available": "Description text shown in languages selector when there are no languages to select, but selector provides ways to create new." } diff --git a/resources/css/ext.uls.interface.less b/resources/css/ext.uls.interface.less index a66d868c..a730eaa0 100644 --- a/resources/css/ext.uls.interface.less +++ b/resources/css/ext.uls.interface.less @@ -56,3 +56,17 @@ .uls-tipsy.uls-tipsy { z-index: 1000; } + +.uls-empty-state { + padding: 28px; + + .uls-empty-state__header, + .uls-empty-state__desc { + color: #54595d; + } + + .uls-language-action-items { + list-style: none; + margin: 1em 0; + } +} diff --git a/resources/js/ext.uls.interface.js b/resources/js/ext.uls.interface.js index e1925238..5ae9a8b4 100644 --- a/resources/js/ext.uls.interface.js +++ b/resources/js/ext.uls.interface.js @@ -21,7 +21,8 @@ 'use strict'; var languageSettingsModules = [ 'ext.uls.displaysettings' ], launchULS = require( './ext.uls.launch.js' ), - ActionsMenu = require( './ext.uls.actions.menu.js' ); + ActionsMenu = require( './ext.uls.actions.menu.js' ), + ActionsMenuItem = require( './ext.uls.actions.menu.item.js' ); require( './ext.uls.actions.menu.items.registry.js' ); /** @@ -102,6 +103,10 @@ actionsMenuTrigger.addClass( iconClass ); } + function hideLanguageSettingsFooter( uls ) { + uls.$menu.find( '#uls-settings-block' ).eq( 0 ).hide(); + } + /** * @param {jQuery} $element * @param {Function} onCloseHandler @@ -117,6 +122,71 @@ } ).trigger( 'click' ); } ); } + + /** + * Provide entry points to create article in other languages. T290436 + * + * @param {Object} uls The ULS object + */ + function addEmptyState( uls ) { + var $emptyStateContainer = $( '
' ).addClass( 'uls-empty-state' ); + + function openActionsMenuEventHandler( event ) { + event.stopPropagation(); + function onMenuClose() { + uls.show(); + } + openLanguageSettings( $( event.target ), onMenuClose, uls ); + } + + var languageSettingsMenuItem = { + name: 'languageSettings', + icon: 'settings', + text: $.i18n( 'ext-uls-actions-menu-language-settings-item-label' ), + handler: openActionsMenuEventHandler + }; + + var actionItemsRegistry = mw.uls.ActionsMenuItemsRegistry; + actionItemsRegistry.register( languageSettingsMenuItem ); + + var $actionsMenuTrigger = createActionsMenuTrigger(); + setActionsMenuTriggerIconClass( $actionsMenuTrigger, actionItemsRegistry.size() ); + var $header = $( '

' ) + .addClass( 'uls-empty-state__header' ) + .text( $.i18n( 'ext-uls-empty-state-header' ) ); + var $desc = $( '

' ) + .addClass( 'uls-empty-state__desc' ) + .text( $.i18n( 'ext-uls-empty-state-desc' ) ); + $emptyStateContainer.append( $header, $desc ); + uls.$resultsView.append( $emptyStateContainer ); + + var actionItems = actionItemsRegistry.getItems(); + + if ( actionItems.length > 1 ) { + // languageSettingsMenuItem will be always there. + // If other actions available, change text + $header.text( $.i18n( 'ext-uls-empty-state-header-actions-available' ) ); + $desc.text( $.i18n( 'ext-uls-empty-state-desc-actions-available' ) ); + } + + // Action menu items need OOUI widgets. Load them and register trigger event handler. + mw.loader.using( [ 'oojs-ui-widgets', 'oojs-ui.styles.icons-interactions' ] ).done( function () { + var $actionsList = $( '

    ' ).addClass( 'uls-language-action-items' ); + actionItems.forEach( function ( actionItem ) { + var actionButton = new ActionsMenuItem( + actionItem.icon, + actionItem.text, + actionItem.handler, + actionItem.href + ).render(); + $actionsList.append( $( '
  • ' ).append( actionButton.$element ) ); + } ); + + $emptyStateContainer.append( $actionsList ); + } ); + + } + /** * Add language actions menu * @@ -144,9 +214,6 @@ var actionItemsRegistry = mw.uls.ActionsMenuItemsRegistry; actionItemsRegistry.register( languageSettingsMenuItem ); - // first hide #uls-settings-block div since it's unused, and it causes - // an unwanted extra border to show up at the bottom of the menu - uls.$menu.find( '#uls-settings-block' ).eq( 0 ).hide(); var $actionsMenuTrigger = createActionsMenuTrigger(); setActionsMenuTriggerIconClass( $actionsMenuTrigger, actionItemsRegistry.size() ); @@ -618,7 +685,16 @@ // Provide access to display and input settings if this entry point is the single // point of access to all language settings. uls = $target.data( 'uls' ); - addActionsMenuTrigger( uls ); + // first hide #uls-settings-block div since it's unused, and it causes + // an unwanted extra border to show up at the bottom of the menu + hideLanguageSettingsFooter( uls ); + if ( languageNodes.length ) { + addActionsMenuTrigger( uls ); + } else { + // There are no languages - The article exist only the current language wiki + // Provide entry points to create article in other languages. T290436 + addEmptyState( uls ); + } $target.trigger( 'click' ); } else { $target.trigger( 'click' );