[MediaWiki-commits] [Gerrit] oojs/ui[master]: NumberInputWidget: Use icons instead of labels
jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/352470 )
Change subject: NumberInputWidget: Use icons instead of labels
..
NumberInputWidget: Use icons instead of labels
Make use of icons designed for NumberInputWidget in both themes,
Apex and MediaWiki. Also simplify specificity in MediaWiki theme.
Change-Id: I3e4854f3b212f5850c4dc3c459314d82d54761e8
---
M src/themes/apex/common.less
M src/themes/apex/widgets.less
M src/themes/wikimediaui/common.less
M src/themes/wikimediaui/elements.less
M src/themes/wikimediaui/widgets.less
M src/widgets/NumberInputWidget.js
6 files changed, 49 insertions(+), 21 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/themes/apex/common.less b/src/themes/apex/common.less
index 5526db1..ae50fef 100644
--- a/src/themes/apex/common.less
+++ b/src/themes/apex/common.less
@@ -26,12 +26,14 @@
// Box Sizes
// `@*size` variables are used for `*width` & `*height` properties
@min-size-icon: 24px;
+@min-width-icon-numberinput: 20px;
@min-size-indicator: 12px;
@max-width-default: 50em;
@max-width-input-default: @max-width-default;
@size-anchor: 6px;
@size-icon: unit( 24 / 16 / 0.8, em );
+@size-icon-numberinput: unit( 20 / 16 / 0.8, em );
@size-indicator: unit( 12 / 16 / 0.8, em );
@border-radius-default: 0.25em;
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index cfe3a12..4bf3ca5 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -462,20 +462,29 @@
width: 2.25em;
}
- &-minusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
+ &-buttoned {
+ .oo-ui-buttonElement-button {
+ .oo-ui-iconElement-icon {
+ min-width: @min-width-icon-numberinput;
+ width: @size-icon-numberinput;
+ }
+ }
+
+ .oo-ui-inputWidget-input {
+ border-radius: 0;
+ }
+ }
+
+ &-minusButton > .oo-ui-buttonElement-button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-width: 0;
}
- &-plusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
+ &-plusButton > .oo-ui-buttonElement-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-width: 0;
- }
-
- &-buttoned .oo-ui-inputWidget-input {
- border-radius: 0;
}
}
diff --git a/src/themes/wikimediaui/common.less
b/src/themes/wikimediaui/common.less
index c92b5da..b408d15 100644
--- a/src/themes/wikimediaui/common.less
+++ b/src/themes/wikimediaui/common.less
@@ -69,6 +69,7 @@
@min-size-indicator: 12px;
@min-width-button-default: 40 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `3.125em`≈`40px` at base `font-size: 12.8px`
@min-width-button-combo-widget: @size-default;
+@min-width-icon-numberinput: 20px;
@min-height-widget-default: @size-default;
@min-height-toggleswitch: 26px; // equals `16px` @size-toggleswitch-grip-min +
4px*2 distance top/bottom + 1px*2 border top/bottom
@max-width-default: 50em;
@@ -77,11 +78,13 @@
@size-anchor: 9px;
@size-button-default: @size-default;
@size-icon: 24 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `1.875em`≈`24px`
+@size-icon-numberinput: 20 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `1.5625em`≈`20px`
@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `0.9375em`≈`12px`
@size-toggleswitch-grip-min: 16px;
@size-dialog-bar-top: 44 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `3.4375em`≈`44px`
@start-framed-icon-only: 7 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.547em`≈`7px`; HACK: We have to break
with `@padding-start-input-text-icon` to perfectly center in
`@min-width-button-default`
+@start-framed-icon-only-numberinput: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.46875em`≈`6px`
@start-framed-indicator-only: 13 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `1.09375em`≈`14px`; `@size-indicator + 2 *
@border-width-default`
@start-framed-square-indicator-only: 9 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.703125em`≈`9px`
@start-tagmultiselect-input: 5 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.390625em`≈`5px`;
`@padding-horizontal-tagitem` + `@border-width-default`
@@ -195,12 +198,12 @@
// Binary Input Widgets (CheckboxInput, RadioInput, ToggleSwitch)
@background-color-input-binary-active: @color-progressive-active;
@background-color-input-binary-on: @color-progressive;
[MediaWiki-commits] [Gerrit] oojs/ui[master]: NumberInputWidget: Use icons instead of labels
Bartosz Dziewoński has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/354782 )
Change subject: NumberInputWidget: Use icons instead of labels
..
NumberInputWidget: Use icons instead of labels
Change-Id: I0beb82867f5ad31d189a022f841dba7a1e3a3ad7
---
M src/themes/apex/widgets.less
M src/themes/wikimediaui/widgets.less
M src/widgets/NumberInputWidget.js
3 files changed, 4 insertions(+), 4 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/82/354782/1
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index cfe3a12..7979f38 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -459,7 +459,7 @@
max-width: @max-width-input-default;
&-field > .oo-ui-buttonWidget {
- width: 2.25em;
+ width: 2.5em;
}
&-minusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
diff --git a/src/themes/wikimediaui/widgets.less
b/src/themes/wikimediaui/widgets.less
index 50a159c..2e451b5 100644
--- a/src/themes/wikimediaui/widgets.less
+++ b/src/themes/wikimediaui/widgets.less
@@ -814,7 +814,7 @@
&-buttoned {
.oo-ui-buttonWidget {
- width: @width-button-combo-widget;
+ width: 3em;
}
.oo-ui-buttonElement-button {
diff --git a/src/widgets/NumberInputWidget.js b/src/widgets/NumberInputWidget.js
index 043aa2a..33b2012 100644
--- a/src/widgets/NumberInputWidget.js
+++ b/src/widgets/NumberInputWidget.js
@@ -56,7 +56,7 @@
disabled: this.isDisabled(),
tabIndex: -1,
classes: [
'oo-ui-numberInputWidget-minusButton' ],
- label: '−'
+ icon: 'subtract'
},
config.minusButton
) );
@@ -65,7 +65,7 @@
disabled: this.isDisabled(),
tabIndex: -1,
classes: [ 'oo-ui-numberInputWidget-plusButton'
],
- label: '+'
+ icon: 'add'
},
config.plusButton
) );
--
To view, visit https://gerrit.wikimedia.org/r/354782
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0beb82867f5ad31d189a022f841dba7a1e3a3ad7
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński
___
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
[MediaWiki-commits] [Gerrit] oojs/ui[master]: NumberInputWidget: Use icons instead of labels
VolkerE has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/352470 )
Change subject: NumberInputWidget: Use icons instead of labels
..
NumberInputWidget: Use icons instead of labels
Make use of icons designed for NumberInputWidget in both themes,
Apex and MediaWiki. Also simplify specificity in MediaWiki theme.
Change-Id: I3e4854f3b212f5850c4dc3c459314d82d54761e8
---
M src/themes/apex/common.less
M src/themes/apex/widgets.less
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
M src/widgets/NumberInputWidget.js
6 files changed, 36 insertions(+), 14 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/70/352470/1
diff --git a/src/themes/apex/common.less b/src/themes/apex/common.less
index 5526db1..ae50fef 100644
--- a/src/themes/apex/common.less
+++ b/src/themes/apex/common.less
@@ -26,12 +26,14 @@
// Box Sizes
// `@*size` variables are used for `*width` & `*height` properties
@min-size-icon: 24px;
+@min-width-icon-numberinput: 20px;
@min-size-indicator: 12px;
@max-width-default: 50em;
@max-width-input-default: @max-width-default;
@size-anchor: 6px;
@size-icon: unit( 24 / 16 / 0.8, em );
+@size-icon-numberinput: unit( 20 / 16 / 0.8, em );
@size-indicator: unit( 12 / 16 / 0.8, em );
@border-radius-default: 0.25em;
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 8b231d1..9a3264e 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -466,20 +466,29 @@
width: 2.25em;
}
- &-minusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
+ &-buttoned {
+ .oo-ui-buttonElement-button {
+ .oo-ui-iconElement-icon {
+ min-width: @min-width-icon-numberinput;
+ width: @size-icon-numberinput;
+ }
+ }
+
+ .oo-ui-inputWidget-input {
+ border-radius: 0;
+ }
+ }
+
+ &-minusButton > .oo-ui-buttonElement-button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-width: 0;
}
- &-plusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
+ &-plusButton > .oo-ui-buttonElement-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-width: 0;
- }
-
- &-buttoned .oo-ui-inputWidget-input {
- border-radius: 0;
}
}
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 695f63f..1c76263 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -69,6 +69,7 @@
@min-size-indicator: 12px;
@min-width-button-default: 40 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `3.125em`≈`40px` at base `font-size: 12.8px`
@min-width-button-combo-widget: @size-default;
+@min-width-icon-numberinput: 20px;
@min-height-widget-default: @size-default;
@min-height-toggleswitch: 26px; // equals `16px` @size-toggleswitch-grip-min +
4px*2 distance top/bottom + 1px*2 border top/bottom
@max-width-default: 50em;
@@ -77,11 +78,13 @@
@size-anchor: 9px;
@size-button-default: @size-default;
@size-icon: 24 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `1.875em`≈`24px`
+@size-icon-numberinput: 20 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `1.5625em`≈`20px`
@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `0.9375em`≈`12px`
@size-toggleswitch-grip-min: 16px;
@size-dialog-bar-top: 44 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `3.4375em`≈`44px`
@start-framed-icon-only: 7 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.547em`≈`7px`; HACK: We have to break
with `@padding-start-input-text-icon` to perfectly center in
`@min-width-button-default`
+@start-framed-icon-only-numberinput: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.46875em`≈`6px`
@start-framed-indicator-only: 13 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `1.09375em`≈`14px`; `@size-indicator + 2 *
@border-width-default`
@start-framed-square-indicator-only: 9 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.703125em`≈`9px`
@start-tagmultiselect-input: 5 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.390625em`≈`5px`;
`@padding-horizontal-tagitem` + `@border-width-default`
@@ -194,12 +197,12 @@
// Binary Input Widgets (CheckboxInput, RadioInput, ToggleSwitch)
@background-color-input-binary-active: @color-progressive-active;
@background-color-input-binary-on: @color-progressive;
-@size-input-binary: 20 /
