Lock views and prevent editing (#3094)

* working lock and unlock

* prevent flexible layout drop hints from showing

* fix lint issue

* wip

* disable mousedown when not editing in DisplayLayout

* continued wip

* Cherrypick new glyphs from add-new-glyphs-062320

* More new glyphs, updated art

- New glyphs: icon-unlocked and icon-target;
- Updated art for icon-lock glyph;

* Edit toggle refinements WIP

- Markup, CSS in BrowseBar.vue;

* More new glyphs, updated art

- New glyphs: icon-unlocked and icon-target;
- Updated art for icon-lock glyph;

* Edit toggle refinements

- Replaced toggle switch with button;

* prevent styling changes when locked

* fix lint issues

* fix tests

* make reviewer suggested changes

Co-authored-by: charlesh88 <charlesh88@gmail.com>

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -33,7 +33,7 @@
 
     <div
         class="c-frame-edit__move"
-        @mousedown="startMove([1,1], [0,0], $event)"
+        @mousedown="isEditing ? startMove([1,1], [0,0], $event) : null"
     ></div>
 </div>
 </template>
@@ -54,6 +54,10 @@ export default {
             required: true,
             validator: (arr) => arr && arr.length === 2
                 && arr.every(el => typeof el === 'number')
+        },
+        isEditing: {
+            type: Boolean,
+            required: true
         }
     },
     computed: {