jenkins-bot has submitted this change and it was merged. Change subject: MediaWiki theme: Add support for frameless primary buttons ......................................................................
MediaWiki theme: Add support for frameless primary buttons Also fix frameless button support in toolbars (both primary and non-primary). Bug: T103403 Change-Id: I26b540dd22a975c9b0c139e9dc748da6a2313958 --- M demos/pages/toolbars.js M demos/pages/widgets.js M src/themes/apex/tools.less M src/themes/mediawiki/MediaWikiTheme.js M src/themes/mediawiki/elements.less M src/themes/mediawiki/tools.less 6 files changed, 68 insertions(+), 20 deletions(-) Approvals: Jforrester: Looks good to me, approved jenkins-bot: Verified diff --git a/demos/pages/toolbars.js b/demos/pages/toolbars.js index 550d812..4a58a33 100644 --- a/demos/pages/toolbars.js +++ b/demos/pages/toolbars.js @@ -1,5 +1,5 @@ OO.ui.Demo.static.pages.toolbars = function ( demo ) { - var i, toolGroups, saveButton, actionButton, actionButtonDisabled, PopupTool, ToolGroupTool, + var i, toolGroups, saveButton, deleteButton, actionButton, actionButtonDisabled, PopupTool, ToolGroupTool, $demo = demo.$element, $containers = $(), toolFactories = [], @@ -217,14 +217,15 @@ } ] ); - saveButton = new OO.ui.ButtonWidget( { label: 'Save', flags: [ 'progressive', 'primary' ] } ); + saveButton = new OO.ui.ButtonWidget( { label: 'Save', framed: false, flags: [ 'progressive', 'primary' ] } ); + deleteButton = new OO.ui.ButtonWidget( { label: 'Delete', framed: false, flags: [ 'destructive' ] } ); actionButton = new OO.ui.ButtonWidget( { label: 'Action' } ); actionButtonDisabled = new OO.ui.ButtonWidget( { label: 'Disabled', disabled: true } ); toolbars[ 1 ].$actions .append( actionButton.$element, actionButtonDisabled.$element ); toolbars[ 3 ].$actions - .append( toolbars[ 2 ].$element, saveButton.$element ); + .append( toolbars[ 2 ].$element, deleteButton.$element, saveButton.$element ); for ( i = 0; i < toolbars.length; i++ ) { toolbars[ i ].emit( 'updateState' ); diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js index 5c0843c..d4880b5 100644 --- a/demos/pages/widgets.js +++ b/demos/pages/widgets.js @@ -418,6 +418,18 @@ new OO.ui.FieldLayout( new OO.ui.ButtonWidget( { framed: false, + flags: [ 'progressive', 'primary' ], + icon: 'check', + label: 'Primary' + } ), + { + label: 'ButtonWidget (frameless, primary, progressive)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + framed: false, flags: [ 'warning' ], icon: 'alert', label: 'Warning' diff --git a/src/themes/apex/tools.less b/src/themes/apex/tools.less index 913bb51..ca78a57 100644 --- a/src/themes/apex/tools.less +++ b/src/themes/apex/tools.less @@ -12,16 +12,29 @@ } &-actions { - > .oo-ui-buttonElement { + > .oo-ui-buttonElement-framed, + > .oo-ui-buttonElement-framed:last-child { margin-top: 0.4em; margin-bottom: 0.4em; - } - - > .oo-ui-buttonElement:last-child { margin-right: 0.5em; } + + > .oo-ui-buttonElement-frameless, + > .oo-ui-buttonElement-frameless:last-child { + &.oo-ui-labelElement { + margin: 0; + > .oo-ui-buttonElement-button { + margin: 0; + padding: 1.1953125em 0.3125em; + > .oo-ui-labelElement-label { + margin: 0 1em; + } + } + } + } } + &-shadow { .oo-ui-background-image('@{oo-ui-default-image-path}/toolbar-shadow.png'); bottom: -9px; diff --git a/src/themes/mediawiki/MediaWikiTheme.js b/src/themes/mediawiki/MediaWikiTheme.js index edad3f8..9e2a7cb 100644 --- a/src/themes/mediawiki/MediaWikiTheme.js +++ b/src/themes/mediawiki/MediaWikiTheme.js @@ -34,7 +34,10 @@ if ( element.supports( [ 'hasFlag' ] ) ) { isFramed = element.supports( [ 'isFramed' ] ) && element.isFramed(); - if ( isFramed && ( element.isDisabled() || element.hasFlag( 'primary' ) ) ) { + if ( + ( isFramed && ( element.isDisabled() || element.hasFlag( 'primary' ) ) ) || + ( !isFramed && element.hasFlag( 'primary' ) ) + ) { variants.invert = true; } else { variants.progressive = element.hasFlag( 'progressive' ); diff --git a/src/themes/mediawiki/elements.less b/src/themes/mediawiki/elements.less index edf944b..fa1b9d7 100644 --- a/src/themes/mediawiki/elements.less +++ b/src/themes/mediawiki/elements.less @@ -29,7 +29,7 @@ height: @icon-size; } - &-frameless { + &-frameless:not( .oo-ui-flaggedElement-primary ) { > .oo-ui-buttonElement-button { &:focus { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.2); @@ -98,6 +98,25 @@ margin: 0.1em 0; padding: 0.2em 0.8em; border-radius: @border-radius; + } + + // Support <input/> from ButtonInputWidget + > input.oo-ui-buttonElement-button, + &.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { + line-height: @icon-size; + } + + &.oo-ui-widget-disabled > .oo-ui-buttonElement-button { + border: 1px solid @disabled-background; + } + + &.oo-ui-widget-enabled > .oo-ui-buttonElement-button { + border: @neutral-button-border; + } + } + + &-framed, &-frameless.oo-ui-flaggedElement-primary { + > .oo-ui-buttonElement-button { &:hover, &:focus { @@ -111,11 +130,6 @@ ); } - // Support <input/> from ButtonInputWidget - > input.oo-ui-buttonElement-button, - &.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { - line-height: @icon-size; - } &.oo-ui-iconElement { > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { @@ -145,14 +159,12 @@ &.oo-ui-widget-disabled > .oo-ui-buttonElement-button { color: @disabled-framed-text; background: @disabled-background; - border: 1px solid @disabled-background; } &.oo-ui-widget-enabled { > .oo-ui-buttonElement-button { color: @text; background-color: @background; - border: @neutral-button-border; &:hover { background-color: darken(@background,8%); diff --git a/src/themes/mediawiki/tools.less b/src/themes/mediawiki/tools.less index fa5d6dd..9112c1a 100644 --- a/src/themes/mediawiki/tools.less +++ b/src/themes/mediawiki/tools.less @@ -24,14 +24,21 @@ } &-actions { - > .oo-ui-buttonElement { + > .oo-ui-buttonElement-framed, + > .oo-ui-buttonElement-framed:last-child { margin-top: 0.25em; margin-bottom: 0.25em; + margin-right: 0.5em; } - > .oo-ui-toolbar, - > .oo-ui-buttonElement:last-child { - margin-right: 0.5em; + > .oo-ui-buttonElement-frameless.oo-ui-labelElement { + margin: 0; + > .oo-ui-buttonElement-button { + padding: 1.0546875em 0.3125em; + > .oo-ui-labelElement-label { + margin: 0 1em; + } + } } } } -- To view, visit https://gerrit.wikimedia.org/r/222093 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I26b540dd22a975c9b0c139e9dc748da6a2313958 Gerrit-PatchSet: 3 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Esanders <esand...@wikimedia.org> Gerrit-Reviewer: Bartosz DziewoĆski <matma....@gmail.com> Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org> Gerrit-Reviewer: Nirzar <npangar...@wikimedia.org> Gerrit-Reviewer: Trevor Parscal <tpars...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits