Merge pull request #4083 from h3poteto/clean/compose

[clean] Remove old compose modal

src/config/locales/en/translation.json

@@ -458,7 +458,7 @@
     "submit": "Submit"
   },
   "receive_drop": {
-    "drop_message": "Drop to Upload to Mastodon"
+    "drop_message": "Drop to Upload a file"
   },
   "message": {
     "account_load_error": "Failed to load accounts",

src/main/index.ts

@@ -949,18 +949,6 @@ const ApplicationMenu = (accountsChange: Array<MenuItemConstructorOptions>, menu
         ...applicationQuitMenu
       ]
     },
-    {
-      label: i18n.t<string>('main_menu.toot.name'),
-      submenu: [
-        {
-          label: i18n.t<string>('main_menu.toot.new'),
-          accelerator: 'CmdOrCtrl+N',
-          click: () => {
-            mainWindow!.webContents.send('CmdOrCtrl+N')
-          }
-        }
-      ]
-    },
     {
       label: i18n.t<string>('main_menu.edit.name'),
       submenu: [

src/renderer/components/TimelineSpace.vue

@@ -18,11 +18,10 @@
     <Detail />
   </el-aside>
   <modals></modals>
-  <receive-drop v-show="droppableVisible"></receive-drop>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { defineComponent, computed, ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { useI18next } from 'vue3-i18next'
@@ -33,28 +32,22 @@ import Compose from './TimelineSpace/Compose.vue'
 import Modals from './TimelineSpace/Modals.vue'
 import Detail from './TimelineSpace/Detail.vue'
 import Mousetrap from 'mousetrap'
-import ReceiveDrop from './TimelineSpace/ReceiveDrop.vue'
 import { AccountLoadError } from '@/errors/load'
 import { TimelineFetchError } from '@/errors/fetch'
-import { NewTootAttachLength } from '@/errors/validations'
-import { EventEmitter } from '@/components/event'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/TimelineSpace'
 import { MUTATION_TYPES as GLOBAL_HEADER_MUTATION } from '@/store/GlobalHeader'
 import { MUTATION_TYPES as JUMP_MUTATION } from '@/store/TimelineSpace/Modals/Jump'
-import { ACTION_TYPES as NEW_TOOT_ACTION } from '@/store/TimelineSpace/Modals/NewToot'
 
 export default defineComponent({
   name: 'timeline-space',
-  components: { SideMenu, HeaderMenu, Modals, Contents, ReceiveDrop, Compose, Detail },
+  components: { SideMenu, HeaderMenu, Modals, Contents, Compose, Detail },
   setup() {
     const space = 'TimelineSpace'
     const store = useStore()
     const route = useRoute()
     const i18n = useI18next()
 
-    const dropTarget = ref<any>(null)
-    const droppableVisible = ref<boolean>(false)
     const contentsRef = ref<HTMLElement | null>(null)
 
     const loading = computed(() => store.state.TimelineSpace.loading)
@@ -64,20 +57,11 @@ export default defineComponent({
       await initialize().finally(() => {
         store.commit(`GlobalHeader/${GLOBAL_HEADER_MUTATION.UPDATE_CHANGING}`, false)
       })
-      ;(window as any).addEventListener('dragenter', onDragEnter)
-      ;(window as any).addEventListener('dragleave', onDragLeave)
-      ;(window as any).addEventListener('dragover', onDragOver)
-      ;(window as any).addEventListener('drop', handleDrop)
+
       Mousetrap.bind(['command+t', 'ctrl+t'], () => {
         store.commit(`TimelineSpace/Modals/Jump/${JUMP_MUTATION.CHANGE_MODAL}`, true)
       })
     })
-    onBeforeUnmount(() => {
-      ;(window as any).removeEventListener('dragenter', onDragEnter)
-      ;(window as any).removeEventListener('dragleave', onDragLeave)
-      ;(window as any).removeEventListener('dragover', onDragOver)
-      ;(window as any).removeEventListener('drop', handleDrop)
-    })
 
     const clear = async () => {
       await store.dispatch(`${space}/${ACTION_TYPES.CLEAR_ACCOUNT}`)
@@ -106,56 +90,6 @@ export default defineComponent({
 
       await store.dispatch(`${space}/${ACTION_TYPES.PREPARE_SPACE}`)
     }
-    const handleDrop = (e: DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      droppableVisible.value = false
-      if (e.dataTransfer?.files.item(0) === null || e.dataTransfer?.files.item(0) === undefined) {
-        return false
-      }
-      const file = e.dataTransfer?.files.item(0)
-      if (file === null || (!file.type.includes('image') && !file.type.includes('video'))) {
-        ElMessage({
-          message: i18n.t('validation.new_toot.attach_image'),
-          type: 'error'
-        })
-        return false
-      }
-      store.dispatch(`TimelineSpace/Modals/NewToot/${NEW_TOOT_ACTION.OPEN_MODAL}`)
-      store
-        .dispatch(`TimelineSpace/Modals/NewToot/${NEW_TOOT_ACTION.UPLOAD_IMAGE}`, file)
-        .then(() => {
-          EventEmitter.emit('image-uploaded')
-        })
-        .catch(err => {
-          if (err instanceof NewTootAttachLength) {
-            ElMessage({
-              message: i18n.t('validation.new_toot.attach_length', { max: 4 }),
-              type: 'error'
-            })
-          } else {
-            ElMessage({
-              message: i18n.t('message.attach_error'),
-              type: 'error'
-            })
-          }
-        })
-      return false
-    }
-    const onDragEnter = (e: DragEvent) => {
-      if (e.dataTransfer && e.dataTransfer.types.indexOf('Files') >= 0) {
-        dropTarget.value = e.target
-        droppableVisible.value = true
-      }
-    }
-    const onDragLeave = (e: DragEvent) => {
-      if (e.target === dropTarget.value) {
-        droppableVisible.value = false
-      }
-    }
-    const onDragOver = (e: DragEvent) => {
-      e.preventDefault()
-    }
 
     const composeResized = (event: { width: number; height: number }) => {
       if (contentsRef.value) {
@@ -165,7 +99,6 @@ export default defineComponent({
 
     return {
       loading,
-      droppableVisible,
       composeResized,
       contentsRef,
       detail

src/renderer/components/TimelineSpace/Compose.vue

@@ -96,22 +96,25 @@
         </div>
       </div>
     </el-form>
+    <receive-drop v-if="droppableVisible"></receive-drop>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed, ref, onMounted, watch } from 'vue'
+import { defineComponent, reactive, computed, ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
 import emojiDefault from 'emoji-mart-vue-fast/data/all.json'
 import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
 import { useI18next } from 'vue3-i18next'
+import { ElMessage } from 'element-plus'
 import { useStore } from '@/store'
 import { MyWindow } from '~/src/types/global'
 import { LocalAccount } from '~/src/types/localAccount'
 import { LocalServer } from '~/src/types/localServer'
 import visibilityList from '~/src/constants/visibility'
 import { MUTATION_TYPES } from '@/store/TimelineSpace/Compose'
+import ReceiveDrop from './ReceiveDrop.vue'
 
 type Expire = {
   label: string
@@ -120,7 +123,7 @@ type Expire = {
 
 export default defineComponent({
   name: 'Compose',
-  components: { Picker },
+  components: { Picker, ReceiveDrop },
   setup() {
     const route = useRoute()
     const store = useStore()
@@ -196,6 +199,9 @@ export default defineComponent({
     const imageRef = ref<any>(null)
     const statusRef = ref<any>(null)
 
+    const dropTarget = ref<any>(null)
+    const droppableVisible = ref<boolean>(false)
+
     onMounted(async () => {
       const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
       const c = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
@@ -221,6 +227,17 @@ export default defineComponent({
           imageUrl: e.image
         }))
       emojiData.value = new EmojiIndex(emojiDefault, { custom: customEmojis })
+      ;(window as any).addEventListener('dragenter', onDragEnter)
+      ;(window as any).addEventListener('dragleave', onDragLeave)
+      ;(window as any).addEventListener('dragover', onDragOver)
+      ;(window as any).addEventListener('drop', handleDrop)
+    })
+
+    onBeforeUnmount(() => {
+      ;(window as any).removeEventListener('dragenter', onDragEnter)
+      ;(window as any).removeEventListener('dragleave', onDragLeave)
+      ;(window as any).removeEventListener('dragover', onDragOver)
+      ;(window as any).removeEventListener('drop', handleDrop)
     })
 
     watch(inReplyTo, current => {
@@ -349,6 +366,45 @@ export default defineComponent({
       poll.options = poll.options.filter((_, i) => i !== index)
     }
 
+    const handleDrop = (e: DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      droppableVisible.value = false
+      if (e.dataTransfer?.files.item(0) === null || e.dataTransfer?.files.item(0) === undefined) {
+        return false
+      }
+      const file = e.dataTransfer?.files.item(0)
+      if (file === null || (!file.type.includes('image') && !file.type.includes('video'))) {
+        ElMessage({
+          message: i18n.t('validation.new_toot.attach_image'),
+          type: 'error'
+        })
+        return false
+      }
+      uploadImage(file).catch(err => {
+        console.error(err)
+        ElMessage({
+          message: i18n.t('message.attach_error'),
+          type: 'error'
+        })
+      })
+      return false
+    }
+    const onDragEnter = (e: DragEvent) => {
+      if (e.dataTransfer && e.dataTransfer.types.indexOf('Files') >= 0) {
+        dropTarget.value = e.target
+        droppableVisible.value = true
+      }
+    }
+    const onDragLeave = (e: DragEvent) => {
+      if (e.target === dropTarget.value) {
+        droppableVisible.value = false
+      }
+    }
+    const onDragOver = (e: DragEvent) => {
+      e.preventDefault()
+    }
+
     return {
       form,
       post,
@@ -371,7 +427,8 @@ export default defineComponent({
       togglePoll,
       expiresList,
       addPollOption,
-      removePollOption
+      removePollOption,
+      droppableVisible
     }
   }
 })

src/renderer/components/TimelineSpace/HeaderMenu.vue

@@ -5,9 +5,6 @@
     </div>
     <div class="tools">
       <img src="../../assets/images/loading-spinner-wide.svg" v-show="loading" class="header-loading" />
-      <el-button class="action" link :title="$t('header_menu.new_toot')" @click="openNewTootModal">
-        <font-awesome-icon :icon="['far', 'pen-to-square']" />
-      </el-button>
       <el-button v-show="reloadable()" link class="action" :title="$t('header_menu.reload')" @click="reload">
         <font-awesome-icon icon="rotate" />
       </el-button>
@@ -42,7 +39,6 @@ import { useRoute, useRouter } from 'vue-router'
 import { useI18next } from 'vue3-i18next'
 import { useStore } from '@/store'
 import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/HeaderMenu'
-import { ACTION_TYPES as NEW_TOOT_ACTION } from '@/store/TimelineSpace/Modals/NewToot'
 import { MUTATION_TYPES as HOME_MUTATION } from '@/store/TimelineSpace/Contents/Home'
 
 export default defineComponent({
@@ -123,9 +119,7 @@ export default defineComponent({
           break
       }
     }
-    const openNewTootModal = () => {
-      store.dispatch(`TimelineSpace/Modals/NewToot/${NEW_TOOT_ACTION.OPEN_MODAL}`)
-    }
+
     const reload = () => {
       switch (route.name) {
         case 'favourites':
@@ -185,7 +179,6 @@ export default defineComponent({
     return {
       title,
       loading,
-      openNewTootModal,
       reloadable,
       reload,
       TLOption,

src/renderer/components/TimelineSpace/Modals.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <new-toot v-if="newTootModal"></new-toot>
     <jump v-if="jumpModal"></jump>
     <image-viewer></image-viewer>
     <list-membership v-if="listMembershipModal"></list-membership>
@@ -14,7 +13,6 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import { useStore } from '@/store'
-import NewToot from './Modals/NewToot.vue'
 import Jump from './Modals/Jump.vue'
 import ImageViewer from './Modals/ImageViewer.vue'
 import ListMembership from './Modals/ListMembership.vue'
@@ -26,7 +24,6 @@ import Report from './Modals/Report.vue'
 export default defineComponent({
   name: 'modals',
   components: {
-    NewToot,
     Jump,
     ImageViewer,
     ListMembership,
@@ -37,15 +34,13 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
-    const newTootModal = computed(() => store.state.TimelineSpace.Modals.NewToot.modalOpen)
     const jumpModal = computed(() => store.state.TimelineSpace.Modals.Jump.modalOpen)
     const reportModal = computed(() => store.state.TimelineSpace.Modals.Report.modalOpen)
     const muteConfirmModal = computed(() => store.state.TimelineSpace.Modals.MuteConfirm.modalOpen)
     const addListMemberModal = computed(() => store.state.TimelineSpace.Modals.AddListMember.modalOpen)
     const listMembershipModal = computed(() => store.state.TimelineSpace.Modals.ListMembership.modalOpen)
 
     return {
-      newTootModal,
       jumpModal,
       reportModal,
       muteConfirmModal,