wikimedia/mediawiki-extensions-MultimediaViewer
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer synced 2024-11-24 00:03:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Copy button for attribution text in download dialog

Browse source 
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
This commit is contained in:
Geoffrey Mon 2016-12-28 11:32:28 -05:00
parent bcce450500
commit fc84b8e125
11 changed files with 61 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
extension.json
View file

@ -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"
]

1
i18n/en.json
View file

@ -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",

1
i18n/qqq.json
View file

@ -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.",

14
resources/mmv/ui/mmv.ui.dialog.less
View file

@ -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;
}
}
}

28
resources/mmv/ui/mmv.ui.download.pane.js
View file

@ -187,6 +187,29 @@
.text( mw.message( 'multimediaviewer-download-attribution-cta' ).text() )
)
.appendTo( this.$attributionSection );
this.attributionInput = attributionInput;
this.$attributionCopy = this.$copyButton = $( '<a>' )
.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 = $( '<p>' )
.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,
$( '<p>' )
.addClass( 'mw-mmv-download-attribution-close-button' )
@ -206,8 +230,6 @@
.text( ' ' )
)
.appendTo( this.$attributionSection );
this.attributionInput = attributionInput;
};
/**

15
resources/mmv/ui/mmv.ui.download.pane.less
View file

@ -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;
}
}
}

14
resources/mmv/ui/mmv.ui.reuse.dialog.less
View file

@ -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 {

2
resources/mmv/ui/mmv.ui.reuse.embed.js
View file

@ -144,7 +144,7 @@
} );
this.$copyButton = $( '<a>' )
.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.

2
resources/mmv/ui/mmv.ui.reuse.embed.less
View file

@ -35,7 +35,7 @@
margin: 0;
}
.mw-mmv-reuse-copy {
.mw-mmv-dialog-copy {
float: right;
width: 1em;
height: 1em;

2
resources/mmv/ui/mmv.ui.reuse.share.js
View file

@ -68,7 +68,7 @@
} );
this.$copyButton = $( '<a>' )
.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.

2
resources/mmv/ui/mmv.ui.reuse.share.less
View file

@ -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;