mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-11-24 00:03:56 +00:00
Use Codex styles for buttons in mmv.ui.download.pane
Bug: T340258 Change-Id: I30a7ab4a6732fd87a68c67593d322be2347b2ff8
This commit is contained in:
Simon Legner
Jon Robson
parent
fb1de7786c
commit
6ee3f05104
|
|
@ -101,7 +101,6 @@
|
|||
"mediawiki.storage",
|
||||
"mediawiki.user",
|
||||
"mediawiki.util",
|
||||
"mediawiki.ui.button",
|
||||
"oojs",
|
||||
"jquery.fullscreen",
|
||||
"jquery.color",
|
||||
|
|
@ -243,8 +242,7 @@
|
|||
"mmv.ui.download.pane/mmv.ui.download.pane.less"
|
||||
],
|
||||
"dependencies": [
|
||||
"mediawiki.ui",
|
||||
"mediawiki.ui.button",
|
||||
"codex-styles",
|
||||
"mediawiki.widgets",
|
||||
"mmv",
|
||||
"mmv.ui.ondemandshareddependencies",
|
||||
|
|
|
|||
|
|
@ -83,14 +83,13 @@ const { EmbedFileFormatter, Utils } = require( 'mmv.ui.ondemandshareddependencie
|
|||
* @param {jQuery} $container
|
||||
*/
|
||||
createDownloadButton( $container ) {
|
||||
// TODO: Use OOUI progressive button widget instead
|
||||
this.$downloadButton = $( '<a>' )
|
||||
.attr( 'target', '_blank' )
|
||||
.attr( 'download', '' )
|
||||
.addClass( 'mw-ui-button mw-ui-progressive mw-mmv-download-go-button' );
|
||||
.addClass( 'cdx-button cdx-button--weight-primary cdx-button--action-progressive cdx-button--fake-button cdx-button--fake-button--enabled mw-mmv-download-go-button' );
|
||||
|
||||
this.$selectionArrow = $( '<span>' )
|
||||
.addClass( 'mw-ui-button mw-ui-progressive mw-mmv-download-select-menu' )
|
||||
.addClass( 'cdx-button cdx-button--weight-primary cdx-button--action-progressive cdx-button--fake-button cdx-button--fake-button--enabled mw-mmv-download-select-menu' )
|
||||
.append(
|
||||
$( '<span>' )
|
||||
.addClass( 'mw-mmv-download-image-size-name' )
|
||||
|
|
|
|||
|
|
@ -24,10 +24,15 @@
|
|||
padding-left: 10px;
|
||||
padding-bottom: 60px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.mw-mmv-download-go-button {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
display: inline-flex;
|
||||
flex-flow: column;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
/* Selection size arrow element */
|
||||
|
|
@ -62,6 +67,7 @@
|
|||
margin-left: -6px;
|
||||
font-size: 16px;
|
||||
color: @color-subtle;
|
||||
width: 100%;
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
|
|
@ -83,7 +89,7 @@
|
|||
display: none;
|
||||
margin-top: 0;
|
||||
margin-right: 20px;
|
||||
width: auto;
|
||||
width: 100%;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -45,31 +45,16 @@ const UiElement = require( './mmv.ui.js' );
|
|||
this.initDescriptionPageButton();
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a new button on the metadata stripe.
|
||||
*
|
||||
* @protected
|
||||
* @param {string} cssClass CSS class name for the button
|
||||
* @return {jQuery} Button
|
||||
*/
|
||||
createButton( cssClass ) {
|
||||
// eslint-disable-next-line mediawiki/class-doc
|
||||
return $( '<a>' )
|
||||
.addClass( `mw-mmv-stripe-button empty ${cssClass}` )
|
||||
// elements are right-floated so we use prepend instead of append to keep the order
|
||||
.prependTo( this.$buttonContainer )
|
||||
.attr( 'tabindex', '0' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a button linking to the file description page.
|
||||
*
|
||||
* @protected
|
||||
*/
|
||||
initDescriptionPageButton() {
|
||||
this.buttons.$descriptionPage = this.createButton(
|
||||
'empty mw-mmv-description-page-button mw-ui-big mw-ui-button mw-ui-progressive'
|
||||
);
|
||||
this.buttons.$descriptionPage = $( '<a>' )
|
||||
.addClass( 'mw-mmv-stripe-button empty mw-mmv-description-page-button cdx-button cdx-button--weight-primary cdx-button--action-progressive cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled' )
|
||||
// elements are right-floated so we use prepend instead of append to keep the order
|
||||
.prependTo( this.$buttonContainer );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -116,7 +101,9 @@ const UiElement = require( './mmv.ui.js' );
|
|||
isCommons = false;
|
||||
}
|
||||
|
||||
$button.text( mw.message( 'multimediaviewer-repository-local' ).text() )
|
||||
$button.empty()
|
||||
.append( $( '<span>' ).addClass( 'cdx-button__icon' ) )
|
||||
.append( mw.message( 'multimediaviewer-repository-local' ).text() )
|
||||
.attr( 'href', descriptionUrl );
|
||||
|
||||
$button.toggleClass( 'mw-mmv-repo-button-commons', isCommons );
|
||||
|
|
|
|||
|
|
@ -12,54 +12,22 @@
|
|||
// translation) so we float them to the right and calculate the top margin required to make them
|
||||
// full height.
|
||||
.mw-mmv-stripe-button {
|
||||
@button-text-color: #888;
|
||||
float: right;
|
||||
margin-top: @metadatabar-above-fold-inner-height - ( @button-height + 2 * @button-vertical-padding );
|
||||
.user-select( none );
|
||||
font-size: 1.25em;
|
||||
color: @button-text-color;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.25s;
|
||||
|
||||
&.empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
// fix odd position caused by bottom of icon and bottom of SVG not being aligned
|
||||
position: relative;
|
||||
top: 0.1em;
|
||||
background-size: 100% 100%;
|
||||
content: ' ';
|
||||
vertical-align: baseline;
|
||||
/* @embed */
|
||||
background-image: url( img/page.svg );
|
||||
margin-right: 0.7em;
|
||||
}
|
||||
|
||||
&.has-label::before {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
&.mw-mmv-description-page-button,
|
||||
&.mw-mmv-description-page-button:active,
|
||||
&.mw-mmv-description-page-button:visited {
|
||||
border-radius: @border-radius-base;
|
||||
color: #fff;
|
||||
padding: 7px 16px;
|
||||
&.mw-mmv-description-page-button {
|
||||
margin: 7px 10px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
&.mw-mmv-description-page-button.mw-mmv-repo-button-commons::before {
|
||||
/* @embed */
|
||||
background-image: url( img/commons_white.svg );
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
position: relative;
|
||||
top: 0.15em;
|
||||
margin: -0.3em 0.4em 0 0;
|
||||
&.mw-mmv-description-page-button .cdx-button__icon {
|
||||
.cdx-mixin-css-icon( @cdx-icon-article, @param-is-button-icon: true );
|
||||
}
|
||||
|
||||
&.mw-mmv-description-page-button.mw-mmv-repo-button-commons .cdx-button__icon {
|
||||
.cdx-mixin-css-icon( @cdx-icon-logo-wikimedia-commons, @param-is-button-icon: true );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -272,7 +272,7 @@ const Dialog = require( './mmv.ui.dialog.js' );
|
|||
*/
|
||||
makeSubmitButton( $submitDiv, msg, enabled ) {
|
||||
return $( '<button>' )
|
||||
.addClass( 'mw-mmv-options-submit-button mw-ui-button mw-ui-progressive' )
|
||||
.addClass( 'mw-mmv-options-submit-button cdx-button cdx-button--action-progressive cdx-button--weight-primary' )
|
||||
.text( msg )
|
||||
.appendTo( $submitDiv )
|
||||
.on( 'click', () => {
|
||||
|
|
@ -301,7 +301,7 @@ const Dialog = require( './mmv.ui.dialog.js' );
|
|||
*/
|
||||
makeCancelButton( $submitDiv ) {
|
||||
return $( '<button>' )
|
||||
.addClass( 'mw-mmv-options-cancel-button mw-ui-button mw-ui-quiet' )
|
||||
.addClass( 'mw-mmv-options-cancel-button cdx-button cdx-button--weight-quiet' )
|
||||
.text( mw.message( 'multimediaviewer-option-cancel-button' ).text() )
|
||||
.appendTo( $submitDiv )
|
||||
.on( 'click', () => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue