From 2a81054f643ad08d899b62b6ecd7e0f7e3ef9721 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuel@fancy.org.uk>
Date: Thu, 23 Aug 2018 21:21:02 +0100
Subject: [PATCH] =?UTF-8?q?Add=20options=20for=20the=20popout=E2=80=99s=20?=
 =?UTF-8?q?position/trigger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/builtin/E2EEComponent.vue          | 12 +++--
 client/src/data/user.settings.default.json    | 44 ++++++++++++++++++-
 .../src/styles/partials/bdsettings/e2ee.scss  |  5 ++-
 3 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/client/src/builtin/E2EEComponent.vue b/client/src/builtin/E2EEComponent.vue
index eeb46902..6fc0d1cc 100644
--- a/client/src/builtin/E2EEComponent.vue
+++ b/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: {
diff --git a/client/src/data/user.settings.default.json b/client/src/data/user.settings.default.json
index 546b9d66..5c6388bf 100644
--- a/client/src/data/user.settings.default.json
+++ b/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"
+                            }
+                        ]
+                    }
+                ]
             }
         ]
     }
diff --git a/client/src/styles/partials/bdsettings/e2ee.scss b/client/src/styles/partials/bdsettings/e2ee.scss
index 571f02b9..bdc5d7e9 100644
--- a/client/src/styles/partials/bdsettings/e2ee.scss
+++ b/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 {