Add options for the popout’s position/trigger

client/src/builtin/E2EEComponent.vue

@@ -10,7 +10,11 @@
 
 <template>
     <div class="bd-e2eeTaContainer">
-        <v-popover popoverClass="bd-popover bd-e2eePopover" trigger="hover" placement="top-start" :disabled="error && DiscordApi.currentChannel.type !== 'DM'">
+        <v-popover :popoverClass="['bd-popover', 'bd-e2eePopover', {'bd-e2eePopoverOver': popoutPositionSetting.value === 'over'}]"
+            :trigger="popoutPositionSetting.value === 'over' && popoutTriggerSetting.value === 'hover' ? 'hover' : 'click'"
+            :placement="popoutPositionSetting.value === 'over' ? 'top-start' : 'top'"
+            :disabled="error && DiscordApi.currentChannel.type !== 'DM'">
+
             <div v-if="error" class="bd-e2eeTaBtn bd-e2eeLock bd-error">
                 <MiLock v-tooltip="error" />
             </div>
@@ -39,7 +43,7 @@
 <script>
     import { Utils, FileUtils, ClientIPC } from 'common';
     import { E2EE } from 'builtin';
-    import { DiscordApi, WebpackModules } from 'modules';
+    import { Settings, DiscordApi, WebpackModules } from 'modules';
     import { Toasts } from 'ui';
     import { MiLock, MiImagePlus, MiIcVpnKey } from '../ui/components/common/MaterialIcon';
 
@@ -50,9 +54,11 @@
         data() {
             return {
                 E2EE,
+                DiscordApi,
                 state: 'loading',
                 error: null,
-                DiscordApi
+                popoutPositionSetting: Settings.getSetting('security', 'e2ee-popout', 'position'),
+                popoutTriggerSetting: Settings.getSetting('security', 'e2ee-popout', 'trigger')
             };
         },
         methods: {

client/src/data/user.settings.default.json

@@ -252,10 +252,52 @@
                 "settings": [
                     {
                         "id": "e2ekvps",
-                        "type": [ "securekvp" ],
+                        "type": ["securekvp"],
                         "value": []
                     }
                 ]
+            },
+            {
+                "id": "e2ee-popout",
+                "name": "E2EE Popout",
+                "type": "drawer",
+                "settings": [
+                    {
+                        "id": "position",
+                        "type": "radio",
+                        "text": "Position",
+                        "value": "above",
+                        "fullwidth": true,
+                        "options": [
+                            {
+                                "text": "Above the lock icon",
+                                "value": "above"
+                            },
+                            {
+                                "text": "Over the lock icon",
+                                "value": "over"
+                            }
+                        ]
+                    },
+                    {
+                        "id": "trigger",
+                        "type": "radio",
+                        "text": "Trigger",
+                        "hint": "Only applies when the popout is over the lock icon",
+                        "value": "click",
+                        "fullwidth": true,
+                        "options": [
+                            {
+                                "text": "After clicking the lock icon",
+                                "value": "click"
+                            },
+                            {
+                                "text": "When hovering over the lock icon",
+                                "value": "hover"
+                            }
+                        ]
+                    }
+                ]
             }
         ]
     }

client/src/styles/partials/bdsettings/e2ee.scss

@@ -108,7 +108,10 @@
 
 .bd-e2eePopover {
     background: #484b51;
-    transform: translate(-2px, 52px);
+
+    &.bd-e2eePopoverOver {
+        transform: translate(-2px, 52px);
+    }
 
     .bd-ok {
         svg {