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

Use Codex styles for buttons in mmv.bootstrap

Browse source 
Bug: T340258
Change-Id: I11fdbabae0ed996ed2e830259ccd3e02c3f035fc
This commit is contained in:
Simon Legner 2023-06-27 20:12:16 +02:00 committed by Jdlrobson
parent 0f9026a76e
commit de2349a509
4 changed files with 27 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.stylelintrc.json
View file

@ -7,6 +7,7 @@
"rules": {
"declaration-property-unit-disallowed-list": null,
"no-descending-specificity": null,
"unit-disallowed-list": null,
"selector-class-pattern": null
}
}

4
extension.json
View file

@ -101,6 +101,7 @@
"mediawiki.storage",
"mediawiki.user",
"mediawiki.util",
"mediawiki.ui.button",
"oojs",
"jquery.fullscreen",
"jquery.color",
@ -321,10 +322,9 @@
"mmv.bootstrap/mmv.bootstrap.less"
],
"dependencies": [
"codex-search-styles",
"mediawiki.api",
"mediawiki.router",
"mediawiki.ui.button",
"mediawiki.ui.icon",
"mediawiki.Title",
"mediawiki.user",
"mediawiki.storage",

44
resources/mmv.bootstrap/mmv.bootstrap.js
View file

@ -387,36 +387,22 @@ const HtmlUtils = require( './mmv.HtmlUtils.js' );
// eslint-disable-next-line no-jquery/no-global-selector
$( '.mw-mmv-filepage-buttons' ).next().addBack().remove();
const $icon = $( '<span>' ).addClass( 'mw-ui-icon mw-ui-icon-before' );
const $mmvButton = $( '<button>' )
.addClass( 'mw-mmv-view-expanded cdx-button' )
.append( $( '<span>' ).addClass( 'cdx-button__icon' ) )
.append( ' ' )
.append( mw.message( 'multimediaviewer-view-expanded' ).text() );
const $link = $( '<a>' )
// It won't matter because we catch the click event anyway, but
// give the user some URL to see.
.prop( 'href', link )
.addClass( 'mw-mmv-view-expanded mw-ui-button' );
const $label = $( '<span>' )
.text( mw.message( 'multimediaviewer-view-expanded' ).text() );
$icon.append( $label ).appendTo( $link );
const $configLink = $( '<a>' )
.prop( 'href', $thumb.closest( 'a' ).prop( 'href' ) )
.addClass( 'mw-mmv-view-config mw-ui-button' );
const $configLabel = $( '<span>' )
.text( mw.message( 'multimediaviewer-view-config' ).text() );
const $configIcon = $( '<span>' )
.addClass( 'mw-ui-icon mw-ui-icon-before' )
.append( $configLabel )
.appendTo( $configLink );
$configIcon.append( $configLabel ).appendTo( $configLink );
const $configButton = $( '<button>' )
.attr( 'title', mw.message( 'multimediaviewer-view-config' ).text() )
.addClass( 'mw-mmv-view-config cdx-button cdx-button--icon-only' )
.append( $( '<span>' ).addClass( 'cdx-button__icon' ) )
// U+200B ZERO WIDTH SPACE to accomplish same height as $mmvButton
.append( '\u200B' );
const $filepageButtons = $( '<div>' )
.addClass( 'mw-ui-button-group mw-mmv-filepage-buttons' )
.append( $link, $configLink );
.addClass( 'cdx-button-group mw-mmv-filepage-buttons' )
.append( $mmvButton, $configButton );
// eslint-disable-next-line no-jquery/no-global-selector
$( '.fullMedia' ).append(
@ -432,7 +418,7 @@ const HtmlUtils = require( './mmv.HtmlUtils.js' );
link: link
} );
$link.on( 'click', () => {
$mmvButton.on( 'click', () => {
if ( this.statusInfoDialog ) {
this.statusInfoDialog.close();
}
@ -440,7 +426,7 @@ const HtmlUtils = require( './mmv.HtmlUtils.js' );
return false;
} );
$configLink.on( 'click', () => {
$configButton.on( 'click', () => {
if ( this.statusInfoDialog ) {
this.statusInfoDialog.close();
}

32
resources/mmv.bootstrap/mmv.bootstrap.less
View file

@ -1,3 +1,5 @@
@import 'mediawiki.skin.variables.less';
.mw-mmv-overlay {
position: fixed;
top: 0;
@ -23,35 +25,19 @@ body.mw-mmv-lightbox-open {
}
.mw-mmv-filepage-buttons {
font-size: 1rem;
margin-top: 5px;
.mw-mmv-view-expanded,
.mw-mmv-view-config {
display: block;
// Work around some weirdness of MW-UI buttons. T127052
line-height: inherit;
.cdx-button:nth-child(n + 2) {
border-left: none;
}
.mw-mmv-view-expanded .mw-ui-icon::before {
/* @embed */
background-image: url( img/expand.svg );
.mw-mmv-view-expanded .cdx-button__icon {
.cdx-mixin-css-icon( @cdx-icon-image-gallery, @param-is-button-icon: true );
}
.mw-mmv-view-config .mw-ui-icon::before {
/* @embed */
background-image: url( img/gear.svg );
margin-right: 0;
opacity: 0.75;
&:hover {
opacity: 1;
}
}
.mw-mmv-view-config {
.mw-ui-icon span {
display: none;
}
.mw-mmv-view-config .cdx-button__icon {
.cdx-mixin-css-icon( @cdx-icon-settings, @param-is-button-icon: true );
}
}