From 6cb4386e6405f440a300c108e3f0bbed7b695c9b Mon Sep 17 00:00:00 2001 From: Antonin Delpeuch Date: Sat, 3 Mar 2018 17:11:44 +0000 Subject: [PATCH] Tweak the schema alignment UI --- .../wikidata/module/langs/translation-en.json | 4 +- .../scripts/dialogs/perform-edits-dialog.js | 3 +- .../dialogs/schema-alignment-dialog.js | 37 ++++++++++++----- .../dialogs/schema-alignment-dialog.less | 40 +++++++++++++++++++ 4 files changed, 68 insertions(+), 16 deletions(-) diff --git a/extensions/wikidata/module/langs/translation-en.json b/extensions/wikidata/module/langs/translation-en.json index 2366502e1..861779a5a 100644 --- a/extensions/wikidata/module/langs/translation-en.json +++ b/extensions/wikidata/module/langs/translation-en.json @@ -16,14 +16,12 @@ "draggable-columns-header": "Columns:", "add-item-button": "add item", "add-term": "add term", - "remove-term": "remove term", + "remove": "remove", "add-statement": "add statement", - "remove-statement": "remove statement", "add-value": "add value", "add-qualifier": "add qualifier", "add-reference": "add reference", "add-reference-snak": "add", - "remove-reference": "remove reference", "nb-references": " references", "remove-column": "remove column", "label": "Label", diff --git a/extensions/wikidata/module/scripts/dialogs/perform-edits-dialog.js b/extensions/wikidata/module/scripts/dialogs/perform-edits-dialog.js index 52dbcd3ea..9eb4882fd 100644 --- a/extensions/wikidata/module/scripts/dialogs/perform-edits-dialog.js +++ b/extensions/wikidata/module/scripts/dialogs/perform-edits-dialog.js @@ -34,8 +34,7 @@ PerformEditsDialog.launch = function(logged_in_username) { "wikidata", "perform-wikibase-edits", {}, - { strategy : "SNAK_QUALIFIERS", - action: "MERGE", + { summary: elmts.editSummary.val(), }, { includeEngine: true, cellsChanged: true, columnStatsChanged: true }, diff --git a/extensions/wikidata/module/scripts/dialogs/schema-alignment-dialog.js b/extensions/wikidata/module/scripts/dialogs/schema-alignment-dialog.js index 287482315..5c5c98ad3 100644 --- a/extensions/wikidata/module/scripts/dialogs/schema-alignment-dialog.js +++ b/extensions/wikidata/module/scripts/dialogs/schema-alignment-dialog.js @@ -110,7 +110,7 @@ SchemaAlignmentDialog._createDialog = function() { this._elmts.warningsTabHeader.text($.i18n._('wikidata-schema')["warnings-tab-header"]); this._elmts.qsPreviewTabHeader.text($.i18n._('wikidata-schema')["qs-preview-tab-header"]); this._elmts.draggableColumnsHeader.text($.i18n._('wikidata-schema')["draggable-columns-header"]); - this._elmts.addItemButton.text($.i18n._('wikidata-schema')["add-item-button"]); + this._elmts.addItemButton.html('+ '+$.i18n._('wikidata-schema')["add-item-button"]); this._elmts.invalidSchemaWarningIssues.text($.i18n._('wikidata-schema')["invalid-schema-warning-issues"]); this._elmts.invalidSchemaWarningQs.text($.i18n._('wikidata-schema')["invalid-schema-warning-qs"]); this._elmts.resetButton.text($.i18n._('wikidata-schema')["reset-button"]); @@ -177,6 +177,17 @@ SchemaAlignmentDialog._createDialog = function() { this.preview(); }; +SchemaAlignmentDialog._makeDeleteButton = function (noText) { + var button = $('').addClass('wbs-remove').append( + $('').addClass('wbs-icon') + ); + if(noText === undefined) { + button.append( + $('').text($.i18n._('wikidata-schema')["remove"])); + } + return button; +} + /**************/ /*** ITEMS ****/ /**************/ @@ -198,12 +209,14 @@ SchemaAlignmentDialog._addItem = function(json) { var right = $('
').addClass('wbs-right').appendTo(item); $('
').addClass('wbs-namedesc-container').appendTo(right); var toolbar = $('
').addClass('wbs-toolbar').appendTo(right); - $('').addClass('wbs-add-namedesc').text($.i18n._('wikidata-schema')["add-term"]).click(function() { + $('').addClass('wbs-add-namedesc').html('+ '+ + $.i18n._('wikidata-schema')["add-term"]) + .click(function() { SchemaAlignmentDialog._addNameDesc(item, null); }).appendTo(toolbar); $('
').addClass('wbs-statement-group-container').appendTo(right); var toolbar = $('
').addClass('wbs-toolbar').appendTo(right); - $('').addClass('wbs-add-statement-group').text($.i18n._('wikidata-schema')["add-statement"]).click(function() { + $('').addClass('wbs-add-statement-group').html('+ '+$.i18n._('wikidata-schema')["add-statement"]).click(function() { SchemaAlignmentDialog._addStatementGroup(item, null); }).appendTo(toolbar); @@ -268,7 +281,7 @@ SchemaAlignmentDialog._addNameDesc = function(item, json) { type_input.val(type); var toolbar = $('
').addClass('wbs-toolbar').appendTo(namedesc); - $('').attr('alt', $.i18n._('wikidata-schema')["remove-term"]).click(function() { + SchemaAlignmentDialog._makeDeleteButton().click(function() { namedesc.remove(); }).appendTo(toolbar); @@ -308,7 +321,7 @@ SchemaAlignmentDialog._addStatementGroup = function(item, json) { var statementContainer = $('
').addClass('wbs-statement-container').appendTo(right); SchemaAlignmentDialog._initPropertyField(inputContainer, statementContainer, property); var toolbar = $('
').addClass('wbs-toolbar').appendTo(right); - var addValueButton = $('').addClass('wbs-add-statement').text($.i18n._('wikidata-schema')["add-value"]).click(function() { + var addValueButton = $('').addClass('wbs-add-statement').html('+ '+$.i18n._('wikidata-schema')["add-value"]).click(function() { var datatype = inputContainer.data("jsonValue").datatype; SchemaAlignmentDialog._addStatement(statementContainer, datatype, null); }).appendTo(toolbar).hide(); @@ -350,7 +363,7 @@ SchemaAlignmentDialog._addStatement = function(container, datatype, json) { var statement = $('
').addClass('wbs-statement'); var toolbar1 = $('
').addClass('wbs-toolbar').appendTo(statement); - $('').attr('alt', $.i18n._('wikidata-schema')["remove-statement"]).click(function() { + SchemaAlignmentDialog._makeDeleteButton().click(function() { SchemaAlignmentDialog._removeStatement(statement); }).appendTo(toolbar1); var inputContainer = $('
').addClass('wbs-target-input').appendTo(statement); @@ -359,12 +372,14 @@ SchemaAlignmentDialog._addStatement = function(container, datatype, json) { // If we are in a mainsnak... // (see https://www.mediawiki.org/wiki/Wikibase/DataModel#Snaks) if (container.parents('.wbs-statement').length == 0) { + // add rank + var rank = $('
').addClass('wbs-rank-selector-icon').prependTo(inputContainer); // add qualifiers... var right = $('
').addClass('wbs-right').appendTo(statement); var qualifierContainer = $('
').addClass('wbs-qualifier-container').appendTo(right); var toolbar2 = $('
').addClass('wbs-toolbar').appendTo(right); - $('').addClass('wbs-add-qualifier').text($.i18n._('wikidata-schema')["add-qualifier"]).click(function() { + $('').addClass('wbs-add-qualifier').html('+ '+$.i18n._('wikidata-schema')["add-qualifier"]).click(function() { SchemaAlignmentDialog._addQualifier(qualifierContainer, null); }).appendTo(toolbar2); if (qualifiers) { @@ -384,7 +399,7 @@ SchemaAlignmentDialog._addStatement = function(container, datatype, json) { referenceContainer.hide(); var right2 = $('
').addClass('wbs-right').appendTo(right); var toolbar3 = $('
').addClass('wbs-toolbar').appendTo(right2); - $('').addClass('wbs-add-reference').text($.i18n._('wikidata-schema')["add-reference"]).click(function() { + $('').addClass('wbs-add-reference').html('+ '+$.i18n._('wikidata-schema')["add-reference"]).click(function() { referenceContainer.show(); SchemaAlignmentDialog._addReference(referenceContainer, null); SchemaAlignmentDialog._updateReferencesNumber(referenceContainer); @@ -465,7 +480,7 @@ SchemaAlignmentDialog._addReference = function(container, json) { var reference = $('
').addClass('wbs-reference').appendTo(container); var referenceHeader = $('
').addClass('wbs-reference-header').appendTo(reference); var toolbarRef = $('
').addClass('wbs-toolbar').appendTo(referenceHeader); - $('').attr('alt', $.i18n._('wikidata-schema')["remove-reference"]).click(function() { + SchemaAlignmentDialog._makeDeleteButton().click(function() { reference.remove(); SchemaAlignmentDialog._updateReferencesNumber(container); SchemaAlignmentDialog._hasChanged(); @@ -499,7 +514,7 @@ SchemaAlignmentDialog._updateReferencesNumber = function(container) { var childrenCount = container.children().length; var statement = container.parents('.wbs-statement'); var a = statement.find('.wbs-references-toggle a').first(); - a.html(childrenCount+$.i18n._('wikidata-schema')["nb-references"]); + a.html('▼ '+childrenCount+$.i18n._('wikidata-schema')["nb-references"]); } /************************ @@ -681,7 +696,7 @@ SchemaAlignmentDialog._initField = function(inputContainer, mode, initialValue, input.hide(); var columnDiv = $('
').appendTo(inputContainer); column.appendTo(columnDiv); - var deleteButton = $(' ').addClass('wbs-delete-column-button').appendTo(column); + var deleteButton = SchemaAlignmentDialog._makeDeleteButton(true).appendTo(column); deleteButton.attr('alt', $.i18n._('wikidata-schema')["remove-column"]); deleteButton.click(function () { columnDiv.remove(); diff --git a/extensions/wikidata/module/styles/dialogs/schema-alignment-dialog.less b/extensions/wikidata/module/styles/dialogs/schema-alignment-dialog.less index 02153dfe6..15c2c1f48 100644 --- a/extensions/wikidata/module/styles/dialogs/schema-alignment-dialog.less +++ b/extensions/wikidata/module/styles/dialogs/schema-alignment-dialog.less @@ -62,6 +62,10 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. padding-bottom: 3px; } +.wbs-target-input .wbs-draggable-column { + margin: 0px; +} + .wbs-reconciled-column { border-bottom: 3px solid #282; padding-bottom: 1px; @@ -71,6 +75,29 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. box-shadow: inset 0 0 10px #a7cdff; } +// The following two rules are taken from Wikibase +.wbs-icon { + background-position: center; + background-size: 20px 20px; + width: 20px; + height: 20px; + display: inline-block; + vertical-align: middle; + opacity: 0.7; +} + +.wbs-remove .wbs-icon { + background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%3E%20%3Cg%20id=%22remove%22%3E%20%3Cpath%20id=%22trash-can%22%20d=%22M12%2010h-1v6h1v-6zm-2%200H9v6h1v-6zm4%200h-1v6h1v-6zm0-4V5H9v1H6v3h1v7.966l1%201.03v-.073V18h6.984l.016-.018v.015l1-1.03V9h1V6h-3zm1%2011H8V9h7v8zm1-9H7V7h9v1z%22/%3E%20%3C/g%3E%20%3C/svg%3E"); +} + +.wbs-rank-selector-icon { + background-position: -36px; + width: 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; height: 20px; @@ -80,6 +107,10 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. margin: 5px; } +.wbs-target-input { + display: inline-flex; +} + .wbs-prop-input { width: 120px; } @@ -102,12 +133,21 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. padding: 2px; } +.wbs-remove, .wbs-add-item, .wbs-add-statement-group, .wbs-add-statement, .wbs-add-qualifier, .wbs-add-reference, .wbs-add-namedesc { color: #0645ad !important; font-size: 0.9em; } +.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; + color: grey; + width: 20px; + height: 20px; +} + .wbs-statement-group-container, .wbs-statement-container, .wbs-qualifier-container, .wbs-reference-container { width: 100%; display: block;