Prettify the schema UI

This commit is contained in:
Antonin Delpeuch 2018-03-19 16:49:23 +00:00
parent 6e4dfe67af
commit a4ece8ef6a
3 changed files with 163 additions and 32 deletions

View File

@ -9,11 +9,15 @@
},
"wikidata-schema": {
"dialog-header": "Align to Wikidata",
"dialog-explanation": "The schema alignment skeleton below specifies how your tabular data will be transformed into Wikibase statements. You can drag and drop columns in statements: they will be replaced by their values once you export the statements.",
"dialog-explanation": "The Wikidata schema below specifies how your tabular data will be transformed into Wikidata edits. You can drag and drop columns in most input boxes: for each row, the values in these columns will generate Wikidata edits.",
"schema-tab-header": "Schema",
"warnings-tab-header": "Issues",
"qs-preview-tab-header": "QuickStatements preview",
"draggable-columns-header": "Columns:",
"statements-header": "Statements",
"terms-header": "Terms",
"empty-statements": "no statements added",
"empty-terms": "no labels, descriptions or aliases added",
"add-item-button": "add item",
"add-term": "add term",
"remove": "remove",
@ -22,6 +26,7 @@
"add-qualifier": "add qualifier",
"add-reference": "add reference",
"add-reference-snak": "add",
"property-placeholder": "property",
"nb-references": " references",
"remove-column": "remove column",
"label": "Label",
@ -62,18 +67,18 @@
"connecting-to-wikidata": "Connecting to Wikidata..."
},
"perform-wikidata-edits": {
"dialog-header": "Perform edits on Wikidata",
"dialog-header": "Upload edits to Wikidata",
"review-your-edits": "Please check your edits carefully before pushing them to Wikidata. Large edit batches should be submitted for <a href=\"https://www.wikidata.org/wiki/Wikidata:Requests_for_permissions/Bot\" target=\"_blank\">bot review</a> first.",
"logged-in-as": "You are logged in as",
"edit-summary-label": "Edit summary:",
"edit-summary-placeholder": "a few words to describe your edits",
"perform-edits": "Perform edits",
"perform-edits": "Upload edits",
"cancel": "Cancel",
"analyzing-edits": "Analyzing your edits..."
},
"warnings-messages": {
"new-item-created": {
"title": "This batch will create new Wikidata items.",
"title": "This edit batch will create new Wikidata items.",
"body": "Please make sure that these items do not exist yet and are <a href=\"https://www.wikidata.org/wiki/Wikidata:Notability\" target=\"_blank\">suitable for inclusion in Wikidata</a>."
},
"new-item-without-labels-or-aliases": {

View File

@ -102,6 +102,12 @@ SchemaAlignmentDialog._createDraggableColumn = function(name, reconciled) {
return cell;
}
SchemaAlignmentDialog._plusButton = function(label, element) {
var plus = $('<b></b>').html('+&nbsp;').appendTo(element);
var span = $('<span></span>').text(label)
.appendTo(element);
}
SchemaAlignmentDialog._createDialog = function() {
var self = this;
var frame = $(DOM.loadHTML("wikidata", "scripts/dialogs/schema-alignment-dialog.html"));
@ -113,7 +119,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.html('<b>+</b>&nbsp;'+$.i18n._('wikidata-schema')["add-item-button"]);
SchemaAlignmentDialog._plusButton($.i18n._('wikidata-schema')["add-item-button"], this._elmts.addItemButton);
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"]);
@ -166,6 +172,7 @@ SchemaAlignmentDialog._createDialog = function() {
elmts.addItemButton.click(function() {
self._addItem();
SchemaAlignmentDialog._hasChanged();
});
$("#schema-alignment-tabs").tabs();
@ -207,28 +214,55 @@ SchemaAlignmentDialog._addItem = function(json) {
var item = $('<div></div>').addClass('wbs-item');
$('#schema-alignment-statements-container').append(item);
var deleteToolbar = $('<div></div>').addClass('wbs-toolbar')
.attr('style', 'margin-top: 10px')
.appendTo(item);
var deleteButton = SchemaAlignmentDialog._makeDeleteButton()
.appendTo(deleteToolbar)
.click(function() {
item.remove();
SchemaAlignmentDialog._hasChanged();
});
var inputContainer = $('<div></div>').addClass('wbs-item-input').appendTo(item);
SchemaAlignmentDialog._initField(inputContainer, "wikibase-item", subject);
var right = $('<div></div>').addClass('wbs-right').appendTo(item);
$('<div></div>').addClass('wbs-namedesc-container').appendTo(right);
var right = $('<div></div>').addClass('wbs-item-contents').appendTo(item);
// Terms
$('<span></span>').addClass('wbs-namedesc-header')
.text($.i18n._('wikidata-schema')["terms-header"]).appendTo(right);
$('<div></div>').addClass('wbs-namedesc-container')
.attr('data-emptyplaceholder', $.i18n._('wikidata-schema')['empty-terms'])
.appendTo(right);
var termToolbar = $('<div></div>').addClass('wbs-toolbar').appendTo(right);
$('<a></a>').addClass('wbs-add-namedesc').html('<b>+</b>&nbsp;'+
$.i18n._('wikidata-schema')["add-term"])
var addNamedescButton = $('<a></a>').addClass('wbs-add-namedesc')
.click(function() {
SchemaAlignmentDialog._addNameDesc(item, null);
}).appendTo(termToolbar);
$('<div></div>').addClass('wbs-statement-group-container').appendTo(right);
SchemaAlignmentDialog._plusButton(
$.i18n._('wikidata-schema')["add-term"], addNamedescButton);
// Clear the float
$('<div></div>').attr('style', 'clear: right').appendTo(right);
// Statements
$('<div></div>').addClass('wbs-statements-header')
.text($.i18n._('wikidata-schema')['statements-header']).appendTo(right);
$('<div></div>').addClass('wbs-statement-group-container')
.attr('data-emptyplaceholder', $.i18n._('wikidata-schema')['empty-statements'])
.appendTo(right);
var statementToolbar = $('<div></div>').addClass('wbs-toolbar').appendTo(right);
$('<a></a>').addClass('wbs-add-statement-group').html('<b>+</b>&nbsp;'+$.i18n._('wikidata-schema')["add-statement"]).click(function() {
var addStatementButton = $('<a></a>').addClass('wbs-add-statement-group')
.click(function() {
SchemaAlignmentDialog._addStatementGroup(item, null);
}).appendTo(statementToolbar);
SchemaAlignmentDialog._plusButton(
$.i18n._('wikidata-schema')["add-statement"], addStatementButton);
if (statementGroups) {
for(var i = 0; i != statementGroups.length; i++) {
SchemaAlignmentDialog._addStatementGroup(item, statementGroups[i]);
}
} else if (!nameDescs) {
SchemaAlignmentDialog._addStatementGroup(item);
}
if (nameDescs) {
@ -328,10 +362,17 @@ 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').html('<b>+</b>&nbsp;'+$.i18n._('wikidata-schema')["add-value"]).click(function() {
var addValueButton = $('<a></a>').addClass('wbs-add-statement').click(function() {
var datatype = inputContainer.data("jsonValue").datatype;
SchemaAlignmentDialog._addStatement(statementContainer, datatype, null);
}).appendTo(toolbar).hide();
SchemaAlignmentDialog._plusButton($.i18n._('wikidata-schema')["add-value"], addValueButton);
var removeButton = SchemaAlignmentDialog._makeDeleteButton()
.addClass('wbs-remove-statement-group')
.appendTo(toolbar)
.click(function() {
statementGroup.remove();
});
container.append(statementGroup);
@ -339,6 +380,7 @@ SchemaAlignmentDialog._addStatementGroup = function(item, json) {
for (var i = 0; i != statements.length; i++) {
SchemaAlignmentDialog._addStatement(statementContainer, property.datatype, statements[i]);
addValueButton.show();
removeButton.hide();
}
}
@ -369,16 +411,18 @@ SchemaAlignmentDialog._addStatement = function(container, datatype, json) {
}
var statement = $('<div></div>').addClass('wbs-statement');
var toolbar1 = $('<div></div>').addClass('wbs-toolbar').appendTo(statement);
SchemaAlignmentDialog._makeDeleteButton().click(function() {
SchemaAlignmentDialog._removeStatement(statement);
}).appendTo(toolbar1);
var inputContainer = $('<div></div>').addClass('wbs-target-input').appendTo(statement);
SchemaAlignmentDialog._initField(inputContainer, datatype, value);
// If we are in a mainsnak...
// (see https://www.mediawiki.org/wiki/Wikibase/DataModel#Snaks)
if (container.parents('.wbs-statement').length == 0) {
// add delete button
var toolbar1 = $('<div></div>').addClass('wbs-toolbar').appendTo(statement);
SchemaAlignmentDialog._makeDeleteButton().click(function() {
SchemaAlignmentDialog._removeStatement(statement);
}).appendTo(toolbar1);
// add rank
var rank = $('<div></div>').addClass('wbs-rank-selector-icon').prependTo(inputContainer);
@ -386,9 +430,12 @@ SchemaAlignmentDialog._addStatement = function(container, datatype, json) {
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').html('<b>+</b>&nbsp;'+$.i18n._('wikidata-schema')["add-qualifier"]).click(function() {
var addQualifierButton = $('<a></a>').addClass('wbs-add-qualifier')
.click(function() {
SchemaAlignmentDialog._addQualifier(qualifierContainer, null);
}).appendTo(toolbar2);
SchemaAlignmentDialog._plusButton($.i18n._('wikidata-schema')["add-qualifier"], addQualifierButton);
if (qualifiers) {
for (var i = 0; i != qualifiers.length; i++) {
SchemaAlignmentDialog._addQualifier(qualifierContainer, qualifiers[i]);
@ -396,21 +443,27 @@ SchemaAlignmentDialog._addStatement = function(container, datatype, json) {
}
// and references
$('<div></div>').attr('style', 'clear: right').appendTo(statement);
var referencesToggleContainer = $('<div></div>').addClass('wbs-references-toggle').appendTo(statement);
var triangle = $('<div></div>').addClass('triangle-icon').addClass('pointing-right').appendTo(referencesToggleContainer);
var referencesToggle = $('<a></a>').appendTo(referencesToggleContainer);
right = $('<div></div>').addClass('wbs-right').appendTo(statement);
var referenceContainer = $('<div></div>').addClass('wbs-reference-container').appendTo(right);
referencesToggle.click(function () {
triangle.toggleClass('pointing-down');
triangle.toggleClass('pointing-right');
referenceContainer.toggle(100);
});
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').html('<b>+</b>&nbsp;'+$.i18n._('wikidata-schema')["add-reference"]).click(function() {
var addReferenceButton = $('<a></a>').addClass('wbs-add-reference')
.click(function() {
referenceContainer.show();
SchemaAlignmentDialog._addReference(referenceContainer, null);
SchemaAlignmentDialog._updateReferencesNumber(referenceContainer);
}).appendTo(toolbar3);
SchemaAlignmentDialog._plusButton($.i18n._('wikidata-schema')["add-reference"], addReferenceButton);
if (references) {
for (var i = 0; i != references.length; i++) {
SchemaAlignmentDialog._addReference(referenceContainer, references[i]);
@ -454,6 +507,12 @@ SchemaAlignmentDialog._addQualifier = function(container, json) {
var toolbar1 = $('<div></div>').addClass('wbs-toolbar').appendTo(qualifier);
var inputContainer = $('<div></div>').addClass('wbs-prop-input').appendTo(qualifier);
var right = $('<div></div>').addClass('wbs-right').appendTo(qualifier);
var deleteButton = SchemaAlignmentDialog._makeDeleteButton()
.addClass('wbs-remove-statement-group')
.appendTo(toolbar1).click(function() {
qualifier.remove();
SchemaAlignmentDialog._hasChanged();
});
var statementContainer = $('<div></div>').addClass('wbs-statement-container').appendTo(right);
SchemaAlignmentDialog._initPropertyField(inputContainer, statementContainer, property);
if (value && property) {
@ -461,10 +520,6 @@ SchemaAlignmentDialog._addQualifier = function(container, json) {
}
}
SchemaAlignmentDialog._removeQualifier = function(qualifier) {
qualifier.remove();
}
SchemaAlignmentDialog._qualifierToJSON = function(elem) {
var prop = elem.find(".wbs-prop-input").first();
var target = elem.find(".wbs-target-input").first();
@ -495,9 +550,11 @@ 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').html('<b>+</b>&nbsp;'+$.i18n._('wikidata-schema')['add-reference-snak']).click(function() {
var addSnakButton = $('<a></a>').addClass('wbs-add-qualifier')
.click(function() {
SchemaAlignmentDialog._addQualifier(qualifierContainer, null);
}).appendTo(toolbar2);
SchemaAlignmentDialog._plusButton($.i18n._('wikidata-schema')['add-reference-snak'], addSnakButton);
if (snaks) {
for (var i = 0; i != snaks.length; i++) {
@ -521,7 +578,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('▼&nbsp;'+childrenCount+$.i18n._('wikidata-schema')["nb-references"]);
a.html(childrenCount+$.i18n._('wikidata-schema')["nb-references"]);
}
/************************
@ -545,7 +602,7 @@ SchemaAlignmentDialog._getPropertyType = function(pid, callback) {
SchemaAlignmentDialog._initPropertyField = function(inputContainer, targetContainer, initialValue) {
var input = $('<input></input>').appendTo(inputContainer);
input.attr("placeholder", "property");
input.attr("placeholder", $.i18n._('wikidata-schema')["property-placeholder"]);
if (this._reconService !== null) {
endpoint = this._reconService.suggest.property;
@ -565,6 +622,8 @@ SchemaAlignmentDialog._initPropertyField = function(inputContainer, targetContai
});
SchemaAlignmentDialog._addStatement(targetContainer, datatype, null);
var addValueButtons = targetContainer.parent().find('.wbs-add-statement');
var removeGroupButton = targetContainer.parent().find('.wbs-remove-statement-group');
removeGroupButton.hide();
addValueButtons.show();
});
SchemaAlignmentDialog._hasChanged();
@ -572,7 +631,9 @@ SchemaAlignmentDialog._initPropertyField = function(inputContainer, targetContai
inputContainer.data("jsonValue", null);
targetContainer.find('.wbs-statement').remove();
var addValueButtons = targetContainer.parent().find('.wbs-add-statement');
var removeGroupButton = targetContainer.parent().find('.wbs-remove-statement-group');
addValueButtons.hide();
removeGroupButton.show();
});
}

View File

@ -86,7 +86,7 @@ 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
// The following three rules are taken from Wikibase
.wbs-icon {
background-position: center;
background-size: 20px 20px;
@ -101,6 +101,10 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
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-remove span:last-child:hover {
text-decoration: underline;
}
.wbs-rank-selector-icon {
background-position: -36px;
width: 8px;
@ -158,10 +162,26 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
font-size: 0.9em;
}
.wbs-add-item:hover, .wbs-add-statement-group:hover, .wbs-add-statement:hover,
.wbs-add-qualifier:hover, .wbs-add-reference:hover, .wbs-add-namedesc:hover {
text-decoration: none;
}
.wbs-add-item span:hover, .wbs-add-statement-group span:hover, .wbs-add-statement span:hover,
.wbs-add-qualifier span:hover, .wbs-add-reference span:hover, .wbs-add-namedesc span:hover {
text-decoration: underline;
}
.wbs-remove {
display: inline-block;
}
.wbs-item-contents {
padding-left: 10px;
margin-left: 20px;
border-left: 3px solid gray;
}
.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;
@ -170,6 +190,11 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
height: 20px;
}
.wbs-statement-group-container:empty:before {
content: attr(data-emptyplaceholder);
color: gray;
}
.wbs-statement-group-container, .wbs-statement-container, .wbs-qualifier-container, .wbs-reference-container {
width: 100%;
display: block;
@ -182,7 +207,6 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
}
.wbs-item {
border: 1px solid #c8ccd1;
margin-bottom: 5px;
padding-right: 5px;
}
@ -216,7 +240,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
}
.wbs-qualifier .wbs-right {
width: 71%;
width: auto;
position: absolute;
top: 0px;
margin-left: 100px;
@ -235,8 +259,28 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
color: #0645ad !important;
}
.wbs-references-toggle .triangle-icon {
background: transparent url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%0A%20%20%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%0A%20%20%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%0A%20%20%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%0A%20%20%20id%3D%22svg8%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20viewBox%3D%220%200%202.6458332%202.6458332%22%0A%20%20%20height%3D%2210%22%0A%20%20%20width%3D%2210%22%3E%0A%20%20%3Cdefs%0A%20%20%20%20%20id%3D%22defs2%22%20/%3E%0A%20%20%3Cmetadata%0A%20%20%20%20%20id%3D%22metadata5%22%3E%0A%20%20%20%20%3Crdf%3ARDF%3E%0A%20%20%20%20%20%20%3Ccc%3AWork%0A%20%20%20%20%20%20%20%20%20rdf%3Aabout%3D%22%22%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Aformat%3Eimage/svg+xml%3C/dc%3Aformat%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atype%0A%20%20%20%20%20%20%20%20%20%20%20rdf%3Aresource%3D%22http%3A//purl.org/dc/dcmitype/StillImage%22%20/%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atitle%3E%3C/dc%3Atitle%3E%0A%20%20%20%20%20%20%3C/cc%3AWork%3E%0A%20%20%20%20%3C/rdf%3ARDF%3E%0A%20%20%3C/metadata%3E%0A%20%20%3Cg%0A%20%20%20%20%20transform%3D%22translate%280%2C-294.35416%29%22%0A%20%20%20%20%20id%3D%22layer1%22%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20id%3D%22path12%22%0A%20%20%20%20%20%20%20d%3D%22m%200.21601809%2C294.5035%202.28763941%2C1.14744%20-2.29850705%2C1.20871%20z%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23645eea%3Bfill-opacity%3A1%3Bfill-rule%3Aevenodd%3Bstroke%3A%23645eea%3Bstroke-width%3A0.06161711px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-opacity%3A1%22%20/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A) no-repeat center center;
background-size: 100% auto;
height: 8px;
width: 8px;
margin-right: 4px;
display: inline-block;
}
.pointing-right {
transform: rotate(0deg);
transition: .3s cubic-bezier(.17,.67,.21,1.69);
}
.pointing-down {
transform: rotate(90deg);
transition: .3s cubic-bezier(.17,.67,.21,1.69);
}
.wbs-qualifier .wbs-statement {
overflow: hidden;
background: transparent;
}
.wbs-monolingual-container, .wbs-quantity-container {
@ -259,8 +303,29 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
background-color: #eaf3ff;
}
.wbs-namedesc-container {
border: 1px solid #c8ccd1;
.wbs-namedesc-header, .wbs-statements-header {
font-size: 1.2em;
}
.wbs-namedesc {
border-left: 1px solid #c8ccd1;
border-right: 1px solid #c8ccd1;
}
.wbs-namedesc:first-child {
border-top: 1px solid #c8ccd1;
}
.wbs-namedesc:last-child {
border-bottom: 1px solid #c8ccd1;
}
.wbs-namedesc-container:empty:before {
content: attr(data-emptyplaceholder);
color: gray;
padding: 5px;
border: none;
}
.wbs-namedesc {