Use portal for modals

src/components/account_actions/account_actions.vue

@@ -59,24 +59,26 @@
         </button>
       </template>
     </Popover>
-    <confirm-modal
-      :showing="showingConfirmBlock"
-      :title="$t('user_card.block_confirm_title')"
-      :confirm-text="$t('user_card.block_confirm_accept_button')"
-      :cancel-text="$t('user_card.block_confirm_cancel_button')"
-      @accepted="doBlockUser"
-      @cancelled="hideConfirmBlock"
-    >
-      <i18n
-        path="user_card.block_confirm"
-        tag="span"
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmBlock"
+        :title="$t('user_card.block_confirm_title')"
+        :confirm-text="$t('user_card.block_confirm_accept_button')"
+        :cancel-text="$t('user_card.block_confirm_cancel_button')"
+        @accepted="doBlockUser"
+        @cancelled="hideConfirmBlock"
       >
-        <span
-          place="user"
-          v-text="user.screen_name_ui"
-        />
-      </i18n>
-    </confirm-modal>
+        <i18n
+          path="user_card.block_confirm"
+          tag="span"
+        >
+          <span
+            place="user"
+            v-text="user.screen_name_ui"
+          />
+        </i18n>
+      </confirm-modal>
+    </portal>
   </div>
 </template>
 

src/components/confirm_modal/confirm_modal.js

@@ -11,12 +11,7 @@ const ConfirmModal = {
   components: {
     DialogModal
   },
-  data: {
-  },
   props: {
-    showing: {
-      type: Boolean
-    },
     title: {
       type: String
     },

src/components/confirm_modal/confirm_modal.vue

@@ -1,6 +1,5 @@
 <template>
   <dialog-modal
-    v-if="showing"
     class="confirm-modal"
     :on-cancel="onCancel"
   >

src/components/desktop_nav/desktop_nav.vue

@@ -167,16 +167,18 @@
         </a>
       </div>
     </div>
-    <confirm-modal
-      :showing="showingConfirmLogout"
-      :title="$t('login.logout_confirm_title')"
-      :confirm-text="$t('login.logout_confirm_accept_button')"
-      :cancel-text="$t('login.logout_confirm_cancel_button')"
-      @accepted="doLogout"
-      @cancelled="hideConfirmLogout"
-    >
-      {{ $t('login.logout_confirm') }}
-    </confirm-modal>
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmLogout"
+        :title="$t('login.logout_confirm_title')"
+        :confirm-text="$t('login.logout_confirm_accept_button')"
+        :cancel-text="$t('login.logout_confirm_cancel_button')"
+        @accepted="doLogout"
+        @cancelled="hideConfirmLogout"
+      >
+        {{ $t('login.logout_confirm') }}
+      </confirm-modal>
+    </portal>
   </nav>
 </template>
 <script src="./desktop_nav.js"></script>

src/components/extra_buttons/extra_buttons.vue

@@ -124,17 +124,19 @@
           class="fa-scale-110 fa-old-padding"
           icon="ellipsis-h"
         />
-      </button>
-      <ConfirmModal
-        :showing="showingDeleteDialog"
-        :title="$t('status.delete_confirm_title')"
-        :cancel-text="$t('status.delete_confirm_cancel_button')"
-        :confirm-text="$t('status.delete_confirm_accept_button')"
-        @cancelled="hideDeleteStatusConfirmDialog"
-        @accepted="doDeleteStatus"
-      >
-        {{ $t('status.delete_confirm') }}
-      </ConfirmModal>
+      </span>
+      <portal to="modal">
+        <ConfirmModal
+          v-if="showingDeleteDialog"
+          :title="$t('status.delete_confirm_title')"
+          :cancel-text="$t('status.delete_confirm_cancel_button')"
+          :confirm-text="$t('status.delete_confirm_accept_button')"
+          @cancelled="hideDeleteStatusConfirmDialog"
+          @accepted="doDeleteStatus"
+        >
+          {{ $t('status.delete_confirm') }}
+        </ConfirmModal>
+      </portal>
     </template>
   </Popover>
 </template>

src/components/follow_button/follow_button.vue

@@ -1,33 +1,33 @@
 <template>
-  <div>
-    <button
-      class="btn button-default follow-button"
-      :class="{ toggled: isPressed }"
-      :disabled="disabled"
-      :title="title"
-      @click="onClick"
-    >
-      {{ label }}
-    </button>
-    <confirm-modal
-      :showing="showingConfirmUnfollow"
-      :title="$t('user_card.unfollow_confirm_title')"
-      :confirm-text="$t('user_card.unfollow_confirm_accept_button')"
-      :cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
-      @accepted="doUnfollow"
-      @cancelled="hideConfirmUnfollow"
-    >
-      <i18n
-        path="user_card.unfollow_confirm"
-        tag="span"
+  <button
+    class="btn button-default follow-button"
+    :class="{ toggled: isPressed }"
+    :disabled="disabled"
+    :title="title"
+    @click="onClick"
+  >
+    {{ label }}
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmUnfollow"
+        :title="$t('user_card.unfollow_confirm_title')"
+        :confirm-text="$t('user_card.unfollow_confirm_accept_button')"
+        :cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
+        @accepted="doUnfollow"
+        @cancelled="hideConfirmUnfollow"
       >
-        <span
-          place="user"
-          v-text="user.screen_name_ui"
-        />
-      </i18n>
-    </confirm-modal>
-  </div>
+        <i18n
+          path="user_card.unfollow_confirm"
+          tag="span"
+        >
+          <span
+            place="user"
+            v-text="user.screen_name_ui"
+          />
+        </i18n>
+      </confirm-modal>
+    </portal>
+  </button>
 </template>
 
 <script src="./follow_button.js"></script>

src/components/mobile_nav/mobile_nav.vue

@@ -76,16 +76,18 @@
       ref="sideDrawer"
       :logout="logout"
     />
-    <confirm-modal
-      :showing="showingConfirmLogout"
-      :title="$t('login.logout_confirm_title')"
-      :confirm-text="$t('login.logout_confirm_accept_button')"
-      :cancel-text="$t('login.logout_confirm_cancel_button')"
-      @accepted="doLogout"
-      @cancelled="hideConfirmLogout"
-    >
-      {{ $t('login.logout_confirm') }}
-    </confirm-modal>
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmLogout"
+        :title="$t('login.logout_confirm_title')"
+        :confirm-text="$t('login.logout_confirm_accept_button')"
+        :cancel-text="$t('login.logout_confirm_cancel_button')"
+        @accepted="doLogout"
+        @cancelled="hideConfirmLogout"
+      >
+        {{ $t('login.logout_confirm') }}
+      </confirm-modal>
+    </portal>
   </div>
 </template>
 

src/components/retweet_button/retweet_button.vue

@@ -33,16 +33,18 @@
     >
       {{ status.repeat_num }}
     </span>
-    <confirm-modal
-      :showing="showingConfirmDialog"
-      :title="$t('status.repeat_confirm_title')"
-      :confirm-text="$t('status.repeat_confirm_accept_button')"
-      :cancel-text="$t('status.repeat_confirm_cancel_button')"
-      @accepted="doRetweet"
-      @cancelled="hideConfirmDialog"
-    >
-      {{ $t('status.repeat_confirm') }}
-    </confirm-modal>
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmDialog"
+        :title="$t('status.repeat_confirm_title')"
+        :confirm-text="$t('status.repeat_confirm_accept_button')"
+        :cancel-text="$t('status.repeat_confirm_cancel_button')"
+        @accepted="doRetweet"
+        @cancelled="hideConfirmDialog"
+      >
+        {{ $t('status.repeat_confirm') }}
+      </confirm-modal>
+    </portal>
   </div>
 </template>
 

src/components/user_card/user_card.vue

@@ -295,24 +295,26 @@
         :handle-links="true"
       />
     </div>
-    <confirm-modal
-      :showing="showingConfirmMute"
-      :title="$t('user_card.mute_confirm_title')"
-      :confirm-text="$t('user_card.mute_confirm_accept_button')"
-      :cancel-text="$t('user_card.mute_confirm_cancel_button')"
-      @accepted="doMuteUser"
-      @cancelled="hideConfirmMute"
-    >
-      <i18n
-        path="user_card.mute_confirm"
-        tag="span"
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmMute"
+        :title="$t('user_card.mute_confirm_title')"
+        :confirm-text="$t('user_card.mute_confirm_accept_button')"
+        :cancel-text="$t('user_card.mute_confirm_cancel_button')"
+        @accepted="doMuteUser"
+        @cancelled="hideConfirmMute"
       >
-        <span
-          place="user"
-          v-text="user.screen_name_ui"
-        />
-      </i18n>
-    </confirm-modal>
+        <i18n
+          path="user_card.mute_confirm"
+          tag="span"
+        >
+          <span
+            place="user"
+            v-text="user.screen_name_ui"
+          />
+        </i18n>
+      </confirm-modal>
+    </portal>
   </div>
 </template>