Issue #23853: Fixed grid issues and spinner widget.

diff --git a/enyo-client/application/source/widgets/money.js b/enyo-client/application/source/widgets/money.js
index a671c8c..f29fce8 100644 (file)
--- 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 6103427..cbde2ff 100644 (file)
--- 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 ca1d859..9c32866 100644 (file)
--- 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 297af03..bea1cee 100644 (file)
--- 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 a748687..cecbb23 100755 (executable)
--- 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 226b8bc..5439d55 100644 (file)
--- 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"}
             ]}
           ]}
         ]}