Emoji selector update
successor to !736 (closed)
closes #101 (closed)
Merge request reports
Activity
added 165 commits
-
5851f97e...e75ac9dd - 164 commits from branch
develop - db086fe1 - Merge remote-tracking branch 'upstream/develop' into emoji-selector-update
-
5851f97e...e75ac9dd - 164 commits from branch
added 1 commit
- 14df84d8 - fixed some bugs, added spam mode, minor collateral fixes
added 2 commits
added 1 commit
- 2237da01 - Apply suggestion to src/components/emoji_input/emoji_input.js
Resolved by HJemoji picker itself looks and works nice, tried on your instance both in firefox and chromium desktop and firefox mobile. I would however axe the hover to zoom, it's distracting (especially in the picker) on desktop when I tried it and doesn't quite work properly on mobile at all. Interesting idea but doesn't work well in practice imo.
- Last reply by HJ
added 1 commit
- 96512939 - Apply suggestion to src/components/emoji_picker/emoji_picker.js
added 1 commit
- 4f0195b0 - Apply suggestion to src/components/emoji_picker/emoji_picker.vue
- src/components/emoji_picker/emoji_picker.js 0 → 100644
1 2 const filterByKeyword = (list, keyword = '') => { 3 return list.filter(x => x.displayText.includes(keyword)) 4 } 5 6 const EmojiPicker = { 7 props: { 8 stickerPicker: { 9 required: false, 10 type: Boolean, 11 default: false 12 } 13 }, 14 data () { 15 return { 16 labelKey: String(Math.random() * 100000), -
I'm gonna make a separate "Checkbox" component some time later. This is a workaround to make unique IDs for now
Basically, the situation is:
We have the checkbox that looks like this
<input type="checkbox" id="spamMode"/> <label for="spamMode">Spam mode!</label>but then we have multiple new post forms like
<!-- main form --> <input type="checkbox" id="spamMode"/> <label for="spamMode">Spam mode!</label> <!-- reply form --> <input type="checkbox" id="spamMode"/> <label for="spamMode">Spam mode!</label>ruh-oh! we have two inputs with same id!! this breaks checkboxes since you need to click on label to toggle them. And how it works in browser that click goes to first, or last, or whatever id it finds, the behavior is not defined since
ids are supposed to be unique:<!-- main form --> <input type="checkbox" id="spamMode"/> <!-- event arrives here --> <label for="spamMode">Spam mode!</label> <!-- reply form --> <input type="checkbox" id="spamMode"/> <label for="spamMode">Spam mode!</label> <!-- user clicks here -->Ideally we should have a
Checkboxcomponent that will generate random ids for us since they are not as important nowadays, i'll try to do that soon after. For now i just add a random number to the id and for attributes like so:<!-- main form --> <input type="checkbox" id="spamMode-233312"/> <label for="spamMode-233312">Spam mode!</label> <!-- reply form --> <input type="checkbox" id="spamMode-312415"/> <label for="spamMode-312415">Spam mode!</label> -
maybe we should have a super simple global serial id counter instead of random? basically just a service that you ask for an id and it just increments it by one every time someone uses it. I know it's very unlikely but there's still the chance of getting the same id twice with random for some very fun bugs