From 6ee3f0510497ad8a2ddeda6ea0569c44104617a4 Mon Sep 17 00:00:00 2001 From: Simon Legner Date: Tue, 27 Jun 2023 21:48:08 +0200 Subject: [PATCH] Use Codex styles for buttons in mmv.ui.download.pane Bug: T340258 Change-Id: I30a7ab4a6732fd87a68c67593d322be2347b2ff8 --- extension.json | 4 +- .../mmv.ui.download.pane.js | 5 +- .../mmv.ui.download.pane.less | 8 +++- resources/mmv/ui/mmv.ui.stripeButtons.js | 27 +++-------- resources/mmv/ui/mmv.ui.stripeButtons.less | 48 ++++--------------- resources/mmv/ui/mmv.ui.viewingOptions.js | 4 +- 6 files changed, 27 insertions(+), 69 deletions(-) diff --git a/extension.json b/extension.json index 1ace67b24..6a6c74415 100644 --- a/extension.json +++ b/extension.json @@ -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", diff --git a/resources/mmv.ui.download.pane/mmv.ui.download.pane.js b/resources/mmv.ui.download.pane/mmv.ui.download.pane.js index d9f02c6cb..ef224a698 100644 --- a/resources/mmv.ui.download.pane/mmv.ui.download.pane.js +++ b/resources/mmv.ui.download.pane/mmv.ui.download.pane.js @@ -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 = $( '' ) .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 = $( '' ) - .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( $( '' ) .addClass( 'mw-mmv-download-image-size-name' ) diff --git a/resources/mmv.ui.download.pane/mmv.ui.download.pane.less b/resources/mmv.ui.download.pane/mmv.ui.download.pane.less index 8e14034e5..6ecd97240 100644 --- a/resources/mmv.ui.download.pane/mmv.ui.download.pane.less +++ b/resources/mmv.ui.download.pane/mmv.ui.download.pane.less @@ -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; diff --git a/resources/mmv/ui/mmv.ui.stripeButtons.js b/resources/mmv/ui/mmv.ui.stripeButtons.js index 4c71fc044..f7a8eeb9b 100644 --- a/resources/mmv/ui/mmv.ui.stripeButtons.js +++ b/resources/mmv/ui/mmv.ui.stripeButtons.js @@ -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 $( '' ) - .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 = $( '' ) + .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( $( '' ).addClass( 'cdx-button__icon' ) ) + .append( mw.message( 'multimediaviewer-repository-local' ).text() ) .attr( 'href', descriptionUrl ); $button.toggleClass( 'mw-mmv-repo-button-commons', isCommons ); diff --git a/resources/mmv/ui/mmv.ui.stripeButtons.less b/resources/mmv/ui/mmv.ui.stripeButtons.less index 2e279eaaa..b5a55d820 100644 --- a/resources/mmv/ui/mmv.ui.stripeButtons.less +++ b/resources/mmv/ui/mmv.ui.stripeButtons.less @@ -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 ); } } diff --git a/resources/mmv/ui/mmv.ui.viewingOptions.js b/resources/mmv/ui/mmv.ui.viewingOptions.js index e502ad8e2..3316bacfa 100644 --- a/resources/mmv/ui/mmv.ui.viewingOptions.js +++ b/resources/mmv/ui/mmv.ui.viewingOptions.js @@ -272,7 +272,7 @@ const Dialog = require( './mmv.ui.dialog.js' ); */ makeSubmitButton( $submitDiv, msg, enabled ) { return $( '