jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/364684 )
Change subject: Make delete action reachable
......................................................................
Make delete action reachable
Make possible to open the menu by clicking on the ... icon,
to better support small screens and touch devices.
Make the active area of ... icon bigger and
reduce the overlap with the list item active area
Bug: T156909
Change-Id: I84bf35c00fff4a4155a3b599cb74944c308ea099
---
M modules/dashboard/ext.cx.translationlist.js
M modules/dashboard/styles/ext.cx.translationlist.less
2 files changed, 40 insertions(+), 6 deletions(-)
Approvals:
jenkins-bot: Verified
Santhosh: Looks good to me, approved
diff --git a/modules/dashboard/ext.cx.translationlist.js
b/modules/dashboard/ext.cx.translationlist.js
index 0f724a8..8d5b099 100644
--- a/modules/dashboard/ext.cx.translationlist.js
+++ b/modules/dashboard/ext.cx.translationlist.js
@@ -31,6 +31,7 @@
this.$sourceLanguageFilter = null;
this.$targetLanguageFilter = null;
this.$header = null;
+ this.$selectedActionMenu = null;
this.$confirmationDialog = null;
this.active = false;
this.promise = null;
@@ -319,6 +320,7 @@
$actionsTrigger = $( '<div>' )
.addClass( 'cx-tlitem__actions__trigger' );
+
// If the translation is draft, allow deleting it
if ( translation.status === 'draft' ) {
$deleteTranslation = $( '<li>' )
@@ -336,6 +338,7 @@
$menuContainer = $( '<div>' )
.addClass( 'cx-tlitem__actions' )
.append( $actionsTrigger, $menu );
+
$titleLanguageBlock = $( '<div>' )
.addClass( 'cx-tlitem__details' )
.append( $translationLink, $progressbar,
$lastUpdated, $languageContainer );
@@ -423,6 +426,31 @@
}
} );
+ 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' );
+ }
+ } );
+
// Attach a scroll handler
scrollHandler = $.throttle( 250, $.proxy( this.scroll, this ) );
$( window ).scroll( scrollHandler );
diff --git a/modules/dashboard/styles/ext.cx.translationlist.less
b/modules/dashboard/styles/ext.cx.translationlist.less
index 7d6ccf9..f1d4964 100644
--- a/modules/dashboard/styles/ext.cx.translationlist.less
+++ b/modules/dashboard/styles/ext.cx.translationlist.less
@@ -24,10 +24,10 @@
.cx-tlitem__actions__trigger {
cursor: pointer;
- padding: 12px;
+ padding: 18px;
.background-image-svg('../images/elipses.svg',
'../images/elipses.png');
background-repeat: no-repeat;
- background-position: center left;
+ background-position: center;
background-size: 24px;
&:hover {
background-color: #eee;
@@ -37,10 +37,10 @@
ul {
display: none;
position: absolute;
- top: 20px;
+ top: 36px;
right: 0;
list-style: none;
- margin: 0;
+ margin: 0 5px 0 0;
font-size: medium;
font-weight: normal;
white-space: nowrap;
@@ -72,8 +72,14 @@
display: block;
}
- &:hover .actions-menu-trigger {
- background-color: #eee;
+ &.cx-tlitem__actions--selected {
+ ul {
+ display: block;
+ }
+
+ .cx-tlitem__actions__trigger {
+ background-color: #eee;
+ }
}
}
--
To view, visit https://gerrit.wikimedia.org/r/364684
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I84bf35c00fff4a4155a3b599cb74944c308ea099
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Petar.petkovic <[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
