Improve form system look. Add a prompt to the base blue plus when a multiple is empty.

Author: Tim Berners-Lee

lib/widgets.js

@@ -433,7 +433,9 @@ widgetModule.field[UI.ns.ui('Multiple').uri] = function (
   var tail = box.appendChild(dom.createElement('tr'))
   var img = tail.appendChild(dom.createElement('img'))
   img.setAttribute('src', UI.icons.originalIconBase + 'tango/22-list-add.png') // blue plus
-  img.title = '(m) Add ' + UI.utils.label(property)
+  img.setAttribute('style', 'margin: 0.2em;') // blue plus
+  img.title = 'Click to add one or more ' + UI.utils.label(property)
+  var prompt = tail.appendChild(dom.createElement('span'))
 
   var addItem = function (e, object) {
     UI.log.debug('Multiple add: ' + object)
@@ -459,13 +461,17 @@ widgetModule.field[UI.ns.ui('Multiple').uri] = function (
     fn(dom, body, already, object, element, store, itemDone)
   }
 
-  kb.each(subject, property).map(function (obj) { addItem(null, obj) })
+  var values = kb.each(subject, property)
+  prompt.textContent = (values.length === 0 ? 'Add one or more ' : 'Add more ') +
+    UI.utils.label(property)
 
-  for (i = kb.each(subject, property).length; i < min; i++) {
+  values.map(function (obj) { addItem(null, obj) })
+
+  for (i = values.length; i < min; i++) {
     addItem() // Add blanks if less than minimum
   }
 
-  img.addEventListener('click', addItem, true)
+  tail.addEventListener('click', addItem, true) // img.addEventListener('click', addItem, true)
   return box
 }
 
@@ -561,7 +567,7 @@ widgetModule.field[UI.ns.ui('PhoneField').uri] =
                         var uri = widgetModule.bottomURI(form)
                         var params = widgetModule.fieldParams[uri]
                         if (params === undefined) params = {} // non-bottom field types can do this
-                        var style = params.style ? params.style : ''
+                        var style = params.style || 'font-size: 100%; margin: 0.1em; padding: 0.1em;'
                         // box.appendChild(dom.createTextNode(' uri='+uri+', pattern='+ params.pattern))
                         var field = dom.createElement('input')
                         rhs.appendChild(field)
@@ -582,6 +588,7 @@ widgetModule.field[UI.ns.ui('PhoneField').uri] =
                         if (obj) {
                           field.value = obj.value || obj.uri
                         }
+                        field.setAttribute('style', style)
                         field.addEventListener('keyup', function (e) {
                           if (params.pattern) {
                             field.setAttribute('style', style + (
@@ -591,7 +598,7 @@ widgetModule.field[UI.ns.ui('PhoneField').uri] =
                         field.addEventListener('change', function (e) { // i.e. lose focus with changed data
                           if (params.pattern && !field.value.match(params.pattern)) return
                           field.disabled = true // See if this stops getting two dates from fumbling e.g the chrome datepicker.
-                          field.setAttribute('style', 'color: gray;') // pending
+                          field.setAttribute('style', style + 'color: gray;') // pending
                           var ds = kb.statementsMatching(subject, property) // remove any multiple values
                           // var newObj = params.uriPrefix ? kb.sym(params.uriPrefix + field.value.replace(/ /g, ''))
                           //  : kb.literal(field.value, params.dt)