Merge pull request #1555 from h3poteto/iss-1316-el
refs #1316 Allow resize new toot window
This commit is contained in:
AkiraFukushima
GitHub
commit
cc85b3c053
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -3,16 +3,26 @@
|
|||
:title="$t('modals.new_toot.title')"
|
||||
:visible.sync="newTootModal"
|
||||
:before-close="closeConfirm"
|
||||
width="400px"
|
||||
width="600px"
|
||||
class="new-toot-modal"
|
||||
ref="dialog"
|
||||
>
|
||||
<el-form v-on:submit.prevent="toot" role="form">
|
||||
<div class="spoiler" v-show="showContentWarning">
|
||||
<div class="spoiler" v-if="showContentWarning" ref="spoiler">
|
||||
<div class="el-input">
|
||||
<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"
|
||||
@pickerOpened="innerElementOpened"
|
||||
@suggestOpened="innerElementOpened"
|
||||
/>
|
||||
</el-form>
|
||||
<Poll
|
||||
v-if="openPoll"
|
||||
|
|
@ -21,8 +31,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>
|
||||
|
|
@ -94,7 +105,7 @@
|
|||
<el-button
|
||||
size="small"
|
||||
type="text"
|
||||
@click="showContentWarning = !showContentWarning"
|
||||
@click="toggleContentWarning()"
|
||||
:title="$t('modals.new_toot.footer.add_cw')"
|
||||
:class="showContentWarning ? '' : 'clickable'"
|
||||
:aria-pressed="showContentWarning"
|
||||
|
|
@ -125,6 +136,7 @@
|
|||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<resize-observer @notify="handleResize" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
|
|
@ -152,7 +164,8 @@ export default {
|
|||
pollExpire: {
|
||||
label: this.$t('modals.new_toot.poll.expires.1_day'),
|
||||
value: 3600 * 24
|
||||
}
|
||||
},
|
||||
statusHeight: 240
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -311,15 +324,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 +378,21 @@ 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()
|
||||
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 +403,30 @@ export default {
|
|||
},
|
||||
changeExpire(obj) {
|
||||
this.pollExpire = obj
|
||||
},
|
||||
async toggleContentWarning() {
|
||||
const previousHeight = this.$refs.spoiler ? this.$refs.spoiler.offsetHeight : 0
|
||||
await (this.showContentWarning = !this.showContentWarning)
|
||||
if (this.showContentWarning) {
|
||||
this.statusHeight = this.statusHeight - this.$refs.spoiler.offsetHeight
|
||||
} else {
|
||||
this.statusHeight = this.statusHeight + previousHeight
|
||||
}
|
||||
},
|
||||
handleResize(event) {
|
||||
const style = this.$refs.dialog.$el.firstChild.style
|
||||
if (style.overflow === '' || style.overflow === 'hidden') {
|
||||
const pollHeight = this.$refs.poll ? this.$refs.poll.$el.offsetHeight : 0
|
||||
const spoilerHeight = this.$refs.spoiler ? this.$refs.spoiler.offsetHeight : 0
|
||||
this.statusHeight = event.height - 63 - 54 - this.$refs.preview.offsetHeight - pollHeight - spoilerHeight
|
||||
}
|
||||
},
|
||||
innerElementOpened(open) {
|
||||
if (open) {
|
||||
this.$refs.dialog.$el.firstChild.style.overflow = 'visible'
|
||||
} else {
|
||||
this.$refs.dialog.$el.firstChild.style.overflow = 'hidden'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -380,6 +434,13 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.new-toot-modal /deep/ {
|
||||
.el-dialog {
|
||||
background-color: #f2f6fc;
|
||||
overflow: hidden;
|
||||
resize: both;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
background-color: #4a5664;
|
||||
|
||||
|
|
@ -470,6 +531,7 @@ export default {
|
|||
.el-dialog__footer {
|
||||
background-color: #f2f6fc;
|
||||
font-size: var(--base-font-size);
|
||||
padding-bottom: 0;
|
||||
|
||||
.upload-image {
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
@ -159,6 +164,7 @@ export default {
|
|||
async suggestAccount(start, word) {
|
||||
try {
|
||||
await this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/suggestAccount', { word: word, start: start })
|
||||
this.$emit('suggestOpened', true)
|
||||
return true
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
|
|
@ -168,6 +174,7 @@ export default {
|
|||
async suggestHashtag(start, word) {
|
||||
try {
|
||||
await this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/suggestHashtag', { word: word, start: start })
|
||||
this.$emit('suggestOpened', true)
|
||||
return true
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
|
|
@ -177,6 +184,7 @@ export default {
|
|||
suggestEmoji(start, word) {
|
||||
try {
|
||||
this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/suggestEmoji', { word: word, start: start })
|
||||
this.$emit('suggestOpened', true)
|
||||
return true
|
||||
} catch (err) {
|
||||
this.closeSuggest()
|
||||
|
|
@ -188,6 +196,7 @@ export default {
|
|||
if (this.openSuggest) {
|
||||
this.highlightedIndex = 0
|
||||
}
|
||||
this.$emit('suggestOpened', false)
|
||||
},
|
||||
suggestHighlight(index) {
|
||||
if (index < 0) {
|
||||
|
|
@ -246,8 +255,12 @@ export default {
|
|||
},
|
||||
toggleEmojiPicker() {
|
||||
this.openEmojiPicker = !this.openEmojiPicker
|
||||
this.$emit('pickerOpened', this.openEmojiPicker)
|
||||
},
|
||||
hideEmojiPicker() {
|
||||
if (this.openEmojiPicker) {
|
||||
this.$emit('pickerOpened', false)
|
||||
}
|
||||
this.openEmojiPicker = false
|
||||
},
|
||||
selectEmoji(emoji) {
|
||||
|
|
@ -271,6 +284,7 @@ export default {
|
|||
font-size: var(--base-font-size);
|
||||
|
||||
textarea {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 4px 32px 4px 16px;
|
||||
line-height: 1.5;
|
||||
|
|
@ -335,8 +349,8 @@ export default {
|
|||
|
||||
.emoji-picker {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 240px;
|
||||
top: 0;
|
||||
right: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue