refactor: dialogs (#1224)

* refactor: dialogs

* fix: storeAvatarImage

* FriendLog.vue

* FriendLog.vue

* FriendLog.vue

* GameLog.vue

* fix: next day button jumping to the wrong date

* sync master

* fix: launchGame

* Notification.vue

* Feed.vue

* Search.vue

* Profile.vue

* PlayerList.vue

* Login.vue

* utils

* update dialog

* del gameLog.pug

* fix

* fix: group role cannot be displayed currently

* fix: "Hide Friends in Same Instance" hides players in unrelated private instances (#1210)

* fix

* fix: "Hide Friends in Same Instance" does not work when "Split Favorite Friends" is enabled

* fix Notification.vue message

* fix: deleteFavoriteNoConfirm

* fix: feed status style

* fix: infinite loading when deleting note

* fix: private players will not be hidden when 'Hide Friends in Same Instance', and 'Hide Friends in Same Instance' will not work when 'Split Favorite Friends'

src/views/Favorites/dialogs/AvatarExportDialog.vue

@@ -1,11 +1,5 @@
 <template>
-    <el-dialog
-        :before-close="beforeDialogClose"
-        :visible.sync="isDialogVisible"
-        :title="$t('dialog.avatar_export.header')"
-        width="650px"
-        @mousedown.native="dialogMouseDown"
-        @mouseup.native="dialogMouseUp">
+    <safe-dialog :visible.sync="isDialogVisible" :title="$t('dialog.avatar_export.header')" width="650px">
         <el-checkbox-group
             v-model="exportSelectedOptions"
             style="margin-bottom: 10px"
@@ -82,13 +76,13 @@
             readonly
             style="margin-top: 15px"
             @click.native="handleCopyAvatarExportData"></el-input>
-    </el-dialog>
+    </safe-dialog>
 </template>
 
 <script>
     export default {
         name: 'AvatarExportDialog',
-        inject: ['API', 'beforeDialogClose', 'dialogMouseDown', 'dialogMouseUp'],
+        inject: ['API'],
         props: {
             avatarExportDialogVisible: Boolean,
             favoriteAvatars: Array,

src/views/Favorites/dialogs/AvatarImportDialog.vue

@@ -1,12 +1,9 @@
 <template>
-    <el-dialog
+    <safe-dialog
         ref="avatarImportDialog"
-        :before-close="beforeDialogClose"
         :visible.sync="isVisible"
         :title="$t('dialog.avatar_import.header')"
-        width="650px"
-        @mousedown.native="dialogMouseDown"
-        @mouseup.native="dialogMouseUp">
+        width="650px">
         <div style="display: flex; align-items: center; justify-content: space-between">
             <div style="font-size: 12px">{{ $t('dialog.avatar_import.description') }}</div>
             <div style="display: flex; align-items: center">
@@ -171,7 +168,7 @@
                 </template>
             </el-table-column>
         </data-tables>
-    </el-dialog>
+    </safe-dialog>
 </template>
 
 <script>
@@ -180,16 +177,7 @@
 
     export default {
         name: 'AvatarImportDialog',
-        inject: [
-            'API',
-            'beforeDialogClose',
-            'dialogMouseDown',
-            'dialogMouseUp',
-            'adjustDialogZ',
-            'showFullscreenImageDialog',
-            'showUserDialog',
-            'showAvatarDialog'
-        ],
+        inject: ['API', 'adjustDialogZ', 'showFullscreenImageDialog', 'showUserDialog', 'showAvatarDialog'],
         props: {
             getLocalAvatarFavoriteGroupLength: Function,
             localAvatarFavoriteGroups: Array,

src/views/Favorites/dialogs/FriendExportDialog.vue

@@ -1,13 +1,10 @@
 <template>
-    <el-dialog
-        :before-close="beforeDialogClose"
+    <safe-dialog
         :visible.sync="isDialogVisible"
         class="x-dialog"
         :title="$t('dialog.friend_export.header')"
         width="650px"
-        destroy-on-close
-        @mousedown.native="dialogMouseDown"
-        @mouseup.native="dialogMouseUp">
+        destroy-on-close>
         <el-dropdown trigger="click" size="small" @click.native.stop>
             <el-button size="mini">
                 <span v-if="friendExportFavoriteGroup">
@@ -42,13 +39,13 @@
             readonly
             style="margin-top: 15px"
             @click.native="handleCopyFriendExportData"></el-input>
-    </el-dialog>
+    </safe-dialog>
 </template>
 
 <script>
     export default {
         name: 'FriendExportDialog',
-        inject: ['API', 'beforeDialogClose', 'dialogMouseDown', 'dialogMouseUp'],
+        inject: ['API'],
         props: {
             friendExportDialogVisible: Boolean,
             favoriteFriends: Array

src/views/Favorites/dialogs/FriendImportDialog.vue

@@ -1,12 +1,9 @@
 <template>
-    <el-dialog
+    <safe-dialog
         ref="friendImportDialog"
-        :before-close="beforeDialogClose"
         :visible.sync="isVisible"
         :title="$t('dialog.friend_import.header')"
-        width="650px"
-        @mousedown.native="dialogMouseDown"
-        @mouseup.native="dialogMouseUp">
+        width="650px">
         <div style="display: flex; align-items: center; justify-content: space-between">
             <div style="font-size: 12px">{{ $t('dialog.friend_import.description') }}</div>
             <div style="display: flex; align-items: center">
@@ -122,7 +119,7 @@
                 </template>
             </el-table-column>
         </data-tables>
-    </el-dialog>
+    </safe-dialog>
 </template>
 
 <script>
@@ -131,17 +128,7 @@
 
     export default {
         name: 'FriendImportDialog',
-        inject: [
-            'API',
-            'userImage',
-            'userImageFull',
-            'showFullscreenImageDialog',
-            'showUserDialog',
-            'beforeDialogClose',
-            'dialogMouseDown',
-            'dialogMouseUp',
-            'adjustDialogZ'
-        ],
+        inject: ['API', 'userImage', 'userImageFull', 'showFullscreenImageDialog', 'showUserDialog', 'adjustDialogZ'],
         props: {
             friendImportDialogVisible: {
                 type: Boolean,

src/views/Favorites/dialogs/WorldExportDialog.vue

@@ -1,11 +1,5 @@
 <template>
-    <el-dialog
-        :before-close="beforeDialogClose"
-        :visible.sync="isDialogVisible"
-        :title="$t('dialog.world_export.header')"
-        width="650px"
-        @mousedown.native="dialogMouseDown"
-        @mouseup.native="dialogMouseUp">
+    <safe-dialog :visible.sync="isDialogVisible" :title="$t('dialog.world_export.header')" width="650px">
         <el-checkbox-group
             v-model="exportSelectedOptions"
             style="margin-bottom: 10px"
@@ -84,13 +78,13 @@
             readonly
             style="margin-top: 15px"
             @click.native="handleCopyWorldExportData"></el-input>
-    </el-dialog>
+    </safe-dialog>
 </template>
 
 <script>
     export default {
         name: 'WorldExportDialog',
-        inject: ['API', 'beforeDialogClose', 'dialogMouseDown', 'dialogMouseUp'],
+        inject: ['API'],
         props: {
             favoriteWorlds: Array,
             worldExportDialogVisible: Boolean,

src/views/Favorites/dialogs/WorldImportDialog.vue

@@ -1,14 +1,11 @@
 <template>
-    <el-dialog
+    <safe-dialog
         ref="worldImportDialog"
-        :before-close="beforeDialogClose"
         :visible.sync="isVisible"
         :title="$t('dialog.world_import.header')"
         width="650px"
         top="10vh"
-        class="x-dialog"
-        @mousedown.native="dialogMouseDown"
-        @mouseup.native="dialogMouseUp">
+        class="x-dialog">
         <div style="display: flex; align-items: center; justify-content: space-between">
             <div style="font-size: 12px">{{ $t('dialog.world_import.description') }}</div>
             <div style="display: flex; align-items: center">
@@ -176,7 +173,7 @@
                 </template>
             </el-table-column>
         </data-tables>
-    </el-dialog>
+    </safe-dialog>
 </template>
 
 <script>
@@ -185,16 +182,7 @@
 
     export default {
         name: 'WorldImportDialog',
-        inject: [
-            'API',
-            'beforeDialogClose',
-            'dialogMouseDown',
-            'dialogMouseUp',
-            'showFullscreenImageDialog',
-            'showUserDialog',
-            'adjustDialogZ',
-            'showWorldDialog'
-        ],
+        inject: ['API', 'showFullscreenImageDialog', 'showUserDialog', 'adjustDialogZ', 'showWorldDialog'],
         props: {
             worldImportDialogVisible: Boolean,
             worldImportDialogInput: String,