Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/179000
Change subject: Split primary flag into primary and progressive
......................................................................
Split primary flag into primary and progressive
Using the primary was specifying both the blue styling to indicate its function
and the primary placement in dialogs to indicate its importance, but in fact
these are separate things that should have separate names.
Now "primary" is now split, so that "progressive" is used for the blue styling
and "primary" only hints at the importance. In the case of the MediaWiki theme,
buttons that are progressive, constructive or destructive are only given the
strong treatment of a colored background if they are also primary.
Bug: T78040
Change-Id: Iee91d2c695f7fef3f78a2d44f05b431dbe30615d
---
M demos/pages/dialogs.js
M demos/pages/widgets.js
M demos/widgets.php
M php/elements/FlaggedElement.php
M php/themes/MediaWikiTheme.php
M src/elements/FlaggedElement.js
M src/themes/apex/common.less
M src/themes/apex/elements.less
M src/themes/apex/widgets.less
M src/themes/apex/windows.less
M src/themes/mediawiki/MediaWikiTheme.js
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/images.json
M src/themes/mediawiki/widgets.less
M src/themes/mediawiki/windows.less
16 files changed, 132 insertions(+), 75 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/00/179000/1
diff --git a/demos/pages/dialogs.js b/demos/pages/dialogs.js
index 689bf6d..8535287 100644
--- a/demos/pages/dialogs.js
+++ b/demos/pages/dialogs.js
@@ -42,7 +42,7 @@
OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog );
ProcessDialog.static.title = 'Process dialog';
ProcessDialog.static.actions = [
- { action: 'save', label: 'Done', flags: 'primary' },
+ { action: 'save', label: 'Done', flags: [ 'primary',
'progressive' ] },
{ action: 'cancel', label: 'Cancel', flags: 'safe' }
];
ProcessDialog.prototype.initialize = function () {
@@ -174,7 +174,7 @@
OO.inheritClass( BookletDialog, OO.ui.ProcessDialog );
BookletDialog.static.title = 'Booklet dialog';
BookletDialog.static.actions = [
- { action: 'save', label: 'Done', flags: 'primary' },
+ { action: 'save', label: 'Done', flags: [ 'primary',
'progressive' ] },
{ action: 'cancel', label: 'Cancel', flags: 'safe' }
];
BookletDialog.prototype.getBodyHeight = function () {
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 3490a96..840ca35 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -102,11 +102,11 @@
),
new OO.ui.FieldLayout(
new OO.ui.ButtonWidget( {
- label: 'Primary',
- flags: [ 'primary' ]
+ label: 'Progressive',
+ flags: [ 'progressive' ]
} ),
{
- label: 'ButtonWidget (primary)\u200E',
+ label: 'ButtonWidget (progressive)\u200E',
align: 'top'
}
),
@@ -127,6 +127,36 @@
} ),
{
label: 'ButtonWidget (destructive)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Primary progressive',
+ flags: [ 'primary', 'progressive' ]
+ } ),
+ {
+ label: 'ButtonWidget (primary,
progressive)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Primary constructive',
+ flags: [ 'primary', 'constructive' ]
+ } ),
+ {
+ label: 'ButtonWidget (primary,
constructive)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Primary destructive',
+ flags: [ 'primary', 'destructive' ]
+ } ),
+ {
+ label: 'ButtonWidget (primary,
destructive)\u200E',
align: 'top'
}
),
@@ -177,10 +207,10 @@
new OO.ui.ButtonWidget( {
label: 'Icon',
icon: 'picture',
- flags: [ 'primary' ]
+ flags: [ 'progressive' ]
} ),
{
- label: 'ButtonWidget (icon,
constructive)\u200E',
+ label: 'ButtonWidget (icon, progressive)\u200E',
align: 'top'
}
),
@@ -230,12 +260,12 @@
new OO.ui.FieldLayout(
new OO.ui.ButtonWidget( {
framed: false,
- flags: [ 'primary' ],
+ flags: [ 'progressive' ],
icon: 'check',
- label: 'Primary'
+ label: 'Progressive'
} ),
{
- label: 'ButtonWidget (frameless,
primary)\u200E',
+ label: 'ButtonWidget (frameless,
progressive)\u200E',
align: 'top'
}
),
@@ -387,7 +417,7 @@
new OO.ui.ButtonWidget( { icon:
'picture', indicator: 'down' } ),
new OO.ui.ToggleButtonWidget( {
label: 'One',
- flags: [ 'primary' ]
+ flags: [ 'progressive' ]
} ),
new OO.ui.ToggleButtonWidget( {
label: 'Two',
@@ -415,7 +445,7 @@
new OO.ui.ButtonOptionWidget( {
data: 'b',
label: 'One',
- flags: [ 'primary' ]
+ flags: [ 'progressive' ]
} ),
new OO.ui.ButtonOptionWidget( {
data: 'c',
diff --git a/demos/widgets.php b/demos/widgets.php
index 1217289..b29554f 100644
--- a/demos/widgets.php
+++ b/demos/widgets.php
@@ -52,13 +52,22 @@
$styles = array(
array(),
array(
- 'flags' => array( 'primary' ),
+ 'flags' => array( 'progressive'
),
),
array(
'flags' => array(
'constructive' ),
),
array(
'flags' => array( 'destructive'
),
+ ),
+ array(
+ 'flags' => array( 'primary',
'progressive' ),
+ ),
+ array(
+ 'flags' => array( 'primary',
'constructive' ),
+ ),
+ array(
+ 'flags' => array( 'primary',
'destructive' ),
),
);
$states = array(
@@ -116,10 +125,10 @@
array(
// Determined empirically
'widths' => array( 83, 108,
127, 58, 52, 77, 83, 58, 42 ),
- 'heights' => array( 1, 1, 1, 1
),
+ 'heights' => array( 1, 1, 1, 1,
1, 1, 1 ),
)
);
- $grid->setAttributes( array( 'style' =>
'height: 12em; position: relative;' ) );
+ $grid->setAttributes( array( 'style' =>
'height: 24em; position: relative;' ) );
echo new OOUI\FieldsetLayout( array(
'label' => 'Regular buttons',
@@ -165,7 +174,7 @@
) ),
new
OOUI\ButtonWidget( array(
'label' => 'One',
-
'flags' => array( 'primary' ),
+
'flags' => array( 'progressive' ),
) ),
new
OOUI\ButtonWidget( array(
'label' => 'Two',
@@ -231,7 +240,7 @@
'name'
=> 'login',
'label'
=> 'Log in',
'type'
=> 'submit',
- 'flags'
=> 'primary',
+ 'flags'
=> [ 'primary', 'progressive' ],
'icon'
=> 'check',
) ),
array(
diff --git a/php/elements/FlaggedElement.php b/php/elements/FlaggedElement.php
index 0cddd65..7d2fae8 100644
--- a/php/elements/FlaggedElement.php
+++ b/php/elements/FlaggedElement.php
@@ -21,8 +21,8 @@
/**
* @param Element $element Element being mixed into
* @param array $config Configuration options
- * @param string|string[] $config['flags'] Styling flags, e.g.
'primary', 'destructive' or
- * 'constructive'
+ * @param string|string[] $config['flags'] Flags describing importance
and functionality, e.g.
+ * 'primary', 'safe', 'progressive', 'destructive' or 'constructive'
*/
public function __construct( Element $element, array $config = array()
) {
// Parent constructor
diff --git a/php/themes/MediaWikiTheme.php b/php/themes/MediaWikiTheme.php
index 54ff8af..8fd501f 100644
--- a/php/themes/MediaWikiTheme.php
+++ b/php/themes/MediaWikiTheme.php
@@ -9,7 +9,7 @@
public function getElementClasses( Element $element ) {
$variants = array(
'invert' => false,
- 'primary' => false,
+ 'progressive' => false,
'constructive' => false,
'destructive' => false
);
@@ -18,16 +18,14 @@
$classes = parent::getElementClasses( $element );
if ( $element->supports( array( 'isFramed', 'isDisabled',
'hasFlag' ) ) ) {
- if ( $element->isFramed() && !$element->isDisabled() ) {
- if (
- $element->hasFlag( 'primary' ) ||
- $element->hasFlag( 'constructive' ) ||
- $element->hasFlag( 'destructive' )
- ) {
- $variants['invert'] = true;
- }
+ if (
+ !$element->isDisabled() &&
+ $element->isFramed() &&
+ $element->hasFlag( 'primary' )
+ ) {
+ $variants['invert'] = true;
} else {
- $variants['primary'] = $element->hasFlag(
'primary' );
+ $variants['progressive'] = $element->hasFlag(
'progressive' );
$variants['constructive'] = $element->hasFlag(
'constructive' );
$variants['destructive'] = $element->hasFlag(
'destructive' );
}
diff --git a/src/elements/FlaggedElement.js b/src/elements/FlaggedElement.js
index f86b9c8..4bafa62 100644
--- a/src/elements/FlaggedElement.js
+++ b/src/elements/FlaggedElement.js
@@ -9,7 +9,8 @@
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {string|string[]} [flags] Styling flags, e.g. 'primary', 'destructive'
or 'constructive'
+ * @cfg {string|string[]} [flags] Flags describing importance and
functionality, e.g. 'primary',
+ * 'safe', 'progressive', 'destructive' or 'constructive'
* @cfg {jQuery} [$flagged] Flagged node, assigned to #$flagged, omit to use
#$element
*/
OO.ui.FlaggedElement = function OoUiFlaggedElement( config ) {
diff --git a/src/themes/apex/common.less b/src/themes/apex/common.less
index db2a971..6cca9fa 100644
--- a/src/themes/apex/common.less
+++ b/src/themes/apex/common.less
@@ -3,14 +3,14 @@
// Theme variables
-@primary: #087ecc;
+@progressive: #087ecc;
@constructive: #76ab36;
@destructive: #d45353;
-@primary-gradient-start: #eaf4fa;
-@primary-gradient-end: #b0d9ee;
-@primary-border: #a6cee1;
-@primary-border-selected: #9dc2d4;
+@progressive-gradient-start: #eaf4fa;
+@progressive-gradient-end: #b0d9ee;
+@progressive-border: #a6cee1;
+@progressive-border-selected: #9dc2d4;
@constructive-gradient-start: #f0fbe1;
@constructive-gradient-end: #c3e59a;
diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less
index be7993f..3605c68 100644
--- a/src/themes/apex/elements.less
+++ b/src/themes/apex/elements.less
@@ -59,8 +59,8 @@
}
&.oo-ui-flaggedElement {
- &-primary > .oo-ui-buttonElement-button >
.oo-ui-labelElement-label {
- color: @primary;
+ &-progressive > .oo-ui-buttonElement-button >
.oo-ui-labelElement-label {
+ color: @progressive;
}
&-constructive > .oo-ui-buttonElement-button >
.oo-ui-labelElement-label {
@@ -127,22 +127,22 @@
}
&.oo-ui-flaggedElement {
- &-primary {
+ &-progressive {
> .oo-ui-buttonElement-button {
- border: solid 1px @primary-border;
-
.oo-ui-vertical-gradient(@primary-gradient-start, @primary-gradient-end);
+ border: solid 1px @progressive-border;
+
.oo-ui-vertical-gradient(@progressive-gradient-start,
@progressive-gradient-end);
&:hover,
&:focus {
- border-color:
@primary-border-selected;
+ border-color:
@progressive-border-selected;
}
}
&.oo-ui-widget-enabled >
.oo-ui-buttonElement-button:active,
&.oo-ui-buttonElement-active >
.oo-ui-buttonElement-button,
&.oo-ui-buttonElement-pressed >
.oo-ui-buttonElement-button {
- border: solid 1px @primary-border;
-
.oo-ui-vertical-gradient(@primary-gradient-end, @primary-gradient-start);
+ border: solid 1px @progressive-border;
+
.oo-ui-vertical-gradient(@progressive-gradient-end,
@progressive-gradient-start);
}
}
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index a0ffbbf..ac23f78 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -630,22 +630,22 @@
.theme-oo-ui-progressBarWidget () {
max-width: 50em;
- border: solid 1px @primary-border;
+ border: solid 1px @progressive-border;
border-radius: 0.25em;
overflow: hidden;
&-bar {
height: 1em;
- border-right: solid 1px @primary-border;
+ border-right: solid 1px @progressive-border;
.oo-ui-transition(width 200ms, margin-left 200ms);
- .oo-ui-vertical-gradient(@primary-gradient-start,
@primary-gradient-end);
+ .oo-ui-vertical-gradient(@progressive-gradient-start,
@progressive-gradient-end);
}
&-indeterminate {
.oo-ui-progressBarWidget-bar {
.oo-ui-animation(oo-ui-progressBarWidget-slide 2s
infinite linear);
width: 40%;
margin-left: -10%;
- border-left: solid 1px @primary-border;
+ border-left: solid 1px @progressive-border;
}
}
&.oo-ui-widget-disabled {
diff --git a/src/themes/apex/windows.less b/src/themes/apex/windows.less
index b9d54b3..9c19d83 100644
--- a/src/themes/apex/windows.less
+++ b/src/themes/apex/windows.less
@@ -87,7 +87,7 @@
}
&.oo-ui-flaggedElement {
- &-primary {
+ &-progressive {
&:hover {
background-color:
rgba(8,126,204,0.05);
}
@@ -207,7 +207,7 @@
}
&.oo-ui-flaggedElement {
- &-primary {
+ &-progressive {
&:hover {
background-color:
rgba(8,126,204,0.05);
}
diff --git a/src/themes/mediawiki/MediaWikiTheme.js
b/src/themes/mediawiki/MediaWikiTheme.js
index 31a7d34..c257f59 100644
--- a/src/themes/mediawiki/MediaWikiTheme.js
+++ b/src/themes/mediawiki/MediaWikiTheme.js
@@ -23,7 +23,7 @@
var variant,
variants = {
invert: false,
- primary: false,
+ progressive: false,
constructive: false,
destructive: false
},
@@ -31,16 +31,10 @@
classes =
OO.ui.MediaWikiTheme.super.prototype.getElementClasses.call( this, element );
if ( element.supports( [ 'isFramed', 'isDisabled', 'hasFlag' ] ) ) {
- if ( element.isFramed() && !element.isDisabled() ) {
- if (
- element.hasFlag( 'primary' ) ||
- element.hasFlag( 'constructive' ) ||
- element.hasFlag( 'destructive' )
- ) {
- variants.invert = true;
- }
+ if ( !element.isDisabled() && element.isFramed() &&
element.hasFlag( 'primary' ) ) {
+ variants.invert = true;
} else {
- variants.primary = element.hasFlag( 'primary' );
+ variants.progressive = element.hasFlag( 'progressive' );
variants.constructive = element.hasFlag( 'constructive'
);
variants.destructive = element.hasFlag( 'destructive' );
}
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 65f5acb..2a292f6 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -3,18 +3,18 @@
// Theme variables
-@primary: #598ad1;
+@progressive: #598ad1;
@constructive: #00c697;
@destructive: #e81915;
-@primary-selected: #015ccc;
+@progressive-selected: #015ccc;
@constructive-selected: #008c6d;
@destructive-selected: #a7170f;
@background: #ffffff;
@disabled-percentage: 20%;
-@disabled-primary: darken( @primary, @disabled-percentage );
+@disabled-progressive: darken( @progressive, @disabled-percentage );
@disabled-constructive: darken( @constructive, @disabled-percentage );
@disabled-destructive: darken( @destructive, @disabled-percentage );
@@ -24,8 +24,8 @@
@disabled-button-border: solid 1px #cdcdcd;
-@primary-fill: #0274ff;
-@primary-fill-selected: #015ccc;
+@progressive-fill: #0274ff;
+@progressive-fill-selected: #015ccc;
@constructive-fill: #00Af89;
@constructive-fill-selected: #008c6d;
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index ed988bc..2a4a397 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -63,8 +63,8 @@
}
&.oo-ui-flaggedElement {
- &-primary {
-
.mediawiki-frameless-button-colored(@primary, @primary-selected);
+ &-progressive {
+
.mediawiki-frameless-button-colored(@progressive, @progressive-selected);
}
&-constructive {
@@ -141,8 +141,8 @@
}
&.oo-ui-flaggedElement {
- &-primary {
-
.mediawiki-framed-button-colored(@primary-fill, @primary-fill-selected);
+ &-progressive {
+
.mediawiki-framed-button-colored(@progressive-fill, @progressive-fill-selected);
}
&-constructive {
@@ -151,6 +151,19 @@
&-destructive {
.mediawiki-framed-button-colored(@destructive-fill, @destructive-fill-selected);
+ }
+ }
+ &.oo-ui-flaggedElement-primary.oo-ui-flaggedElement {
+ &-progressive {
+
.mediawiki-framed-primary-button-colored(@progressive-fill,
@progressive-fill-selected);
+ }
+
+ &-constructive {
+
.mediawiki-framed-primary-button-colored(@constructive-fill,
@constructive-fill-selected);
+ }
+
+ &-destructive {
+
.mediawiki-framed-primary-button-colored(@destructive-fill,
@destructive-fill-selected);
}
}
}
@@ -182,6 +195,18 @@
.mediawiki-framed-button-colored( @neutral, @active ) {
> .oo-ui-buttonElement-button {
+ color: @neutral;
+
+ &:hover,
+ &:focus {
+ box-shadow: inset 0 -0.2em 0 0 @active, 0 0.1em 0 0
rgba(0,0,0,0.1);
+ border-bottom-color: @active;
+ }
+ }
+}
+
+.mediawiki-framed-primary-button-colored( @neutral, @active ) {
+ > .oo-ui-buttonElement-button {
text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
color: @background;
background-color: @neutral;
diff --git a/src/themes/mediawiki/images.json b/src/themes/mediawiki/images.json
index 5be0929..b528946 100644
--- a/src/themes/mediawiki/images.json
+++ b/src/themes/mediawiki/images.json
@@ -5,7 +5,7 @@
"color": "#FFFFFF",
"global": true
},
- "primary": {
+ "progressive": {
"color": "#598AD1"
},
"constructive": {
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index e6f2f40..6adf643 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -228,7 +228,7 @@
background-color: #fff;
color: black;
border: solid 1px #ccc;
- box-shadow: inset 0 0 0 0 @primary-fill;
+ box-shadow: inset 0 0 0 0 @progressive-fill;
border-radius: 0.1em;
.oo-ui-transition(box-shadow 0.1s);
.oo-ui-box-sizing(border-box);
@@ -250,7 +250,7 @@
textarea:focus {
outline: none;
border-color: #aaa;
- box-shadow: inset 0.4em 0 0 0 @primary-fill;
+ box-shadow: inset 0.4em 0 0 0 @progressive-fill;
}
input[readonly],
@@ -648,13 +648,13 @@
.theme-oo-ui-progressBarWidget () {
max-width: 50em;
- border: solid 1px @primary-fill;
+ border: solid 1px @progressive-fill;
border-radius: 0.1em;
overflow: hidden;
&-bar {
height: 1em;
- background: @primary-fill;
+ background: @progressive-fill;
.oo-ui-transition(width 200ms, margin-left 200ms);
}
&-indeterminate {
diff --git a/src/themes/mediawiki/windows.less
b/src/themes/mediawiki/windows.less
index a374fb9..8e2742c 100644
--- a/src/themes/mediawiki/windows.less
+++ b/src/themes/mediawiki/windows.less
@@ -80,7 +80,7 @@
}
&.oo-ui-flaggedElement {
- &-primary {
+ &-progressive {
&:hover {
background-color:
rgba(8,126,204,0.05);
}
@@ -200,7 +200,7 @@
}
&.oo-ui-flaggedElement {
- &-primary {
+ &-progressive {
&:hover {
background-color:
rgba(8,126,204,0.05);
}
--
To view, visit https://gerrit.wikimedia.org/r/179000
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Iee91d2c695f7fef3f78a2d44f05b431dbe30615d
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
