Merge remote-tracking branch 'XTUPLE/4_6_x' into 23853
authorLinda Nichols <lynnaloo@gmail.com>
Tue, 24 Jun 2014 02:29:44 +0000 (02:29 +0000)
committerLinda Nichols <lynnaloo@gmail.com>
Tue, 24 Jun 2014 02:29:44 +0000 (02:29 +0000)
34 files changed:
enyo-client/application/source/widgets/characteristics.js
enyo-client/application/source/widgets/checkbox.js
enyo-client/application/source/widgets/combobox.js
enyo-client/application/source/widgets/money.js
enyo-client/application/source/widgets/number.js
enyo-client/application/source/widgets/parameter.js
enyo-client/application/source/widgets/relation.js
enyo-client/extensions/source/purchasing/client/en/strings.js
enyo-client/extensions/source/purchasing/client/widgets/relation.js
lib/enyo-x/source/less/address.less
lib/enyo-x/source/less/characteristics.less [deleted file]
lib/enyo-x/source/less/grid.less
lib/enyo-x/source/less/list.less
lib/enyo-x/source/less/picker.less
lib/enyo-x/source/less/pullout.less
lib/enyo-x/source/less/relations.less
lib/enyo-x/source/less/screen.less
lib/enyo-x/source/less/widgets.less [deleted file]
lib/enyo-x/source/less/workspace.less
lib/enyo-x/source/stylesheets/screen.css
lib/enyo-x/source/widgets/characteristics.js
lib/enyo-x/source/widgets/checkbox.js
lib/enyo-x/source/widgets/combobox.js
lib/enyo-x/source/widgets/date.js
lib/enyo-x/source/widgets/file_input.js
lib/enyo-x/source/widgets/input.js
lib/enyo-x/source/widgets/number.js
lib/enyo-x/source/widgets/number_spinner.js
lib/enyo-x/source/widgets/parameter.js
lib/enyo-x/source/widgets/picker.js
lib/enyo-x/source/widgets/relation.js
lib/enyo-x/source/widgets/text_area.js
lib/enyo-x/source/widgets/toggle_button.js
test/extensions/core/date.js

index b051ef7..c5a0143 100644 (file)
@@ -90,7 +90,7 @@ white:true, strict:false*/
     name: "XV.OrderCharacteristicItem",
     kind: "XV.CharacteristicItem",
     components: [
-      {kind: "XV.ComboboxWidget", name: "combobox", attr: "value", style: "width: 300px"}
+      {kind: "XV.ComboboxWidget", name: "combobox", attr: "value"}
     ],
     disabledChanged: function (oldValue) {
       this.$.combobox.setDisabled(this.disabled);
index 71db45f..cf31b74 100644 (file)
@@ -47,7 +47,7 @@ regexp:true, undef:true, trailing:true, white:true */
       options = options || {};
       var isRelation = this.isRelation(),
         that = this,
-        color = "black",
+        colorClass = "",
         enabled = false,
         input = this.$.input.getValue(),
         openWorkspace,
@@ -64,10 +64,10 @@ regexp:true, undef:true, trailing:true, white:true */
 
       // Turn on label link if applicable
       if (this.getValue() && isRelation) {
-        color = "blue";
+        colorClass = "hyperlink";
         enabled = true;
       }
-      this.$.label.setStyle("color: " + color);
+      this.$.label.addClass(colorClass);
       this.setLinkEnabled(enabled);
       this.setDisabled(enabled);
 
index 9cb0add..58b2c66 100644 (file)
@@ -70,11 +70,9 @@ regexp:true, undef:true, trailing:true, white:true */
       this.inherited(arguments);
       this.createComponent({
         name: "comboboxNote",
-        container: this.$.fittableColumns,
+        container: this.$.container,
         classes: "xv-combobox-note"
       });
-      this.$.input.applyStyle("padding-top", "8px");
-      this.$.input.applyStyle("padding-left", "8px");
     },
     /**
       Populate the note field
index 86053f5..f29fce8 100644 (file)
@@ -33,29 +33,26 @@ regexp:true, undef:true, trailing:true, white:true */
     },
     maxlength: 12,
     components: [
-      {kind: "FittableColumns", components: [
+      {controlClasses: "enyo-inline", components: [
         {name: "label", content: "", classes: "xv-label"},
-        {kind: "onyx.InputDecorator", classes: "xv-input-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}
       ]},
-      {kind: "FittableColumns", name: "basePanel", showing: false,
-        components: [
-        {name: "spacer", content: "", classes: "xv-label"},
-        {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
-          components: [
-          {name: "baseAmountLabel", classes: "xv-money-label"}
+      {controlClasses: "enyo-inline", name: "basePanel", showing: false, components: [
+        {classes: "xv-label"},
+        {kind: "onyx.InputDecorator", components: [
+          {name: "baseAmountLabel", classes: "xv-label"}
         ]},
-        {kind: "onyx.InputDecorator", classes: "xv-input-decorator, xv-currency-label",
-          components: [
-          {name: "baseCurrencyLabel"}
+        {classes: "xv-currency-picker", components: [
+          {kind: 'onyx.InputDecorator', components: [
+            {name: 'baseCurrencyLabel'}
+          ]}
         ]}
       ]}
     ],
-
     /**
       Set the base price into the base amount label
     */
index b8007c7..475a804 100644 (file)
@@ -8,12 +8,6 @@ regexp:true, undef:true, trailing:true, white:true */
   // COST
   //
 
-  enyo.kind({
-    name: "XV.Cost",
-    kind: "XV.Number",
-    scale: XT.COST_SCALE
-  });
-
   enyo.kind({
     name: "XV.CostWidget",
     kind: "XV.NumberWidget",
@@ -24,12 +18,6 @@ regexp:true, undef:true, trailing:true, white:true */
   // EXTENDED PRICE
   //
 
-  enyo.kind({
-    name: "XV.ExtendedPrice",
-    kind: "XV.Number",
-    scale: XT.EXTENDED_PRICE_SCALE
-  });
-
   enyo.kind({
     name: "XV.ExtendedPriceWidget",
     kind: "XV.NumberWidget",
@@ -40,13 +28,6 @@ regexp:true, undef:true, trailing:true, white:true */
   // HOURS
   //
 
-  enyo.kind({
-    name: "XV.Hours",
-    kind: "XV.Number",
-    maxlength: 12,
-    scale: XT.HOURS_SCALE
-  });
-
   enyo.kind({
     name: "XV.HoursWidget",
     kind: "XV.NumberWidget",
@@ -58,28 +39,6 @@ regexp:true, undef:true, trailing:true, white:true */
   // PERCENT
   //
 
-  enyo.kind({
-    name: "XV.Percent",
-    kind: "XV.Number",
-    scale: XT.PERCENT_SCALE,
-    validate: function (value) {
-      // this takes the string from the input field and parses it (including understanding commas, which isNaN cannot)
-      // if it cannot parse the value, it returns NaN
-      value = Globalize.parseFloat(value);
-      // use isNaN here because parseFloat could return NaN
-      // if you pass NaN into _.isNumber, it will misleadingly return true
-      // only bad string and null/undefined cases do we want to fail validation
-      return !isNaN(value) ? value / 100 : false;
-    },
-    valueChanged: function (value) {
-      // use isNaN here because this value may be a number string and _isNaN requires
-      // a separate falsy check.
-      // In this case, it is ok for 0 to fall to the true case, just not null or a bad string
-      value = !isNaN(value) ? value * 100 : value;
-      XV.Number.prototype.valueChanged.call(this, value);
-    }
-  });
-
   enyo.kind({
     name: "XV.PercentWidget",
     kind: "XV.NumberWidget",
@@ -106,12 +65,6 @@ regexp:true, undef:true, trailing:true, white:true */
   // PURCHASE PRICE
   //
 
-  enyo.kind({
-    name: "XV.PurchasePrice",
-    kind: "XV.Number",
-    scale: XT.PURCHASE_PRICE_SCALE
-  });
-
   enyo.kind({
     name: "XV.PurchasePriceWidget",
     kind: "XV.NumberWidget",
@@ -122,13 +75,6 @@ regexp:true, undef:true, trailing:true, white:true */
   // QUANTITY
   //
 
-  enyo.kind({
-    name: "XV.Quantity",
-    kind: "XV.Number",
-    maxlength: 12,
-    scale: XT.QTY_SCALE
-  });
-
   enyo.kind({
     name: "XV.QuantityWidget",
     kind: "XV.NumberWidget",
@@ -140,12 +86,6 @@ regexp:true, undef:true, trailing:true, white:true */
   // QUANTITY PER
   //
 
-  enyo.kind({
-    name: "XV.QuantityPer",
-    kind: "XV.Number",
-    scale: XT.QTY_PER_SCALE
-  });
-
   enyo.kind({
     name: "XV.QuantityPerWidget",
     kind: "XV.NumberWidget",
@@ -156,12 +96,6 @@ regexp:true, undef:true, trailing:true, white:true */
   // SALES PRICE
   //
 
-  enyo.kind({
-    name: "XV.SalesPrice",
-    kind: "XV.Number",
-    scale: XT.SALES_PRICE_SCALE
-  });
-
   enyo.kind({
     name: "XV.SalesPriceWidget",
     kind: "XV.NumberWidget",
@@ -172,12 +106,6 @@ regexp:true, undef:true, trailing:true, white:true */
   // UNIT RATIO
   //
 
-  enyo.kind({
-    name: "XV.UnitRatio",
-    kind: "XV.Number",
-    scale: XT.UNIT_RATIO_SCALE
-  });
-
   enyo.kind({
     name: "XV.UnitRatioWidget",
     kind: "XV.NumberWidget",
@@ -188,12 +116,6 @@ regexp:true, undef:true, trailing:true, white:true */
   // WEIGHT
   //
 
-  enyo.kind({
-    name: "XV.Weight",
-    kind: "XV.Number",
-    scale: XT.WEIGHT_SCALE
-  });
-
   enyo.kind({
     name: "XV.WeightWidget",
     kind: "XV.NumberWidget",
index 5ffc5b4..48ca27a 100644 (file)
@@ -175,7 +175,8 @@ trailing:true, white:true, strict:false*/
       // see if toggle is on and update params
       _.each(keys, function (key) {
         _.each(actTypes[key], function (obj) {
-          if (that.$[_namify(obj)].getValue()) {
+          // the pluralize function in _namify is imperfect
+          if (that.$[_namify(obj)] && that.$[_namify(obj)].getValue()) {
             value.push(obj.type);
           }
         });
index a2e4a73..ddf3164 100644 (file)
@@ -23,98 +23,49 @@ regexp:true, undef:true, trailing:true, white:true, strict:false */
     name: "XV.ContactWidget",
     kind: "XV.RelationWidget",
     label: "_contact".loc(),
-    collection: "XM.ContactRelationCollection",
-    list: "XV.ContactList",
     keyAttribute: "name",
     nameAttribute: "jobTitle",
     descripAttribute: "phone",
-    classes: "xv-relationwidget",
+    collection: "XM.ContactRelationCollection",
+    list: "XV.ContactList",
     published: {
-      showAddress: false
+      showAddress: false,
     },
-    components: [
-      {kind: "FittableColumns", components: [
-        {name: "label", content: "", fit: true, classes: "xv-flexible-label"},
-        {kind: "onyx.InputDecorator", name: "decorator",
-          classes: "xv-input-decorator", components: [
-          {name: "input", kind: "onyx.Input", classes: "xv-subinput",
-            onkeyup: "keyUp", onkeydown: "keyDown", onblur: "receiveBlur",
-            onfocus: "receiveFocus"
-          },
-          {kind: "onyx.MenuDecorator", onSelect: "itemSelected", components: [
-            {kind: "onyx.IconButton", classes: "icon-folder-open-alt"},
-            {name: "popupMenu", floating: true, kind: "onyx.Menu",
-              components: [
-              {kind: "XV.MenuItem", name: "searchItem", content: "_search".loc()},
-              {kind: "XV.MenuItem", name: "openItem", content: "_open".loc(),
-                disabled: true},
-              {kind: "XV.MenuItem", name: "newItem", content: "_new".loc(),
-                disabled: true}
-            ]}
-          ]},
-          {name: "completer", kind: "XV.Completer", onSelect: "itemSelected"}
-        ]}
+    descriptionComponents: [
+      {name: "jobTitleRow", controlClasses: "enyo-inline", showing: false, components: [
+        {classes: 'xv-description', name: "name"}
+      ]},
+      {name: "phoneRow", controlClasses: "enyo-inline", showing: false, components: [
+        {classes: "xv-description hyperlink", target: '_blank', name: "description"}
+      ]},
+      {name: "alternateRow", controlClasses: "enyo-inline", showing: false, components: [
+        {classes: "xv-description hyperlink", target: "_blank", name: "alternate"}
       ]},
-      {kind: "FittableColumns", components: [
-        {name: "labels", classes: "xv-relationwidget-column left",
-          components: [
-          {name: "jobTitleLabel", content: "_jobTitle".loc() + ":",
-            classes: "xv-relationwidget-description label",
-            showing: false},
-          {name: "phoneLabel", content: "_phone".loc() + ":",
-            classes: "xv-relationwidget-description label",
-            showing: false},
-          {name: "alternateLabel", content: "_alternate".loc() + ":",
-            classes: "xv-relationwidget-description label",
-            showing: false},
-          {name: "faxLabel", content: "_fax".loc() + ":",
-            classes: "xv-relationwidget-description label",
-            showing: false},
-          {name: "primaryEmailLabel", content: "_email".loc() + ":",
-            classes: "xv-relationwidget-description label",
-            showing: false},
-          {name: "webAddressLabel", content: "_web".loc() + ":",
-            classes: "xv-relationwidget-description label",
-            showing: false},
-          {name: "addressLabel", content: "_address".loc() + ":",
-            classes: "xv-relationwidget-description label",
-            showing: false}
-        ]},
-        {name: "data", fit: true, components: [
-          {name: "name", classes: "xv-relationwidget-description hasLabel"},
-          {name: "description", ontap: "callPhone",
-            classes: "xv-relationwidget-description hasLabel hyperlink"},
-          {name: "alternate", classes: "xv-relationwidget-description hasLabel"},
-          {name: "fax", classes: "xv-relationwidget-description hasLabel"},
-          {name: "primaryEmail", ontap: "sendMail",
-            classes: "xv-relationwidget-description hasLabel hyperlink"},
-          {name: "webAddress", ontap: "openWindow",
-            classes: "xv-relationwidget-description hasLabel hyperlink"},
-          {name: "address", classes: "xv-relationwidget-description hasLabel",
-            allowHtml: true}
-        ]}
+      {name: "faxRow", controlClasses: "enyo-inline", showing: false, components: [
+        {classes: "xv-description hyperlink", target: "_blank", name: "fax"}
+      ]},
+      {name: "emailRow", controlClasses: "enyo-inline", showing: false, components: [
+        {classes: 'xv-description hyperlink', target: "_blank", name: "email"}
+      ]},
+      {name: "webAddressRow", controlClasses: "enyo-inline", showing: false, components: [
+        {classes: 'xv-description hyperlink', target: "_blank", name: "webAddress"}
+      ]},
+      {name: "addressRow", controlClasses: "enyo-inline", showing: false, components: [
+        {classes: "xv-description", name: "address", allowHtml: true}
       ]}
     ],
-    disabledChanged: function () {
-      this.inherited(arguments);
-      var disabled = this.getDisabled();
-      if (this.$.phone) {
-        this.$.jobTitle.addRemoveClass("disabled", disabled);
-        this.$.phone.addRemoveClass("disabled", disabled);
-        this.$.alternate.addRemoveClass("disabled", disabled);
-        this.$.fax.addRemoveClass("disabled", disabled);
-        this.$.primaryEmail.addRemoveClass("disabled", disabled);
-        this.$.webAddress.addRemoveClass("disabled", disabled);
-      }
-    },
     setValue: function (value, options) {
       this.inherited(arguments);
+
       if (value && !value.get) {
         // the value of the widget is still being fetched asyncronously.
         // when the value is fetched, this function will be run again,
         // so for now we can just stop here.
         return;
       }
+
+      // The rows are here because sometimes the values needs labels
+      // to go with the values.
       var jobTitle = value ? value.get("jobTitle") : "",
         phone = value ? value.get("phone") : "",
         alternate = value ? value.get("alternate") : "",
@@ -123,23 +74,32 @@ regexp:true, undef:true, trailing:true, white:true, strict:false */
         webAddress = value ? value.get("webAddress") : "",
         address = value ? XM.Address.format(value.get("address")) : "",
         showAddress = this.getShowAddress();
-      this.$.jobTitleLabel.setShowing(jobTitle);
-      this.$.phoneLabel.setShowing(phone);
-      this.$.alternate.setShowing(alternate);
+
+      this.$.jobTitleRow.setShowing(!!jobTitle);
+      this.$.name.setContent(jobTitle);
+
+      this.$.phoneRow.setShowing(!!phone);
+      this.$.description.setContent(phone);
+      this.$.description.setAttribute('href', 'tel://' + phone);
+
+      this.$.alternateRow.setShowing(!!alternate);
       this.$.alternate.setContent(alternate);
-      this.$.alternateLabel.setShowing(alternate);
-      this.$.fax.setShowing(fax);
+      this.$.alternate.setAttribute('href', 'tel://' + alternate);
+
+      this.$.faxRow.setShowing(!!fax);
       this.$.fax.setContent(fax);
-      this.$.faxLabel.setShowing(fax);
-      this.$.primaryEmail.setShowing(primaryEmail);
-      this.$.primaryEmail.setContent(primaryEmail);
-      this.$.primaryEmailLabel.setShowing(primaryEmail);
-      this.$.webAddress.setShowing(webAddress);
+      this.$.fax.setAttribute('href', 'tel://' + fax);
+
+      this.$.emailRow.setShowing(!!primaryEmail);
+      this.$.email.setContent(primaryEmail);
+      this.$.email.setAttribute('href', 'mailto:' + primaryEmail);
+
+      this.$.webAddressRow.setShowing(!!webAddress);
       this.$.webAddress.setContent(webAddress);
-      this.$.webAddressLabel.setShowing(webAddress);
-      this.$.address.setShowing(address && showAddress);
-      this.$.addressLabel.setShowing(address && showAddress);
-      if (showAddress) { this.$.address.setContent(address); }
+      this.$.webAddress.setAttribute('href', '//' + alternate);
+
+      this.$.addressRow.setShowing(address && showAddress);
+      this.$.address.setContent(address);
     },
     openWindow: function () {
       var address = this.value ? this.value.get("webAddress") : null;
index fa285e8..0868e86 100644 (file)
@@ -57,6 +57,7 @@ strict:true, trailing:true, white:true */
     "_UseEarliestAvailDateOnPOItem": "Use Earliest Date",
     "_vendorItem": "Vendor Item",
     "_vendorItemNumber": "VendorItemNumber",
+    "_vendors": "Vendors",
     "_vendorUnit": "Vendor Unit",
     "_viewPurchaseOrders": "View Purchase Orders",
     "_vouchered": "Vouchered",
index 780df0d..dca6a6b 100644 (file)
@@ -31,71 +31,32 @@ white:true, strict:false*/
         showDetail: true,
         vendorItemNumber: null,
       },
-      components: [
-        {kind: "FittableColumns", components: [
-          {name: "label", content: "", fit: true, classes: "xv-flexible-label"},
-          {kind: "onyx.InputDecorator", name: "decorator",
-            classes: "xv-input-decorator", components: [
-            {name: "input", kind: "onyx.Input", classes: "xv-subinput",
-              onkeyup: "keyUp", onkeydown: "keyDown", onblur: "receiveBlur",
-              onfocus: "receiveFocus"
-            },
-            {kind: "onyx.MenuDecorator", onSelect: "itemSelected", components: [
-              {kind: "onyx.IconButton", classes: "icon-folder-open-alt"},
-              {name: "popupMenu", floating: true, kind: "onyx.Menu",
-                components: [
-                {kind: "XV.MenuItem", name: "searchItem", content: "_search".loc()},
-                {kind: "XV.MenuItem", name: "openItem", content: "_open".loc(),
-                  disabled: true},
-                {kind: "XV.MenuItem", name: "newItem", content: "_new".loc(),
-                  disabled: true}
-              ]}
-            ]},
-            {name: "completer", kind: "XV.Completer", onSelect: "itemSelected"}
-          ]}
-        ]},
-        {kind: "FittableColumns", name: "detailColumns", components: [
-          {name: "labels", classes: "xv-relationwidget-column left",
-            components: [
-            {name: "contractLabel", content: "_contract".loc() + ":",
-              classes: "xv-relationwidget-description label",
-              showing: false},
-            {name: "minimumQtyLabel", content: "_minimumOrderQuantity".loc() + ":",
-              classes: "xv-relationwidget-description label",
-              showing: false},
-            {name: "multipleQtyLabel", content: "_multipleOrderQuantity".loc() + ":",
-              classes: "xv-relationwidget-description label",
-              showing: false},
-            {name: "earliestDateLabel", content: "_earliestDate".loc() + ":",
-              classes: "xv-relationwidget-description label",
-              showing: false}
+      descriptionComponents: [
+        {controlClasses: 'enyo-inline', components: [
+          {name: "nameRow", controlClasses: "enyo-inline", components: [
+            {name: "name", classes: "xv-description"}
+          ]},
+          {name: "contractRow", controlClasses: "enyo-inline", components: [
+            {classes: 'xv-label', content: "_contract".loc() + ":"},
+            {name: "description", classes: "xv-description"}
+          ]},
+          {name: "minimumQtyRow", controlClasses: "enyo-inline", components: [
+            {classes: 'xv-label', content: "_minimumOrderQuantity".loc() + ":"},
+            {name: "minimumQty", classes: "xv-description"}
           ]},
-          {name: "data", fit: true, components: [
-            {name: "name", classes: "xv-relationwidget-description hasLabel",
-              showing: false},
-            {name: "description", classes: "xv-relationwidget-description hasLabel",
-              showing: false},
-            {name: "minimumQty", classes: "xv-relationwidget-description hasLabel",
-              showing: false},
-            {name: "multipleQty", classes: "xv-relationwidget-description hasLabel",
-              showing: false},
-            {name: "earliestDate", classes: "xv-relationwidget-description hasLabel",
-              showing: false}
+          {name: "multipleQtyRow", controlClasses: "enyo-inline", components: [
+            {classes: 'xv-label', content: "_multipleOrderQuantity".loc() + ":"},
+            {name: "multipleQty", classes: "xv-description"}
+          ]},
+          {name: "earliestDateRow", controlClasses: "enyo-inline", components: [
+            {classes: 'xv-label', content: "_earliestDate".loc() + ":"},
+            {name: "earliestDate", classes: "xv-description"}
           ]}
         ]}
       ],
       create: function () {
         this.inherited(arguments);
-        if (!this.getShowDetail()) {
-          this.$.detailColumns.setStyle("display: none");
-        }
-      },
-      disabledChanged: function () {
-        this.inherited(arguments);
-        var disabled = this.getDisabled();
-        this.$.minimumQty.addRemoveClass("disabled", disabled);
-        this.$.multipleQty.addRemoveClass("disabled", disabled);
-        this.$.earliestDate.addRemoveClass("disabled", disabled);
+        this.$.descriptionContainer.setShowing(this.getShowDetail());
       },
       /**
         Can accept a two property object with an item source and vendor item number
@@ -176,9 +137,10 @@ white:true, strict:false*/
 
         // Handle menu actions
         that.$.openItem.setShowing(true);
-        that.$.newItem.setShowing(true);
         that.$.openItem.setDisabled(true);
+        that.$.newItem.setShowing(true);
         that.$.newItem.setDisabled(_couldNotCreate.apply(this) || this.disabled);
+
         if (Model) { setPrivileges(); }
 
         if (this.getShowDetail()) {
@@ -187,15 +149,17 @@ white:true, strict:false*/
             multipleQty = value ? value.get("multipleOrderQuantity") : 0,
             earliestDate = value ? XT.date.applyTimezoneOffset(value.get("earliestDate"), true) : null,
             scale = XT.QTY_SCALE;
-          this.$.contractLabel.setShowing(contract);
-          this.$.minimumQtyLabel.setShowing(minimumQty);
-          this.$.minimumQty.setShowing(minimumQty);
+
+          this.$.contractRow.setShowing(!!contract);
+          this.$.description.setContent(contract);
+
+          this.$.minimumQtyRow.setShowing(!!minimumQty);
           this.$.minimumQty.setContent(Globalize.format(minimumQty, "n" + scale));
-          this.$.multipleQtyLabel.setShowing(multipleQty);
-          this.$.multipleQty.setShowing(multipleQty);
+
+          this.$.multipleQtyRow.setShowing(!!multipleQty);
           this.$.multipleQty.setContent(Globalize.format(multipleQty, "n" + scale));
-          this.$.earliestDateLabel.setShowing(earliestDate);
-          this.$.earliestDate.setShowing(earliestDate);
+
+          this.$.earliestDateRow.setShowing(!!earliestDate);
           this.$.earliestDate.setContent(Globalize.format(earliestDate, "d"));
         }
       },
index 30b4140..38a3766 100644 (file)
@@ -10,9 +10,6 @@
       font-style: italic;
       color: @blue-gray;
     }
-    &.hyperlink {
-      color: @blue;
-    }
     &.disabled {
       color: @dim-gray;
     }
@@ -68,4 +65,4 @@
   overflow: auto;
   color: @black;
   background-color: @white;
-}
\ No newline at end of file
+}
diff --git a/lib/enyo-x/source/less/characteristics.less b/lib/enyo-x/source/less/characteristics.less
deleted file mode 100644 (file)
index 38eef4d..0000000
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
-  Characteristics
-*/
-
-.xv-characteristic-picker {
-  border: none;
-  .onyx-picker-decorator .onyx-button {
-    width: 130px;
-  }
-}
-
-.xv-characteristic-item {
-  border-bottom: 1px solid @smoke;
-  .onyx-input-decorator > input {
-    width: 115px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
-  > .xv-input {
-    border: none;
-  }
-}
-
-.xv-characteristic-buttons {
-  margin: 8px;
-}
-
-.xv-characteristic-button {
-  margin-left: 4px;
-  color: @slate-blue;
-  font-size: 24px;
-}
index 4453ce6..7b5cccc 100644 (file)
@@ -1,6 +1,12 @@
 /*
   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 */
   }
 
   .xv-grid-attr {
-    // This limits the text to three lines
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
+    .xv-limit-description
 
     &.bold {
     font-weight: bold;
       border: 1px solid @bright-orange;
       .xv-grid-column {
         .onyx-input-decorator {
-          .tightened-input-decorator;
+          .tightened-input-decorator(100%);
         }
         .onyx-picker-decorator {
           padding-top: 6px;
             height: 26px;
             padding-top: 3px;
             width: 100%;
-            font-size: 13px;
+            font-size: @widgetFontSize;
           }
         }
         .xv-input {
+          padding-top: 6px;
+          width: @gridFieldDecoratorWidth;
           border: none;
+
         }
-        .xv-picker-label {
+        .xv-label, .xv-flexible-label, .xv-picker-label {
           display: none;
         }
-        .xv-datewidget {
-          margin-right: 10px;
-          padding-top: 0;
-          .onyx-input-decorator {
-            padding: 0;
-            width: 100%;
-            input {
-              width: 85%;
-              font-size: 13px;
-            }
+        .xv-relationwidget {
+          .xv-description {
+            margin: 0;
+            margin-top: 5px;
+          }
+          &.xv-private-item-site-widget {
+            border-bottom: 0;
           }
-        }
-        .xv-numberwidget {
-          padding-top: 6px;
           .onyx-input-decorator {
             .tightened-input-decorator;
           }
         }
-        .xv-combobox {
-          padding-left: 0;
-          input {
-            padding-top: 3px;
-            width: 80px;
-            font-size: 13px;
-          }
-        }
-        .xv-moneywidget {
-          padding-bottom: 0;
+        .xv-datewidget {
           .onyx-input-decorator {
             .tightened-input-decorator;
           }
         }
-        .xv-relationwidget {
+        .xv-combobox {
           .onyx-input-decorator {
-            width: 100%;
-            padding-top: 6px;
-          }
-          .onyx-input {
-            width: 85%;
-            padding-right: 4px;
+            .tightened-input-decorator;
           }
         }
         .xv-useraccount-widget {
-          // Hack: we shouldn't have to force this.
-          .xv-subinput {
+          .xv-input {
             width: 80px;
             height: 16px;
           }
         }
-        .xv-subinput {
-          width: 100%;
-        }
-        .xv-input {
-          padding-top: 6px;
-          width: 100%;
-          border: none;
-        }
-        .xv-label, .xv-flexible-label, .xv-relationwidget-secondarydescription {
-          display: none;
-        }
-        .xv-relationwidget-description {
-          margin: 0;
-          margin-top: 5px;
-        }
-        .xv-private-item-site-widget {
-          border-bottom: 0;
-        }
       }
     }
   }
   }
 }
 
-.tightened-input-decorator (@width: 100%) {
+.tightened-input-decorator (@inputWidth: @iconGridFieldWidth) {
   padding: 0;
-  width: @width;
+  width: @gridFieldDecoratorWidth;
   margin: 0;
   input {
-    width: (@width);
-    font-size: 13px;
+    width: @inputWidth;
+    font-size: @widgetFontSize;
   }
 }
index e5bb712..7c103ee 100644 (file)
     color: @dim-gray;
   }
   &.hyperlink {
-    color: blue;
+    color: @slate-blue;
+    cursor: pointer;
   }
   &.disabled {
     color: @dim-gray;
index 044c9ac..7e92c6b 100644 (file)
   }
 }
 
-.xv-combobox {
-  .onyx-input-decorator {
-    input {
-      width: 145px;
-    }
-  }
-  .icon-sort {
-    color: @slate-blue;
-    vertical-align: middle;
-  }
-}
 .xv-combobox-note {
   padding: 14px 3px 8px 3px;
   text-align: left;
index 5d53c54..6b1b0af 100644 (file)
     width: 100%;
     margin: 0 4px 6px 0;
 
+    .xv-input, .xv-pickerwidget {
+      .onyx-input-decorator {
+        border: none;
+      }
+    }
+
     .xv-buttons {
       text-align: center;
     }
index d6a480f..1810893 100644 (file)
@@ -2,62 +2,30 @@
   Styles relating to RelationWidgets
 */
 
- .xv-relationwidget-completer {
 .xv-relationwidget-completer {
    left: -200px;
    top: 15px;
- }
 }
 
- .xv-completer-sidecar {
 .xv-completer-sidecar {
    color: @blue-gray;
- }
-
- .xv-relationwidget-column {
-   &.left {
-     padding-right: 18px;
-     color: @black;
-     width: 140px;
-   }
- }
+  }
 
- .xv-relationwidget-icon {
 .xv-relationwidget-icon {
    top: 1px;
    left: 8px;
    height: 30px;
    position: relative;
- }
-
- .xv-relationwidget-description {
-   overflow: hidden;
-   // This gives them 3 lines of description
-   display: -webkit-box;
-   -webkit-line-clamp: 3;
-   -webkit-box-orient: vertical;
-   max-width: 250px;
-   margin: 5px 5px 5px 80px;
-   &.disabled {
-     color: @dim-gray;
-   }
-   &.label {
-     text-indent: 0;
-     text-align: right;
-
-   }
-   &.hasLabel {
-     text-indent: 0;
-   }
-   &.hyperlink {
-     color: blue;
   }
- }
 
- .xv-private-item-site-widget {
 .xv-private-item-site-widget {
    border-bottom-color: rgb(170, 170, 170);
    border-bottom-width: 1px;
    border-bottom-style: solid;
- }
 }
 
- /* RelationsEditorBox */
- .xv-relations-editor-box {
 /* RelationsEditorBox */
 .xv-relations-editor-box {
    .xv-groupbox {
      margin-right: 0;
      padding: 0;
    &.panel {
      width: 350px;
    }
- }
 }
 
- /* ListRelationsBox */
- .xv-list-relations-box {
 /* ListRelationsBox */
 .xv-list-relations-box {
    &.panel {
      width: 625px;
    }
- }
 }
 
- .xv-short-relations-box {
 .xv-short-relations-box {
    &.panel {
      width: 500px;
    }
- }
 }
index 40f1005..4d0d13a 100644 (file)
@@ -75,6 +75,24 @@ body {
   cursor: default;
 }
 
+a, .hyperlink {
+  color: @slate-blue;
+  cursor: pointer;
+}
+
+.xv-invisible-wrapper {
+  padding: 0;
+  border: none;
+}
+
+  // This gives them 4 lines of description
+.xv-limit-description {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+}
+
 .xv-app-panel {
   /* Setting this as min-width overrides enyo-narrow 100% */
   width: @defaultPanelWidth;
@@ -244,9 +262,10 @@ body {
   }
 }
 
-.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 {
@@ -358,8 +377,6 @@ body {
 @import "dashboard.less";
 @import "list.less";
 @import "pullout.less";
-@import "widgets.less";
-@import "characteristics.less";
 @import "relations.less";
 @import "address.less";
 @import "search.less";
diff --git a/lib/enyo-x/source/less/widgets.less b/lib/enyo-x/source/less/widgets.less
deleted file mode 100644 (file)
index 025e556..0000000
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
-  Styles relating to misc widgets
-*/
-
-.onyx-input-decorator {
-  border: 0;
-  input {
-    width: 150px;
-  }
-}
-
-.xv-relationwidget, .xv-datewidget {
-  input {
-    width: 135px;
-  }
-}
-
-.xv-numberwidget {
-  input {
-    text-align: right;
-    width: 150px;
-  }
-}
-
-.xv-moneywidget {
-  padding-top: 6px;
-  padding-bottom: 2px;
-
-  .onyx-input-decorator {
-    font-family: @groupboxFont;
-    margin-right: 5px;
-
-    input, .xv-money-label {
-      width: 85px;
-      text-align: right;
-    }
-    &.xv-currency-label {
-      width: 65px;
-    }
-  }
-  .xv-picker-button {
-    width: 65px;
-    padding: 10px 4px;
-  }
-}
-
-.spinner {
-  // this is a label fix since the spinner is so tall
-  .enyo-fittable-columns-layout > * {
-    vertical-align: middle;
-  }
-  .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-dependency-picker {
-  .onyx-picker-decorator {
-    .onyx-button {
-      width: 280px;
-      margin-left: 6px;
-    }
-  }
-}
-
-.xv-dependency-button {
-  color: @slate-blue;
-  font-size: 24px;
-  border: none;
-  background: transparent;
-}
index 90a3739..c00b2ff 100644 (file)
 
       // fix labels with widget refactor
       .xv-label, .xv-decorated-label, .xv-flexible-label {
-        width: @labelWidth !important;
+        width: @labelWidth;
         max-width: 100%;
-        padding: 0 8px 0 6px;
         text-align: right;
+        padding: 0 8px 0 6px;
         vertical-align: middle;
+        &.disabled {
+          color: @dim-gray;
+        }
       }
+
       &.xv-assignment-box {
         .xv-flexible-label, .xv-label {
           width: 200px !important;
       }
 
       .xv-input {
-        border-bottom: 1px solid @smoke;
-        margin: 0px;
+        padding: 4px 0;
+        border-bottom: 1px solid fade(@smoke, 50%);
+
+        .enyo-tool-decorator {
+          max-width: @fieldDecoratorWidth;
+          text-align: left;
+
+          .onyx-icon {
+            display: inline-block;
+            width: @iconWidth;
+            cursor: pointer;
+          }
+        }
+
+        &.xv-textarea {
+          padding: 0;
+          margin: @decoratorPadding;
+          .enyo-tool-decorator {
+            // reset max-width on text area
+            max-width: @defaultPanelWidth;
+          }
+        }
+
+        input {
+          width: @fieldWidth;
+        }
+
+        .xv-icon-decorator {
+          input {
+            width: @iconFieldWidth;
+          }
+          .onyx-icon {
+            padding: @iconPadding;
+          }
+        }
+
+        .onyx-picker-decorator {
+          padding: 0;  // @overrides the input-decorator padding above ^^
+        }
+      }
+
+      /**
+        Styles relating to workspace widgets
+      */
+      .xv-relationwidget {
+        .xv-description {
+          .xv-limit-description;
+
+          max-width: 250px;
+          margin: 5px 5px 5px 80px;
+          font-size: 0.9em;
+
+          &.disabled {
+            color: @dim-gray;
+          }
+        }
+      }
+
+      .xv-spinnerwidget {
+        .xv-icon-decorator {
+          .onyx-icon {
+            display: block;
+            border: none;
+            font-size: 20px;
+            width: 20px;
+            padding: 0 4px 0 4px;
+          }
+          input {
+            width: @iconFieldWidth - @iconPadding;
+          }
+        }
+        .slider {
+          margin: 15px 10px;
+        }
+      }
+
+      .xv-numberwidget {
+        input {
+          text-align: right;
+        }
+      }
+
+      .xv-moneywidget {
+        .enyo-tool-decorator {
+          // reset min/max-width
+          min-width: 90px;
+          max-width: 90px;
+          input {
+            width: 90px;
+          }
+        }
+      }
+
+      .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;
+          }
+        }
+      }
+
+      .xv-characteristics-widget {
+        .xv-characteristic-item {
+          border-bottom: 1px solid @smoke;
+          .xv-input {
+            border: none;
+            input {
+              width: 135px;
+            }
+          }
+        }
+        .xv-characteristic-button {
+          text-align: center;
+        }
       }
 
       .enyo-fittable-columns-layout > * {
     }
 
     .onyx-input-decorator {
+      border: 0;
+      input {
+        width: 150px;
+      }
       &.onyx-disabled {
         .disabled;
       }
     }
 
+    // Dependency picker in workflow
+    .xv-dependency-picker {
+      .onyx-picker-decorator {
+        .onyx-button {
+          width: 280px;
+          margin-left: 6px;
+        }
+      }
+    }
+
+    .xv-dependency-button {
+      color: @slate-blue;
+      font-size: 24px;
+      border: none;
+      background: transparent;
+    }
+
     .xv-totals-panel {
       .onyx-input-decorator > input, * {
         font-size: @totalsFontSize;
index 7836159..f6d56ff 100755 (executable)
@@ -1523,6 +1523,21 @@ body {
   opacity: 0.8;
   cursor: default;
 }
+a,
+.hyperlink {
+  color: #357ec7;
+  cursor: pointer;
+}
+.xv-invisible-wrapper {
+  padding: 0;
+  border: none;
+}
+.xv-limit-description {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+}
 .xv-app-panel {
   /* Setting this as min-width overrides enyo-narrow 100% */
   width: 320px;
@@ -1622,6 +1637,9 @@ body {
   background: #f8f8f8;
   text-overflow: ellipsis;
   border: 1px solid #d7d7d7;
+  /**
+        Styles relating to workspace widgets
+      */
   color: #070707;
   padding: 7px;
 }
@@ -1646,19 +1664,110 @@ body {
 .xv-popup.xv-groupbox-popup .xv-label,
 .xv-popup.xv-groupbox-popup .xv-decorated-label,
 .xv-popup.xv-groupbox-popup .xv-flexible-label {
-  width: 120px !important;
+  width: 120px;
   max-width: 100%;
-  padding: 0 8px 0 6px;
   text-align: right;
+  padding: 0 8px 0 6px;
   vertical-align: middle;
 }
+.xv-popup.xv-groupbox-popup .xv-label.disabled,
+.xv-popup.xv-groupbox-popup .xv-decorated-label.disabled,
+.xv-popup.xv-groupbox-popup .xv-flexible-label.disabled {
+  color: #777777;
+}
 .xv-popup.xv-groupbox-popup.xv-assignment-box .xv-flexible-label,
 .xv-popup.xv-groupbox-popup.xv-assignment-box .xv-label {
   width: 200px !important;
 }
 .xv-popup.xv-groupbox-popup .xv-input {
+  padding: 4px 0;
+  border-bottom: 1px solid rgba(215, 215, 215, 0.5);
+}
+.xv-popup.xv-groupbox-popup .xv-input .enyo-tool-decorator {
+  max-width: 180px;
+  text-align: left;
+}
+.xv-popup.xv-groupbox-popup .xv-input .enyo-tool-decorator .onyx-icon {
+  display: inline-block;
+  width: 16px;
+  cursor: pointer;
+}
+.xv-popup.xv-groupbox-popup .xv-input.xv-textarea {
+  padding: 0;
+  margin: 8px;
+}
+.xv-popup.xv-groupbox-popup .xv-input.xv-textarea .enyo-tool-decorator {
+  max-width: 320px;
+}
+.xv-popup.xv-groupbox-popup .xv-input input {
+  width: 164px;
+}
+.xv-popup.xv-groupbox-popup .xv-input .xv-icon-decorator input {
+  width: 140px;
+}
+.xv-popup.xv-groupbox-popup .xv-input .xv-icon-decorator .onyx-icon {
+  padding: 4px;
+}
+.xv-popup.xv-groupbox-popup .xv-input .onyx-picker-decorator {
+  padding: 0;
+}
+.xv-popup.xv-groupbox-popup .xv-relationwidget .xv-description {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  max-width: 250px;
+  margin: 5px 5px 5px 80px;
+  font-size: 0.9em;
+}
+.xv-popup.xv-groupbox-popup .xv-relationwidget .xv-description.disabled {
+  color: #777777;
+}
+.xv-popup.xv-groupbox-popup .xv-spinnerwidget .xv-icon-decorator .onyx-icon {
+  display: block;
+  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-numberwidget input {
+  text-align: right;
+}
+.xv-popup.xv-groupbox-popup .xv-moneywidget .enyo-tool-decorator {
+  min-width: 90px;
+  max-width: 90px;
+}
+.xv-popup.xv-groupbox-popup .xv-moneywidget .enyo-tool-decorator input {
+  width: 90px;
+}
+.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 .xv-characteristics-widget .xv-characteristic-item {
   border-bottom: 1px solid #d7d7d7;
-  margin: 0px;
+}
+.xv-popup.xv-groupbox-popup .xv-characteristics-widget .xv-characteristic-item .xv-input {
+  border: none;
+}
+.xv-popup.xv-groupbox-popup .xv-characteristics-widget .xv-characteristic-item .xv-input input {
+  width: 135px;
+}
+.xv-popup.xv-groupbox-popup .xv-characteristics-widget .xv-characteristic-button {
+  text-align: center;
 }
 .xv-popup.xv-groupbox-popup .enyo-fittable-columns-layout > * {
   vertical-align: middle;
@@ -1719,9 +1828,12 @@ body {
 }
 .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;
@@ -1944,6 +2056,9 @@ body {
   background: #f8f8f8;
   text-overflow: ellipsis;
   border: 1px solid #d7d7d7;
+  /**
+        Styles relating to workspace widgets
+      */
 }
 .xv-workspace-container .xv-workspace .xv-workspace-panel .onyx-groupbox-header {
   padding: 6px 10px;
@@ -1966,27 +2081,134 @@ body {
 .xv-workspace-container .xv-workspace .xv-workspace-panel .xv-label,
 .xv-workspace-container .xv-workspace .xv-workspace-panel .xv-decorated-label,
 .xv-workspace-container .xv-workspace .xv-workspace-panel .xv-flexible-label {
-  width: 120px !important;
+  width: 120px;
   max-width: 100%;
-  padding: 0 8px 0 6px;
   text-align: right;
+  padding: 0 8px 0 6px;
   vertical-align: middle;
 }
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-label.disabled,
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-decorated-label.disabled,
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-flexible-label.disabled {
+  color: #777777;
+}
 .xv-workspace-container .xv-workspace .xv-workspace-panel.xv-assignment-box .xv-flexible-label,
 .xv-workspace-container .xv-workspace .xv-workspace-panel.xv-assignment-box .xv-label {
   width: 200px !important;
 }
 .xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input {
+  padding: 4px 0;
+  border-bottom: 1px solid rgba(215, 215, 215, 0.5);
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input .enyo-tool-decorator {
+  max-width: 180px;
+  text-align: left;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input .enyo-tool-decorator .onyx-icon {
+  display: inline-block;
+  width: 16px;
+  cursor: pointer;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-textarea {
+  padding: 0;
+  margin: 8px;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-textarea .enyo-tool-decorator {
+  max-width: 320px;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input input {
+  width: 164px;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input .xv-icon-decorator input {
+  width: 140px;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input .xv-icon-decorator .onyx-icon {
+  padding: 4px;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input .onyx-picker-decorator {
+  padding: 0;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-relationwidget .xv-description {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  max-width: 250px;
+  margin: 5px 5px 5px 80px;
+  font-size: 0.9em;
+}
+.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 .xv-icon-decorator .onyx-icon {
+  display: block;
+  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-numberwidget input {
+  text-align: right;
+}
+.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-moneywidget .enyo-tool-decorator input {
+  width: 90px;
+}
+.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 .xv-characteristics-widget .xv-characteristic-item {
   border-bottom: 1px solid #d7d7d7;
-  margin: 0px;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-characteristics-widget .xv-characteristic-item .xv-input {
+  border: none;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-characteristics-widget .xv-characteristic-item .xv-input input {
+  width: 135px;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-characteristics-widget .xv-characteristic-button {
+  text-align: center;
 }
 .xv-workspace-container .xv-workspace .xv-workspace-panel .enyo-fittable-columns-layout > * {
   vertical-align: middle;
 }
+.xv-workspace-container .xv-workspace .onyx-input-decorator {
+  border: 0;
+}
+.xv-workspace-container .xv-workspace .onyx-input-decorator input {
+  width: 150px;
+}
 .xv-workspace-container .xv-workspace .onyx-input-decorator.onyx-disabled {
   opacity: 0.8;
   cursor: default;
 }
+.xv-workspace-container .xv-workspace .xv-dependency-picker .onyx-picker-decorator .onyx-button {
+  width: 280px;
+  margin-left: 6px;
+}
+.xv-workspace-container .xv-workspace .xv-dependency-button {
+  color: #357ec7;
+  font-size: 24px;
+  border: none;
+  background: transparent;
+}
 .xv-workspace-container .xv-workspace .xv-totals-panel .onyx-input-decorator > input,
 .xv-workspace-container .xv-workspace .xv-totals-panel * {
   font-size: 14px;
@@ -2011,7 +2233,7 @@ body {
         */
 }
 .xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attribute-id {
-  color: blue;
+  color: #357ec7;
   font-weight: bold;
   cursor: pointer;
 }
@@ -2069,13 +2291,6 @@ body {
 .xv-picker-label.disabled {
   color: #777777;
 }
-.xv-combobox .onyx-input-decorator input {
-  width: 145px;
-}
-.xv-combobox .icon-sort {
-  color: #357ec7;
-  vertical-align: middle;
-}
 .xv-combobox-note {
   padding: 14px 3px 8px 3px;
   text-align: left;
@@ -2108,13 +2323,7 @@ body {
 .xv-grid-box .xv-scroller {
   background: #f8f8f8;
 }
-.xv-grid-box .xv-grid-attr {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-}
-.xv-grid-box .xv-grid-attr.bold {
+.xv-limit-description .xv-grid-box .xv-grid-attr.bold {
   font-weight: bold;
 }
 .xv-grid-box .xv-grid-attr.error {
@@ -2241,87 +2450,53 @@ body {
   font-size: 13px;
 }
 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-input {
+  padding-top: 6px;
+  width: 100%;
   border: none;
 }
+.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-label,
+.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-flexible-label,
 .xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-picker-label {
   display: none;
 }
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-datewidget {
-  margin-right: 10px;
-  padding-top: 0;
+.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget .xv-description {
+  margin: 0;
+  margin-top: 5px;
 }
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-datewidget .onyx-input-decorator {
+.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget.xv-private-item-site-widget {
+  border-bottom: 0;
+}
+.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget .onyx-input-decorator {
   padding: 0;
   width: 100%;
+  margin: 0;
 }
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-datewidget .onyx-input-decorator input {
-  width: 85%;
+.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget .onyx-input-decorator input {
+  width: 76%;
   font-size: 13px;
 }
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-numberwidget {
-  padding-top: 6px;
-}
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-numberwidget .onyx-input-decorator {
+.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-datewidget .onyx-input-decorator {
   padding: 0;
   width: 100%;
   margin: 0;
 }
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-numberwidget .onyx-input-decorator input {
-  width: 100%;
-  font-size: 13px;
-}
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-combobox {
-  padding-left: 0;
-}
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-combobox input {
-  padding-top: 3px;
-  width: 80px;
+.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-datewidget .onyx-input-decorator input {
+  width: 76%;
   font-size: 13px;
 }
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-moneywidget {
-  padding-bottom: 0;
-}
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-moneywidget .onyx-input-decorator {
+.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-combobox .onyx-input-decorator {
   padding: 0;
   width: 100%;
   margin: 0;
 }
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-moneywidget .onyx-input-decorator input {
-  width: 100%;
+.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-combobox .onyx-input-decorator input {
+  width: 76%;
   font-size: 13px;
 }
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget .onyx-input-decorator {
-  width: 100%;
-  padding-top: 6px;
-}
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget .onyx-input {
-  width: 85%;
-  padding-right: 4px;
-}
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-useraccount-widget .xv-subinput {
+.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-useraccount-widget .xv-input {
   width: 80px;
   height: 16px;
 }
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-subinput {
-  width: 100%;
-}
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-input {
-  padding-top: 6px;
-  width: 100%;
-  border: none;
-}
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-label,
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-flexible-label,
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget-secondarydescription {
-  display: none;
-}
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget-description {
-  margin: 0;
-  margin-top: 5px;
-}
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-private-item-site-widget {
-  border-bottom: 0;
-}
 .xv-grid-box.xv-groupbox .xv-sales-summary-panel {
   border: none;
   margin-top: 0;
@@ -2750,7 +2925,8 @@ body {
   color: #777777;
 }
 .xv-list-attr.hyperlink {
-  color: blue;
+  color: #357ec7;
+  cursor: pointer;
 }
 .xv-list-attr.disabled {
   color: #777777;
@@ -2827,6 +3003,9 @@ body {
   background: #f8f8f8;
   text-overflow: ellipsis;
   border: 1px solid #d7d7d7;
+  /**
+        Styles relating to workspace widgets
+      */
   width: 100%;
   margin: 0 4px 6px 0;
 }
@@ -2851,139 +3030,139 @@ body {
 .xv-pullout .xv-parameter-panel .xv-label,
 .xv-pullout .xv-parameter-panel .xv-decorated-label,
 .xv-pullout .xv-parameter-panel .xv-flexible-label {
-  width: 120px !important;
+  width: 120px;
   max-width: 100%;
-  padding: 0 8px 0 6px;
   text-align: right;
+  padding: 0 8px 0 6px;
   vertical-align: middle;
 }
+.xv-pullout .xv-parameter-panel .xv-label.disabled,
+.xv-pullout .xv-parameter-panel .xv-decorated-label.disabled,
+.xv-pullout .xv-parameter-panel .xv-flexible-label.disabled {
+  color: #777777;
+}
 .xv-pullout .xv-parameter-panel.xv-assignment-box .xv-flexible-label,
 .xv-pullout .xv-parameter-panel.xv-assignment-box .xv-label {
   width: 200px !important;
 }
 .xv-pullout .xv-parameter-panel .xv-input {
-  border-bottom: 1px solid #d7d7d7;
-  margin: 0px;
+  padding: 4px 0;
+  border-bottom: 1px solid rgba(215, 215, 215, 0.5);
 }
-.xv-pullout .xv-parameter-panel .enyo-fittable-columns-layout > * {
-  vertical-align: middle;
+.xv-pullout .xv-parameter-panel .xv-input .enyo-tool-decorator {
+  max-width: 180px;
+  text-align: left;
 }
-.xv-pullout .xv-parameter-panel .xv-buttons {
-  text-align: center;
+.xv-pullout .xv-parameter-panel .xv-input .enyo-tool-decorator .onyx-icon {
+  display: inline-block;
+  width: 16px;
+  cursor: pointer;
 }
-.xv-pullout .xv-parameter-panel .xv-filter-form .xv-list {
-  height: 150px;
+.xv-pullout .xv-parameter-panel .xv-input.xv-textarea {
+  padding: 0;
+  margin: 8px;
 }
-.xv-pullout .help-panel {
-  border: none;
-  height: 100%;
-  width: 100%;
+.xv-pullout .xv-parameter-panel .xv-input.xv-textarea .enyo-tool-decorator {
+  max-width: 320px;
 }
-.xv-pullout .history-panel .xv-list-item {
-  padding: 12px 10px;
-  color: #0e0e0e;
-  background-color: #fdfdfd;
-  border-bottom: 1px solid #d7d7d7;
+.xv-pullout .xv-parameter-panel .xv-input input {
+  width: 164px;
 }
-.xv-pullout .history-panel .xv-list-item.onyx-selected {
-  background-color: #357ec7;
-  color: #fdfdfd;
-  border-bottom: 2px solid #d8d8d8;
+.xv-pullout .xv-parameter-panel .xv-input .xv-icon-decorator input {
+  width: 140px;
 }
-/**
-  Styles relating to misc widgets
-*/
-.onyx-input-decorator {
-  border: 0;
+.xv-pullout .xv-parameter-panel .xv-input .xv-icon-decorator .onyx-icon {
+  padding: 4px;
 }
-.onyx-input-decorator input {
-  width: 150px;
+.xv-pullout .xv-parameter-panel .xv-input .onyx-picker-decorator {
+  padding: 0;
 }
-.xv-relationwidget input,
-.xv-datewidget input {
-  width: 135px;
+.xv-pullout .xv-parameter-panel .xv-relationwidget .xv-description {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  max-width: 250px;
+  margin: 5px 5px 5px 80px;
+  font-size: 0.9em;
 }
-.xv-numberwidget input {
-  text-align: right;
-  width: 150px;
+.xv-pullout .xv-parameter-panel .xv-relationwidget .xv-description.disabled {
+  color: #777777;
 }
-.xv-moneywidget {
-  padding-top: 6px;
-  padding-bottom: 2px;
+.xv-pullout .xv-parameter-panel .xv-spinnerwidget .xv-icon-decorator .onyx-icon {
+  display: block;
+  border: none;
+  font-size: 20px;
+  width: 20px;
+  padding: 0 4px 0 4px;
 }
-.xv-moneywidget .onyx-input-decorator {
-  font-family: "Lucida Sans Unicode", "Lucida Grande", arial, sans-serif;
-  margin-right: 5px;
+.xv-pullout .xv-parameter-panel .xv-spinnerwidget .xv-icon-decorator input {
+  width: 136px;
 }
-.xv-moneywidget .onyx-input-decorator input,
-.xv-moneywidget .onyx-input-decorator .xv-money-label {
-  width: 85px;
+.xv-pullout .xv-parameter-panel .xv-spinnerwidget .slider {
+  margin: 15px 10px;
+}
+.xv-pullout .xv-parameter-panel .xv-numberwidget input {
   text-align: right;
 }
-.xv-moneywidget .onyx-input-decorator.xv-currency-label {
-  width: 65px;
+.xv-pullout .xv-parameter-panel .xv-moneywidget .enyo-tool-decorator {
+  min-width: 90px;
+  max-width: 90px;
+}
+.xv-pullout .xv-parameter-panel .xv-moneywidget .enyo-tool-decorator input {
+  width: 90px;
+}
+.xv-pullout .xv-parameter-panel .xv-currency-picker {
+  display: inline-block;
 }
-.xv-moneywidget .xv-picker-button {
-  width: 65px;
+.xv-pullout .xv-parameter-panel .xv-currency-picker .enyo-tool-decorator {
+  min-width: 65px;
+  max-width: 65px;
   padding: 10px 4px;
 }
-.spinner .enyo-fittable-columns-layout > * {
-  vertical-align: middle;
+.xv-pullout .xv-parameter-panel .xv-currency-picker .enyo-tool-decorator .xv-button-text {
+  width: 45px;
 }
-.spinner .buttons {
-  display: block;
-  padding: 0;
-  margin: 1px 0 1px 10px;
-  width: 20px;
-  height: 20px;
-  background: transparent;
-  color: #357ec7;
-  font-size: 20px;
-  border: none;
+.xv-pullout .xv-parameter-panel .xv-characteristics-widget .xv-characteristic-item {
+  border-bottom: 1px solid #d7d7d7;
 }
-.spinner .slider {
-  margin: 15px 10px;
+.xv-pullout .xv-parameter-panel .xv-characteristics-widget .xv-characteristic-item .xv-input {
+  border: none;
 }
-.spinner.xv-numberwidget input {
-  width: 120px;
+.xv-pullout .xv-parameter-panel .xv-characteristics-widget .xv-characteristic-item .xv-input input {
+  width: 135px;
 }
-.xv-dependency-picker .onyx-picker-decorator .onyx-button {
-  width: 280px;
-  margin-left: 6px;
+.xv-pullout .xv-parameter-panel .xv-characteristics-widget .xv-characteristic-button {
+  text-align: center;
 }
-.xv-dependency-button {
-  color: #357ec7;
-  font-size: 24px;
-  border: none;
-  background: transparent;
+.xv-pullout .xv-parameter-panel .enyo-fittable-columns-layout > * {
+  vertical-align: middle;
 }
-/**
-  Characteristics
-*/
-.xv-characteristic-picker {
+.xv-pullout .xv-parameter-panel .xv-input .onyx-input-decorator,
+.xv-pullout .xv-parameter-panel .xv-pickerwidget .onyx-input-decorator {
   border: none;
 }
-.xv-characteristic-picker .onyx-picker-decorator .onyx-button {
-  width: 130px;
-}
-.xv-characteristic-item {
-  border-bottom: 1px solid #d7d7d7;
+.xv-pullout .xv-parameter-panel .xv-buttons {
+  text-align: center;
 }
-.xv-characteristic-item .onyx-input-decorator > input {
-  width: 115px;
-  margin-top: 10px;
-  margin-bottom: 10px;
+.xv-pullout .xv-parameter-panel .xv-filter-form .xv-list {
+  height: 150px;
 }
-.xv-characteristic-item > .xv-input {
+.xv-pullout .help-panel {
   border: none;
+  height: 100%;
+  width: 100%;
 }
-.xv-characteristic-buttons {
-  margin: 8px;
+.xv-pullout .history-panel .xv-list-item {
+  padding: 12px 10px;
+  color: #0e0e0e;
+  background-color: #fdfdfd;
+  border-bottom: 1px solid #d7d7d7;
 }
-.xv-characteristic-button {
-  margin-left: 4px;
-  color: #357ec7;
-  font-size: 24px;
+.xv-pullout .history-panel .xv-list-item.onyx-selected {
+  background-color: #357ec7;
+  color: #fdfdfd;
+  border-bottom: 2px solid #d8d8d8;
 }
 /**
   Styles relating to RelationWidgets
@@ -2995,38 +3174,12 @@ body {
 .xv-completer-sidecar {
   color: #93a1a1;
 }
-.xv-relationwidget-column.left {
-  padding-right: 18px;
-  color: #070707;
-  width: 140px;
-}
 .xv-relationwidget-icon {
   top: 1px;
   left: 8px;
   height: 30px;
   position: relative;
 }
-.xv-relationwidget-description {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  max-width: 250px;
-  margin: 5px 5px 5px 80px;
-}
-.xv-relationwidget-description.disabled {
-  color: #777777;
-}
-.xv-relationwidget-description.label {
-  text-indent: 0;
-  text-align: right;
-}
-.xv-relationwidget-description.hasLabel {
-  text-indent: 0;
-}
-.xv-relationwidget-description.hyperlink {
-  color: blue;
-}
 .xv-private-item-site-widget {
   border-bottom-color: #aaaaaa;
   border-bottom-width: 1px;
@@ -3061,9 +3214,6 @@ body {
   font-style: italic;
   color: #93a1a1;
 }
-.xv-addresswidget .xv-addresswidget-viewer.hyperlink {
-  color: #0000ff;
-}
 .xv-addresswidget .xv-addresswidget-viewer.disabled {
   color: #777777;
 }
@@ -3135,6 +3285,9 @@ body {
   background: #f8f8f8;
   text-overflow: ellipsis;
   border: 1px solid #d7d7d7;
+  /**
+        Styles relating to workspace widgets
+      */
   width: 100%;
   margin: 0 4px 6px 0;
 }
@@ -3159,23 +3312,118 @@ body {
 .xv-search .xv-search-container .xv-label,
 .xv-search .xv-search-container .xv-decorated-label,
 .xv-search .xv-search-container .xv-flexible-label {
-  width: 120px !important;
+  width: 120px;
   max-width: 100%;
-  padding: 0 8px 0 6px;
   text-align: right;
+  padding: 0 8px 0 6px;
   vertical-align: middle;
 }
+.xv-search .xv-search-container .xv-label.disabled,
+.xv-search .xv-search-container .xv-decorated-label.disabled,
+.xv-search .xv-search-container .xv-flexible-label.disabled {
+  color: #777777;
+}
 .xv-search .xv-search-container.xv-assignment-box .xv-flexible-label,
 .xv-search .xv-search-container.xv-assignment-box .xv-label {
   width: 200px !important;
 }
 .xv-search .xv-search-container .xv-input {
+  padding: 4px 0;
+  border-bottom: 1px solid rgba(215, 215, 215, 0.5);
+}
+.xv-search .xv-search-container .xv-input .enyo-tool-decorator {
+  max-width: 180px;
+  text-align: left;
+}
+.xv-search .xv-search-container .xv-input .enyo-tool-decorator .onyx-icon {
+  display: inline-block;
+  width: 16px;
+  cursor: pointer;
+}
+.xv-search .xv-search-container .xv-input.xv-textarea {
+  padding: 0;
+  margin: 8px;
+}
+.xv-search .xv-search-container .xv-input.xv-textarea .enyo-tool-decorator {
+  max-width: 320px;
+}
+.xv-search .xv-search-container .xv-input input {
+  width: 164px;
+}
+.xv-search .xv-search-container .xv-input .xv-icon-decorator input {
+  width: 140px;
+}
+.xv-search .xv-search-container .xv-input .xv-icon-decorator .onyx-icon {
+  padding: 4px;
+}
+.xv-search .xv-search-container .xv-input .onyx-picker-decorator {
+  padding: 0;
+}
+.xv-search .xv-search-container .xv-relationwidget .xv-description {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  max-width: 250px;
+  margin: 5px 5px 5px 80px;
+  font-size: 0.9em;
+}
+.xv-search .xv-search-container .xv-relationwidget .xv-description.disabled {
+  color: #777777;
+}
+.xv-search .xv-search-container .xv-spinnerwidget .xv-icon-decorator .onyx-icon {
+  display: block;
+  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-numberwidget input {
+  text-align: right;
+}
+.xv-search .xv-search-container .xv-moneywidget .enyo-tool-decorator {
+  min-width: 90px;
+  max-width: 90px;
+}
+.xv-search .xv-search-container .xv-moneywidget .enyo-tool-decorator input {
+  width: 90px;
+}
+.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 .xv-characteristics-widget .xv-characteristic-item {
   border-bottom: 1px solid #d7d7d7;
-  margin: 0px;
+}
+.xv-search .xv-search-container .xv-characteristics-widget .xv-characteristic-item .xv-input {
+  border: none;
+}
+.xv-search .xv-search-container .xv-characteristics-widget .xv-characteristic-item .xv-input input {
+  width: 135px;
+}
+.xv-search .xv-search-container .xv-characteristics-widget .xv-characteristic-button {
+  text-align: center;
 }
 .xv-search .xv-search-container .enyo-fittable-columns-layout > * {
   vertical-align: middle;
 }
+.xv-search .xv-search-container .xv-input .onyx-input-decorator,
+.xv-search .xv-search-container .xv-pickerwidget .onyx-input-decorator {
+  border: none;
+}
 .xv-search .xv-search-container .xv-buttons {
   text-align: center;
 }
index 84be7c4..fd2ae2c 100644 (file)
@@ -19,7 +19,6 @@ white:true*/
     /** @lends XV.CharacteristicPicker# */{
     name: "XV.CharacteristicPicker",
     kind: "XV.PickerWidget",
-    classes: "xv-characteristic-picker",
     collection: "XM.characteristics",
     noneText: "_delete".loc(),
     noneClasses: "xv-negative",
@@ -147,7 +146,7 @@ white:true*/
    */
   enyo.kind(/** @lends XV.CharacteristicItem# */{
     name: "XV.CharacteristicItem",
-    kind: "FittableColumns",
+    kind: "enyo.Control",
     classes: "xv-characteristic-item",
     published: {
       value: null,
@@ -157,13 +156,15 @@ white:true*/
       onValueChange: "controlValueChanged"
     },
     components: [
-      {kind: "XV.CharacteristicPicker", attr: "characteristic",
-        showLabel: false},
-      {kind: "XV.InputWidget", attr: "value", showLabel: false},
-      {kind: "XV.DateWidget", attr: "value", showLabel: false,
-        showing: false},
-      {kind: "XV.OptionsPicker", attr: "value", showLabel: false,
-        showing: false}
+      {controlClasses: 'enyo-inline', components: [
+        {kind: "XV.CharacteristicPicker", attr: "characteristic",
+          showLabel: false},
+        {kind: "XV.InputWidget", attr: "value", showLabel: false},
+        {kind: "XV.DateWidget", attr: "value", showLabel: false,
+          showing: false},
+        {kind: "XV.OptionsPicker", attr: "value", showLabel: false,
+          showing: false}
+      ]}
     ],
     disabledChanged: function (oldValue) {
       this.$.characteristicPicker.setDisabled(this.disabled);
@@ -175,8 +176,8 @@ white:true*/
      @todo Document the controlValueChanged method.
      */
     controlValueChanged: function (inSender, inEvent) {
-      var attr = inSender.getAttr(),
-        value = inSender.getValue(),
+      var attr = inEvent.originator.getAttr(),
+        value = inEvent.originator.getValue(),
         attributes = {},
         model = this.getValue(),
         characteristic,
@@ -266,18 +267,17 @@ white:true*/
       // note: which is now being kept track of in the model, and maybe should
       // only be kept track of in the model.
       which: null,
-      disabled: false
+      disabled: false,
+      showLabel: false,
     },
     components: [
       {kind: "onyx.GroupboxHeader", content: "_characteristics".loc()},
       {kind: "Repeater", count: 0, onSetupItem: "setupItem", components: [
         {kind: "XV.CharacteristicItem"}
       ]},
-      {kind: "FittableColumns", classes: "xv-characteristic-buttons",
-        components: [
+      {controlClasses: 'enyo-inline', classes: "xv-buttons", components: [
         {kind: "onyx.Button", name: "newButton",
-          classes: "icon-plus xv-characteristic-button",
-          onclick: "newItem"}
+          classes: "icon-plus xv-characteristic-button", onclick: "newItem"}
       ]}
     ],
     disabledChanged: function () {
@@ -383,7 +383,7 @@ white:true*/
       this.value.comparator = this.sort;
       this.value.sort();
       this.lengthChanged();
-    }
+    },
   });
 
 }());
index 27418ce..15f3e83 100644 (file)
@@ -4,52 +4,6 @@ regexp:true, undef:true, trailing:true, white:true */
 
 (function () {
 
-  /**
-    @name XV.Checkbox
-    @class An input control that shows or hides a checkmark when clicked.</br >
-    To implement a checkbox, see {@link XV.CheckboxWidget}.<br />
-    Derived from <a href="http://enyojs.com/api/#onyx.Checkbox">onyx.Checkbox</a>.
-    @extends onyx.Checkbox
-   */
-  enyo.kind(
-    /** @lends XV.Checkbox# */{
-    name: "XV.Checkbox",
-    kind: "onyx.Checkbox",
-    published: {
-      attr: null
-    },
-    events: {
-      onValueChange: ""
-    },
-    handlers: {
-      onchange: "changed"
-    },
-    /**
-    @todo Document the clear method.
-    */
-    clear: function (options) {
-      this.setValue(false, options);
-    },
-    /**
-    @todo Document the setValue method.
-    */
-    setValue: function (value, options) {
-      options = options || {};
-      this._silent = options.silent;
-      this.inherited(arguments);
-      this._silent = false;
-    },
-    /**
-    @todo Document the changed method.
-    */
-    changed: function (inSender, inEvent) {
-      if (!this._silent) {
-        inEvent.value = this.getValue();
-        this.doValueChange(inEvent);
-      }
-    }
-  });
-
   /**
     @name XV.CheckboxWidget
     @class An input control consisting of fittable columns:
@@ -58,18 +12,14 @@ regexp:true, undef:true, trailing:true, white:true */
       which is made up of a checkbox input control and its label.
     @extends XV.Input
    */
-  enyo.kind(/** @lends XV.CheckboxWidget# */{
+  enyo.kind({
     name: "XV.CheckboxWidget",
-    kind: "XV.Input",
-    classes: "xv-input xv-checkboxwidget",
-    published: {
-      label: ""
-    },
+    kind: "XV.InputWidget",
+    classes: "xv-checkboxwidget",
     components: [
-      {kind: "FittableColumns", components: [
-        {name: "label", content: "", classes: "xv-label"},
-        {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
-          components: [
+      {controlClasses: 'enyo-inline', components: [
+        {name: "label", classes: "xv-label"},
+        {kind: "onyx.InputDecorator", components: [
           {name: "input", kind: "onyx.Checkbox", onchange: "inputChanged"}
         ]}
       ]}
@@ -80,32 +30,12 @@ regexp:true, undef:true, trailing:true, white:true */
     clear: function (options) {
       this.setValue(false, options);
     },
-    /**
-    @todo Document the create method.
-    */
-    create: function () {
-      this.inherited(arguments);
-      this.labelChanged();
-    },
-    disabledChanged: function () {
-      this.inherited(arguments);
-      this.$.label.addRemoveClass("disabled", this.getDisabled());
-    },
-    /**
-    @todo Document the inputChanged method.
-    */
+
     inputChanged: function (inSender, inEvent) {
       var input = this.$.input.getValue();
       this.setValue(input);
     },
     /**
-    @todo Document the labelChanged method.
-    */
-    labelChanged: function () {
-      var label = (this.getLabel() || ("_" + this.attr || "").loc()) + ":";
-      this.$.label.setContent(label);
-    },
-    /**
     @todo Document the valueChanged method.
     */
     valueChanged: function (value) {
@@ -138,10 +68,9 @@ regexp:true, undef:true, trailing:true, white:true */
       onValueChange: ""
     },
     components: [
-      {kind: "FittableColumns", components: [
-        {name: "label", content: "", classes: "xv-label"},
-        {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
-          components: [
+      {controlClasses: 'enyo-inline', components: [
+        {name: "label", classes: "xv-label"},
+        {kind: "onyx.InputDecorator", components: [
           {name: "input", kind: "onyx.Checkbox", onchange: "inputChanged"}
         ]}
       ]}
index fc8edae..a20fd81 100644 (file)
@@ -14,14 +14,13 @@ regexp:true, undef:true, trailing:true, white:true, browser:true */
   enyo.kind(
     /** @lends XV.CheckboxWidget# */{
     name: "XV.ComboboxWidget",
-    kind: "XV.Input",
+    kind: "XV.InputWidget",
     published: {
+      attr: null,
       collection: "",
       filter: null,
       disabled: false,
       keyAttribute: "name",
-      label: "",
-      showLabel: true,
       tabStop: true
     },
     classes: "xv-combobox xv-input",
@@ -29,9 +28,9 @@ regexp:true, undef:true, trailing:true, white:true, browser:true */
       onValueChange: "controlValueChanged"
     },
     components: [
-      {kind: "FittableColumns", name: "fittableColumns", components: [
-        {name: "label", content: "", fit: true, classes: "xv-flexible-label"},
-        {kind: "onyx.InputDecorator", tag: "div", classes: "input-decorator", components: [
+      {controlClasses: 'enyo-inline', name: "container", components: [
+        {name: "label", classes: "xv-label"},
+        {kind: "onyx.InputDecorator", tag: "div", classes: "xv-icon-decorator", components: [
           {name: "input", kind: "onyx.Input", onkeyup: "keyUp", onkeydown: "keyDown",
             onblur: "receiveBlur", onchange: "inputChanged"},
           {kind: "onyx.IconButton", name: "iconButton", ontap: "toggleCompleter",
@@ -47,8 +46,6 @@ regexp:true, undef:true, trailing:true, white:true, browser:true */
       this.inherited(arguments);
       this.collectionChanged();
       this.filterChanged();
-      this.labelChanged();
-      this.showLabelChanged();
       this.tabStopChanged();
     },
     /**
@@ -117,7 +114,6 @@ regexp:true, undef:true, trailing:true, white:true, browser:true */
     setDisabled: function (isDisabled) {
       this.inherited(arguments);
       this.$.iconButton.setDisabled(isDisabled);
-      this.$.label.addRemoveClass("disabled", isDisabled);
     },
     /**
     @todo Document the keyDown method.
@@ -171,21 +167,11 @@ regexp:true, undef:true, trailing:true, white:true, browser:true */
       return models;
     },
     /**
-    @todo Document the labelChanged method.
-    */
-    labelChanged: function () {
-      var label = (this.getLabel() || ("_" + this.attr || "").loc()) + ":";
-      this.$.label.setContent(label);
-    },
-    /**
     @todo Document the receiveBlur method.
     */
     receiveBlur: function (inSender, inEvent) {
       this.autocomplete();
     },
-    showLabelChanged: function () {
-      this.$.label.setShowing(this.getShowLabel());
-    },
     tabStopChanged: function () {
       this.$.input.setAttribute("tabIndex", this.getTabStop() ? null: -1);
     },
index 13f35e7..74ec7c6 100644 (file)
@@ -5,7 +5,7 @@ regexp:true, undef:true, trailing:true, white:true */
 (function () {
 
   /**
-    @name XV.Date
+    @name XV.DateWidget
        @class An input control used to specify a date.<br />
        Reformats and sets a date entered either as a date type or a string.
        If a string is not a recognizable date, sets the input to null.<br />
@@ -13,13 +13,59 @@ regexp:true, undef:true, trailing:true, white:true */
        @extends XV.Input
    */
   enyo.kind(
-    /** @lends XV.Date# */{
-    name: "XV.Date",
-    kind: "XV.Input",
+    /** @lends XV.DateWidget# */{
+    name: "XV.DateWidget",
+    kind: "XV.InputWidget",
+    classes: "xv-input xv-datewidget",
     published: {
+      attr: null,
       nullValue: null,
       nullText: ""
     },
+    components: [
+      {controlClasses: 'enyo-inline', components: [
+        {name: "label", classes: "xv-label"},
+        {kind: "onyx.InputDecorator", name: "decorator", tag: "div",
+          classes: "xv-icon-decorator", components: [
+          {name: "input", kind: "onyx.Input", onchange: "inputChanged",
+            onkeydown: "keyDown"},
+          {name: "icon", kind: "onyx.Icon", ontap: "iconTapped",
+            classes: "icon-calendar"}
+        ]},
+        {name: "datePickPopup", kind: "onyx.Popup", maxHeight: 400, floating: true,
+            centered: true, modal: true, components: [
+          {kind: "GTS.DatePicker", name: "datePick", style: "min-width:400px;",
+            onChange: "datePicked"}
+        ]}
+      ]}
+    ],
+
+    /**
+     This function handles a date chosen via the
+     datepicker versus text entered into the input field.
+     */
+    datePicked: function (inSender, inEvent) {
+      var date = inEvent, options = {};
+      // mimic the human-typed behavior
+      this.applyTimezoneOffset(date);
+
+      options.silent = true;
+      this.setValue(date, options);
+      this.$.datePickPopup.hide();
+      this.$.input.focus();
+    },
+    disabledChanged: function () {
+      this.inherited(arguments);
+      this.$.label.addRemoveClass("disabled", this.getDisabled());
+    },
+    /**
+      This function handles the click of the calendar icon
+      that opens the datepicker.
+    */
+    iconTapped: function (inSender, inEvent) {
+      this.$.datePickPopup.show();
+      this.$.datePick.render();
+    },
     /**
      Returns the value in the input field of the widget.
      */
@@ -46,7 +92,7 @@ regexp:true, undef:true, trailing:true, white:true */
       } else {
         value = nullValue;
       }
-      XV.Input.prototype.setValue.call(this, value, options);
+      XV.InputWidget.prototype.setValue.call(this, value, options);
     },
     /**
      This function takes the value entered into a DateWidget and returns
@@ -153,107 +199,7 @@ regexp:true, undef:true, trailing:true, white:true */
       } else {
         value = "";
       }
-      return XV.Input.prototype.valueChanged.call(this, value);
-    }
-  });
 
-  /**
-    @name XV.DateWidget
-    @class An input control consisting of fittable columns.<br />
-    Use to implement a styled input field for entering a date
-    including associated popup menu for selecting a date.<br />
-    Creates an HTML input element.
-    @extends XV.Date
-   */
-  enyo.kind(/** @lends XV.DateWidget# */{
-    name: "XV.DateWidget",
-    kind: "XV.Date",
-    classes: "xv-input xv-datewidget",
-    published: {
-      label: "",
-      showLabel: true
-    },
-    components: [
-      {kind: "FittableColumns", components: [
-        {name: "label", content: "", fit: true, classes: "xv-flexible-label"},
-        // setting the tag to "div" on the decorator
-        // so that clicks of button don't get redirected back
-        // to the input field (default behavior)
-        {kind: "onyx.InputDecorator", name: "decorator", tag: "div",
-          classes: "xv-input-decorator", components: [
-          {name: "input", kind: "onyx.Input", onchange: "inputChanged",
-            classes: "xv-subinput", onkeydown: "keyDown"},
-          {name: "icon", kind: "onyx.Icon", ontap: "iconTapped",
-            classes: "icon-calendar"}
-        ]},
-        {name: "datePickPopup", kind: "onyx.Popup", maxHeight: 400, floating: true,
-            centered: true, modal: true, components: [
-          // TODO: get rid of this inline style
-          {kind: "GTS.DatePicker", name: "datePick", style: "min-width:400px;",
-            onChange: "datePicked"}
-        ]}
-      ]}
-    ],
-    /**
-     @todo Document create method.
-     */
-    create: function () {
-      this.inherited(arguments);
-      this.labelChanged();
-      this.showLabelChanged();
-    },
-
-    /**
-     This function handles a date chosen via the
-     datepicker versus text entered into the input field.
-     */
-    datePicked: function (inSender, inEvent) {
-      var date = inEvent, options = {};
-      // mimic the human-typed behavior
-      this.applyTimezoneOffset(date);
-
-      options.silent = true;
-      this.setValue(date, options);
-      this.$.datePickPopup.hide();
-      this.$.input.focus();
-    },
-    disabledChanged: function () {
-      this.inherited(arguments);
-      this.$.label.addRemoveClass("disabled", this.getDisabled());
-    },
-    /**
-      This function handles the click of the calendar icon
-      that opens the datepicker.
-    */
-    iconTapped: function (inSender, inEvent) {
-      this.$.datePickPopup.show();
-      this.$.datePick.render();
-    },
-    /**
-     Sets the label of the Date Widget with text specified in the kind.
-     */
-    labelChanged: function () {
-      var label = (this.getLabel() || ("_" + this.attr || "").loc()) + ":";
-      this.$.label.setContent(label);
-    },
-    /**
-     Sets the visibility of the label of the date widget based on
-     the value specified in the kind.
-     */
-    showLabelChanged: function () {
-      if (this.getShowLabel()) {
-        this.$.label.show();
-      } else {
-        this.$.label.hide();
-      }
-    },
-    /**
-     Set the date value into the input field and the date picker and
-     sets the value to the model.
-     */
-    valueChanged: function (value) {
-      var dateValue = value;
-      value = XV.Date.prototype.valueChanged.call(this, value);
       if (!this.$.input.value && this.$.input.attributes.value) {
         // XXX workaround for incident 19171. Something deep into enyo's
         // setters are causing the attributes value to be updated when
@@ -262,8 +208,11 @@ regexp:true, undef:true, trailing:true, white:true */
         // two-step of turning a inputted value into an actual date.
         this.$.input.attributes.value = "";
       }
-      this.$.datePick.setValue(value ? dateValue : new Date());
+
+      this.$.datePick.setValue(value ? value : new Date());
       this.$.datePick.render();
+
+      return XV.InputWidget.prototype.valueChanged.call(this, value);
     }
   });
 
index a67f0e2..d785be8 100644 (file)
@@ -14,7 +14,9 @@ regexp:true, undef:true, trailing:true, white:true */
   enyo.kind(
     /** @lends XV.FileInput# */{
     name: "XV.FileInput",
-    kind: "XV.Input",
+    kind: "XV.InputWidget",
+    showLabel: false,
+    type: "file",
     events: {
       onValueChange: "",
       onNotify: ""
@@ -23,7 +25,8 @@ regexp:true, undef:true, trailing:true, white:true */
       onValueChange: "valueChange"
     },
     components: [
-      {name: "input", tag: "input type=file", kind: "onyx.Input",  classes: "xv-subinput", onchange: "inputChanged"},
+      {name: "label", fit: true, classes: "xv-label"},
+      {name: "input", kind: "onyx.Input", onchange: "inputChanged"},
       {name: "scrim", kind: "onyx.Scrim", showing: false, floating: true}
     ],
 
index c388028..9641d60 100644 (file)
@@ -5,7 +5,7 @@ regexp:true, undef:true, trailing:true, white:true */
 (function () {
 
   /**
-    @name XV.Input
+    @name XV.InputWidget
     @class Maintains a consistent API to be used by workspaces.<br />
     The superkind from which other xTuple input objects are derived.<br />
     To create an input field for strings, see {@link XV.InputWidget}.<br />
@@ -17,15 +17,18 @@ regexp:true, undef:true, trailing:true, white:true */
     To create a togglebutton, see {@link XV.TogglebuttonWidget}.<br />
    */
   enyo.kind(
-    /** @lends XV.Input# */{
-    name: "XV.Input",
+    /** @lends XV.InputWidget# */{
+    name: "XV.InputWidget",
+    classes: "xv-input",
     published: {
       attr: null,
       value: null,
       disabled: false,
       placeholder: null,
       type: null,
-      maxlength: null
+      maxlength: null,
+      label: "",
+      showLabel: true
     },
     events: {
       "onValueChange": ""
@@ -34,32 +37,37 @@ regexp:true, undef:true, trailing:true, white:true */
       onblur: "receiveBlur"
     },
     components: [
-      {name: "input", kind: "onyx.Input", classes: "xv-subinput", onchange: "inputChanged", onkeydown: "keyDown"}
+      {controlClasses: 'enyo-inline', components: [
+        {name: "label", classes: "xv-label"},
+        {kind: "onyx.InputDecorator", components: [
+          {name: "input", kind: "onyx.Input", onchange: "inputChanged", onkeydown: "keyDown"}
+        ]}
+      ]}
     ],
-    /**
-      Sets the value of the input to an empty string
-    */
-    clear: function (options) {
-      this.setValue("", options);
-    },
-    /**
-    @todo Document the create method.
-    */
     create: function () {
       this.inherited(arguments);
       this.placeholderChanged();
       this.disabledChanged();
       this.typeChanged();
       this.maxlengthChanged();
+      this.labelChanged();
+      this.showLabelChanged();
+    },
+    /**
+      Sets the value of the input to an empty string
+    */
+    clear: function (options) {
+      this.setValue("", options);
     },
     /**
      The disabledChanged method, and many below it, are here to deal with
-     the fact that XV.Input doesvnot inherit from onyx.input or enyo.input,
+     the fact that XV.Input does not inherit from onyx.input or enyo.input,
      and so insofar as it needs to support their APIs, we
      have to redeclare the methods and pass through the data.
     */
     disabledChanged: function () {
       this.$.input.setDisabled(this.getDisabled());
+      this.$.label.addRemoveClass("disabled", this.getDisabled());
     },
     focus: function () {
       this.$.input.focus();
@@ -100,11 +108,12 @@ regexp:true, undef:true, trailing:true, white:true */
       }
     },
     /**
-    @todo Document the placeholderChanged method.
+      Sets the placeholder on the input field.
     */
     placeholderChanged: function () {
-      var placeholder = this.getPlaceholder();
-      this.$.input.setPlaceholder(placeholder);
+      if (_.isFunction(this.$.input.setPlaceholder)) {
+        this.$.input.setPlaceholder(this.placeholder);
+      }
     },
     /**
       Webkit browsers do not always emit the proper change event,
@@ -153,65 +162,17 @@ regexp:true, undef:true, trailing:true, white:true */
       return value;
     },
     /**
-      Pass through attributes intended for onyx input inside.
-    */
-    setInputStyle: function (style) {
-      this.$.input.setStyle(style);
-    },
-    /**
-      Pass through attributes intended for onyx input inside.
+      Sets the type attribute for input field.
     */
     typeChanged: function () {
       this.$.input.setType(this.getType());
     },
 
-    maxlengthChanged: function () {
-      this.$.input.setAttribute("maxlength", this.maxlength);
-    }
-  });
-
-  /**
-    @name XV.InputWidget
-    @class An input control consisting of fittable columns:
-      a styled label and an onyx.Input placed inside an onyx.InputDecorator,
-      which provides styling.<br />
-    Any controls in the InputDecorator appear to be inside an area styled as an input.<br />
-    Use to implement a styled input field for strings.<br />
-    Creates an HTML input element.
-    @extends XV.Input
-   */
-  enyo.kind(/** @lends XV.InputWidget# */{
-    name: "XV.InputWidget",
-    kind: "XV.Input",
-    classes: "xv-input",
-    published: {
-      label: "",
-      showLabel: true
-    },
-    components: [
-      {kind: "FittableColumns", components: [
-        {name: "label", content: "", fit: true, classes: "xv-flexible-label"},
-        {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
-          components: [
-          {name: "input", kind: "onyx.Input", classes: "xv-subinput",
-            onchange: "inputChanged", onkeydown: "keyDown"}
-        ]}
-      ]}
-    ],
     /**
-    @todo Document the create method.
+      Set the maxlength attribute on the input field.
     */
-    create: function () {
-      this.inherited(arguments);
-      this.labelChanged();
-      this.placeholderChanged();
-      this.showLabelChanged();
-    },
-
-    disabledChanged: function () {
-      this.inherited(arguments);
-      var disabled = this.getDisabled();
-      this.$.label.addRemoveClass("disabled", disabled);
+    maxlengthChanged: function () {
+      this.$.input.setAttribute("maxlength", this.maxlength);
     },
 
     /**
@@ -223,14 +184,11 @@ regexp:true, undef:true, trailing:true, white:true */
     },
 
     /**
-    @todo Document the showLabelChanged method.
+      Sets visibility of the widget label.
     */
     showLabelChanged: function () {
-      if (this.getShowLabel()) {
-        this.$.label.show();
-      } else {
-        this.$.label.hide();
-      }
+      this.$.label.setShowing(this.getShowLabel());
     }
   });
+
 }());
index 37e00be..71dd003 100644 (file)
@@ -12,11 +12,16 @@ regexp:true, undef:true, trailing:true, white:true */
    */
   enyo.kind(
     /** @lends XV.Number# */{
-    name: "XV.Number",
-    kind: "XV.Input",
+    name: "XV.NumberWidget",
+    kind: "XV.InputWidget",
+    classes: "xv-numberwidget xv-input",
     published: {
+      attr: null,
       scale: 0,
-      formatting: true
+      formatting: true,
+      type: "number",
+      label: "",
+      showLabel: true
     },
     /**
     @todo Document the setValue method.
@@ -25,7 +30,7 @@ regexp:true, undef:true, trailing:true, white:true */
       // use isNaN here because this value could be a number String, 0 value, or null
       // only want to set value as null in cases of bad strings and null/undefined
       value = value !== null && !isNaN(value) ? XT.math.round(value, this.getScale()) : null;
-      XV.Input.prototype.setValue.call(this, value, options);
+      XV.InputWidget.prototype.setValue.call(this, value, options);
     },
     /**
       Determines whether the user input is numeric.
@@ -56,63 +61,7 @@ regexp:true, undef:true, trailing:true, white:true */
       } else {
         value = "";
       }
-      return XV.Input.prototype.valueChanged.call(this, value);
-    }
-  });
-
-  /**
-    @name XV.NumberWidget
-    @class An input control consisting of fittable columns: label, decorator, and input field.<br />
-    Use to implement an input field for strings that represents a number, such as prices.  This widget
-    includes a style to right-justify the text entered into the input field.
-    @extends XV.Number
-   */
-  enyo.kind(/** @lends XV.NumberWidget# */{
-    name: "XV.NumberWidget",
-    kind: "XV.Number",
-    classes: "xv-numberwidget xv-input",
-    published: {
-      label: "",
-      showLabel: true,
-      placeholder: ""
-    },
-    components: [
-      {kind: "FittableColumns", components: [
-        {name: "label", content: "", fit: true, classes: "xv-flexible-label"},
-        {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
-          components: [
-          {name: "input", kind: "onyx.Input", onchange: "inputChanged", onkeydown: "keyDown", type: "number"}
-        ]}
-      ]}
-    ],
-    /**
-     @todo Document the create method.
-     */
-    create: function () {
-      this.inherited(arguments);
-      this.labelChanged();
-      this.showLabelChanged();
-    },
-    disabledChanged: function () {
-      this.inherited(arguments);
-      this.$.label.addRemoveClass("disabled", this.getDisabled());
-    },
-    /**
-     @todo Document the labelChanged method.
-     */
-    labelChanged: function () {
-      var label = (this.getLabel() || ("_" + this.attr + "").loc()) + ":";
-      this.$.label.setContent(label);
-    },
-    /**
-     @todo Document the showLabelChanged method.
-     */
-    showLabelChanged: function () {
-      if (this.getShowLabel()) {
-        this.$.label.show();
-      } else {
-        this.$.label.hide();
-      }
+      return XV.InputWidget.prototype.valueChanged.call(this, value);
     }
   });
 
index f1a88df..c5af7e0 100644 (file)
@@ -19,28 +19,23 @@ regexp:true, undef:true, trailing:true, white:true */
       showSlider: false,
       maxValue: 100,
       label: "",
-      showLabel: true
+      showLabel: true,
+      type: "text"
     },
-    classes: "spinner",
+    classes: "xv-spinnerwidget",
     components: [
-      {kind: "FittableColumns", components: [
-        {kind: "FittableRows", components: [
-          {name: "label", classes: "xv-label"}
-        ]},
-        {kind: "FittableRows", fit: true, components: [
+      {controlClasses: 'enyo-inline', components: [
+        {name: "label", classes: "xv-label"},
+        {controlClasses: 'enyo-inline', components: [
           {kind: "onyx.Slider", name: "slider", onChange: "sliderChanged", classes: "slider"},
-          {kind: "onyx.InputDecorator", tag: "div", classes: "input-decorator", components: [
-            {name: "input", kind: "onyx.Input", classes: "xv-subinput",
+          {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", ontap: "increase",
+                attributes: {tabIndex: "-1"}, classes: "icon-angle-up"},
+              {kind: "onyx.IconButton", ontap: "decrease",
+                attributes: {tabIndex: "-1"}, classes: "icon-angle-down"}
             ]}
           ]}
         ]}
@@ -48,9 +43,7 @@ regexp:true, undef:true, trailing:true, white:true */
     ],
     create: function () {
       this.inherited(arguments);
-      this.labelChanged();
       this.showSliderChanged();
-      this.showLabelChanged();
     },
     /**
       Decreases the value of the input field by an increment of
index 720976d..5efc2e0 100644 (file)
@@ -31,7 +31,7 @@ white:true*/
       onValueChange: "parameterChanged"
     },
     components: [
-      {name: "input", classes: "xv-parameter-item-input"}
+      {name: "input"}
     ],
     defaultKind: "XV.InputWidget",
     /**
@@ -42,7 +42,7 @@ white:true*/
       this.labelChanged();
       if (!this.getOperator() && this.defaultKind === "XV.InputWidget") {
         this.setOperator("MATCHES");
-      } else if (this.$.input instanceof XV.Picker) {
+      } else if (this.$.input instanceof XV.PickerWidget) {
         this.$.input.setNoneText("_any".loc());
       }
     },
index 05944d2..0473cd3 100644 (file)
@@ -19,9 +19,9 @@ regexp:true, undef:true, trailing:true, white:true, strict:false */
    */
   enyo.kind(
     /** @lends XV.PickerWidget# */{
-    name: "XV.Picker",
+    name: "XV.PickerWidget",
     kind: "enyo.Control",
-    classes: "xv-input",
+    classes: "xv-pickerwidget",
     events: /** @lends XV.PickerWidget# */{
       /**
         @property {Object} inEvent The payload that's attached to bubbled-up events
@@ -41,16 +41,22 @@ regexp:true, undef:true, trailing:true, white:true, strict:false */
       noneClasses: "",
       showNone: true,
       prerender: true,
-      defaultValue: null
+      defaultValue: null,
+      showLabel: true,
+      label: ""
     },
     handlers: {
       onSelect: "itemSelected"
     },
     components: [
-      {kind: "onyx.PickerDecorator",
-        components: [
-        {kind: "XV.PickerButton", name: "pickerButton", content: "_none".loc(), onkeyup: "keyUp"},
-        {name: "picker", kind: "onyx.Picker"}
+      {controlClasses: 'enyo-inline', components: [
+        {name: "label", classes: "xv-label"},
+        {kind: "onyx.InputDecorator", name: "inputWrapper", components: [
+          {kind: "onyx.PickerDecorator", components: [
+            {kind: "XV.PickerButton", name: "pickerButton", content: "_none".loc(), onkeyup: "keyUp"},
+            {name: "picker", kind: "onyx.Picker"}
+          ]}
+        ]}
       ]}
     ],
     /**
@@ -155,6 +161,9 @@ regexp:true, undef:true, trailing:true, white:true, strict:false */
       if (defaultValue) {
         this.setValue(defaultValue, {silent: true});
       }
+
+      this.labelChanged();
+      this.showLabelChanged();
     },
     destroy: function () {
       if (this._collection && this._collection.off) {
@@ -401,44 +410,6 @@ regexp:true, undef:true, trailing:true, white:true, strict:false */
           }
         }
       }
-    }
-  });
-
-  /**
-    @name XV.PickerWidget
-    @class A picker control that implements a dropdown list of items which can be selected.<br />
-    Unlike the {@link XV.RelationWidget}, the collection is stored local to the widget.<br />
-    The superkind of {@link XV.CharacteristicPicker}.<br />
-    Derived from <a href="http://enyojs.com/api/#enyo.Control">enyo.Control</a>.
-    @extends enyo.Control
-   */
-  enyo.kind(/** @lends XV.PickerWidget# */{
-    name: "XV.PickerWidget",
-    kind: "XV.Picker",
-    published: {
-      label: "",
-      showLabel: true
-    },
-    components: [
-      {kind: "FittableColumns", components: [
-        {name: "label", content: "", classes: "xv-label"},
-        {kind: "onyx.InputDecorator", name: "inputWrapper", classes: "xv-input-decorator",
-          components: [
-          {kind: "onyx.PickerDecorator",
-            components: [
-            {kind: "XV.PickerButton", name: "pickerButton", content: "_none".loc(), onkeyup: "keyUp"},
-            {name: "picker", kind: "onyx.Picker"}
-          ]}
-        ]}
-      ]}
-    ],
-    /**
-     @todo Document the create method.
-     */
-    create: function () {
-      this.inherited(arguments);
-      this.labelChanged();
-      this.showLabelChanged();
     },
     /**
      @todo Document the labelChanged method.
index 455bd44..dba67a4 100644 (file)
@@ -14,7 +14,8 @@ regexp:true, undef:true, trailing:true, white:true, strict:false */
   enyo.kind(
     /** @lends XV.RelationWidget# */{
     name: "XV.RelationWidget",
-    kind: enyo.Control,
+    // TODO: needs to inherit from InputWidget
+    kind: "enyo.Control",
     classes: "xv-input xv-relationwidget",
     published: {
       attr: null,
@@ -22,7 +23,7 @@ regexp:true, undef:true, trailing:true, white:true, strict:false */
       placeholder: "",
       value: null,
       list: "",
-      collection: "",
+      collection: null,
       disabled: false,
       /**
         This can be a string or an array. If an array, all attributes
@@ -48,31 +49,30 @@ regexp:true, undef:true, trailing:true, white:true, strict:false */
       onSelect: "itemSelected"
     },
     components: [
-      {kind: "FittableColumns", components: [
-        {name: "label", content: "", fit: true, classes: "xv-flexible-label"},
-        // TODO: Put the InputDecorator and description in a FittableRows
-        {kind: "onyx.InputDecorator", name: "decorator",
-          classes: "xv-input-decorator", components: [
-          {name: 'input', kind: "onyx.Input", classes: "xv-subinput",
+      {controlClasses: 'enyo-inline', components: [
+        {name: "label", classes: "xv-label"},
+        {kind: "onyx.InputDecorator", name: "decorator", classes: "xv-icon-decorator", components: [
+          {name: "input", kind: "onyx.Input",
             onkeyup: "keyUp", onkeydown: "keyDown", onblur: "receiveBlur",
-            onfocus: "receiveFocus", fit: true
-          },
+            onfocus: "receiveFocus"},
           {kind: "onyx.MenuDecorator", components: [
             {kind: "onyx.IconButton", classes: "icon-folder-open-alt"},
-            {name: 'popupMenu', floating: true, kind: "onyx.Menu",
-              components: [
-              {kind: "XV.MenuItem", name: 'searchItem', content: "_search".loc()},
-              {kind: "XV.MenuItem", name: 'openItem', content: "_open".loc(),
-                disabled: true},
-              {kind: "XV.MenuItem", name: 'newItem', content: "_new".loc(),
-                disabled: true}
+            {kind: "onyx.Menu", name: 'popupMenu', floating: true, components: [
+              {kind: "XV.MenuItem", name: "searchItem", content: "_search".loc()},
+              {kind: "XV.MenuItem", name: "openItem", content: "_open".loc(), disabled: true},
+              {kind: "XV.MenuItem", name: "newItem", content: "_new".loc(), disabled: true}
             ]}
           ]},
           {name: "completer", kind: "XV.Completer"}
         ]}
       ]},
-      {name: "name", classes: "xv-relationwidget-description"},
-      {name: "description", classes: "xv-relationwidget-description xv-relationwidget-secondarydescription"}
+      {name: 'descriptionContainer', classes: 'xv-invisible-wrapper'}
+    ],
+    descriptionComponents: [
+      {controlClasses: 'enyo-inline', components: [
+        {name: "name", classes: "xv-description"},
+        {name: "description", classes: "xv-description"}
+      ]}
     ],
     /**
       Add a parameter to the query object on the widget. Parameter conventions should
@@ -144,6 +144,11 @@ regexp:true, undef:true, trailing:true, white:true, strict:false */
       this.listChanged();
       this.labelChanged();
       this.disabledChanged();
+
+      // create description components
+      _.each(this.descriptionComponents, function (component) {
+        this.$.descriptionContainer.createComponent(component, {owner: this});
+      }, this);
     },
     /**
      @todo Document the disabledChanged method.
@@ -153,9 +158,11 @@ regexp:true, undef:true, trailing:true, white:true, strict:false */
       this.$.input.setDisabled(disabled);
       this.$.searchItem.setDisabled(disabled);
       this.$.newItem.setDisabled(_couldNotCreate.apply(this) || disabled);
-      this.$.name.addRemoveClass("disabled", disabled);
-      this.$.description.addRemoveClass("disabled", disabled);
       this.$.label.addRemoveClass("disabled", disabled);
+
+      _.each(this.$.descriptionContainer.$, function (component) {
+        component.addRemoveClass("disabled", disabled);
+      }, this);
     },
     /**
       Query the database.
@@ -540,12 +547,11 @@ regexp:true, undef:true, trailing:true, white:true, strict:false */
         additionalValue = value.getValue(additional) || "";
       }
       this.$.input.setValue(keyValue);
+
       this.$.name.setShowing(nameValue);
       this.$.name.setContent(nameValue);
       this.$.description.setShowing(descripValue);
       this.$.description.setContent(descripValue);
-      //this.$.additionalInfo.setShowing(additionalValue);
-      //this.$.additionalInfo.setContent(additionalValue);
 
       // Only notify if selection actually changed
       if (newId !== oldId && !options.silent) { this.doValueChange(inEvent); }
index e4d25dd..6b664c7 100644 (file)
@@ -11,17 +11,18 @@ regexp:true, undef:true, trailing:true, white:true */
     Creates an HTML textarea element.<br />
     For example, used as a component of {@link XV.CommentBoxItem}.
     @extends XV.Input
-   */
+  */
   enyo.kind(
     /** @lends XV.TextArea# */{
     name: "XV.TextArea",
-    kind: "XV.Input",
+    kind: "XV.InputWidget",
     classes: "xv-textarea",
     published: {
       attr: null,
-      placeholder: ""
+      showLabel: false
     },
     components: [
+      {name: "label", classes: "xv-label"},
       {name: "input", kind: "onyx.TextArea", classes: "xv-textarea-input",
         onchange: "inputChanged", onkeydown: "keyDown"}
     ]
index e094c27..230b90e 100644 (file)
@@ -5,30 +5,32 @@ regexp:true, undef:true, trailing:true, white:true */
 (function () {
 
   /**
-    @name XV.ToggleButton
-    @class A control that looks like a switch with labels for two states.<br />
-    Derived from <a href="http://enyojs.com/api/#onyx.ToggleButton">onyx.ToggleButton</a>.
-    @extends onyx.ToggleButton
+    @name XV.ToggleButtonWidget
+    @class An input control consisting of fittable columns:
+     label, decorator, and toggle button.<br />
+    Use to implement a toggle button, a switch with labels for two states.<br />
+    Creates an HTML input element.
+    @extends XV.Input
    */
-  enyo.kind(
-    /** @lends XV.ToggleButton# */{
-    name: "XV.ToggleButton",
-    kind: "onyx.ToggleButton",
-    published: {
-      attr: null
-    },
+  enyo.kind({
+    name: "XV.ToggleButtonWidget",
+    kind: "XV.InputWidget",
+    classes: "xv-inputwidget xv-checkboxwidget",
     events: {
       onValueChange: ""
     },
     handlers: {
       onChange: "changed"
     },
-    /**
-     @todo Document the clear method.
-     */
-    clear: function (options) {
-      this.setValue(false, options);
-    },
+    components: [
+      {controlClasses: 'enyo-inline', components: [
+        {name: "label", content: "", classes: "xv-label"},
+        {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
+          components: [
+          {name: "input", kind: "onyx.ToggleButton", onChange: "inputChanged"}
+        ]}
+      ]}
+    ],
     /**
      @todo Document the setValue method.
      */
@@ -46,33 +48,7 @@ regexp:true, undef:true, trailing:true, white:true */
         inEvent.value = this.getValue();
         this.doValueChange(inEvent);
       }
-    }
-  });
-
-  /**
-    @name XV.ToggleButtonWidget
-    @class An input control consisting of fittable columns:
-     label, decorator, and toggle button.<br />
-    Use to implement a toggle button, a switch with labels for two states.<br />
-    Creates an HTML input element.
-    @extends XV.Input
-   */
-  enyo.kind(/** @lends XV.ToggleButtonWidget# */{
-    name: "XV.ToggleButtonWidget",
-    kind: "XV.Input",
-    classes: "xv-inputwidget xv-checkboxwidget",
-    published: {
-      label: ""
     },
-    components: [
-      {kind: "FittableColumns", components: [
-        {name: "label", content: "", classes: "xv-label"},
-        {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
-          components: [
-          {name: "input", kind: "onyx.ToggleButton", onChange: "inputChanged"}
-        ]}
-      ]}
-    ],
     /**
      @todo Document the clear method.
      */
@@ -89,10 +65,6 @@ regexp:true, undef:true, trailing:true, white:true */
       var options = {silent: true};
       this.valueChanged(this.getValue(), options);
     },
-    disabledChanged: function () {
-      this.inherited(arguments);
-      this.$.label.addRemoveClass("disabled", this.getDisabled());
-    },
     /**
      @todo Document the inputChanged method.
      */
@@ -100,20 +72,6 @@ regexp:true, undef:true, trailing:true, white:true */
       var input = this.$.input.getValue();
       this.setValue(input);
     },
-    /**
-     @todo Document the labelChanged method.
-     */
-    labelChanged: function () {
-      var label = (this.getLabel() || ("_" + this.attr || "").loc()) + ":";
-      this.$.label.setContent(label);
-    },
-    /**
-      Not applicable in the context of a toggle button,
-      even though it is available to input widgets generally.
-     */
-    placeholderChanged: function () {
-      // Not applicable
-    },
     /**
      @todo Document the valueChanged method.
      */
index 7f4a308..a63031f 100644 (file)
@@ -17,7 +17,7 @@
     before(function (done) {
       // setup for the date widget
       var initializeDate = function () {
-        K = enyo.kind({kind: XV.Date});
+        K = enyo.kind({kind: XV.DateWidget});
         K = new K();
         done();
       };