Gergő Tisza has uploaded a new change for review. https://gerrit.wikimedia.org/r/169785
Change subject: Make the ellipsis of truncated texts more prominent ...................................................................... Make the ellipsis of truncated texts more prominent Change-Id: I5fc37429a7dc7a8f1517fa42375cd140d7d11674 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/589 --- A resources/mmv/ui/img/ellipsis_darkgray.svg A resources/mmv/ui/img/ellipsis_gray.svg A resources/mmv/ui/img/ellipsis_lightgray.svg M resources/mmv/ui/mmv.ui.metadataPanel.js M resources/mmv/ui/mmv.ui.metadataPanel.less M resources/mmv/ui/mmv.ui.truncatableTextField.js M resources/mmv/ui/mmv.ui.truncatableTextField.less 7 files changed, 82 insertions(+), 2 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer refs/changes/85/169785/1 diff --git a/resources/mmv/ui/img/ellipsis_darkgray.svg b/resources/mmv/ui/img/ellipsis_darkgray.svg new file mode 100644 index 0000000..b61ab7c --- /dev/null +++ b/resources/mmv/ui/img/ellipsis_darkgray.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px" + viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve"> +<g> + <g> + <path fill="#555555" d="M22,48.3c0,6.1-4.9,11-11,11s-11-4.9-11-11s4.9-11,11-11S22,42.2,22,48.3z"/> + <path fill="#555555" d="M59,48.3c0,6.1-4.9,11-11,11s-11-4.9-11-11s4.9-11,11-11S59,42.2,59,48.3z"/> + <circle fill="#555555" cx="85" cy="48.3" r="11"/> + </g> +</g> +</svg> diff --git a/resources/mmv/ui/img/ellipsis_gray.svg b/resources/mmv/ui/img/ellipsis_gray.svg new file mode 100644 index 0000000..b8cbf38 --- /dev/null +++ b/resources/mmv/ui/img/ellipsis_gray.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px" + viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve"> +<g> + <g> + <path fill="#777777" d="M22,48.3c0,6.1-4.9,11-11,11s-11-4.9-11-11s4.9-11,11-11S22,42.2,22,48.3z"/> + <path fill="#777777" d="M59,48.3c0,6.1-4.9,11-11,11s-11-4.9-11-11s4.9-11,11-11S59,42.2,59,48.3z"/> + <circle fill="#777777" cx="85" cy="48.3" r="11"/> + </g> +</g> +</svg> diff --git a/resources/mmv/ui/img/ellipsis_lightgray.svg b/resources/mmv/ui/img/ellipsis_lightgray.svg new file mode 100644 index 0000000..41b47b4 --- /dev/null +++ b/resources/mmv/ui/img/ellipsis_lightgray.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px" + viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve"> +<g> + <g> + <path fill="#999999" d="M22,48.3c0,6.1-4.9,11-11,11s-11-4.9-11-11s4.9-11,11-11S22,42.2,22,48.3z"/> + <path fill="#999999" d="M59,48.3c0,6.1-4.9,11-11,11s-11-4.9-11-11s4.9-11,11-11S59,42.2,59,48.3z"/> + <circle fill="#999999" cx="85" cy="48.3" r="11"/> + </g> +</g> +</svg> diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js b/resources/mmv/ui/mmv.ui.metadataPanel.js index b4dc2cb..0e00418 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.js +++ b/resources/mmv/ui/mmv.ui.metadataPanel.js @@ -171,6 +171,8 @@ * Initializes the main body of metadata elements. */ MPP.initializeImageMetadata = function () { + this.$container.addClass( 'mw-mmv-ttf-ellipsis-container' ); + this.$imageMetadata = $( '<div>' ) .addClass( 'mw-mmv-image-metadata' ) .appendTo( this.$container ); diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.less b/resources/mmv/ui/mmv.ui.metadataPanel.less index df2abb1..752aa20 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.less +++ b/resources/mmv/ui/mmv.ui.metadataPanel.less @@ -70,6 +70,7 @@ background-size: contain; background-position: center center; background-repeat: no-repeat; + /* @embed */ background-image: url(img/user-ltr.svg); } diff --git a/resources/mmv/ui/mmv.ui.truncatableTextField.js b/resources/mmv/ui/mmv.ui.truncatableTextField.js index 62340a1..81fb126 100644 --- a/resources/mmv/ui/mmv.ui.truncatableTextField.js +++ b/resources/mmv/ui/mmv.ui.truncatableTextField.js @@ -191,13 +191,23 @@ } if ( appendEllipsis ) { - $result.append( '…' ); + $result.append( this.getEllipsis() ); } return $result; }; /** + * Returns the "more text" sign to append when the text is truncated. + * return {jQuery} ellipsis + */ + TTFP.getEllipsis = function () { + return $( '<span>' ) + .text( '…' ) + .addClass( 'mw-mmv-ttf-ellipsis' ); + }; + + /** * Truncate text to a maximum width. * @param {string} text * @param {number} maxlen diff --git a/resources/mmv/ui/mmv.ui.truncatableTextField.less b/resources/mmv/ui/mmv.ui.truncatableTextField.less index fc23b54..1edc090 100644 --- a/resources/mmv/ui/mmv.ui.truncatableTextField.less +++ b/resources/mmv/ui/mmv.ui.truncatableTextField.less @@ -8,4 +8,32 @@ .mw-mmv-truncate-toolong { cursor: pointer; -} \ No newline at end of file +} + +.mw-mmv-ttf-ellipsis { + display: inline-block; + height: 1em; // same size as the text + width: 1.5em; // keep aspect ratio + vertical-align: baseline; + text-indent: -9999px; + margin-left: 3px; + border-radius: 2px; + background-size: contain; + background-position: center center; + background-repeat: no-repeat; + /* @embed */ + background-image: url(img/ellipsis_lightgray.svg); + + .mw-mmv-ttf-ellipsis-container:hover & { + background-color: #d7d7d7; + /* @embed */ + background-image: url(img/ellipsis_gray.svg); + } + + // second rule + ordering needed for specificity + &:hover, .mw-mmv-ttf-ellipsis-container &:hover { + background-color: #cacaca; + /* @embed */ + background-image: url(img/ellipsis_darkgray.svg); + } +} -- To view, visit https://gerrit.wikimedia.org/r/169785 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I5fc37429a7dc7a8f1517fa42375cd140d7d11674 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gergő Tisza <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
