Petar.petkovic has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/396565 )
Change subject: Use gradients on CX suggestion descriptions ...................................................................... Use gradients on CX suggestion descriptions - Remove justified text approach used to align ellipsis indicator with the description, which was introduced in Iabadfca8ed. - Use gradients instead of ellipsis to indicate truncated text. Bug: T182479 Change-Id: I2e0c62bf1caf51714c90a31fc091837f0309d09a --- M extension.json M modules/dashboard/ext.cx.suggestionlist.js M modules/dashboard/styles/ext.cx.suggestionlist.less M modules/widgets/common/ext.cx.common.less 4 files changed, 113 insertions(+), 25 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation refs/changes/65/396565/1 diff --git a/extension.json b/extension.json index 086cc12..5e8b3ab 100644 --- a/extension.json +++ b/extension.json @@ -994,7 +994,6 @@ "oojs-ui.styles.icons-interactions" ], "messages": [ - "ellipsis", "cx-suggestionlist-collapse", "cx-suggestionlist-empty-desc", "cx-suggestionlist-empty-title", diff --git a/modules/dashboard/ext.cx.suggestionlist.js b/modules/dashboard/ext.cx.suggestionlist.js index 67d8911..259e4a7 100644 --- a/modules/dashboard/ext.cx.suggestionlist.js +++ b/modules/dashboard/ext.cx.suggestionlist.js @@ -539,10 +539,6 @@ lang: suggestion.sourceLanguage, dir: sourceDir } ) - // We need to set ellipsis for pseudo element through data attribute - // as there is no way to add localized message to LESS or manipulate - // pseudo elements directly with JS - .attr( 'data-ellipsis', mw.msg( 'ellipsis' ) ) .addClass( 'cx-slitem__desc' ) .hide(); $discardAction = $( '<div>' ) diff --git a/modules/dashboard/styles/ext.cx.suggestionlist.less b/modules/dashboard/styles/ext.cx.suggestionlist.less index c33ff27..a8f53d9 100644 --- a/modules/dashboard/styles/ext.cx.suggestionlist.less +++ b/modules/dashboard/styles/ext.cx.suggestionlist.less @@ -84,8 +84,7 @@ .cx-slitem { &:hover { .cx-slitem__desc:after { - background-color: #eaf3ff; - .transition( background-color 100ms ); + .animation( gradientIn, 100ms, forwards ); } } @@ -100,39 +99,108 @@ width: 100%; // We want to limit number of lines that description for // suggestion item takes. Maximum height is thus set to - // get maximum of three line heights. Before and after - // elements are tricks used to provide ellipsis truncation + // get maximum of three line heights. max-height: 3.6em; // line-height * 3 margin: 0.5em -1em 0.5em 0; - padding-right: 1em; font-size: 0.8125em; line-height: 1.2; - text-align: justify; - - &:before { - // This is needed so we can use localized 'ellipsis' - content: attr( data-ellipsis ); - position: absolute; - bottom: 0; - right: 0; - } &:after { content: ''; - background-color: #fff; position: absolute; + top: 2.4em; right: 0; - width: 1em; - height: 1em; - margin-top: 0.2em; + width: 70%; + height: 1.2em; + .animation( gradientOut, 100ms, forwards ); - .transition( background-color 100ms ); + @media only screen and ( min-width: 360px ) { + width: 60%; + } + + @media only screen and ( min-width: @very-narrow ) { + width: 50%; + } + + @media only screen and ( min-width: @narrow ) { + width: 40%; + } + + @media only screen and ( min-width: @wide ) { + width: 30%; + } + + @media only screen and ( min-width: @max-dashboard-width ) { + width: 20%; + } } } } +.keyframes(gradientIn, { + 0% { + background: linear-gradient( to right, transparent, #fff 70% ); + } + 10% { + background: linear-gradient( to right, transparent, #fefeff 70% ); + } + 20% { + background: linear-gradient( to right, transparent, #f9fcff 70% ); + } + 30% { + background: linear-gradient( to right, transparent, #f3f8ff 70% ); + } + 40% { + background: linear-gradient( to right, transparent, #f0f6ff 70% ); + } + 50% { + background: linear-gradient( to right, transparent, #eef5ff 70% ); + } + 60% { + background: linear-gradient( to right, transparent, #ecf4ff 70% ); + } + 70% { + background: linear-gradient( to right, transparent, #ebf4ff 70% ); + } + 80%, + 100% { + background: linear-gradient( to right, transparent, #eaf3ff 70% ); + } +}); + +.keyframes(gradientOut, { + 0% { + background: linear-gradient( to right, transparent, #eaf3ff 70% ); + } + 10% { + background: linear-gradient( to right, transparent, #ebf4ff 70% ); + } + 20% { + background: linear-gradient( to right, transparent, #f0f7ff 70% ); + } + 30% { + background: linear-gradient( to right, transparent, #f5faff 70% ); + } + 40% { + background: linear-gradient( to right, transparent, #f9fcff 70% ); + } + 50% { + background: linear-gradient( to right, transparent, #fbfdff 70% ); + } + 60% { + background: linear-gradient( to right, transparent, #fdfeff 70% ); + } + 70% { + background: linear-gradient( to right, transparent, #fefeff 70% ); + } + 80%, + 100% { + background: linear-gradient( to right, transparent, #fff 70% ); + } +}); + .cx-slitem__details { position: relative; min-width: 0; diff --git a/modules/widgets/common/ext.cx.common.less b/modules/widgets/common/ext.cx.common.less index 38f5467..5c35b32 100644 --- a/modules/widgets/common/ext.cx.common.less +++ b/modules/widgets/common/ext.cx.common.less @@ -16,7 +16,7 @@ @wide: 1200px; @max-dashboard-width: 1500px; -.box-shadow-card() { +.box-shadow-card { .box-shadow( 0 1px 1px rgba( 0, 0, 0, 0.15 ) ); } @@ -106,3 +106,28 @@ margin: 0 auto; } } + +.keyframes( @name, @rules ) { + /* stylelint-disable at-rule-no-unknown */ + @-webkit-keyframes @name { + @rules(); + } + + @-moz-keyframes @name { + @rules(); + } + + @keyframes @name { + @rules(); + } + /* stylelint-enable at-rule-no-unknown */ +} + +.animation( @name, @duration, @fillMode: none ) { + -moz-animation: @name @duration; + -webkit-animation: @name @duration; + animation: @name @duration; + + -webkit-animation-fill-mode: @fillMode; + animation-fill-mode: @fillMode; +} -- To view, visit https://gerrit.wikimedia.org/r/396565 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I2e0c62bf1caf51714c90a31fc091837f0309d09a Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/ContentTranslation Gerrit-Branch: master Gerrit-Owner: Petar.petkovic <ppetko...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits