Use gray stroke on marker and lock icon on field for locked item

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': {}
         };

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

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;

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'))

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');
         }
     }
 

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')

svg/fontawesome/fas-lock.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lock" class="svg-inline--fa fa-lock fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path></svg>