Add UI support for quantity values and tidy up interface

extensions/wikidata/module/langs/translation-en.json

@@ -28,6 +28,8 @@
                 "description": "Description",
                 "alias": "Alias",
                 "item-or-reconciled-column": "item or reconciled column",
+                "amount": "amount",
+                "unit": "unit",
                 "datatype-not-supported-yet": "This datatype is not supported yet, sorry.",
                 "invalid-schema-warning-issues": "Your schema is incomplete, fix it to see the issues.",
                 "invalid-schema-warning-qs": "Your schema is incomplete, fix it to see the preview.",

extensions/wikidata/module/scripts/dialogs/schema-alignment-dialog.js

@@ -178,7 +178,7 @@ SchemaAlignmentDialog._createDialog = function() {
 };
 
 SchemaAlignmentDialog._makeDeleteButton = function (noText) {
-  var button = $('<a></a>').addClass('wbs-remove').append(
+  var button = $('<div></div>').addClass('wbs-remove').append(
      $('<span></span>').addClass('wbs-icon')
   );
   if(noText === undefined) {
@@ -488,7 +488,7 @@ SchemaAlignmentDialog._addReference = function(container, json) {
   var right = $('<div></div>').addClass('wbs-right').appendTo(reference);
   var qualifierContainer = $('<div></div>').addClass('wbs-qualifier-container').appendTo(right);
   var toolbar2 = $('<div></div>').addClass('wbs-toolbar').appendTo(right);
-  $('<a></a>').addClass('wbs-add-qualifier').text($.i18n._('wikidata-schema')['add-reference-snak']).click(function() {
+  $('<a></a>').addClass('wbs-add-qualifier').html('<b>+</b>&nbsp;'+$.i18n._('wikidata-schema')['add-reference-snak']).click(function() {
       SchemaAlignmentDialog._addQualifier(qualifierContainer, null);
   }).appendTo(toolbar2);
 
@@ -586,8 +586,12 @@ SchemaAlignmentDialog._initField = function(inputContainer, mode, initialValue,
     changedCallback = SchemaAlignmentDialog._hasChanged;
   }
 
-  if (this._reconService !== null && mode === "wikibase-item") {
+  if (this._reconService !== null && (mode === "wikibase-item" || mode === "unit")) {
-    input.attr("placeholder", $.i18n._('wikidata-schema')["item-or-reconciled-column"]);
+    if (mode === "wikibase-item") {
+        input.attr("placeholder", $.i18n._('wikidata-schema')["item-or-reconciled-column"]);
+    } else {
+        input.attr("placeholder", $.i18n._('wikidata-schema')["unit"]);
+    }
     var endpoint = null;
     endpoint = this._reconService.suggest.entity;
     var suggestConfig = $.extend({}, endpoint);
@@ -630,15 +634,9 @@ SchemaAlignmentDialog._initField = function(inputContainer, mode, initialValue,
       propagateValue($(this).val());
       changedCallback();
     });
-   } else if (mode === "quantity") {
-     alert($.i18n._('wikidata-schema')["datatype-not-supported-yet"]);
    } else if (mode === "language") {
-     var initial_language_width = "20%";
-     var expanded_width = "90px";
-     var animation_duration = 50;
      input.attr("placeholder", "lang");
      input.addClass("wbs-language-input");
-     inputContainer.width(initial_language_width);
      input.langsuggest().bind("fb-select", function(evt, data) {
         inputContainer.data("jsonValue", {
             type: "wblanguageconstant",
@@ -646,18 +644,16 @@ SchemaAlignmentDialog._initField = function(inputContainer, mode, initialValue,
             label: data.name,
         });
         changedCallback();
-        inputContainer.animate({ width: initial_language_width, duration: animation_duration });
-     }).bind("focus.suggest", function(e) {
-        inputContainer.animate({ width: expanded_width, duration: animation_duration });
      });
    } else if (mode === "monolingualtext") {
      input.remove();
      var inputContainerLanguage = $('<div></div>')
      .addClass('wbs-monolingual-container')
+     .width('30%')
      .appendTo(inputContainer);
      var inputContainerValue = $('<div></div>')
      .addClass('wbs-monolingual-container')
-     .width('80%')
+     .width('70%')
      .appendTo(inputContainer);
 
      var langValue = null;
@@ -677,8 +673,37 @@ SchemaAlignmentDialog._initField = function(inputContainer, mode, initialValue,
      }
 
      SchemaAlignmentDialog._initField(inputContainerLanguage, "language", langValue, propagateValue);
-     SchemaAlignmentDialog._initField(inputContainerValue, "external-id", strValue, propagateValue);
+     SchemaAlignmentDialog._initField(inputContainerValue, "string", strValue, propagateValue);
-   } else { /* if (mode === "external-id") { */
+   } else if (mode === "quantity") {
+     input.remove();
+     var inputContainerAmount = $('<div></div>')
+     .addClass('wbs-quantity-container')
+     .width('60%')
+     .appendTo(inputContainer);
+     var inputContainerUnit = $('<div></div>')
+     .addClass('wbs-quantity-container')
+     .width('40%')
+     .appendTo(inputContainer);
+   
+     var amountValue = null;
+     var unitValue = null;
+     if (initialValue) {
+        amountValue = initialValue.amount;
+        unitValue = initalValue.unit;
+     }
+ 
+     var propagateValue = function() {
+        inputContainer.data("jsonValue", {
+           type: "wbquantityexpr",
+           amount: inputContainerAmount.data("jsonValue"),
+           unit: inputContainerUnit.data("jsonValue"),
+        });
+        changedCallback();
+     }
+     
+     SchemaAlignmentDialog._initField(inputContainerAmount, "amount", amountValue, propagateValue);
+     SchemaAlignmentDialog._initField(inputContainerUnit, "unit", unitValue, propagateValue);
+   } else if (mode === "external-id" || mode === "string" || mode === "amount") {
     var propagateValue = function(val) {
         inputContainer.data("jsonValue", {
            type: "wbstringconstant",
@@ -690,12 +715,20 @@ SchemaAlignmentDialog._initField = function(inputContainer, mode, initialValue,
       propagateValue($(this).val());
       changedCallback();
     });
+    if (mode === "amount") {
+        input.attr("placeholder", $.i18n._('wikidata-schema')["amount"]);
+    }
+  } else {
+     alert($.i18n._('wikidata-schema')["datatype-not-supported-yet"]);
   }
 
   var acceptDraggableColumn = function(column) {
     input.hide();
     var columnDiv = $('<div></div>').appendTo(inputContainer);
     column.appendTo(columnDiv);
+    var origText = column.text();
+    column.text("");
+    column.append($('<div></div>').addClass('wbs-restricted-column-name').text(origText));
     var deleteButton = SchemaAlignmentDialog._makeDeleteButton(true).appendTo(column);
     deleteButton.attr('alt', $.i18n._('wikidata-schema')["remove-column"]);
     deleteButton.click(function () {

extensions/wikidata/module/styles/dialogs/schema-alignment-dialog.less

@@ -62,8 +62,10 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     padding-bottom: 3px;
 }
 
-.wbs-target-input .wbs-draggable-column {
+.ui-droppable .wbs-draggable-column {
     margin: 0px;
+    padding: 0px;
+    padding-left: 2px;
 }
 
 .wbs-reconciled-column {
@@ -71,6 +73,15 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     padding-bottom: 1px;
 }
 
+.wbs-restricted-column-name {
+    max-width: 120px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    vertical-align: middle;
+}
+
 .wbs-accepting-input {
     box-shadow: inset 0 0 10px #a7cdff;
 }
@@ -93,13 +104,14 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 .wbs-rank-selector-icon {
    background-position: -36px;
    width: 8px;
+   flex: 0 0 8px;
    height: 20px;
    margin-right: 2px;
    background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20width=%22107%22%20height=%2220%22%3E%20%3Cdefs%3E%20%3Cpath%20d=%22M3.1%2C0%200%2C3.8%200%2C6%208%2C6%208%2C3.8%204.9%2C0zm8.2%2C7%20-2.3%2C2%200%2C2%202.3%2C2%203.4%2C0%202.3%2C-2%200%2C-2%20-2.3%2C-2zm6.7%2C7%200%2C2.2%203.1%2C3.8%201.8%2C0%203.1%2C-3.8%200%2C-2.2z%22%20id=%22a%22/%3E%20%3Cpath%20d=%22m18.5%2C10.75%200%2C-1.5%202%2C-1.75%203%2C0%202%2C1.75%200%2C1.5%20-2%2C1.75%20-3%2C0zm0%2C-6.75%200%2C1.5%207%2C0%200%2C-1.5%20-2.875%2C-3.5%20-1.25%2C0zm-9%2C12%200%2C-1.5%207%2C0%200%2C1.5%20-2.875%2C3.5%20-1.25%2C0zm0%2C-12%200%2C1.5%207%2C0%200%2C-1.5%20-2.875%2C-3.5%20-1.25%2C0zm-9%2C12%200%2C-1.5%207%2C0%200%2C1.5%20-2.875%2C3.5%20-1.25%2C0zm0%2C-5.25%200%2C-1.5%202%2C-1.75%203%2C0%202%2C1.75%200%2C1.5%20-2%2C1.75%20-3%2C0z%22%20id=%22b%22%20fill=%22none%22/%3E%20%3C/defs%3E%20%3Cuse%20fill=%22%23000%22%20x=%220%22%20y=%220%22%20xlink:href=%22%23a%22/%3E%20%3Cuse%20stroke=%22%23000%22%20x=%220%22%20y=%220%22%20xlink:href=%22%23b%22/%3E%20%3Cuse%20fill=%22%2372777d%22%20x=%2227%22%20y=%220%22%20xlink:href=%22%23a%22/%3E%20%3Cuse%20stroke=%22%2372777d%22%20x=%2227%22%20y=%220%22%20xlink:href=%22%23b%22/%3E%20%3Cuse%20fill=%22%2336c%22%20x=%2254%22%20y=%220%22%20xlink:href=%22%23a%22/%3E%20%3Cuse%20stroke=%22%2336c%22%20x=%2254%22%20y=%220%22%20xlink:href=%22%23b%22/%3E%20%3Cuse%20fill=%22%23447ff5%22%20x=%2281%22%20y=%220%22%20xlink:href=%22%23a%22/%3E%20%3Cuse%20stroke=%22%23447ff5%22%20x=%2281%22%20y=%220%22%20xlink:href=%22%23b%22/%3E%20%3C/svg%3E");
 }
 
 .wbs-item-input, .wbs-prop-input, .wbs-target-input {
-    width: 160px;
+    width: 250px;
     height: 20px;
     /* border: 1px solid #a2a9b1; */
     display: inline-block;
@@ -119,6 +131,10 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     width: 85px;
 }
 
+.wbs-qualifier .wbs-target-input {
+    width: 120px;
+}
+
 .wbs-item-input input, .wbs-prop-input input, .wbs-target-input input {
     width: 100%;
 }
@@ -140,6 +156,10 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     font-size: 0.9em;
 }
 
+.wbs-remove {
+    display: inline-block;
+}
+
 .wbs-add-item b, .wbs-add-statement-group b, .wbs-add-statement b,
 .wbs-add-qualifier b, .wbs-add-reference b, .wbs-add-namedesc b {
     font-size: 1em;
@@ -213,21 +233,17 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     color: #0645ad !important;
 }
 
-.wbs-qualifier .wbs-target-input {
-    width: 90px;
-}
-
 .wbs-qualifier .wbs-statement {
     overflow: hidden;
 }
 
-.wbs-monolingual-container {
+.wbs-monolingual-container, .wbs-quantity-container {
     display: inline-block;
 }
 
 .wbs-reference-header {
-    height: 20px;
+    height: 22px;
-    overflow: auto;
+    overflow: hidden;
     display: block;
     background-color: #b6c8ec;
 }
@@ -255,8 +271,8 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 }
 
 .wbs-namedesc-value {
-   padding-left: 71px;
+   padding-left: 20px;
-   width: 200px;
+   width: 300px;
 }
 
 .wbs-language-input {