Issue #23853: More widget refactoring.

diff --git a/enyo-client/application/source/widgets/checkbox.js b/enyo-client/application/source/widgets/checkbox.js
index 71db45f..cf31b74 100644 (file)
--- a/enyo-client/application/source/widgets/checkbox.js
+++ b/enyo-client/application/source/widgets/checkbox.js
@@ -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);
 

diff --git a/enyo-client/application/source/widgets/combobox.js b/enyo-client/application/source/widgets/combobox.js
index 9cb0add..35c5b75 100644 (file)
--- a/enyo-client/application/source/widgets/combobox.js
+++ b/enyo-client/application/source/widgets/combobox.js
@@ -73,6 +73,7 @@ regexp:true, undef:true, trailing:true, white:true */
         container: this.$.fittableColumns,
         classes: "xv-combobox-note"
       });
+      // TODO: git rid of this
       this.$.input.applyStyle("padding-top", "8px");
       this.$.input.applyStyle("padding-left", "8px");
     },

diff --git a/enyo-client/application/source/widgets/money.js b/enyo-client/application/source/widgets/money.js
index 86053f5..309dec4 100644 (file)
--- a/enyo-client/application/source/widgets/money.js
+++ b/enyo-client/application/source/widgets/money.js
@@ -33,29 +33,25 @@ 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", classes: "xv-icon-decorator", components: [
           {name: "input", kind: "onyx.Input",
             onchange: "inputChanged", onkeydown: "keyDown"}
         ]},
         {name: "picker", kind: "XV.CurrencyPicker", showLabel: false}
       ]},
-      {kind: "FittableColumns", name: "basePanel", showing: false,
-        components: [
+      {controlClasses: 'enyo-inline', name: "basePanel", showing: false, components: [
         {name: "spacer", content: "", classes: "xv-label"},
-        {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
-          components: [
+        {kind: "onyx.InputDecorator", classes: "xv-icon-decorator", components: [
           {name: "baseAmountLabel", classes: "xv-money-label"}
         ]},
-        {kind: "onyx.InputDecorator", classes: "xv-input-decorator, xv-currency-label",
+        {kind: "onyx.InputDecorator", classes: "xv-currency-label",
           components: [
           {name: "baseCurrencyLabel"}
         ]}
       ]}
     ],
-
     /**
       Set the base price into the base amount label
     */

diff --git a/lib/enyo-x/source/less/characteristics.less b/lib/enyo-x/source/less/characteristics.less
index 38eef4d..5896797 100644 (file)
--- a/lib/enyo-x/source/less/characteristics.less
+++ b/lib/enyo-x/source/less/characteristics.less
@@ -2,6 +2,8 @@
   Characteristics
 */
 
+.xv-characteristics-widget {}
+
 .xv-characteristic-picker {
   border: none;
   .onyx-picker-decorator .onyx-button {

diff --git a/lib/enyo-x/source/less/picker.less b/lib/enyo-x/source/less/picker.less
index 044c9ac..7e92c6b 100644 (file)
--- a/lib/enyo-x/source/less/picker.less
+++ b/lib/enyo-x/source/less/picker.less
@@ -41,17 +41,6 @@
   }
 }
 
-.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;

diff --git a/lib/enyo-x/source/less/widgets.less b/lib/enyo-x/source/less/widgets.less
index 025e556..c8645af 100644 (file)
--- a/lib/enyo-x/source/less/widgets.less
+++ b/lib/enyo-x/source/less/widgets.less
@@ -9,67 +9,6 @@
   }
 }
 
-.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 {

diff --git a/lib/enyo-x/source/less/workspace.less b/lib/enyo-x/source/less/workspace.less
index 28113e9..0b3c6a4 100644 (file)
--- a/lib/enyo-x/source/less/workspace.less
+++ b/lib/enyo-x/source/less/workspace.less
@@ -89,12 +89,16 @@
 
       // 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;
@@ -102,25 +106,112 @@
       }
 
       .xv-input {
-        border-bottom: 1px solid @smoke;
-        margin: 0px;
-      }
+        padding: 4px 0;
+        border-bottom: 1px solid fade(@smoke, 50%);
 
-      .xv-relationwidget {
-        .xv-description {
-          overflow: hidden;
+        .enyo-tool-decorator {
+          max-width: @fieldDecoratorWidth;
+          text-align: left;
 
-          // This gives them 4 lines of description
-          display: -webkit-box;
-          -webkit-line-clamp: 4;
-          -webkit-box-orient: vertical;
+          .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 ^^
+        }
 
-          max-width: 250px;
-          margin: 5px 5px 5px 80px;
-          font-size: 0.9em;
+        &.xv-relationwidget {
+          .xv-description {
+            overflow: hidden;
 
-          &.disabled {
-            color: @dim-gray;
+            // This gives them 4 lines of description
+            display: -webkit-box;
+            -webkit-line-clamp: 4;
+            -webkit-box-orient: vertical;
+
+            max-width: 250px;
+            margin: 5px 5px 5px 80px;
+            font-size: 0.9em;
+
+            &.disabled {
+              color: @dim-gray;
+            }
+          }
+        }
+
+        &.xv-spinnerwidget {
+          .buttons {
+            display: block;
+            padding: 0;
+            margin: 1px 0 1px 10px;
+            width: 20px;
+            height: 20px;
+            background: transparent;
+            color: @slate-blue;
+            font-size: 20px;
+            border: none;
+          }
+          .slider {
+            margin: 15px 10px;
+          }
+          &.xv-numberwidget {
+            input {
+              width: 120px;
+            }
+          }
+        }
+
+        &.xv-combobox {
+          .icon-sort {
+            color: @slate-blue;
+            vertical-align: middle;
+          }
+        }
+
+        &.xv-numberwidget {
+          input {
+            text-align: right;
+          }
+        }
+
+        &.xv-moneywidget {
+          .onyx-input-decorator {
+            font-family: @groupboxFont;
+
+            input, .xv-money-label {
+              width: 80px;
+              text-align: right;
+            }
+          }
+          .xv-picker-button {
+            width: 65px;
+            padding: 10px 4px;
           }
         }
       }

diff --git a/lib/enyo-x/source/stylesheets/screen.css b/lib/enyo-x/source/stylesheets/screen.css
index c15ebf3..9a19c15 100755 (executable)
--- a/lib/enyo-x/source/stylesheets/screen.css
+++ b/lib/enyo-x/source/stylesheets/screen.css
@@ -1651,21 +1651,54 @@ a,
 .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 {
-  border-bottom: 1px solid #d7d7d7;
-  margin: 0px;
+  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-relationwidget .xv-description {
+.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-input.xv-relationwidget .xv-description {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4;
@@ -1674,9 +1707,45 @@ a,
   margin: 5px 5px 5px 80px;
   font-size: 0.9em;
 }
-.xv-popup.xv-groupbox-popup .xv-relationwidget .xv-description.disabled {
+.xv-popup.xv-groupbox-popup .xv-input.xv-relationwidget .xv-description.disabled {
   color: #777777;
 }
+.xv-popup.xv-groupbox-popup .xv-input.xv-spinnerwidget .buttons {
+  display: block;
+  padding: 0;
+  margin: 1px 0 1px 10px;
+  width: 20px;
+  height: 20px;
+  background: transparent;
+  color: #357ec7;
+  font-size: 20px;
+  border: none;
+}
+.xv-popup.xv-groupbox-popup .xv-input.xv-spinnerwidget .slider {
+  margin: 15px 10px;
+}
+.xv-popup.xv-groupbox-popup .xv-input.xv-spinnerwidget.xv-numberwidget input {
+  width: 120px;
+}
+.xv-popup.xv-groupbox-popup .xv-input.xv-combobox .icon-sort {
+  color: #357ec7;
+  vertical-align: middle;
+}
+.xv-popup.xv-groupbox-popup .xv-input.xv-numberwidget input {
+  text-align: right;
+}
+.xv-popup.xv-groupbox-popup .xv-input.xv-moneywidget .onyx-input-decorator {
+  font-family: "Lucida Sans Unicode", "Lucida Grande", arial, sans-serif;
+}
+.xv-popup.xv-groupbox-popup .xv-input.xv-moneywidget .onyx-input-decorator input,
+.xv-popup.xv-groupbox-popup .xv-input.xv-moneywidget .onyx-input-decorator .xv-money-label {
+  width: 80px;
+  text-align: right;
+}
+.xv-popup.xv-groupbox-popup .xv-input.xv-moneywidget .xv-picker-button {
+  width: 65px;
+  padding: 10px 4px;
+}
 .xv-popup.xv-groupbox-popup .enyo-fittable-columns-layout > * {
   vertical-align: middle;
 }
@@ -1983,21 +2052,54 @@ a,
 .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 {
-  border-bottom: 1px solid #d7d7d7;
-  margin: 0px;
+  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-relationwidget .xv-description {
+.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-input.xv-relationwidget .xv-description {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4;
@@ -2006,9 +2108,45 @@ a,
   margin: 5px 5px 5px 80px;
   font-size: 0.9em;
 }
-.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-relationwidget .xv-description.disabled {
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-relationwidget .xv-description.disabled {
   color: #777777;
 }
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-spinnerwidget .buttons {
+  display: block;
+  padding: 0;
+  margin: 1px 0 1px 10px;
+  width: 20px;
+  height: 20px;
+  background: transparent;
+  color: #357ec7;
+  font-size: 20px;
+  border: none;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-spinnerwidget .slider {
+  margin: 15px 10px;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-spinnerwidget.xv-numberwidget input {
+  width: 120px;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-combobox .icon-sort {
+  color: #357ec7;
+  vertical-align: middle;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-numberwidget input {
+  text-align: right;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-moneywidget .onyx-input-decorator {
+  font-family: "Lucida Sans Unicode", "Lucida Grande", arial, sans-serif;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-moneywidget .onyx-input-decorator input,
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-moneywidget .onyx-input-decorator .xv-money-label {
+  width: 80px;
+  text-align: right;
+}
+.xv-workspace-container .xv-workspace .xv-workspace-panel .xv-input.xv-moneywidget .xv-picker-button {
+  width: 65px;
+  padding: 10px 4px;
+}
 .xv-workspace-container .xv-workspace .xv-workspace-panel .enyo-fittable-columns-layout > * {
   vertical-align: middle;
 }
@@ -2098,13 +2236,6 @@ a,
 .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;
@@ -2880,21 +3011,54 @@ a,
 .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 .xv-input .enyo-tool-decorator {
+  max-width: 180px;
+  text-align: left;
+}
+.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-input.xv-textarea {
+  padding: 0;
+  margin: 8px;
 }
-.xv-pullout .xv-parameter-panel .xv-relationwidget .xv-description {
+.xv-pullout .xv-parameter-panel .xv-input.xv-textarea .enyo-tool-decorator {
+  max-width: 320px;
+}
+.xv-pullout .xv-parameter-panel .xv-input input {
+  width: 164px;
+}
+.xv-pullout .xv-parameter-panel .xv-input .xv-icon-decorator input {
+  width: 140px;
+}
+.xv-pullout .xv-parameter-panel .xv-input .xv-icon-decorator .onyx-icon {
+  padding: 4px;
+}
+.xv-pullout .xv-parameter-panel .xv-input .onyx-picker-decorator {
+  padding: 0;
+}
+.xv-pullout .xv-parameter-panel .xv-input.xv-relationwidget .xv-description {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4;
@@ -2903,9 +3067,45 @@ a,
   margin: 5px 5px 5px 80px;
   font-size: 0.9em;
 }
-.xv-pullout .xv-parameter-panel .xv-relationwidget .xv-description.disabled {
+.xv-pullout .xv-parameter-panel .xv-input.xv-relationwidget .xv-description.disabled {
   color: #777777;
 }
+.xv-pullout .xv-parameter-panel .xv-input.xv-spinnerwidget .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-input.xv-spinnerwidget .slider {
+  margin: 15px 10px;
+}
+.xv-pullout .xv-parameter-panel .xv-input.xv-spinnerwidget.xv-numberwidget input {
+  width: 120px;
+}
+.xv-pullout .xv-parameter-panel .xv-input.xv-combobox .icon-sort {
+  color: #357ec7;
+  vertical-align: middle;
+}
+.xv-pullout .xv-parameter-panel .xv-input.xv-numberwidget input {
+  text-align: right;
+}
+.xv-pullout .xv-parameter-panel .xv-input.xv-moneywidget .onyx-input-decorator {
+  font-family: "Lucida Sans Unicode", "Lucida Grande", arial, sans-serif;
+}
+.xv-pullout .xv-parameter-panel .xv-input.xv-moneywidget .onyx-input-decorator input,
+.xv-pullout .xv-parameter-panel .xv-input.xv-moneywidget .onyx-input-decorator .xv-money-label {
+  width: 80px;
+  text-align: right;
+}
+.xv-pullout .xv-parameter-panel .xv-input.xv-moneywidget .xv-picker-button {
+  width: 65px;
+  padding: 10px 4px;
+}
 .xv-pullout .xv-parameter-panel .enyo-fittable-columns-layout > * {
   vertical-align: middle;
 }
@@ -2940,54 +3140,6 @@ a,
 .onyx-input-decorator input {
   width: 150px;
 }
-.xv-relationwidget input,
-.xv-datewidget input {
-  width: 135px;
-}
-.xv-numberwidget input {
-  text-align: right;
-  width: 150px;
-}
-.xv-moneywidget {
-  padding-top: 6px;
-  padding-bottom: 2px;
-}
-.xv-moneywidget .onyx-input-decorator {
-  font-family: "Lucida Sans Unicode", "Lucida Grande", arial, sans-serif;
-  margin-right: 5px;
-}
-.xv-moneywidget .onyx-input-decorator input,
-.xv-moneywidget .onyx-input-decorator .xv-money-label {
-  width: 85px;
-  text-align: right;
-}
-.xv-moneywidget .onyx-input-decorator.xv-currency-label {
-  width: 65px;
-}
-.xv-moneywidget .xv-picker-button {
-  width: 65px;
-  padding: 10px 4px;
-}
-.spinner .enyo-fittable-columns-layout > * {
-  vertical-align: middle;
-}
-.spinner .buttons {
-  display: block;
-  padding: 0;
-  margin: 1px 0 1px 10px;
-  width: 20px;
-  height: 20px;
-  background: transparent;
-  color: #357ec7;
-  font-size: 20px;
-  border: none;
-}
-.spinner .slider {
-  margin: 15px 10px;
-}
-.spinner.xv-numberwidget input {
-  width: 120px;
-}
 .xv-dependency-picker .onyx-picker-decorator .onyx-button {
   width: 280px;
   margin-left: 6px;
@@ -3171,21 +3323,54 @@ a,
 .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 {
-  border-bottom: 1px solid #d7d7d7;
-  margin: 0px;
+  padding: 4px 0;
+  border-bottom: 1px solid rgba(215, 215, 215, 0.5);
 }
-.xv-search .xv-search-container .xv-relationwidget .xv-description {
+.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-input.xv-relationwidget .xv-description {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4;
@@ -3194,9 +3379,45 @@ a,
   margin: 5px 5px 5px 80px;
   font-size: 0.9em;
 }
-.xv-search .xv-search-container .xv-relationwidget .xv-description.disabled {
+.xv-search .xv-search-container .xv-input.xv-relationwidget .xv-description.disabled {
   color: #777777;
 }
+.xv-search .xv-search-container .xv-input.xv-spinnerwidget .buttons {
+  display: block;
+  padding: 0;
+  margin: 1px 0 1px 10px;
+  width: 20px;
+  height: 20px;
+  background: transparent;
+  color: #357ec7;
+  font-size: 20px;
+  border: none;
+}
+.xv-search .xv-search-container .xv-input.xv-spinnerwidget .slider {
+  margin: 15px 10px;
+}
+.xv-search .xv-search-container .xv-input.xv-spinnerwidget.xv-numberwidget input {
+  width: 120px;
+}
+.xv-search .xv-search-container .xv-input.xv-combobox .icon-sort {
+  color: #357ec7;
+  vertical-align: middle;
+}
+.xv-search .xv-search-container .xv-input.xv-numberwidget input {
+  text-align: right;
+}
+.xv-search .xv-search-container .xv-input.xv-moneywidget .onyx-input-decorator {
+  font-family: "Lucida Sans Unicode", "Lucida Grande", arial, sans-serif;
+}
+.xv-search .xv-search-container .xv-input.xv-moneywidget .onyx-input-decorator input,
+.xv-search .xv-search-container .xv-input.xv-moneywidget .onyx-input-decorator .xv-money-label {
+  width: 80px;
+  text-align: right;
+}
+.xv-search .xv-search-container .xv-input.xv-moneywidget .xv-picker-button {
+  width: 65px;
+  padding: 10px 4px;
+}
 .xv-search .xv-search-container .enyo-fittable-columns-layout > * {
   vertical-align: middle;
 }

diff --git a/lib/enyo-x/source/widgets/characteristics.js b/lib/enyo-x/source/widgets/characteristics.js
index 84be7c4..ae8971c 100644 (file)
--- a/lib/enyo-x/source/widgets/characteristics.js
+++ b/lib/enyo-x/source/widgets/characteristics.js
@@ -258,7 +258,7 @@ white:true*/
    */
   enyo.kind(/** @lends XV.CharacteristicsWidget# */{
     name: "XV.CharacteristicsWidget",
-    classes: "xv-characteristics-widget xv-input",
+    classes: "xv-characteristics-widget",
     published: {
       attr: null,
       model: null,
@@ -266,20 +266,25 @@ 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-characteristic-buttons", components: [
+        {name: "label", classes: "xv-label"},
         {kind: "onyx.Button", name: "newButton",
           classes: "icon-plus xv-characteristic-button",
           onclick: "newItem"}
       ]}
     ],
+    create: function () {
+      this.inherited(arguments);
+      this.showLabelChanged();
+    },
     disabledChanged: function () {
       this.$.newButton.setDisabled(this.disabled);
     },
@@ -383,6 +388,13 @@ white:true*/
       this.value.comparator = this.sort;
       this.value.sort();
       this.lengthChanged();
+    },
+
+    /**
+      Sets visibility of the widget label.
+    */
+    showLabelChanged: function () {
+      this.$.label.setShowing(this.getShowLabel());
     }
   });
 

diff --git a/lib/enyo-x/source/widgets/checkbox.js b/lib/enyo-x/source/widgets/checkbox.js
index e242680..a74f200 100644 (file)
--- a/lib/enyo-x/source/widgets/checkbox.js
+++ b/lib/enyo-x/source/widgets/checkbox.js
@@ -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,15 +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.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"}
         ]}
       ]}
@@ -135,10 +88,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"}
         ]}
       ]}

diff --git a/lib/enyo-x/source/widgets/combobox.js b/lib/enyo-x/source/widgets/combobox.js
index fb840b3..559f410 100644 (file)
--- a/lib/enyo-x/source/widgets/combobox.js
+++ b/lib/enyo-x/source/widgets/combobox.js
@@ -27,9 +27,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', 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",

diff --git a/lib/enyo-x/source/widgets/date.js b/lib/enyo-x/source/widgets/date.js
index 9ec4211..7049874 100644 (file)
--- a/lib/enyo-x/source/widgets/date.js
+++ b/lib/enyo-x/source/widgets/date.js
@@ -28,9 +28,9 @@ regexp:true, undef:true, trailing:true, white:true */
         // 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: [
+          classes: "xv-icon-decorator", components: [
           {name: "input", kind: "onyx.Input", onchange: "inputChanged",
-            classes: "xv-subinput", onkeydown: "keyDown"},
+            onkeydown: "keyDown"},
           {name: "icon", kind: "onyx.Icon", ontap: "iconTapped",
             classes: "icon-calendar"}
         ]},

diff --git a/lib/enyo-x/source/widgets/input.js b/lib/enyo-x/source/widgets/input.js
index 20dc885..9641d60 100644 (file)
--- a/lib/enyo-x/source/widgets/input.js
+++ b/lib/enyo-x/source/widgets/input.js
@@ -37,12 +37,10 @@ regexp:true, undef:true, trailing:true, white:true */
       onblur: "receiveBlur"
     },
     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"}
+      {controlClasses: 'enyo-inline', components: [
+        {name: "label", classes: "xv-label"},
+        {kind: "onyx.InputDecorator", components: [
+          {name: "input", kind: "onyx.Input", onchange: "inputChanged", onkeydown: "keyDown"}
         ]}
       ]}
     ],

diff --git a/lib/enyo-x/source/widgets/number_spinner.js b/lib/enyo-x/source/widgets/number_spinner.js
index f1a88df..b810525 100644 (file)
--- a/lib/enyo-x/source/widgets/number_spinner.js
+++ b/lib/enyo-x/source/widgets/number_spinner.js
@@ -19,18 +19,17 @@ 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", components: [
+            {name: "input", kind: "onyx.Input",
               onchange: "inputChanged", onkeydown: "keyDown"},
             {kind: "FittableRows", components: [
               {kind: "onyx.Button", classes: "buttons", ontap: "increase",

diff --git a/lib/enyo-x/source/widgets/parameter.js b/lib/enyo-x/source/widgets/parameter.js
index 720976d..996247f 100644 (file)
--- a/lib/enyo-x/source/widgets/parameter.js
+++ b/lib/enyo-x/source/widgets/parameter.js
@@ -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());
       }
     },

diff --git a/lib/enyo-x/source/widgets/picker.js b/lib/enyo-x/source/widgets/picker.js
index 05944d2..0473cd3 100644 (file)
--- a/lib/enyo-x/source/widgets/picker.js
+++ b/lib/enyo-x/source/widgets/picker.js
@@ -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.

diff --git a/lib/enyo-x/source/widgets/relation.js b/lib/enyo-x/source/widgets/relation.js
index d049198..3db9864 100644 (file)
--- a/lib/enyo-x/source/widgets/relation.js
+++ b/lib/enyo-x/source/widgets/relation.js
@@ -66,6 +66,7 @@ regexp:true, undef:true, trailing:true, white:true, strict:false */
           {name: "completer", kind: "XV.Completer"}
         ]}
       ]},
+      // TODO: refactor this out into a separate array that is added on create
       {name: 'descriptionContainer', classes: 'xv-invisible-wrapper', components: [
         {controlClasses: 'enyo-inline', components: [
           {name: "name", classes: "xv-description"},