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

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