Issue #23853: Fixed money widget css

diff --git a/enyo-client/application/source/widgets/money.js b/enyo-client/application/source/widgets/money.js
index 309dec4..a671c8c 100644 (file)
--- a/enyo-client/application/source/widgets/money.js
+++ b/enyo-client/application/source/widgets/money.js
@@ -35,20 +35,21 @@ regexp:true, undef:true, trailing:true, white:true */
     components: [
       {controlClasses: 'enyo-inline', components: [
         {name: "label", content: "", classes: "xv-label"},
-        {kind: "onyx.InputDecorator", classes: "xv-icon-decorator", components: [
+        {kind: "onyx.InputDecorator", components: [
           {name: "input", kind: "onyx.Input",
             onchange: "inputChanged", onkeydown: "keyDown"}
         ]},
-        {name: "picker", kind: "XV.CurrencyPicker", showLabel: false}
+        {name: "picker", kind: "XV.CurrencyPicker", classes: "xv-currency-picker", showLabel: false}
       ]},
       {controlClasses: 'enyo-inline', name: "basePanel", showing: false, components: [
-        {name: "spacer", content: "", classes: "xv-label"},
-        {kind: "onyx.InputDecorator", classes: "xv-icon-decorator", components: [
-          {name: "baseAmountLabel", classes: "xv-money-label"}
+        {classes: "xv-label"},
+        {kind: "onyx.InputDecorator", components: [
+          {name: "baseAmountLabel", classes: "xv-label"}
         ]},
-        {kind: "onyx.InputDecorator", classes: "xv-currency-label",
-          components: [
-          {name: "baseCurrencyLabel"}
+        {classes: "xv-currency-picker", components: [
+          {kind: 'onyx.InputDecorator', components: [
+            {name: 'baseCurrencyLabel'}
+          ]}
         ]}
       ]}
     ],

diff --git a/lib/enyo-x/source/less/workspace.less b/lib/enyo-x/source/less/workspace.less
index 0b3c6a4..ecc5458 100644 (file)
--- a/lib/enyo-x/source/less/workspace.less
+++ b/lib/enyo-x/source/less/workspace.less
@@ -145,73 +145,82 @@
         .onyx-picker-decorator {
           padding: 0;   // @overrides the input-decorator padding above ^^
         }
+      }
 
-        &.xv-relationwidget {
-          .xv-description {
-            overflow: hidden;
+      .xv-relationwidget {
+        .xv-description {
+          overflow: hidden;
 
-            // This gives them 4 lines of description
-            display: -webkit-box;
-            -webkit-line-clamp: 4;
-            -webkit-box-orient: vertical;
+          // This gives them 4 lines of description
+          display: -webkit-box;
+          -webkit-line-clamp: 4;
+          -webkit-box-orient: vertical;
 
-            max-width: 250px;
-            margin: 5px 5px 5px 80px;
-            font-size: 0.9em;
+          max-width: 250px;
+          margin: 5px 5px 5px 80px;
+          font-size: 0.9em;
 
-            &.disabled {
-              color: @dim-gray;
-            }
+          &.disabled {
+            color: @dim-gray;
           }
         }
+      }
 
-        &.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 {
-            input {
-              width: 120px;
-            }
-          }
+      .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;
         }
-
-        &.xv-combobox {
-          .icon-sort {
-            color: @slate-blue;
-            vertical-align: middle;
-          }
+        .slider {
+          margin: 15px 10px;
         }
-
         &.xv-numberwidget {
           input {
-            text-align: right;
+            width: 120px;
           }
         }
+      }
+
+      .xv-combobox {
+        .icon-sort {
+          color: @slate-blue;
+          vertical-align: middle;
+        }
+      }
 
-        &.xv-moneywidget {
-          .onyx-input-decorator {
-            font-family: @groupboxFont;
+      .xv-numberwidget {
+        input {
+          text-align: right;
+        }
+      }
 
-            input, .xv-money-label {
-              width: 80px;
-              text-align: right;
-            }
+      .xv-moneywidget {
+        .enyo-tool-decorator {
+          // reset min/max-width
+          min-width: 90px;
+          max-width: 90px;
+          input {
+            width: 90px;
           }
-          .xv-picker-button {
-            width: 65px;
-            padding: 10px 4px;
+        }
+      }
+
+      .xv-currency-picker {
+        display: inline-block;
+        .enyo-tool-decorator {
+          // reset min/max-width
+          min-width: 65px;
+          max-width: 65px;
+          padding: 10px 4px;
+          .xv-button-text {
+            width: 45px;
           }
         }
       }

diff --git a/lib/enyo-x/source/stylesheets/screen.css b/lib/enyo-x/source/stylesheets/screen.css
index 9a19c15..dde16a2 100755 (executable)
--- a/lib/enyo-x/source/stylesheets/screen.css
+++ b/lib/enyo-x/source/stylesheets/screen.css
@@ -1698,7 +1698,7 @@ a,
 .xv-popup.xv-groupbox-popup .xv-input .onyx-picker-decorator {
   padding: 0;
 }
-.xv-popup.xv-groupbox-popup .xv-input.xv-relationwidget .xv-description {
+.xv-popup.xv-groupbox-popup .xv-relationwidget .xv-description {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4;
@@ -1707,10 +1707,10 @@ a,
   margin: 5px 5px 5px 80px;
   font-size: 0.9em;
 }
-.xv-popup.xv-groupbox-popup .xv-input.xv-relationwidget .xv-description.disabled {
+.xv-popup.xv-groupbox-popup .xv-relationwidget .xv-description.disabled {
   color: #777777;
 }
-.xv-popup.xv-groupbox-popup .xv-input.xv-spinnerwidget .buttons {
+.xv-popup.xv-groupbox-popup .xv-spinnerwidget .buttons {
   display: block;
   padding: 0;
   margin: 1px 0 1px 10px;
@@ -1721,31 +1721,37 @@ a,
   font-size: 20px;
   border: none;
 }
-.xv-popup.xv-groupbox-popup .xv-input.xv-spinnerwidget .slider {
+.xv-popup.xv-groupbox-popup .xv-spinnerwidget .slider {
   margin: 15px 10px;
 }
-.xv-popup.xv-groupbox-popup .xv-input.xv-spinnerwidget.xv-numberwidget input {
+.xv-popup.xv-groupbox-popup .xv-spinnerwidget.xv-numberwidget input {
   width: 120px;
 }
-.xv-popup.xv-groupbox-popup .xv-input.xv-combobox .icon-sort {
+.xv-popup.xv-groupbox-popup .xv-combobox .icon-sort {
   color: #357ec7;
   vertical-align: middle;
 }
-.xv-popup.xv-groupbox-popup .xv-input.xv-numberwidget input {
+.xv-popup.xv-groupbox-popup .xv-numberwidget input {
   text-align: right;
 }
-.xv-popup.xv-groupbox-popup .xv-input.xv-moneywidget .onyx-input-decorator {
-  font-family: "Lucida Sans Unicode", "Lucida Grande", arial, sans-serif;
+.xv-popup.xv-groupbox-popup .xv-moneywidget .enyo-tool-decorator {
+  min-width: 90px;
+  max-width: 90px;
 }
-.xv-popup.xv-groupbox-popup .xv-input.xv-moneywidget .onyx-input-decorator input,
-.xv-popup.xv-groupbox-popup .xv-input.xv-moneywidget .onyx-input-decorator .xv-money-label {
-  width: 80px;
-  text-align: right;
+.xv-popup.xv-groupbox-popup .xv-moneywidget .enyo-tool-decorator input {
+  width: 90px;
 }
-.xv-popup.xv-groupbox-popup .xv-input.xv-moneywidget .xv-picker-button {
-  width: 65px;
+.xv-popup.xv-groupbox-popup .xv-currency-picker {
+  display: inline-block;
+}
+.xv-popup.xv-groupbox-popup .xv-currency-picker .enyo-tool-decorator {
+  min-width: 65px;
+  max-width: 65px;
   padding: 10px 4px;
 }
+.xv-popup.xv-groupbox-popup .xv-currency-picker .enyo-tool-decorator .xv-button-text {
+  width: 45px;
+}
 .xv-popup.xv-groupbox-popup .enyo-fittable-columns-layout > * {
   vertical-align: middle;
 }
@@ -2099,7 +2105,7 @@ a,
 .xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input .onyx-picker-decorator {
   padding: 0;
 }
-.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-relationwidget .xv-description {
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-relationwidget .xv-description {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4;
@@ -2108,10 +2114,10 @@ a,
   margin: 5px 5px 5px 80px;
   font-size: 0.9em;
 }
-.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-relationwidget .xv-description.disabled {
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-relationwidget .xv-description.disabled {
   color: #777777;
 }
-.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-spinnerwidget .buttons {
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-spinnerwidget .buttons {
   display: block;
   padding: 0;
   margin: 1px 0 1px 10px;
@@ -2122,31 +2128,37 @@ a,
   font-size: 20px;
   border: none;
 }
-.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-spinnerwidget .slider {
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-spinnerwidget .slider {
   margin: 15px 10px;
 }
-.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-spinnerwidget.xv-numberwidget input {
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-spinnerwidget.xv-numberwidget input {
   width: 120px;
 }
-.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-combobox .icon-sort {
+.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-input.xv-numberwidget input {
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-numberwidget input {
   text-align: right;
 }
-.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-moneywidget .onyx-input-decorator {
-  font-family: "Lucida Sans Unicode", "Lucida Grande", arial, sans-serif;
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-moneywidget .enyo-tool-decorator {
+  min-width: 90px;
+  max-width: 90px;
 }
-.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-moneywidget .onyx-input-decorator input,
-.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-moneywidget .onyx-input-decorator .xv-money-label {
-  width: 80px;
-  text-align: right;
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-moneywidget .enyo-tool-decorator input {
+  width: 90px;
 }
-.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-moneywidget .xv-picker-button {
-  width: 65px;
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-currency-picker {
+  display: inline-block;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-currency-picker .enyo-tool-decorator {
+  min-width: 65px;
+  max-width: 65px;
   padding: 10px 4px;
 }
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-currency-picker .enyo-tool-decorator .xv-button-text {
+  width: 45px;
+}
 .xv-workspace-container .xv-workspace .xv-workspace-panel .enyo-fittable-columns-layout > * {
   vertical-align: middle;
 }
@@ -3058,7 +3070,7 @@ a,
 .xv-pullout .xv-parameter-panel .xv-input .onyx-picker-decorator {
   padding: 0;
 }
-.xv-pullout .xv-parameter-panel .xv-input.xv-relationwidget .xv-description {
+.xv-pullout .xv-parameter-panel .xv-relationwidget .xv-description {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4;
@@ -3067,10 +3079,10 @@ a,
   margin: 5px 5px 5px 80px;
   font-size: 0.9em;
 }
-.xv-pullout .xv-parameter-panel .xv-input.xv-relationwidget .xv-description.disabled {
+.xv-pullout .xv-parameter-panel .xv-relationwidget .xv-description.disabled {
   color: #777777;
 }
-.xv-pullout .xv-parameter-panel .xv-input.xv-spinnerwidget .buttons {
+.xv-pullout .xv-parameter-panel .xv-spinnerwidget .buttons {
   display: block;
   padding: 0;
   margin: 1px 0 1px 10px;
@@ -3081,31 +3093,37 @@ a,
   font-size: 20px;
   border: none;
 }
-.xv-pullout .xv-parameter-panel .xv-input.xv-spinnerwidget .slider {
+.xv-pullout .xv-parameter-panel .xv-spinnerwidget .slider {
   margin: 15px 10px;
 }
-.xv-pullout .xv-parameter-panel .xv-input.xv-spinnerwidget.xv-numberwidget input {
+.xv-pullout .xv-parameter-panel .xv-spinnerwidget.xv-numberwidget input {
   width: 120px;
 }
-.xv-pullout .xv-parameter-panel .xv-input.xv-combobox .icon-sort {
+.xv-pullout .xv-parameter-panel .xv-combobox .icon-sort {
   color: #357ec7;
   vertical-align: middle;
 }
-.xv-pullout .xv-parameter-panel .xv-input.xv-numberwidget input {
+.xv-pullout .xv-parameter-panel .xv-numberwidget input {
   text-align: right;
 }
-.xv-pullout .xv-parameter-panel .xv-input.xv-moneywidget .onyx-input-decorator {
-  font-family: "Lucida Sans Unicode", "Lucida Grande", arial, sans-serif;
+.xv-pullout .xv-parameter-panel .xv-moneywidget .enyo-tool-decorator {
+  min-width: 90px;
+  max-width: 90px;
 }
-.xv-pullout .xv-parameter-panel .xv-input.xv-moneywidget .onyx-input-decorator input,
-.xv-pullout .xv-parameter-panel .xv-input.xv-moneywidget .onyx-input-decorator .xv-money-label {
-  width: 80px;
-  text-align: right;
+.xv-pullout .xv-parameter-panel .xv-moneywidget .enyo-tool-decorator input {
+  width: 90px;
 }
-.xv-pullout .xv-parameter-panel .xv-input.xv-moneywidget .xv-picker-button {
-  width: 65px;
+.xv-pullout .xv-parameter-panel .xv-currency-picker {
+  display: inline-block;
+}
+.xv-pullout .xv-parameter-panel .xv-currency-picker .enyo-tool-decorator {
+  min-width: 65px;
+  max-width: 65px;
   padding: 10px 4px;
 }
+.xv-pullout .xv-parameter-panel .xv-currency-picker .enyo-tool-decorator .xv-button-text {
+  width: 45px;
+}
 .xv-pullout .xv-parameter-panel .enyo-fittable-columns-layout > * {
   vertical-align: middle;
 }
@@ -3370,7 +3388,7 @@ a,
 .xv-search .xv-search-container .xv-input .onyx-picker-decorator {
   padding: 0;
 }
-.xv-search .xv-search-container .xv-input.xv-relationwidget .xv-description {
+.xv-search .xv-search-container .xv-relationwidget .xv-description {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4;
@@ -3379,10 +3397,10 @@ a,
   margin: 5px 5px 5px 80px;
   font-size: 0.9em;
 }
-.xv-search .xv-search-container .xv-input.xv-relationwidget .xv-description.disabled {
+.xv-search .xv-search-container .xv-relationwidget .xv-description.disabled {
   color: #777777;
 }
-.xv-search .xv-search-container .xv-input.xv-spinnerwidget .buttons {
+.xv-search .xv-search-container .xv-spinnerwidget .buttons {
   display: block;
   padding: 0;
   margin: 1px 0 1px 10px;
@@ -3393,31 +3411,37 @@ a,
   font-size: 20px;
   border: none;
 }
-.xv-search .xv-search-container .xv-input.xv-spinnerwidget .slider {
+.xv-search .xv-search-container .xv-spinnerwidget .slider {
   margin: 15px 10px;
 }
-.xv-search .xv-search-container .xv-input.xv-spinnerwidget.xv-numberwidget input {
+.xv-search .xv-search-container .xv-spinnerwidget.xv-numberwidget input {
   width: 120px;
 }
-.xv-search .xv-search-container .xv-input.xv-combobox .icon-sort {
+.xv-search .xv-search-container .xv-combobox .icon-sort {
   color: #357ec7;
   vertical-align: middle;
 }
-.xv-search .xv-search-container .xv-input.xv-numberwidget input {
+.xv-search .xv-search-container .xv-numberwidget input {
   text-align: right;
 }
-.xv-search .xv-search-container .xv-input.xv-moneywidget .onyx-input-decorator {
-  font-family: "Lucida Sans Unicode", "Lucida Grande", arial, sans-serif;
+.xv-search .xv-search-container .xv-moneywidget .enyo-tool-decorator {
+  min-width: 90px;
+  max-width: 90px;
 }
-.xv-search .xv-search-container .xv-input.xv-moneywidget .onyx-input-decorator input,
-.xv-search .xv-search-container .xv-input.xv-moneywidget .onyx-input-decorator .xv-money-label {
-  width: 80px;
-  text-align: right;
+.xv-search .xv-search-container .xv-moneywidget .enyo-tool-decorator input {
+  width: 90px;
 }
-.xv-search .xv-search-container .xv-input.xv-moneywidget .xv-picker-button {
-  width: 65px;
+.xv-search .xv-search-container .xv-currency-picker {
+  display: inline-block;
+}
+.xv-search .xv-search-container .xv-currency-picker .enyo-tool-decorator {
+  min-width: 65px;
+  max-width: 65px;
   padding: 10px 4px;
 }
+.xv-search .xv-search-container .xv-currency-picker .enyo-tool-decorator .xv-button-text {
+  width: 45px;
+}
 .xv-search .xv-search-container .enyo-fittable-columns-layout > * {
   vertical-align: middle;
 }