Implement "View Avatar" in user context menu

app/index.html

@@ -179,6 +179,8 @@
           </form>
         </div>
       <!-- /ko -->
+      <img class="avatar-view" data-bind="visible: avatarView, attr: { src: avatarView },
+                                          click: function () { avatarView(null) }"></img>
       <!-- ko with: userContextMenu -->
       <ul class="context-menu" data-bind="if: target,
                                           style: { left: posX() + 'px',
@@ -216,7 +218,8 @@
         </li>
         <!-- /ko -->
 
-        <li data-bind="css: { disabled: !canChangeAvatar() }, visible: texture">
+        <li data-bind="css: { disabled: !canChangeAvatar() }, visible: texture,
+                       click: viewAvatar">
           View Avatar
         </li>
         <!-- ko if: $data === $root.thisUser() -->

app/index.js

@@ -189,6 +189,7 @@ class GlobalBindings {
     this.log = ko.observableArray()
     this.thisUser = ko.observable()
     this.root = ko.observable()
+    this.avatarView = ko.observable()
     this.messageBox = ko.observable('')
     this.toolbarHorizontal = ko.observable(!this.settings.toolbarVertical)
     this.selected = ko.observable()
@@ -410,6 +411,9 @@ class GlobalBindings {
           this.requestDeaf(ui)
         }
       }
+      ui.viewAvatar = () => {
+        this.avatarView(ui.texture())
+      }
       Object.entries(simpleProperties).forEach(key => {
         ui[key[1]] = ko.observable(user[key[0]])
       })

themes/MetroMumbleLight/main.scss

@@ -253,6 +253,17 @@ html, body {
     }
   }
 }
+.avatar-view {
+  position: absolute;
+  z-index: 200;
+  max-width: 90%;
+  max-height: 90%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
 .toolbar {
   display: flex;
   align-items: center;