refs #1316 Allow resize new toot window

package-lock.json

@@ -8710,7 +8710,7 @@
       "dependencies": {
         "resolve": {
           "version": "1.1.7",
-          "resolved": "http://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
           "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
           "dev": true
         }
@@ -29263,6 +29263,11 @@
         "popper.js": "^1.15.0"
       }
     },
+    "vue-resize": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.5.0.tgz",
+      "integrity": "sha512-k5gOOwTIGSoWZb133Gx3IfSeiiAmve5GyWI7+pU8CvbNntpSAlrCYwZ26GB63NpxcLPK94+m0BDl5TxuZUI+Hw=="
+    },
     "vue-router": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.3.3.tgz",

package.json

@@ -201,6 +201,7 @@
     "vue-click-outside": "^1.1.0",
     "vue-electron": "^1.0.6",
     "vue-popperjs": "^2.3.0",
+    "vue-resize": "^0.5.0",
     "vue-router": "^3.3.3",
     "vue-shortkey": "^3.1.7",
     "vuex": "^3.4.0",

src/renderer/components/TimelineSpace/Modals/NewToot.vue

@@ -12,7 +12,14 @@
           <input type="text" class="el-input__inner" :placeholder="$t('modals.new_toot.cw')" v-model="spoiler" v-shortkey.avoid />
         </div>
       </div>
-      <Status v-model="status" :opened="newTootModal" :fixCursorPos="hashtagInserting" @paste="onPaste" @toot="toot" />
+      <Status
+        v-model="status"
+        :opened="newTootModal"
+        :fixCursorPos="hashtagInserting"
+        :height="statusHeight"
+        @paste="onPaste"
+        @toot="toot"
+      />
     </el-form>
     <Poll
       v-if="openPoll"
@@ -21,8 +28,9 @@
       @removePoll="removePoll"
       :defaultExpire="pollExpire"
       @changeExpire="changeExpire"
+      ref="poll"
     ></Poll>
-    <div class="preview">
+    <div class="preview" ref="preview">
       <div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
         <img :src="media.preview_url" class="preview-image" />
         <el-button type="text" @click="removeAttachment(media)" class="remove-image"><icon name="times-circle"></icon></el-button>
@@ -125,6 +133,7 @@
       </div>
       <div class="clearfix"></div>
     </div>
+    <resize-observer @notify="handleResize" />
   </el-dialog>
 </template>
 
@@ -152,7 +161,8 @@ export default {
       pollExpire: {
         label: this.$t('modals.new_toot.poll.expires.1_day'),
         value: 3600 * 24
-      }
+      },
+      statusHeight: 240
     }
   },
   computed: {
@@ -311,15 +321,23 @@ export default {
     },
     updateImage(file) {
       this.$store.dispatch('TimelineSpace/Modals/NewToot/incrementMediaCount')
-      this.$store.dispatch('TimelineSpace/Modals/NewToot/uploadImage', file).catch(() => {
-        this.$message({
-          message: this.$t('message.attach_error'),
-          type: 'error'
+      this.$store
+        .dispatch('TimelineSpace/Modals/NewToot/uploadImage', file)
+        .then(() => {
+          this.statusHeight = this.statusHeight - this.$refs.preview.offsetHeight
+        })
+        .catch(() => {
+          this.$message({
+            message: this.$t('message.attach_error'),
+            type: 'error'
+          })
         })
-      })
     },
     removeAttachment(media) {
-      this.$store.dispatch('TimelineSpace/Modals/NewToot/removeMedia', media)
+      const previousHeight = this.$refs.preview.offsetHeight
+      this.$store.dispatch('TimelineSpace/Modals/NewToot/removeMedia', media).then(() => {
+        this.statusHeight = this.statusHeight + previousHeight
+      })
     },
     changeVisibility(level) {
       this.$store.commit('TimelineSpace/Modals/NewToot/changeVisibilityValue', level)
@@ -357,12 +375,22 @@ export default {
     updateDescription(id, value) {
       this.$store.commit('TimelineSpace/Modals/NewToot/updateMediaDescription', { id: id, description: value })
     },
-    togglePollForm() {
-      this.openPoll = !this.openPoll
+    async togglePollForm() {
+      const previousHeight = this.$refs.poll ? this.$refs.poll.$el.offsetHeight : 0
+      const toggle = () => {
+        this.openPoll = !this.openPoll
+        if (this.openPoll) {
+          this.polls = ['', '']
+        } else {
+          this.polls = []
+        }
+      }
+      await toggle()
+      console.log(this.$refs.poll)
       if (this.openPoll) {
-        this.polls = ['', '']
+        this.statusHeight = this.statusHeight - this.$refs.poll.$el.offsetHeight
       } else {
-        this.polls = []
+        this.statusHeight = this.statusHeight + previousHeight
       }
     },
     addPoll() {
@@ -373,6 +401,10 @@ export default {
     },
     changeExpire(obj) {
       this.pollExpire = obj
+    },
+    handleResize(event) {
+      const pollHeight = this.$refs.poll ? this.$refs.poll.$el.offsetHeight : 0
+      this.statusHeight = event.height - 63 - 54 - this.$refs.preview.offsetHeight - pollHeight
     }
   }
 }
@@ -380,6 +412,12 @@ export default {
 
 <style lang="scss" scoped>
 .new-toot-modal /deep/ {
+  .el-dialog {
+    background-color: #f2f6fc;
+    overflow: hidden;
+    resize: both;
+  }
+
   .el-dialog__header {
     background-color: #4a5664;
 
@@ -470,6 +508,8 @@ export default {
   .el-dialog__footer {
     background-color: #f2f6fc;
     font-size: var(--base-font-size);
+    padding-bottom: 0;
+    margin-bottom: 20px;
 
     .upload-image {
       text-align: left;

src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue

@@ -15,6 +15,7 @@
       role="textbox"
       contenteditable="true"
       aria-multiline="true"
+      :style="`height: ${height}px`"
       autofocus
     >
     </textarea>
@@ -74,6 +75,10 @@ export default {
     fixCursorPos: {
       type: Boolean,
       default: false
+    },
+    height: {
+      type: Number,
+      default: 120
     }
   },
   data() {
@@ -271,6 +276,7 @@ export default {
   font-size: var(--base-font-size);
 
   textarea {
+    position: relative;
     display: block;
     padding: 4px 32px 4px 16px;
     line-height: 1.5;

src/renderer/main.ts

@@ -9,6 +9,8 @@ import 'vue-popperjs/dist/vue-popper.css'
 import { sync } from 'vuex-router-sync'
 import shortkey from 'vue-shortkey'
 import VueI18Next from '@panter/vue-i18next'
+import 'vue-resize/dist/vue-resize.css'
+import VueResize from 'vue-resize'
 
 import './assets/fonts/fonts.css'
 import App from './App.vue'
@@ -19,6 +21,7 @@ import i18next from '~/src/config/i18n'
 Vue.use(ElementUI, { locale })
 Vue.use(shortkey)
 Vue.use(VueI18Next)
+Vue.use(VueResize)
 Vue.component('icon', Icon)
 Vue.component('popper', Popper)