Tweak the schema alignment UI

This commit is contained in:
Antonin Delpeuch 2018-03-03 17:11:44 +00:00
parent 6b658fe87e
commit 6cb4386e64
4 changed files with 68 additions and 16 deletions

View File

@ -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",

View File

@ -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 },

View File

@ -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('<b>+</b>&nbsp;'+$.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 = $('<a></a>').addClass('wbs-remove').append(
$('<span></span>').addClass('wbs-icon')
);
if(noText === undefined) {
button.append(
$('<span></span>').text($.i18n._('wikidata-schema')["remove"]));
}
return button;
}
/**************/
/*** ITEMS ****/
/**************/
@ -198,12 +209,14 @@ SchemaAlignmentDialog._addItem = function(json) {
var right = $('<div></div>').addClass('wbs-right').appendTo(item);
$('<div></div>').addClass('wbs-namedesc-container').appendTo(right);
var toolbar = $('<div></div>').addClass('wbs-toolbar').appendTo(right);
$('<a></a>').addClass('wbs-add-namedesc').text($.i18n._('wikidata-schema')["add-term"]).click(function() {
$('<a></a>').addClass('wbs-add-namedesc').html('<b>+</b>&nbsp;'+
$.i18n._('wikidata-schema')["add-term"])
.click(function() {
SchemaAlignmentDialog._addNameDesc(item, null);
}).appendTo(toolbar);
$('<div></div>').addClass('wbs-statement-group-container').appendTo(right);
var toolbar = $('<div></div>').addClass('wbs-toolbar').appendTo(right);
$('<a></a>').addClass('wbs-add-statement-group').text($.i18n._('wikidata-schema')["add-statement"]).click(function() {
$('<a></a>').addClass('wbs-add-statement-group').html('<b>+</b>&nbsp;'+$.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 = $('<div></div>').addClass('wbs-toolbar').appendTo(namedesc);
$('<img src="images/close.png" />').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 = $('<div></div>').addClass('wbs-statement-container').appendTo(right);
SchemaAlignmentDialog._initPropertyField(inputContainer, statementContainer, property);
var toolbar = $('<div></div>').addClass('wbs-toolbar').appendTo(right);
var addValueButton = $('<a></a>').addClass('wbs-add-statement').text($.i18n._('wikidata-schema')["add-value"]).click(function() {
var addValueButton = $('<a></a>').addClass('wbs-add-statement').html('<b>+</b>&nbsp;'+$.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 = $('<div></div>').addClass('wbs-statement');
var toolbar1 = $('<div></div>').addClass('wbs-toolbar').appendTo(statement);
$('<img src="images/close.png" />').attr('alt', $.i18n._('wikidata-schema')["remove-statement"]).click(function() {
SchemaAlignmentDialog._makeDeleteButton().click(function() {
SchemaAlignmentDialog._removeStatement(statement);
}).appendTo(toolbar1);
var inputContainer = $('<div></div>').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 = $('<div></div>').addClass('wbs-rank-selector-icon').prependTo(inputContainer);
// add qualifiers...
var right = $('<div></div>').addClass('wbs-right').appendTo(statement);
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-qualifier"]).click(function() {
$('<a></a>').addClass('wbs-add-qualifier').html('<b>+</b>&nbsp;'+$.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 = $('<div></div>').addClass('wbs-right').appendTo(right);
var toolbar3 = $('<div></div>').addClass('wbs-toolbar').appendTo(right2);
$('<a></a>').addClass('wbs-add-reference').text($.i18n._('wikidata-schema')["add-reference"]).click(function() {
$('<a></a>').addClass('wbs-add-reference').html('<b>+</b>&nbsp;'+$.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 = $('<div></div>').addClass('wbs-reference').appendTo(container);
var referenceHeader = $('<div></div>').addClass('wbs-reference-header').appendTo(reference);
var toolbarRef = $('<div></div>').addClass('wbs-toolbar').appendTo(referenceHeader);
$('<img src="images/close.png" />').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('▼&nbsp;'+childrenCount+$.i18n._('wikidata-schema')["nb-references"]);
}
/************************
@ -681,7 +696,7 @@ SchemaAlignmentDialog._initField = function(inputContainer, mode, initialValue,
input.hide();
var columnDiv = $('<div></div>').appendTo(inputContainer);
column.appendTo(columnDiv);
var deleteButton = $('&nbsp;<img src="images/close.png" />').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();

View File

@ -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;