update itemsPerRow calculation

This commit is contained in:
Henry Jameson 2024-12-24 11:56:00 +02:00
parent 761ca72136
commit 9b7d30151f

View file

@ -140,19 +140,33 @@ const EmojiPicker = {
}, },
updateEmojiSize () { updateEmojiSize () {
const css = window.getComputedStyle(this.$refs.popover.$el) const css = window.getComputedStyle(this.$refs.popover.$el)
const fontSize = css.getPropertyValue('font-size')
const emojiSize = css.getPropertyValue('--emojiSize') const emojiSize = css.getPropertyValue('--emojiSize')
const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '')
const fontSizeValue = Number(fontSize.replace(/[^0-9,.]+/, ''))
const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '') const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, '')) const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, ''))
const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')
let fontSizeMultiplier
if (fontSizeUnit.endsWith('em')) {
fontSizeMultiplier = fontSizeValue
} else {
fontSizeMultiplier = fontSizeValue / 14
}
console.log('Multiplier', fontSizeMultiplier)
console.log('Result', fontSizeMultiplier * 14)
let emojiSizeReal let emojiSizeReal
if (emojiSizeUnit.endsWith('em')) { if (emojiSizeUnit.endsWith('em')) {
emojiSizeReal = emojiSizeValue * fontSize emojiSizeReal = emojiSizeValue * fontSizeMultiplier * 14
} else { } else {
emojiSizeReal = emojiSizeValue emojiSizeReal = emojiSizeValue
} }
console.log(emojiSizeReal)
const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSize) const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSizeMultiplier * 14)
this.emojiSize = fullEmojiSize this.emojiSize = fullEmojiSize
}, },
showPicker () { showPicker () {
@ -307,6 +321,7 @@ const EmojiPicker = {
return this.emojiSize return this.emojiSize
}, },
itemPerRow () { itemPerRow () {
console.log('CALC', this.emojiSize, this.width)
return this.width ? Math.floor(this.width / this.emojiSize) : 6 return this.width ? Math.floor(this.width / this.emojiSize) : 6
}, },
activeGroupView () { activeGroupView () {