Flamoji

010101

BittyKitty + Pack

Want more custom original emoji that hardly no one else has? I give you the BittyKitty + Oranji pack. Oranji are orange emoji hand drawn by me.

Step 1

Within your public assets folder create a folder called emojis. Skip this step if you already have it.

Step 2

Upload the entire BittyKitty folder which you can find here. In other words, don't just upload the BittyKitty images directly to assets. You need the BittyKitty folder itself too. Also, upload the entire oranji folder.

Step 3

Import the .json file found here. The one named flamoji-bk-o.json.

The post above this one shows what BittyKitty look like. And here are Oranji:

tolgaaaltas

010101 These emojis are...

phloo

Awesome extension. Thanks. Is it possible to show only custom emojis?

Kylo

phloo I.. don't know actually 😅 what happens when you disable all categories?? Haven't tested this before.

poVoq

Thanks a lot for including an option to not use the CDN.

Maybe OpenMojis could be a cool third options to include? See: https://openmoji.org/

Kylo

poVoq

phloo

sorry but this extension is limited to what https://github.com/joeattardi/emoji-button package provides. You can request features by creating an issue on their repository.

phloo

request/idea: (custom) categories for custom emojis @Kylo

phloo

done @Kylo

phloo

Feedback

1.) Custom emojis are stretched when they are not square-sized
CSS: .emoji-picker__custom-emoji { width: 1em; height: 1em; }
Fix: This should be fixed and only height set to 1em and width to auto (or use max-sizing)

2.) Default category doesn't contain "Custom" (would be great to choose)

3.) and most important
Live-Preview in the editor doesnt show the emoji, only the :emojicode

Kylo

phloo these all seems to be related with the picker component that I referred before 🤷

phloo

You can easily change/overwrite the CSS in your code.
Since you build the extension and final code, right?

For no 3.) I wonder why it doesn't work as shown here: https://emoji-button.js.org/
Yes it's only updating one field without any text around but does your extension trigger the replacing?

Kylo

phloo You can easily change/overwrite the CSS in your code.

How about creating a pull request for the emoji-button.js repo instead of patching it here?

phloo Yes it's only updating one field without any text around but does your extension trigger the replacing?

I think this is how Flarum handles TextFormatter configurations on the composer (text editor). Twemojis are also not rendering on the composer when you write a reply, all you see is their Unicode representations. You can see the same behaviour here on the discuss.

phloo

Kylo umm, not sure what you mean
All emojis (picker or insert from unicode table) work immediately

Kylo

phloo those are not Twemoji sprites and their look depends on the device that you're using. And from that screenshot, you can notice that the shortcut for "😃" emoji (:D) is also not working on the composer. That exactly what I'm trying to tell you.

phloo

You dont see the preview in the screenshot? It works as intended
And what kind of emojis are here in the picker? They are created the same way ":something" and as soon as they are inserted they get replaced with their image.

I cant follow you...

poVoq

Could you add an option to disable the picker when in mobile view? Mobile devices already have an emoji picker build into their OSK, so no need for it. Thanks.

Kylo

poVoq you could use custom CSS for that

@media @phone {
  .Button--flamoji {
    display: none;
  }
}

poVoq

Kylo hmm maybe it is just my odd mobile browser, but adding the above to custom CSS under "appearance" doesn't seem to have any effect even after clearing the Flarum cache.

Kylo

poVoq whoops my bad, this should work:

@media @phone {
  .Button-flamoji {
    display: none;
  }
}

010101

Anyone else see 404 errors in the browser dev console when using this? Something about not being able to find files that end in .map. The extension works just fine. I just don't like having any errors...

stimw

010101

no error for me.

but a little slow...it uses maxcdn.com rather than jsDelivr

Kylo

stimw no, it doesn't use cdn's

010101 hmmm... I don't remember if I included map files into the project, so it's possible that you're getting them errors. Nothing I can do for now, try to consider them as 'warnings' rather than errors. Probably it's the browser that you on, grumbling about the missing map files.

« Previous Page Next Page »