From 79396d0bf377c13c30cd9b1fadd5fdb6034ffae8 Mon Sep 17 00:00:00 2001 From: Linda Nichols Date: Fri, 20 Jun 2014 14:04:02 +0000 Subject: [PATCH] Issue #23853: Fixed grid issues and spinner widget. --- .../application/source/widgets/money.js | 4 +- lib/enyo-x/source/less/grid.less | 19 ++-- lib/enyo-x/source/less/screen.less | 3 +- lib/enyo-x/source/less/workspace.less | 35 +++---- lib/enyo-x/source/stylesheets/screen.css | 99 +++++++------------ lib/enyo-x/source/widgets/number_spinner.js | 16 ++- 6 files changed, 69 insertions(+), 107 deletions(-) diff --git a/enyo-client/application/source/widgets/money.js b/enyo-client/application/source/widgets/money.js index a671c8cbe..f29fce878 100644 --- a/enyo-client/application/source/widgets/money.js +++ b/enyo-client/application/source/widgets/money.js @@ -33,7 +33,7 @@ regexp:true, undef:true, trailing:true, white:true */ }, maxlength: 12, components: [ - {controlClasses: 'enyo-inline', components: [ + {controlClasses: "enyo-inline", components: [ {name: "label", content: "", classes: "xv-label"}, {kind: "onyx.InputDecorator", components: [ {name: "input", kind: "onyx.Input", @@ -41,7 +41,7 @@ regexp:true, undef:true, trailing:true, white:true */ ]}, {name: "picker", kind: "XV.CurrencyPicker", classes: "xv-currency-picker", showLabel: false} ]}, - {controlClasses: 'enyo-inline', name: "basePanel", showing: false, components: [ + {controlClasses: "enyo-inline", name: "basePanel", showing: false, components: [ {classes: "xv-label"}, {kind: "onyx.InputDecorator", components: [ {name: "baseAmountLabel", classes: "xv-label"} diff --git a/lib/enyo-x/source/less/grid.less b/lib/enyo-x/source/less/grid.less index 610342799..cbde2ffb4 100644 --- a/lib/enyo-x/source/less/grid.less +++ b/lib/enyo-x/source/less/grid.less @@ -2,6 +2,11 @@ Styles relating to the grid box */ @widgetFontSize: 13px; +@gridIconWidth: 4px; +@gridIconPadding: 2px; +@gridFieldDecoratorWidth: 100%; +@gridFieldWidth: @gridFieldDecoratorWidth - (2 * @decoratorPadding); +@iconGridFieldWidth: @gridFieldWidth - @gridIconWidth - (2 * @gridIconPadding); /* Entire box including the grid and the summary panel */ @@ -161,7 +166,7 @@ border: 1px solid @bright-orange; .xv-grid-column { .onyx-input-decorator { - .tightened-input-decorator; + .tightened-input-decorator(100%); } .onyx-picker-decorator { padding-top: 6px; @@ -175,7 +180,7 @@ } .xv-input { padding-top: 6px; - width: 100%; + width: @gridFieldDecoratorWidth; border: none; } @@ -191,17 +196,17 @@ border-bottom: 0; } .onyx-input-decorator { - .tightened-input-decorator(85%); + .tightened-input-decorator; } } .xv-datewidget { .onyx-input-decorator { - .tightened-input-decorator(75%); + .tightened-input-decorator; } } .xv-combobox { .onyx-input-decorator { - .tightened-input-decorator(60%); + .tightened-input-decorator; } } .xv-useraccount-widget { @@ -250,9 +255,9 @@ } } -.tightened-input-decorator (@inputWidth: 100%) { +.tightened-input-decorator (@inputWidth: @iconGridFieldWidth) { padding: 0; - width: 100%; + width: @gridFieldDecoratorWidth; margin: 0; input { width: @inputWidth; diff --git a/lib/enyo-x/source/less/screen.less b/lib/enyo-x/source/less/screen.less index ca1d85994..9c3286675 100644 --- a/lib/enyo-x/source/less/screen.less +++ b/lib/enyo-x/source/less/screen.less @@ -254,9 +254,10 @@ a, .hyperlink { } } -.icon-folder-open-alt, .icon-calendar, .icon-sort { +.icon-folder-open-alt, .icon-calendar, .icon-sort, .icon-angle-up, .icon-angle-down { color: @slate-blue; vertical-align: middle; + text-align: center; } .xv-short-textarea { diff --git a/lib/enyo-x/source/less/workspace.less b/lib/enyo-x/source/less/workspace.less index 297af0308..bea1cee73 100644 --- a/lib/enyo-x/source/less/workspace.less +++ b/lib/enyo-x/source/less/workspace.less @@ -143,7 +143,7 @@ } .onyx-picker-decorator { - padding: 0; // @overrides the input-decorator padding above ^^ + padding: 0; // @overrides the input-decorator padding above ^^ } } @@ -170,31 +170,20 @@ } .xv-spinnerwidget { - .buttons { - display: block; - padding: 0; - margin: 1px 0 1px 10px; - width: 20px; - height: 20px; - background: transparent; - color: @slate-blue; - font-size: 20px; - border: none; - } - .slider { - margin: 15px 10px; - } - &.xv-numberwidget { + .xv-icon-decorator { + .onyx-icon { + display: block; + border: none; + font-size: 20px; + width: 20px; + padding: 0 4px 0 4px; + } input { - width: 120px; + width: @iconFieldWidth - @iconPadding; } } - } - - .xv-combobox { - .icon-sort { - color: @slate-blue; - vertical-align: middle; + .slider { + margin: 15px 10px; } } diff --git a/lib/enyo-x/source/stylesheets/screen.css b/lib/enyo-x/source/stylesheets/screen.css index a7486876a..cecbb234a 100755 --- a/lib/enyo-x/source/stylesheets/screen.css +++ b/lib/enyo-x/source/stylesheets/screen.css @@ -1717,27 +1717,19 @@ a, .xv-popup.xv-groupbox-popup .xv-relationwidget .xv-description.disabled { color: #777777; } -.xv-popup.xv-groupbox-popup .xv-spinnerwidget .buttons { +.xv-popup.xv-groupbox-popup .xv-spinnerwidget .xv-icon-decorator .onyx-icon { display: block; - padding: 0; - margin: 1px 0 1px 10px; - width: 20px; - height: 20px; - background: transparent; - color: #357ec7; - font-size: 20px; border: none; + font-size: 20px; + width: 20px; + padding: 0 4px 0 4px; +} +.xv-popup.xv-groupbox-popup .xv-spinnerwidget .xv-icon-decorator input { + width: 136px; } .xv-popup.xv-groupbox-popup .xv-spinnerwidget .slider { margin: 15px 10px; } -.xv-popup.xv-groupbox-popup .xv-spinnerwidget.xv-numberwidget input { - width: 120px; -} -.xv-popup.xv-groupbox-popup .xv-combobox .icon-sort { - color: #357ec7; - vertical-align: middle; -} .xv-popup.xv-groupbox-popup .xv-numberwidget input { text-align: right; } @@ -1830,9 +1822,12 @@ a, } .icon-folder-open-alt, .icon-calendar, -.icon-sort { +.icon-sort, +.icon-angle-up, +.icon-angle-down { color: #357ec7; vertical-align: middle; + text-align: center; } .xv-short-textarea .xv-textarea-input { min-height: 0; @@ -2139,27 +2134,19 @@ a, .xv-workspace-container .xv-workspace .xv-workspace-panel .xv-relationwidget .xv-description.disabled { color: #777777; } -.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-spinnerwidget .buttons { +.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-spinnerwidget .xv-icon-decorator .onyx-icon { display: block; - padding: 0; - margin: 1px 0 1px 10px; - width: 20px; - height: 20px; - background: transparent; - color: #357ec7; - font-size: 20px; border: none; + font-size: 20px; + width: 20px; + padding: 0 4px 0 4px; +} +.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-spinnerwidget .xv-icon-decorator input { + width: 136px; } .xv-workspace-container .xv-workspace .xv-workspace-panel .xv-spinnerwidget .slider { margin: 15px 10px; } -.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-spinnerwidget.xv-numberwidget input { - width: 120px; -} -.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-combobox .icon-sort { - color: #357ec7; - vertical-align: middle; -} .xv-workspace-container .xv-workspace .xv-workspace-panel .xv-numberwidget input { text-align: right; } @@ -2485,7 +2472,7 @@ a, margin: 0; } .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget .onyx-input-decorator input { - width: 85%; + width: 76%; font-size: 13px; } .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-datewidget .onyx-input-decorator { @@ -2494,7 +2481,7 @@ a, margin: 0; } .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-datewidget .onyx-input-decorator input { - width: 75%; + width: 76%; font-size: 13px; } .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-combobox .onyx-input-decorator { @@ -2503,7 +2490,7 @@ a, margin: 0; } .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-combobox .onyx-input-decorator input { - width: 60%; + width: 76%; font-size: 13px; } .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-useraccount-widget .xv-input { @@ -3102,27 +3089,19 @@ a, .xv-pullout .xv-parameter-panel .xv-relationwidget .xv-description.disabled { color: #777777; } -.xv-pullout .xv-parameter-panel .xv-spinnerwidget .buttons { +.xv-pullout .xv-parameter-panel .xv-spinnerwidget .xv-icon-decorator .onyx-icon { display: block; - padding: 0; - margin: 1px 0 1px 10px; - width: 20px; - height: 20px; - background: transparent; - color: #357ec7; - font-size: 20px; border: none; + font-size: 20px; + width: 20px; + padding: 0 4px 0 4px; +} +.xv-pullout .xv-parameter-panel .xv-spinnerwidget .xv-icon-decorator input { + width: 136px; } .xv-pullout .xv-parameter-panel .xv-spinnerwidget .slider { margin: 15px 10px; } -.xv-pullout .xv-parameter-panel .xv-spinnerwidget.xv-numberwidget input { - width: 120px; -} -.xv-pullout .xv-parameter-panel .xv-combobox .icon-sort { - color: #357ec7; - vertical-align: middle; -} .xv-pullout .xv-parameter-panel .xv-numberwidget input { text-align: right; } @@ -3392,27 +3371,19 @@ a, .xv-search .xv-search-container .xv-relationwidget .xv-description.disabled { color: #777777; } -.xv-search .xv-search-container .xv-spinnerwidget .buttons { +.xv-search .xv-search-container .xv-spinnerwidget .xv-icon-decorator .onyx-icon { display: block; - padding: 0; - margin: 1px 0 1px 10px; - width: 20px; - height: 20px; - background: transparent; - color: #357ec7; - font-size: 20px; border: none; + font-size: 20px; + width: 20px; + padding: 0 4px 0 4px; +} +.xv-search .xv-search-container .xv-spinnerwidget .xv-icon-decorator input { + width: 136px; } .xv-search .xv-search-container .xv-spinnerwidget .slider { margin: 15px 10px; } -.xv-search .xv-search-container .xv-spinnerwidget.xv-numberwidget input { - width: 120px; -} -.xv-search .xv-search-container .xv-combobox .icon-sort { - color: #357ec7; - vertical-align: middle; -} .xv-search .xv-search-container .xv-numberwidget input { text-align: right; } diff --git a/lib/enyo-x/source/widgets/number_spinner.js b/lib/enyo-x/source/widgets/number_spinner.js index 226b8bc0e..5439d55b8 100644 --- a/lib/enyo-x/source/widgets/number_spinner.js +++ b/lib/enyo-x/source/widgets/number_spinner.js @@ -28,18 +28,14 @@ regexp:true, undef:true, trailing:true, white:true */ {name: "label", classes: "xv-label"}, {controlClasses: 'enyo-inline', components: [ {kind: "onyx.Slider", name: "slider", onChange: "sliderChanged", classes: "slider"}, - {kind: "onyx.InputDecorator", tag: "div", components: [ + {kind: "onyx.InputDecorator", tag: "div", classes: "xv-icon-decorator", components: [ {name: "input", kind: "onyx.Input", onchange: "inputChanged", onkeydown: "keyDown"}, - {kind: "FittableRows", components: [ - {kind: "onyx.Button", classes: "buttons", ontap: "increase", - attributes: {tabIndex: "-1"}, components: [ - {tag: "i", classes: "icon-angle-up"} - ]}, - {kind: "onyx.Button", classes: "buttons", ontap: "decrease", - attributes: {tabIndex: "-1"}, components: [ - {tag: "i", classes: "icon-angle-down"} - ]} + {components: [ + {kind: "onyx.IconButton", name: "iconButton", ontap: "increase", + attributes: {tabIndex: "-1"}, classes: "icon-angle-up"}, + {kind: "onyx.IconButton", name: "iconButton", ontap: "decrease", + attributes: {tabIndex: "-1"}, classes: "icon-angle-down"} ]} ]} ]} -- 2.39.2