From 06bdfbfb8ab5dc7fb05dc3f9197d2659782fb434 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Mon, 20 May 2019 15:36:10 -0400 Subject: [PATCH] Use gray stroke on marker and lock icon on field for locked item --- build_data.js | 1 + css/20_map.css | 6 ++--- css/80_app.css | 9 ++++++++ modules/ui/field.js | 24 +++++++++++--------- modules/ui/fields/input.js | 21 ++++++++++++----- modules/ui/fields/localized.js | 41 +++++++++++++++++++++++++--------- svg/fontawesome/fas-lock.svg | 1 + 7 files changed, 73 insertions(+), 30 deletions(-) create mode 100644 svg/fontawesome/fas-lock.svg diff --git a/build_data.js b/build_data.js index b55c8154b..e92125de8 100644 --- a/build_data.js +++ b/build_data.js @@ -55,6 +55,7 @@ module.exports = function buildData() { // Font Awesome icons used var faIcons = { 'fas-i-cursor': {}, + 'fas-lock': {}, 'fas-long-arrow-alt-right': {}, 'fas-th-list': {} }; diff --git a/css/20_map.css b/css/20_map.css index ab36ca76e..1c89fb588 100644 --- a/css/20_map.css +++ b/css/20_map.css @@ -287,10 +287,8 @@ text.point { /* Wikidata-tagged */ g.point.tag-wikidata path.stroke { stroke-width: 3px; - stroke: #383; -} -.icon.areaicon-halo.tag-wikidata { - stroke: #6c6; + stroke: #777; + fill: #ddd; } diff --git a/css/80_app.css b/css/80_app.css index 5c0e8a0c4..7850c7182 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -1528,6 +1528,15 @@ button.preset-favorite-button.active .icon { padding: 5px 10px 5px 0; } +.label-text .label-textannotation svg.icon { + margin: 0 10px; + color: #333; + opacity: 0.5; + width: 14px; + height: 14px; + vertical-align: text-top; +} + .field-label button { flex: 0 0 32px; border-left: 1px solid #ccc; diff --git a/modules/ui/field.js b/modules/ui/field.js index 3a6dc5aa8..7ba6c9743 100644 --- a/modules/ui/field.js +++ b/modules/ui/field.js @@ -1,9 +1,5 @@ import { dispatch as d3_dispatch } from 'd3-dispatch'; - -import { - event as d3_event, - select as d3_select -} from 'd3-selection'; +import { event as d3_event, select as d3_select } from 'd3-selection'; import { t } from '../util/locale'; import { textDirection } from '../util/locale'; @@ -117,18 +113,26 @@ export function uiField(context, presetField, entity, options) { .classed('nowrap', !options.wrap); if (options.wrap) { - var label = enter + var labelEnter = enter .append('label') .attr('class', 'field-label') .attr('for', function(d) { return 'preset-input-' + d.safeid; }); - label + var textEnter = labelEnter .append('span') - .attr('class', 'label-text') + .attr('class', 'label-text'); + + textEnter + .append('span') + .attr('class', 'label-textvalue') .text(function(d) { return d.label(); }); + textEnter + .append('span') + .attr('class', 'label-textannotation'); + if (options.remove) { - label + labelEnter .append('button') .attr('class', 'remove-icon') .attr('title', t('icons.remove')) @@ -137,7 +141,7 @@ export function uiField(context, presetField, entity, options) { } if (options.revert) { - label + labelEnter .append('button') .attr('class', 'modified-icon') .attr('title', t('icons.undo')) diff --git a/modules/ui/fields/input.js b/modules/ui/fields/input.js index 782875a95..1da4bc639 100644 --- a/modules/ui/fields/input.js +++ b/modules/ui/fields/input.js @@ -1,8 +1,5 @@ import { dispatch as d3_dispatch } from 'd3-dispatch'; -import { - select as d3_select, - event as d3_event -} from 'd3-selection'; +import { select as d3_select, event as d3_event } from 'd3-selection'; import { t, textDirection } from '../../util/locale'; import { dataPhoneFormats } from '../../../data'; @@ -113,7 +110,21 @@ export function uiFieldText(field, context) { .filter(function(k) { return k !== pKey && k !== 'name'; }); } - wrap.call(isSuggestion ? _brandTip : _brandTip.destroy); + selection.call(isSuggestion ? _brandTip : _brandTip.destroy); + + // add a label annotation + var annotation = selection.selectAll('.field-label .label-textannotation'); + var icon = annotation.selectAll('.icon') + .data(isSuggestion ? [0]: []); + + icon.exit() + .remove(); + + icon.enter() + .append('svg') + .attr('class', 'icon') + .append('use') + .attr('xlink:href', '#fas-lock'); } } diff --git a/modules/ui/fields/localized.js b/modules/ui/fields/localized.js index a0c6abc2f..009eb8bb3 100644 --- a/modules/ui/fields/localized.js +++ b/modules/ui/fields/localized.js @@ -1,10 +1,5 @@ import { dispatch as d3_dispatch } from 'd3-dispatch'; - -import { - select as d3_select, - event as d3_event -} from 'd3-selection'; - +import { select as d3_select, event as d3_event } from 'd3-selection'; import { t } from '../../util/locale'; import { dataWikipedia } from '../../../data'; @@ -97,9 +92,7 @@ export function uiFieldLocalized(field, context) { wrap = wrap.enter() .append('div') .attr('class', 'form-field-input-wrap form-field-input-' + field.type) - .merge(wrap) - .call(_isLocked ? _brandTip : _brandTip.destroy); - + .merge(wrap); input = wrap.selectAll('.localized-main') .data([0]); @@ -197,6 +190,24 @@ export function uiFieldLocalized(field, context) { .attr('readonly', _isLocked || null); + _selection.call(_isLocked ? _brandTip : _brandTip.destroy); + + // add a label annotations if locked + var annotation = selection.selectAll('.field-label .label-textannotation'); + var icon = annotation.selectAll('.icon') + .data(_isLocked ? [0]: []); + + icon.exit() + .remove(); + + icon.enter() + .append('svg') + .attr('class', 'icon') + .append('use') + .attr('xlink:href', '#fas-lock'); + + + // We are not guaranteed to get an `accept` or `cancel` when blurring the field. // (This can happen if the user actives the combo, arrows down, and then clicks off to blur) // So compare the current field value against the suggestions one last time. @@ -404,11 +415,19 @@ export function uiFieldLocalized(field, context) { .append('label') .attr('class', 'field-label'); - label + var text = label .append('span') - .attr('class', 'label-text') + .attr('class', 'label-text'); + + text + .append('span') + .attr('class', 'label-textvalue') .text(t('translate.localized_translation_label')); + text + .append('span') + .attr('class', 'label-textannotation'); + label .append('button') .attr('class', 'remove-icon-multilingual') diff --git a/svg/fontawesome/fas-lock.svg b/svg/fontawesome/fas-lock.svg new file mode 100644 index 000000000..19dfa22ee --- /dev/null +++ b/svg/fontawesome/fas-lock.svg @@ -0,0 +1 @@ + \ No newline at end of file