pleroma/pleroma-fe
2
2
Fork 5
Code Issues 345 Pull requests 28 Projects Releases Packages Wiki Activity

Emoji selector update #2162

Closed
hj wants to merge 0 commits from gitlab-mr-iid-895 into develop
pull from: gitlab-mr-iid-895
merge into: pleroma:develop
Conversation 27 Commits - Files changed -
hj commented 2019-07-28 13:15:04 +00:00
Owner
Copy link

successor to #2006

closes #101

successor to #2006 closes #101
hj commented 2019-09-08 14:08:18 +00:00
Author
Owner
Copy link

when there's only 1 suggestion up/down would not work at all, not even default actions (go one line above/below), so i changed it to only work when there's more than 1 since changing selection with 1 doesn't make any sense anyway.

when there's only 1 suggestion up/down would not work at all, not even default actions (go one line above/below), so i changed it to only work when there's more than 1 since changing selection with 1 doesn't make any sense anyway.
hj commented 2019-09-08 14:08:35 +00:00
Author
Owner
Copy link
```suggestion:-0+0 ```
hj commented 2019-09-08 21:06:14 +00:00
Author
Owner
Copy link

Current observations/bugs

  • Image context menu doesn't work on status emojis due to pointer-events: none, gonna fix it with another invisible image in
  • Emoji zoom in picker is somewhat weird on mobile, gonna fix it with better touch handling?
Current observations/bugs * Image context menu doesn't work on status emojis due to `pointer-events: none`, gonna fix it with another invisible image in <span> * Emoji zoom in picker is somewhat weird on mobile, gonna fix it with better touch handling?
shpuld commented 2019-09-09 18:25:11 +00:00
Owner
Copy link

log

log
shpuld commented 2019-09-09 18:26:33 +00:00
Owner
Copy link

indent looks wrong on some of the closing >

indent looks wrong on some of the closing >
shpuld commented 2019-09-09 18:32:39 +00:00
Owner
Copy link

This seems completely fine

This seems completely fine
shpuld commented 2019-09-09 18:37:01 +00:00
Owner
Copy link

emoji 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.

emoji 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.
shpuld commented 2019-09-09 18:38:58 +00:00
Owner
Copy link

I would consider renaming these bool props in a way that implies bool, like add a verb to it

I would consider renaming these bool props in a way that implies bool, like add a verb to it
hj commented 2019-09-09 19:42:18 +00:00
Author
Owner
Copy link

Sure. At very least I'll move it to a separate MR. I have an idea how to make it more usable in picker and in posts.

Sure. At very least I'll move it to a separate MR. I have an idea how to make it more usable in picker and in posts.
hj commented 2019-09-09 19:42:32 +00:00
Author
Owner
Copy link
```suggestion:-0+0 ```
hj commented 2019-09-10 18:39:42 +00:00
Author
Owner
Copy link
            >
```suggestion:-0+0 > ```
shpuld commented 2019-09-12 07:03:52 +00:00
Owner
Copy link

wait what

wait what
hj commented 2019-09-12 07:23:07 +00:00
Author
Owner
Copy link

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 Checkbox component 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>
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 ```html <input type="checkbox" id="spamMode"/> <label for="spamMode">Spam mode!</label> ``` but then we have multiple new post forms like ```html <!-- 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 `id`s are supposed to be unique: ```html <!-- 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 `Checkbox` component 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: ```html <!-- 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> ```
hj commented 2019-09-12 12:35:02 +00:00
Author
Owner
Copy link

Also closing the picker is kinda hard, should probably close it on keyboard input in text field + maybe a cross icon or something

Also closing the picker is kinda hard, should probably close it on keyboard input in text field + maybe a cross icon or something
hj commented 2019-09-12 17:25:31 +00:00
Author
Owner
Copy link

axed

axed
hj commented 2019-09-12 17:26:11 +00:00
Author
Owner
Copy link

for now just updated hotkey logic to hide picker on input (also sneaky suggestions update)

for now just updated hotkey logic to hide picker on input (also sneaky suggestions update)
hj commented 2019-09-12 17:43:01 +00:00
Author
Owner
Copy link

renamed

renamed
shpuld commented 2019-09-16 06:05:27 +00:00
Owner
Copy link

Left in by mistake?

Left in by mistake?
shpuld commented 2019-09-16 06:14:22 +00:00
Owner
Copy link

I don't think it should insert the spaces ever, no emoji keyboard I've used does that. I only see it as quirky unexpected behavior that varies on context

I don't think it should insert the spaces ever, no emoji keyboard I've used does that. I only see it as quirky unexpected behavior that varies on context
shpuld commented 2019-09-16 06:19:50 +00:00
Owner
Copy link

keepOpen?

keepOpen?
shpuld commented 2019-09-16 06:36:34 +00:00
Owner
Copy link

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

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
hj commented 2019-09-16 07:15:21 +00:00
Author
Owner
Copy link

i think so, yeah, or use UUID instead, but I plan to do that in a Checkbox component, in a separate MR since this one is bloated enough already.

Random should work enough, I think we already have same problem with "mark as sensitive" checkbox too anyway.

i think so, yeah, or use UUID instead, but I plan to do that in a Checkbox component, in a separate MR since this one is bloated enough already. Random should work enough, I think we already have same problem with "mark as sensitive" checkbox too anyway.
hj commented 2019-09-16 07:21:09 +00:00
Author
Owner
Copy link

Tusky inserts custom emoji as :shortcode: , with space at the end.

MastoFE (mastosoc) somehow has exact same behavior as I did (smart spaces before and after), i swear on me mum i didn't copy them on purpose.

Tusky inserts custom emoji as `:shortcode: `, with space at the end. MastoFE (mastosoc) somehow has exact same behavior as I did (smart spaces before and after), i swear on me mum i didn't copy them on purpose.
hj commented 2019-09-16 07:22:15 +00:00
Author
Owner
Copy link

i could separate "keep open" and "don't pad with spaces"...

i could separate "keep open" and "don't pad with spaces"...
shpuld commented 2019-09-16 07:23:01 +00:00
Owner
Copy link

Works kinda dodgy on mobile with the osk appearing and disappearing, but I don't know how much can be done about that, it's still functional.

I'd reduce the height a tiny bit so that the initial bottom row gets covered a bit more by the gradient

Works kinda dodgy on mobile with the osk appearing and disappearing, but I don't know how much can be done about that, it's still functional. I'd reduce the height a tiny bit so that the initial bottom row gets covered a bit more by the gradient
hj commented 2019-09-16 07:23:54 +00:00
Author
Owner
Copy link
```suggestion:-0+0 ```
shpuld commented 2019-09-26 05:21:09 +00:00
Owner
Copy link

lgtm!

lgtm!

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
BE Request

   
Backlog

   
Better behavior

   
Blocked by deps

   
Bug

   
Code Review

   
Discussion

   
Doing

   
Feature Request / Enhancement

   
In the shining bright future maybe

   
It's complicated

   
MS Edge

   
Mememoon (or other niche browsers)

   
Missing API

   
Missing feature

   
Missing l10n/i18n

   
NL1

Instance Admin Dashboard

  
NL2

Improved Mobile Experience

  
NL4

Improved instance customization and QoL options

  
Need to verify on develop

   
RELEASE BLOCKER

   
Reassign or Close

   
Refactor

   
Regression

   
Safari

   
To Do

   
User story

   
Waiting on godot

   
accessibility

https://git.pleroma.social/pleroma/pleroma-fe/-/snippets/7746

  
better documentation

   
chore

   
confirmed

   
easy ticket

   
incident

Denotes a disruption to IT services and the associated issues require immediate attention

  
l10n update

   
mastoapi

   
mobile

   
needs design

   
needs-info

   
needs-review

   
stupid
No labels
BE Request
Backlog
Better behavior
Blocked by deps
Bug
Code Review
Discussion
Doing
Feature Request / Enhancement
In the shining bright future maybe
It's complicated
MS Edge
Mememoon (or other niche browsers)
Missing API
Missing feature
Missing l10n/i18n
NL1
NL2
NL4
Need to verify on develop
RELEASE BLOCKER
Reassign or Close
Refactor
Regression
Safari
To Do
User story
Waiting on godot
accessibility
better documentation
chore
confirmed
easy ticket
incident
l10n update
mastoapi
mobile
needs design
needs-info
needs-review
stupid
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
pleroma/pleroma-fe!2162
No description provided.