wikimedia/mediawiki-extensions-MultimediaViewer
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer synced 2024-11-27 17:40:06 +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": { "rules": {
"declaration-property-unit-disallowed-list": null, "declaration-property-unit-disallowed-list": null,
"no-descending-specificity": null, "no-descending-specificity": null,
"unit-disallowed-list": null,
"selector-class-pattern": null "selector-class-pattern": null
} }
} }

4
extension.json
View file

@ -101,6 +101,7 @@
"mediawiki.storage", "mediawiki.storage",
"mediawiki.user", "mediawiki.user",
"mediawiki.util", "mediawiki.util",
"mediawiki.ui.button",
"oojs", "oojs",
"jquery.fullscreen", "jquery.fullscreen",
"jquery.color", "jquery.color",
@ -321,10 +322,9 @@
"mmv.bootstrap/mmv.bootstrap.less" "mmv.bootstrap/mmv.bootstrap.less"
], ],
"dependencies": [ "dependencies": [
"codex-search-styles",
"mediawiki.api", "mediawiki.api",
"mediawiki.router", "mediawiki.router",
"mediawiki.ui.button",
"mediawiki.ui.icon",
"mediawiki.Title", "mediawiki.Title",
"mediawiki.user", "mediawiki.user",
"mediawiki.storage", "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 // eslint-disable-next-line no-jquery/no-global-selector
$( '.mw-mmv-filepage-buttons' ).next().addBack().remove(); $( '.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>' ) const $configButton = $( '<button>' )
// It won't matter because we catch the click event anyway, but .attr( 'title', mw.message( 'multimediaviewer-view-config' ).text() )
// give the user some URL to see. .addClass( 'mw-mmv-view-config cdx-button cdx-button--icon-only' )
.prop( 'href', link ) .append( $( '<span>' ).addClass( 'cdx-button__icon' ) )
.addClass( 'mw-mmv-view-expanded mw-ui-button' ); // U+200B ZERO WIDTH SPACE to accomplish same height as $mmvButton
.append( '\u200B' );
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 $filepageButtons = $( '<div>' ) const $filepageButtons = $( '<div>' )
.addClass( 'mw-ui-button-group mw-mmv-filepage-buttons' ) .addClass( 'cdx-button-group mw-mmv-filepage-buttons' )
.append( $link, $configLink ); .append( $mmvButton, $configButton );
// eslint-disable-next-line no-jquery/no-global-selector // eslint-disable-next-line no-jquery/no-global-selector
$( '.fullMedia' ).append( $( '.fullMedia' ).append(
@ -432,7 +418,7 @@ const HtmlUtils = require( './mmv.HtmlUtils.js' );
link: link link: link
} ); } );
$link.on( 'click', () => { $mmvButton.on( 'click', () => {
if ( this.statusInfoDialog ) { if ( this.statusInfoDialog ) {
this.statusInfoDialog.close(); this.statusInfoDialog.close();
} }
@ -440,7 +426,7 @@ const HtmlUtils = require( './mmv.HtmlUtils.js' );
return false; return false;
} ); } );
$configLink.on( 'click', () => { $configButton.on( 'click', () => {
if ( this.statusInfoDialog ) { if ( this.statusInfoDialog ) {
this.statusInfoDialog.close(); this.statusInfoDialog.close();
} }

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

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