jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/387786 )
Change subject: Inline the discard/continue actions
......................................................................
Inline the discard/continue actions
Bug: T179248
Change-Id: Ib407e861d0d22e86b98da1f84be5938a874944d8
---
M modules/dashboard/ext.cx.translationlist.js
M modules/dashboard/styles/ext.cx.suggestionlist.less
M modules/dashboard/styles/ext.cx.translationlist.less
3 files changed, 20 insertions(+), 94 deletions(-)
Approvals:
jenkins-bot: Verified
Nikerabbit: Checked; Looks good to me, approved
diff --git a/modules/dashboard/ext.cx.translationlist.js
b/modules/dashboard/ext.cx.translationlist.js
index bb557c5..8137cde 100644
--- a/modules/dashboard/ext.cx.translationlist.js
+++ b/modules/dashboard/ext.cx.translationlist.js
@@ -31,7 +31,6 @@
this.$headerContainer = null;
this.$translationsList = null;
this.$loadingIndicatorSpinner = null;
- this.$selectedActionMenu = null;
this.active = false;
this.promise = null;
this.queryContinue = null;
@@ -311,7 +310,7 @@
sourceDir, targetDir, $targetTitle,
$translationLink,
$sourceLanguage, $targetLanguage, $languageContainer,
- $actionsTrigger, deleteTranslation, $menu,
$menuContainer,
+ deleteTranslation, $actions,
continueTranslation,
$titleLanguageBlock,
$translations = [];
@@ -391,31 +390,26 @@
.addClass( 'cx-tlitem__languages' )
.append( $sourceLanguage, $targetLanguage );
- $actionsTrigger = $( '<div>' )
- .addClass( 'cx-tlitem__actions__trigger
oo-ui-iconElement-icon oo-ui-icon-ellipsis' );
- $menu = $( '<ul>' );
-
+ $actions = $( '<div>' )
+ .addClass( 'cx-tlitem__actions' );
// If the translation is draft, allow deleting it
if ( translation.status === 'draft' ) {
deleteTranslation = new OO.ui.ButtonWidget( {
framed: false,
classes: [ 'cx-discard-translation' ],
- label: mw.msg( 'cx-discard-translation'
),
- icon: 'trash'
+ icon: 'trash',
+ title: mw.msg( 'cx-discard-translation'
)
} );
- $menu.append( $( '<li>' ).append(
deleteTranslation.$element ) );
+ $actions.append( deleteTranslation.$element );
} else if ( translation.status === 'published' ) {
continueTranslation = new OO.ui.ButtonWidget( {
framed: false,
classes: [ 'cx-continue-translation' ],
icon: 'edit',
- label: mw.msg(
'cx-continue-translation' )
+ title: mw.msg(
'cx-continue-translation' )
} );
- $menu.append( $( '<li>' ).append(
continueTranslation.$element ) );
+ $actions.append( continueTranslation.$element );
}
- $menuContainer = $( '<div>' )
- .addClass( 'cx-tlitem__actions' )
- .append( $actionsTrigger, $menu );
$titleLanguageBlock = $( '<div>' )
.addClass( 'cx-tlitem__details' )
@@ -424,7 +418,7 @@
$translation.append(
$image,
$titleLanguageBlock,
- $menuContainer
+ $actions
);
$translations.push( $translation );
@@ -467,10 +461,8 @@
var translation;
e.stopPropagation();
+ $( this ).find( 'a' ).blur();
translation = $( this ).closest( '.cx-tlitem' ).data(
'translation' );
- if ( self.$selectedActionMenu ) {
- self.$selectedActionMenu.removeClass(
'cx-tlitem__actions--selected' );
- }
OO.ui.getWindowManager().openWindow( 'message',
$.extend( {
message: mw.msg(
'cx-draft-discard-confirmation-message' ),
@@ -501,6 +493,7 @@
var translation;
e.stopPropagation();
+ $( this ).find( 'a' ).blur();
translation = $( this ).closest( '.cx-tlitem' ).data(
'translation' );
self.continueTranslation( translation );
return false;
@@ -512,31 +505,6 @@
location.href = translation.targetURL;
} else {
self.continueTranslation( translation );
- }
- } );
-
- this.$translationsList.on( 'click', '.cx-tlitem__actions',
function ( e ) {
- var $this = $( this );
-
- // Do not propagate to the parent item. Prevent opening
translation.
- e.stopPropagation();
-
- // Remove --selected mark from already opened menu if
user clicks on some other menu
- if ( self.$selectedActionMenu && !$this.is(
self.$selectedActionMenu ) ) {
- self.$selectedActionMenu.removeClass(
'cx-tlitem__actions--selected' );
- }
-
- $this.toggleClass( 'cx-tlitem__actions--selected' );
- self.$selectedActionMenu = $this;
- } );
-
- // To support opening of menu on hover event on devices that
support it
- // We need to close menus already opened with clicks
- this.$translationsList.on( 'mouseenter', '.cx-tlitem__actions',
function () {
- var $this = $( this );
-
- if ( self.$selectedActionMenu && !$this.is(
self.$selectedActionMenu ) ) {
- self.$selectedActionMenu.removeClass(
'cx-tlitem__actions--selected' );
}
} );
diff --git a/modules/dashboard/styles/ext.cx.suggestionlist.less
b/modules/dashboard/styles/ext.cx.suggestionlist.less
index 3e5f4c9..c935cc6 100644
--- a/modules/dashboard/styles/ext.cx.suggestionlist.less
+++ b/modules/dashboard/styles/ext.cx.suggestionlist.less
@@ -167,14 +167,11 @@
}
.cx-slitem__actions {
- min-height: 90px;
-
- width: auto;
- padding: 0;
+ margin-bottom: auto;
.flex-display( box ); // Support 2009 syntax
.flex-display;
- @media only screen and ( max-width: @narrow ) {
+ @media only screen and ( max-width: ( @narrow - 1px ) ) {
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-box-pack: end; // iOS 6-, Safari 3.1-6
diff --git a/modules/dashboard/styles/ext.cx.translationlist.less
b/modules/dashboard/styles/ext.cx.translationlist.less
index 40631df..f24780d 100644
--- a/modules/dashboard/styles/ext.cx.translationlist.less
+++ b/modules/dashboard/styles/ext.cx.translationlist.less
@@ -16,58 +16,19 @@
}
.cx-tlitem__actions {
- .mw-ui-item;
-
- position: relative;
- width: auto;
margin-bottom: auto;
- padding: 0;
- .cx-tlitem__actions__trigger {
- cursor: pointer;
- padding: 18px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: 24px;
-
- &:hover {
- background-color: @colorGray14;
- }
+ /* Preserve existing opacity transitions, TODO: Unify with OOUI
*/
+ .oo-ui-buttonElement > .oo-ui-buttonElement-button {
+ opacity: 0.66;
}
- ul {
- display: none;
- position: absolute;
- top: 36px;
- right: 0;
- list-style: none;
- margin: 0 5px 0 0;
- font-size: medium;
- font-weight: normal;
- white-space: nowrap;
- background-color: #fff;
- border: 1px solid @colorGray12;
- border-bottom-width: 3px;
- border-radius: @borderRadius;
-
- li {
- padding: 0;
- margin: 0;
- }
+ .oo-ui-buttonElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon {
+ opacity: 0.8;
}
- &:hover ul {
- display: block;
- }
-
- &.cx-tlitem__actions--selected {
- ul {
- display: block;
- }
-
- .cx-tlitem__actions__trigger {
- background-color: @colorGray14;
- }
+ .oo-ui-buttonElement > .oo-ui-buttonElement-button:hover >
.oo-ui-iconElement-icon {
+ opacity: 1;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/387786
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ib407e861d0d22e86b98da1f84be5938a874944d8
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Nikerabbit <[email protected]>
Gerrit-Reviewer: Petar.petkovic <[email protected]>
Gerrit-Reviewer: Santhosh <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
