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 / @oo-ui-font-size-browser / @oo-ui-font-size-default; 
// equals `1.5625em`≈`20px`
+@size-input-binary: 20 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
 @border-input-binary: @border-width-default solid @border-color-input-binary;
 @border-color-input-binary: @border-color-default-active;
 @border-color-input-binary-active: @color-progressive-active;
 @border-color-input-binary-on: @color-progressive;
-@padding-start-input-binary-label: 6 / @oo-ui-font-size-browser / 
@oo-ui-font-size-default; // equals `0.46875em`≈`6px`
+@padding-start-input-binary-label: 6 / @oo-ui-font-size-browser / 
@oo-ui-font-size-default;
 @box-shadow-input-binary: 0 0 0 1px rgba( 0, 0, 0, 0.1 );
 
 // Theme mixins
diff --git a/src/themes/mediawiki/elements.less 
b/src/themes/mediawiki/elements.less
index d6bf497..04bc518 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -196,6 +196,8 @@
 
        &-framed {
                > .oo-ui-buttonElement-button {
+                       border-style: @border-style-default;
+                       border-width: @border-width-default;
                        border-radius: @border-radius-default;
                        padding-left: @padding-horizontal-default;
                        padding-right: @padding-horizontal-default;
@@ -258,7 +260,7 @@
                        > .oo-ui-buttonElement-button {
                                background-color: 
@background-color-disabled-filled;
                                color: @color-disabled-filled;
-                               border: @border-disabled;
+                               border-color: @border-color-disabled;
                        }
                }
 
@@ -266,7 +268,7 @@
                        > .oo-ui-buttonElement-button {
                                background-color: @background-color-framed;
                                color: @color-default;
-                               border: @border-default;
+                               border-color: @border-color-default;
 
                                &:hover {
                                        background-color: 
@background-color-framed-hover;
diff --git a/src/themes/mediawiki/widgets.less 
b/src/themes/mediawiki/widgets.less
index 7a025dc..86dc68c 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -811,6 +811,12 @@
                        min-height: @min-height-widget-default;
                        padding-left: 0;
                        padding-right: 0;
+
+                       .oo-ui-iconElement-icon {
+                               left: @start-framed-icon-only-numberinput;
+                               min-width: @min-width-icon-numberinput;
+                               width: @size-icon-numberinput;
+                       }
                }
 
                .oo-ui-inputWidget-input {
@@ -818,13 +824,13 @@
                }
        }
 
-       &-minusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
+       &-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;
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/352470
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I3e4854f3b212f5850c4dc3c459314d82d54761e8
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to