Merge branch '547' into 'develop'

Fix "Delete account modal partially hidden" issue

Closes #547

See merge request pleroma/pleroma-fe!803

package.json

@@ -25,6 +25,7 @@
     "object-path": "^0.11.3",
     "phoenix": "^1.3.0",
     "popper.js": "^1.14.7",
+    "portal-vue": "^2.1.4",
     "sanitize-html": "^1.13.0",
     "v-click-outside": "^2.1.1",
     "vue": "^2.5.13",

src/App.vue

@@ -49,6 +49,7 @@
     </div>
     <chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel>
     <UserReportingModal />
+    <portal-target name="modal" />
   </div>
 </template>
 

src/components/dialog_modal/dialog_modal.vue

@@ -62,6 +62,7 @@
 
     .title {
       margin-bottom: 0;
+      text-align: center;
     }
   }
 
@@ -80,6 +81,7 @@
     background-color: var(--lightBg, $fallback--lightBg);
     border-top: 1px solid $fallback--bg;
     border-top: 1px solid var(--bg, $fallback--bg);
+    display: flex;
     justify-content: flex-end;
 
     button {

src/components/moderation_tools/moderation_tools.vue

@@ -65,18 +65,20 @@
       {{ $t('user_card.admin_menu.moderation') }}
     </button>
   </Popper>
-  <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'>
-    <span slot="header">{{ $t('user_card.admin_menu.delete_user') }}</span>
-    <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-    <span slot="footer">
-      <button @click='deleteUserDialog(false)'>
-        {{ $t('general.cancel') }}
-      </button>
-      <button class="danger" @click='deleteUser()'>
-        {{ $t('user_card.admin_menu.delete_user') }}
-      </button>
-    </span>
-  </DialogModal>
+  <portal to="modal">
+    <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'>
+      <template slot="header">{{ $t('user_card.admin_menu.delete_user') }}</template>
+      <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
+      <template slot="footer">
+        <button class="btn btn-default" @click='deleteUserDialog(false)'>
+          {{ $t('general.cancel') }}
+        </button>
+        <button class="btn btn-default danger" @click='deleteUser()'>
+          {{ $t('user_card.admin_menu.delete_user') }}
+        </button>
+      </template>
+    </DialogModal>
+  </portal>
 </div>
 </template>
 

src/main.js

@@ -24,6 +24,7 @@ import messages from './i18n/messages.js'
 
 import VueChatScroll from 'vue-chat-scroll'
 import VueClickOutside from 'v-click-outside'
+import PortalVue from 'portal-vue'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -42,6 +43,7 @@ Vue.use(VueTimeago, {
 Vue.use(VueI18n)
 Vue.use(VueChatScroll)
 Vue.use(VueClickOutside)
+Vue.use(PortalVue)
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary

yarn.lock

@@ -6101,6 +6101,10 @@ popper.js@^1.14.7:
   version "1.14.7"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.7.tgz#e31ec06cfac6a97a53280c3e55e4e0c860e7738e"
 
+portal-vue@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.4.tgz#1fc679d77e294dc8d026f1eb84aa467de11b392e"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"