Merge branch 'master' into suggested-changes

client/src/builtin/E2EEComponent.vue

@@ -10,7 +10,11 @@
 
 <template>
     <div class="bd-e2eeTaContainer">
-        <v-popover popoverClass="bd-popover bd-e2eePopover" placement="top">
+        <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>
@@ -27,9 +31,9 @@
             </div>
 
             <template slot="popover">
-                <div @click="toggleEncrypt" :class="{'bd-warn': !E2EE.encryptNewMessages, 'bd-ok': E2EE.encryptNewMessages}"><MiLock size="16" v-tooltip="'Toggle Encryption'" /></div>
-                <div v-close-popover @click="showUploadDialog" v-if="!error"><MiImagePlus size="16" v-tooltip="'Upload Encrypted Image'" /></div>
-                <div v-close-popover @click="generatePublicKey" v-if="DiscordApi.currentChannel.type === 'DM'"><MiIcVpnKey size="16" v-tooltip="'Begin Key Exchange'" /></div>
+                <div @click="toggleEncrypt" :class="{'bd-warn': !E2EE.encryptNewMessages, 'bd-ok': E2EE.encryptNewMessages}"><MiLock v-tooltip="'Toggle Encryption'" /></div>
+                <div v-close-popover @click="showUploadDialog" v-if="!error"><MiImagePlus v-tooltip="'Upload Encrypted Image'" /></div>
+                <div v-close-popover @click="generatePublicKey" v-if="DiscordApi.currentChannel.type === 'DM'"><MiIcVpnKey v-tooltip="'Begin Key Exchange'" /></div>
             </template>
         </v-popover>
         <div class="bd-taDivider"></div>
@@ -39,7 +43,7 @@
 <script>
     import { Utils, FileUtils, ClientIPC } from 'common';
     import { E2EE } from 'builtin';
-    import { DiscordApi, Reflection } from 'modules';
+    import { Settings, DiscordApi, Reflection } 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,8 +108,10 @@
 
 .bd-e2eePopover {
     background: #484b51;
-    margin: 0;
-    margin-top: 15px;
+
+    &.bd-e2eePopoverOver {
+        transform: translate(-2px, 52px);
+    }
 
     .bd-ok {
         svg {
@@ -123,9 +125,7 @@
         }
     }
 
-    .bd-popoverWrapper,
     .bd-popoverWrapper {
-        .bd-popoverInner,
         .bd-popoverInner {
             display: flex;
 
@@ -141,7 +141,6 @@
                 }
             }
 
-            .bd-materialDesignIcon,
             .bd-materialDesignIcon {
                 display: flex;
                 fill: #7e8084;
@@ -154,7 +153,6 @@
         }
     }
 
-    .bd-popoverArrow,
     .bd-popoverArrow {
         display: none;
     }