From 976ffc76d37ad910935f3a9647e22e3497a7741d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20Tisza?= Date: Wed, 26 Feb 2014 02:47:24 +0000 Subject: [PATCH] Make it obvious that the permission text is cut off; add expand link Fades out the bottom of the text and adds a link to replace it with the full HTML version. Due to the way it is positioned, the fade + link will be invisible if the text is less then 3 lines. The implementation is not very polished; since this will be replaced by some JS-based ellipsis thing, I didn't want to spend too much time on it. Change-Id: Ib30e40fe845b85bfcf9557970efb886d28b3e5c7 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/118 --- MultimediaViewer.i18n.php | 4 +++- MultimediaViewer.php | 1 + resources/mmv/ui/mmv.mixins.less | 15 ++++++++++++- resources/mmv/ui/mmv.ui.permission.js | 23 +++++++++++++++++++- resources/mmv/ui/mmv.ui.permission.less | 21 ++++++++++++++++++ tests/qunit/mmv/ui/mmv.ui.permission.test.js | 4 +++- 6 files changed, 64 insertions(+), 4 deletions(-) diff --git a/MultimediaViewer.i18n.php b/MultimediaViewer.i18n.php index 7e83c0bfc..6e6b39d13 100644 --- a/MultimediaViewer.i18n.php +++ b/MultimediaViewer.i18n.php @@ -59,6 +59,7 @@ $messages['en'] = array( 'multimediaviewer-permission-title' => 'License details', 'multimediaviewer-permission-link' => 'view terms', + 'multimediaviewer-permission-viewmore' => 'View more', 'multimediaviewer-use-file' => 'Use this file', 'multimediaviewer-use-file-owt' => 'Use this file on a wiki page, as a thumbnail', @@ -156,7 +157,8 @@ They will usually be derived from the HTML output from wikitext on a file descri {{Identical|Public domain}}', 'multimediaviewer-license-default' => 'Short label for a link to generic license information.', 'multimediaviewer-permission-title' => 'Title of the box containing additional license terms', - 'multimediaviewer-permission-link' => 'Text of the link which shows additional license terms', + 'multimediaviewer-permission-link' => 'Text of the link (on top of the metadata box) which shows additional license terms', + 'multimediaviewer-permission-viewmore' => 'Text of the link (at the cutoff of the license term preview) which shows additional license terms', 'multimediaviewer-use-file' => 'Link that opens a dialog with options for sharing the file, e.g. onwiki or on another site. Similar to the Commons gadget stockPhoto.', 'multimediaviewer-use-file-owt' => 'Label for input box which has wikitext used to show an image with the thumb option and a helpful caption. diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 0f8b7aa88..5da288ef0 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -274,6 +274,7 @@ call_user_func( function() { 'messages' => array( 'multimediaviewer-permission-title', + 'multimediaviewer-permission-viewmore', ), 'dependencies' => array( diff --git a/resources/mmv/ui/mmv.mixins.less b/resources/mmv/ui/mmv.mixins.less index 262e9d8e0..6d80cdac5 100644 --- a/resources/mmv/ui/mmv.mixins.less +++ b/resources/mmv/ui/mmv.mixins.less @@ -7,7 +7,7 @@ background-clip: padding-box; // Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ } -.unselectable { +.unselectable() { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; @@ -15,3 +15,16 @@ user-select: none; } +// from http://stackoverflow.com/a/12178019/323407 +.fade-out(@backgroundColor: white) { + @invisible: fadeout(@backgroundColor, 100%); + background-image: linear-gradient(to bottom, @invisible 0%, @backgroundColor 100%); // W3C + background-image: -moz-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // FF3.6+ + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @invisible), + color-stop(100%, @backgroundColor)); // Chrome,Safari4+ + background-image: -webkit-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // Chrome10+,Safari5.1+ + background-image: -o-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // Opera 11.10+ + background-image: -ms-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // IE10+ + filter: e(%("progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 )", + rgbahex(@invisible), rgbahex(@backgroundColor))); // IE6-9 +} diff --git a/resources/mmv/ui/mmv.ui.permission.js b/resources/mmv/ui/mmv.ui.permission.js index 28ee85a26..714cb79d1 100644 --- a/resources/mmv/ui/mmv.ui.permission.js +++ b/resources/mmv/ui/mmv.ui.permission.js @@ -57,7 +57,25 @@ */ this.$text = $( '
' ) .addClass( 'mw-mlb-permission-text' ) - .appendTo( this.$box ); + .appendTo( this.$box ) + .on( 'click', '.mw-mlb-permission-text-viewmore', function( e ) { + e.preventDefault(); + permission.grow(); + } ) + ; + + /** + * A helper element to fade off text + * @property {jQuery} + */ + this.$fader = $( '
' ) + .addClass( 'mw-mlb-permission-text-fader' ) + .append( + $( '' ) + .addClass( 'mw-mlb-permission-text-viewmore' ) + .prop( 'href', '#' ) + .text( mw.message( 'multimediaviewer-permission-viewmore' ).text() ) + ); /** * Original (HTML) version of the author's message @@ -97,8 +115,11 @@ */ P.set = function( permission ) { this.$box.removeClass( 'empty' ); + this.$text.html( permission ); this.whitelistHtml( this.$text ); + this.$text.append( this.$fader ); + this.$html.html( permission ); }; diff --git a/resources/mmv/ui/mmv.ui.permission.less b/resources/mmv/ui/mmv.ui.permission.less index 011a48421..452a9f2da 100644 --- a/resources/mmv/ui/mmv.ui.permission.less +++ b/resources/mmv/ui/mmv.ui.permission.less @@ -1,4 +1,5 @@ @import "mediawiki.mixins"; +@import "mmv.mixins"; .mw-mlb-permission-box { position: relative; @@ -35,14 +36,34 @@ @text-line-height: 1.2; @lines-shown: 3; + position: relative; + max-height: @lines-shown * @text-line-height * @text-font-size; overflow: hidden; margin: 0 10px 10px; font-size: @text-font-size; line-height: @text-line-height; + + .mw-mlb-permission-text-fader { + position: absolute; + top: (@lines-shown - 1) * @text-line-height * @text-font-size; + width: 100%; + height: @text-line-height * @text-font-size; + + .fade-out(); + + text-align: right; + + a { + padding: 3px 0 0 1em; + background-color: white; + font-size: small; + } + } } .mw-mlb-permission-html { + margin: 0 10px 10px; display: none; } diff --git a/tests/qunit/mmv/ui/mmv.ui.permission.test.js b/tests/qunit/mmv/ui/mmv.ui.permission.test.js index 13e9648fb..9b39f2d00 100644 --- a/tests/qunit/mmv/ui/mmv.ui.permission.test.js +++ b/tests/qunit/mmv/ui/mmv.ui.permission.test.js @@ -32,7 +32,9 @@ permission.set( text ); - assert.strictEqual( permission.$text.text(), text, 'permission text is set' ); + // FIXME get rid of "view more" - this is temporary + assert.strictEqual( permission.$text.children().remove().end().text(), + text, 'permission text is set' ); assert.strictEqual( permission.$html.text(), text, 'permission html is set' ); assert.ok( permission.$text.is( ':visible' ), 'permission text is visible' ); assert.ok( !permission.$html.is( ':visible' ), 'permission html is not visible' );