Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/222093
Change subject: Add support for frameless primary buttons in MW
......................................................................
Add support for frameless primary buttons in MW
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, 58 insertions(+), 20 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/93/222093/1
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..7429822 100644
--- a/src/themes/apex/tools.less
+++ b/src/themes/apex/tools.less
@@ -12,16 +12,22 @@
}
&-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 {
+ margin: 0;
+ > .oo-ui-buttonElement-button {
+ padding: 1.1953125em 1.3em;
+ }
+ }
}
+
&-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..8ee20be 100644
--- a/src/themes/mediawiki/tools.less
+++ b/src/themes/mediawiki/tools.less
@@ -24,14 +24,18 @@
}
&-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 {
+ margin: 0;
+ > .oo-ui-buttonElement-button {
+ padding: 1.0546875em 1.3em;
+ }
}
}
}
--
To view, visit https://gerrit.wikimedia.org/r/222093
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I26b540dd22a975c9b0c139e9dc748da6a2313958
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
