Issue #23853: Incorporated widget-refactor logic into ContactWidget

diff --git a/enyo-client/application/source/widgets/relation.js b/enyo-client/application/source/widgets/relation.js
index a2e4a73..673095e 100644 (file)
--- a/enyo-client/application/source/widgets/relation.js
+++ b/enyo-client/application/source/widgets/relation.js
@@ -28,93 +28,61 @@ regexp:true, undef:true, trailing:true, white:true, strict:false */
     keyAttribute: "name",
     nameAttribute: "jobTitle",
     descripAttribute: "phone",
-    classes: "xv-relationwidget",
     published: {
       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",
+      {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"
-          },
-          {kind: "onyx.MenuDecorator", onSelect: "itemSelected", components: [
+            onfocus: "receiveFocus"},
+          {kind: "onyx.MenuDecorator", components: [
             {kind: "onyx.IconButton", classes: "icon-folder-open-alt"},
-            {name: "popupMenu", floating: true, kind: "onyx.Menu",
-              components: [
+            {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}
+              {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"}
+          {name: "completer", kind: "XV.Completer"}
         ]}
       ]},
-      {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: 'descriptionContainer', components: [
+        {name: "jobTitleRow", controlClasses: "enyo-inline", showing: false, components: [
+          {classes: 'xv-description', name: "name"}
         ]},
-        {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: "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"}
+        ]},
+        {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;
       }
+
       var jobTitle = value ? value.get("jobTitle") : "",
         phone = value ? value.get("phone") : "",
         alternate = value ? value.get("alternate") : "",
@@ -123,23 +91,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;

diff --git a/lib/enyo-x/source/less/address.less b/lib/enyo-x/source/less/address.less
index 30b4140..38a3766 100644 (file)
--- a/lib/enyo-x/source/less/address.less
+++ b/lib/enyo-x/source/less/address.less
@@ -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/grid.less b/lib/enyo-x/source/less/grid.less
index 4453ce6..9ad3e6a 100644 (file)
--- a/lib/enyo-x/source/less/grid.less
+++ b/lib/enyo-x/source/less/grid.less
@@ -210,16 +210,6 @@
             .tightened-input-decorator;
           }
         }
-        .xv-relationwidget {
-          .onyx-input-decorator {
-            width: 100%;
-            padding-top: 6px;
-          }
-          .onyx-input {
-            width: 85%;
-            padding-right: 4px;
-          }
-        }
         .xv-useraccount-widget {
           // Hack: we shouldn't have to force this.
           .xv-subinput {
@@ -235,12 +225,22 @@
           width: 100%;
           border: none;
         }
-        .xv-label, .xv-flexible-label, .xv-relationwidget-secondarydescription {
+        .xv-label, .xv-flexible-label {
           display: none;
         }
-        .xv-relationwidget-description {
-          margin: 0;
-          margin-top: 5px;
+        .xv-relationwidget {
+          .xv-description {
+            margin: 0;
+            margin-top: 5px;
+          }
+          .onyx-input-decorator {
+            width: 100%;
+            padding-top: 6px;
+          }
+          .onyx-input {
+            width: 85%;
+            padding-right: 4px;
+          }
         }
         .xv-private-item-site-widget {
           border-bottom: 0;

diff --git a/lib/enyo-x/source/less/list.less b/lib/enyo-x/source/less/list.less
index e5bb712..7c103ee 100644 (file)
--- a/lib/enyo-x/source/less/list.less
+++ b/lib/enyo-x/source/less/list.less
@@ -242,7 +242,8 @@
     color: @dim-gray;
   }
   &.hyperlink {
-    color: blue;
+    color: @slate-blue;
+    cursor: pointer;
   }
   &.disabled {
     color: @dim-gray;

diff --git a/lib/enyo-x/source/less/relations.less b/lib/enyo-x/source/less/relations.less
index d6a480f..1810893 100644 (file)
--- a/lib/enyo-x/source/less/relations.less
+++ b/lib/enyo-x/source/less/relations.less
@@ -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;
@@ -66,17 +34,17 @@
    &.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;
    }
- }
+  }

diff --git a/lib/enyo-x/source/less/screen.less b/lib/enyo-x/source/less/screen.less
index 40f1005..077db04 100644 (file)
--- a/lib/enyo-x/source/less/screen.less
+++ b/lib/enyo-x/source/less/screen.less
@@ -75,6 +75,11 @@ body {
   cursor: default;
 }
 
+a, .hyperlink {
+  color: @slate-blue;
+  cursor: pointer;
+}
+
 .xv-app-panel {
   /* Setting this as min-width overrides enyo-narrow 100% */
   width: @defaultPanelWidth;

diff --git a/lib/enyo-x/source/less/workspace.less b/lib/enyo-x/source/less/workspace.less
index 90a3739..28113e9 100644 (file)
--- a/lib/enyo-x/source/less/workspace.less
+++ b/lib/enyo-x/source/less/workspace.less
@@ -106,6 +106,25 @@
         margin: 0px;
       }
 
+      .xv-relationwidget {
+        .xv-description {
+          overflow: hidden;
+
+          // 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;
+          }
+        }
+      }
+
       .enyo-fittable-columns-layout > * {
         vertical-align: middle;
       }

diff --git a/lib/enyo-x/source/stylesheets/screen.css b/lib/enyo-x/source/stylesheets/screen.css
index 992a775..c15ebf3 100755 (executable)
--- a/lib/enyo-x/source/stylesheets/screen.css
+++ b/lib/enyo-x/source/stylesheets/screen.css
@@ -1523,6 +1523,11 @@ body {
   opacity: 0.8;
   cursor: default;
 }
+a,
+.hyperlink {
+  color: #357ec7;
+  cursor: pointer;
+}
 .xv-app-panel {
   /* Setting this as min-width overrides enyo-narrow 100% */
   width: 320px;
@@ -1660,6 +1665,18 @@ body {
   border-bottom: 1px solid #d7d7d7;
   margin: 0px;
 }
+.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 .enyo-fittable-columns-layout > * {
   vertical-align: middle;
 }
@@ -1980,6 +1997,18 @@ body {
   border-bottom: 1px solid #d7d7d7;
   margin: 0px;
 }
+.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 .enyo-fittable-columns-layout > * {
   vertical-align: middle;
 }
@@ -2011,7 +2040,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;
 }
@@ -2290,14 +2319,6 @@ body {
   width: 100%;
   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 {
   width: 80px;
   height: 16px;
@@ -2311,14 +2332,21 @@ body {
   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 {
+.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-flexible-label {
   display: none;
 }
-.xv-grid-box .xv-grid-row.selected .xv-grid-column .xv-relationwidget-description {
+.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-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-private-item-site-widget {
   border-bottom: 0;
 }
@@ -2750,7 +2778,8 @@ body {
   color: #777777;
 }
 .xv-list-attr.hyperlink {
-  color: blue;
+  color: #357ec7;
+  cursor: pointer;
 }
 .xv-list-attr.disabled {
   color: #777777;
@@ -2865,6 +2894,18 @@ body {
   border-bottom: 1px solid #d7d7d7;
   margin: 0px;
 }
+.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-pullout .xv-parameter-panel .xv-relationwidget .xv-description.disabled {
+  color: #777777;
+}
 .xv-pullout .xv-parameter-panel .enyo-fittable-columns-layout > * {
   vertical-align: middle;
 }
@@ -2995,38 +3036,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 +3076,6 @@ body {
   font-style: italic;
   color: #93a1a1;
 }
-.xv-addresswidget .xv-addresswidget-viewer.hyperlink {
-  color: #0000ff;
-}
 .xv-addresswidget .xv-addresswidget-viewer.disabled {
   color: #777777;
 }
@@ -3173,6 +3185,18 @@ body {
   border-bottom: 1px solid #d7d7d7;
   margin: 0px;
 }
+.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 .enyo-fittable-columns-layout > * {
   vertical-align: middle;
 }

diff --git a/lib/enyo-x/source/widgets/file_input.js b/lib/enyo-x/source/widgets/file_input.js
index 4d400b6..98299bf 100644 (file)
--- a/lib/enyo-x/source/widgets/file_input.js
+++ b/lib/enyo-x/source/widgets/file_input.js
@@ -14,7 +14,7 @@ regexp:true, undef:true, trailing:true, white:true */
   enyo.kind(
     /** @lends XV.FileInput# */{
     name: "XV.FileInput",
-    kind: "XV.Input",
+    kind: "XV.InputWidget",
     events: {
       onValueChange: "",
       onNotify: ""
@@ -22,8 +22,13 @@ regexp:true, undef:true, trailing:true, white:true */
     handlers: {
       onValueChange: "valueChange"
     },
+    published: {
+      attr: null
+    },
     components: [
-      {name: "input", tag: "input type=file", kind: "onyx.Input",  classes: "xv-subinput", onchange: "inputChanged"},
+      {name: "label", content: "", fit: true, classes: "xv-flexible-label"},
+      {name: "input", type: "file", kind: "onyx.Input",
+        classes: "xv-subinput", onchange: "inputChanged"},
       {name: "scrim", kind: "onyx.Scrim", showing: false, floating: true}
     ],
 

diff --git a/lib/enyo-x/source/widgets/relation.js b/lib/enyo-x/source/widgets/relation.js
index 455bd44..d049198 100644 (file)
--- a/lib/enyo-x/source/widgets/relation.js
+++ b/lib/enyo-x/source/widgets/relation.js
@@ -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,
@@ -48,31 +49,29 @@ 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', components: [
+        {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
@@ -153,9 +152,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 +541,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); }

diff --git a/lib/enyo-x/source/widgets/text_area.js b/lib/enyo-x/source/widgets/text_area.js
index 21a4cf5..567a93d 100644 (file)
--- a/lib/enyo-x/source/widgets/text_area.js
+++ b/lib/enyo-x/source/widgets/text_area.js
@@ -11,24 +11,20 @@ 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.InputWidget",
     classes: "xv-textarea",
     published: {
+      attr: null,
       showLabel: false
     },
     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.TextArea", classes: "xv-textarea-input",
-            onchange: "inputChanged", onkeydown: "keyDown"}
-        ]}
-      ]}
+      {name: "label", content: "", fit: true, classes: "xv-flexible-label"},
+      {name: "input", kind: "onyx.TextArea", classes: "xv-textarea-input",
+        onchange: "inputChanged", onkeydown: "keyDown"}
     ]
   });