supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fix input not resizing back after sending a message

Browse Source
This commit is contained in:
Pavel Djundik 2018-07-13 16:12:56 +03:00 committed by Pavel Djundik
parent 8133805dec
commit 5d8a581201
2 changed files with 11 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/components/ChatInput.vue
View File

@ -68,17 +68,19 @@ export default {
}, },
watch: { watch: {
"channel.pendingMessage"() { "channel.pendingMessage"() {
const style = window.getComputedStyle(this.$refs.input); this.$nextTick(() => {
const lineHeight = parseFloat(style.lineHeight, 10) || 1; const style = window.getComputedStyle(this.$refs.input);
const lineHeight = parseFloat(style.lineHeight, 10) || 1;
// Start by resetting height before computing as scrollHeight does not // Start by resetting height before computing as scrollHeight does not
// decrease when deleting characters // decrease when deleting characters
resetInputHeight(this); this.$refs.input.style.height = "";
// Use scrollHeight to calculate how many lines there are in input, and ceil the value // Use scrollHeight to calculate how many lines there are in input, and ceil the value
// because some browsers tend to incorrently round the values when using high density // because some browsers tend to incorrently round the values when using high density
// displays or using page zoom feature // displays or using page zoom feature
this.$refs.input.style.height = Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px"; this.$refs.input.style.height = Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px";
});
}, },
}, },
mounted() { mounted() {
@ -122,9 +124,6 @@ export default {
return ""; return "";
}, },
resetInputHeight() {
this.$refs.input.style.height = "";
},
onSubmit() { onSubmit() {
// Triggering click event opens the virtual keyboard on mobile // Triggering click event opens the virtual keyboard on mobile
// This can only be called from another interactive event (e.g. button click) // This can only be called from another interactive event (e.g. button click)
@ -138,7 +137,6 @@ export default {
} }
this.channel.pendingMessage = ""; this.channel.pendingMessage = "";
this.resetInputHeight();
if (text[0] === "/") { if (text[0] === "/") {
const args = text.substr(1).split(" "); const args = text.substr(1).split(" ");

5
client/js/utils.js
View File

@ -19,7 +19,6 @@ module.exports = {
hasRoleInChannel, hasRoleInChannel,
move, move,
closeChan, closeChan,
resetHeight,
toggleNotificationMarkers, toggleNotificationMarkers,
updateTitle, updateTitle,
togglePasswordField, togglePasswordField,
@ -33,10 +32,6 @@ function findCurrentNetworkChan(name) {
return vueApp.activeChannel.network.channels.find((c) => c.name.toLowerCase() === name); return vueApp.activeChannel.network.channels.find((c) => c.name.toLowerCase() === name);
} }
function resetHeight(element) {
element.style.height = element.style.minHeight;
}
// Given a channel element will determine if the lounge user or a given nick is one of the supplied roles. // Given a channel element will determine if the lounge user or a given nick is one of the supplied roles.
function hasRoleInChannel(channel, roles, nick) { function hasRoleInChannel(channel, roles, nick) {
if (!channel || !roles) { if (!channel || !roles) {