From fc84b8e125877aa5a0f637fe86f561a4b413dc1a Mon Sep 17 00:00:00 2001 From: Geoffrey Mon Date: Wed, 28 Dec 2016 11:32:28 -0500 Subject: [PATCH] Copy button for attribution text in download dialog In addition: * .mw-mmv-reuse-copy => .mw-mmv-dialog-copy because it's not just a reuse dialog thing anymore * Adjust margin between attribution textbox and attribution option widget to stay consistent with reuse dialog UI Bug: T77295 Change-Id: I79abdc1a3c10f0a8c3ecb6f4d444a601595a903f --- extension.json | 1 + i18n/en.json | 1 + i18n/qqq.json | 1 + resources/mmv/ui/mmv.ui.dialog.less | 14 +++++++++++ resources/mmv/ui/mmv.ui.download.pane.js | 28 +++++++++++++++++++--- resources/mmv/ui/mmv.ui.download.pane.less | 15 ++++++++++++ resources/mmv/ui/mmv.ui.reuse.dialog.less | 14 ----------- resources/mmv/ui/mmv.ui.reuse.embed.js | 2 +- resources/mmv/ui/mmv.ui.reuse.embed.less | 2 +- resources/mmv/ui/mmv.ui.reuse.share.js | 2 +- resources/mmv/ui/mmv.ui.reuse.share.less | 2 +- 11 files changed, 61 insertions(+), 21 deletions(-) diff --git a/extension.json b/extension.json index 65ce6e9cd..2b249cab7 100644 --- a/extension.json +++ b/extension.json @@ -264,6 +264,7 @@ "multimediaviewer-download-attribution-cta-header", "multimediaviewer-download-optional-attribution-cta-header", "multimediaviewer-download-attribution-cta", + "multimediaviewer-download-attribution-copy", "multimediaviewer-attr-plain", "multimediaviewer-attr-html" ] diff --git a/i18n/en.json b/i18n/en.json index f926a79a5..d5be709d1 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -128,6 +128,7 @@ "multimediaviewer-download-attribution-cta-header": "You need to attribute the author", "multimediaviewer-download-optional-attribution-cta-header": "You can attribute the author", "multimediaviewer-download-attribution-cta": "Show me how", + "multimediaviewer-download-attribution-copy": "Select and copy (if supported) the attribution text for this file", "multimediaviewer-attr-plain": "Plain", "multimediaviewer-attr-html": "HTML", "multimediaviewer-options-tooltip": "Enable or disable Media Viewer", diff --git a/i18n/qqq.json b/i18n/qqq.json index 6c94fa024..f33e26d22 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -137,6 +137,7 @@ "multimediaviewer-download-attribution-cta-header": "Header for telling the user that the author of an image must be attributed, during a download action. See also {{msg-mw|multimediaviewer-download-optional-attribution-cta-header}}.", "multimediaviewer-download-optional-attribution-cta-header": "Header for inviting the user to attribute author of the image during a download action. This is used for images where attribution is not a legal requirement. See also {{msg-mw|multimediaviewer-download-attribution-cta-header}}.", "multimediaviewer-download-attribution-cta": "Call to action for a user to find out how to attribute the author of an image.", + "multimediaviewer-download-attribution-copy": "Text of the tooltip for the button to select and copy the attribution of a file (if supported by the browser) in the download panel, that is displayed when hovered over.", "multimediaviewer-attr-plain": "Label for a button that lets the user pick plain text as an output format.", "multimediaviewer-attr-html": "{{optional}}\nLabel for a button that lets the user pick HTML as an output format.\n{{Identical|HTML}}", "multimediaviewer-options-tooltip": "Tooltip for a button that opens a panel for enabling or disabling the media viewer.", diff --git a/resources/mmv/ui/mmv.ui.dialog.less b/resources/mmv/ui/mmv.ui.dialog.less index 32069019c..d51fd046c 100644 --- a/resources/mmv/ui/mmv.ui.dialog.less +++ b/resources/mmv/ui/mmv.ui.dialog.less @@ -24,4 +24,18 @@ .rotate( -45deg ); position: fixed; } + + .mw-mmv-dialog-copy { + /* @embed */ + background-image: url( img/pasting.svg ); + background-size: contain; + background-position: right center; + background-repeat: no-repeat; + + &:hover { + /* @embed */ + background-image: url( img/pasting-hover.svg ); + text-decoration: none; + } + } } diff --git a/resources/mmv/ui/mmv.ui.download.pane.js b/resources/mmv/ui/mmv.ui.download.pane.js index 7ee519fbf..814369f45 100644 --- a/resources/mmv/ui/mmv.ui.download.pane.js +++ b/resources/mmv/ui/mmv.ui.download.pane.js @@ -187,6 +187,29 @@ .text( mw.message( 'multimediaviewer-download-attribution-cta' ).text() ) ) .appendTo( this.$attributionSection ); + this.attributionInput = attributionInput; + this.$attributionCopy = this.$copyButton = $( '' ) + .addClass( 'mw-mmv-dialog-copy' ) + .click( function () { + // Select the text, and then try to copy the text. + // If the copy fails or is not supported, continue as if nothing had happened. + dl.attributionInput.select(); + try { + if ( document.queryCommandSupported && + document.queryCommandSupported( 'copy' ) ) { + document.execCommand( 'copy' ); + } + } catch ( e ) { + // queryCommandSupported in Firefox pre-41 can throw errors when used with + // clipboard commands. We catch and ignore these and other copy-command-related + // errors here. + } + } ) + .prop( 'title', mw.msg( 'multimediaviewer-download-attribution-copy' ) ) + .tipsy( { + delayIn: mw.config.get( 'wgMultimediaViewer' ).tooltipDelay, + gravity: this.correctEW( 'se' ) + } ); this.$attributionHowHeader = $( '

' ) .addClass( 'mw-mmv-download-attribution-how-header' ) @@ -195,7 +218,8 @@ .addClass( 'mw-mmv-download-attribution-how' ) .append( this.$attributionHowHeader, - attributionInput.$element, + this.attributionInput.$element, + this.$attributionCopy, attributionSwitch.$element, $( '

' ) .addClass( 'mw-mmv-download-attribution-close-button' ) @@ -206,8 +230,6 @@ .text( ' ' ) ) .appendTo( this.$attributionSection ); - - this.attributionInput = attributionInput; }; /** diff --git a/resources/mmv/ui/mmv.ui.download.pane.less b/resources/mmv/ui/mmv.ui.download.pane.less index 540063c1f..afb67a056 100644 --- a/resources/mmv/ui/mmv.ui.download.pane.less +++ b/resources/mmv/ui/mmv.ui.download.pane.less @@ -180,11 +180,26 @@ // override OOJS-UI fixed width width: auto; + // margin between text widget and option switch widget + margin-bottom: 10px; + input[readonly] { color: @input-text-color; text-shadow: none; } } + + .mw-mmv-dialog-copy { + // style rules based on .mw-mmv-share-page-link + float: right; + width: 1.5em; + height: 1.5em; + + // position approximately to the middle - probably fragile but couldn't find a better way as + // the height of OOJS-UI input widget has both em and px parts and not possible to calculate + // exactly + margin: 8px 0.5em 8px 0; + } } } diff --git a/resources/mmv/ui/mmv.ui.reuse.dialog.less b/resources/mmv/ui/mmv.ui.reuse.dialog.less index 1791aeb7a..15214068b 100644 --- a/resources/mmv/ui/mmv.ui.reuse.dialog.less +++ b/resources/mmv/ui/mmv.ui.reuse.dialog.less @@ -54,20 +54,6 @@ &.active { display: block; } - - .mw-mmv-reuse-copy { - /* @embed */ - background-image: url( img/pasting.svg ); - background-size: contain; - background-position: right center; - background-repeat: no-repeat; - - &:hover { - /* @embed */ - background-image: url( img/pasting-hover.svg ); - text-decoration: none; - } - } } .mw-mmv-dialog-down-arrow { diff --git a/resources/mmv/ui/mmv.ui.reuse.embed.js b/resources/mmv/ui/mmv.ui.reuse.embed.js index dc080ac5a..bb17beabd 100644 --- a/resources/mmv/ui/mmv.ui.reuse.embed.js +++ b/resources/mmv/ui/mmv.ui.reuse.embed.js @@ -144,7 +144,7 @@ } ); this.$copyButton = $( '' ) - .addClass( 'mw-mmv-reuse-copy' ) + .addClass( 'mw-mmv-dialog-copy' ) .click( function () { // Select the text, and then try to copy the text. // If the copy fails or is not supported, continue as if nothing had happened. diff --git a/resources/mmv/ui/mmv.ui.reuse.embed.less b/resources/mmv/ui/mmv.ui.reuse.embed.less index 5c895234b..58242129c 100644 --- a/resources/mmv/ui/mmv.ui.reuse.embed.less +++ b/resources/mmv/ui/mmv.ui.reuse.embed.less @@ -35,7 +35,7 @@ margin: 0; } - .mw-mmv-reuse-copy { + .mw-mmv-dialog-copy { float: right; width: 1em; height: 1em; diff --git a/resources/mmv/ui/mmv.ui.reuse.share.js b/resources/mmv/ui/mmv.ui.reuse.share.js index 2a3dac4e2..449d9161d 100644 --- a/resources/mmv/ui/mmv.ui.reuse.share.js +++ b/resources/mmv/ui/mmv.ui.reuse.share.js @@ -68,7 +68,7 @@ } ); this.$copyButton = $( '' ) - .addClass( 'mw-mmv-reuse-copy' ) + .addClass( 'mw-mmv-dialog-copy' ) .click( function () { // Select the text, and then try to copy the text. // If the copy fails or is not supported, continue as if nothing had happened. diff --git a/resources/mmv/ui/mmv.ui.reuse.share.less b/resources/mmv/ui/mmv.ui.reuse.share.less index 1e2cbc870..dd05a58ad 100644 --- a/resources/mmv/ui/mmv.ui.reuse.share.less +++ b/resources/mmv/ui/mmv.ui.reuse.share.less @@ -15,7 +15,7 @@ } } - .mw-mmv-reuse-copy { + .mw-mmv-dialog-copy { // style rules based on .mw-mmv-share-page-link float: right; width: 1.5em;