Petar.petkovic has uploaded a new change for review. (
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, 29 insertions(+), 6 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/84/364684/1
diff --git a/modules/dashboard/ext.cx.translationlist.js
b/modules/dashboard/ext.cx.translationlist.js
index 0f724a8..b51f30d 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,20 @@
}
} );
+ this.$translationsList.on( 'click', '.cx-tlitem__actions',
function ( e ) {
+ var $this = $( this );
+
+ // Do not propagate to the parent item. Prevent opening
translation.
+ e.stopPropagation();
+
+ if ( self.$selectedActionMenu && !$this.is(
self.$selectedActionMenu ) ) {
+ self.$selectedActionMenu.removeClass(
'cx-tlitem__actions--selected' );
+ }
+
+ $this.toggleClass( 'cx-tlitem__actions--selected' );
+ self.$selectedActionMenu = $this;
+ } );
+
// 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: newchange
Gerrit-Change-Id: I84bf35c00fff4a4155a3b599cb74944c308ea099
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Petar.petkovic <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
