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 = $( '