FriendsOfFlarum Reactions

tankerkiller125

datitisev this seems a little strange as the Like extension does allow you to like your own post. Maybe make this optional?

datitisev

tankerkiller125 Good idea, will do at some point in the future 🙂

Kylo

tankerkiller125 why is the Like extension allows me to do that though? Maybe that extension should do this optional?

Littlegolden

tankerkiller125 this seems a little strange as the Like extension does allow you to like your own post

Yes, many social medias allow user like their own posts..（YouTube / Facebook / Twitter / QQ / QZone / Bilibili / Weibo / WeChat etc.）....

So Optional sure is the best solution...

clarkwinkelmann

Kylo there are some (old) discussions on the subject like https://discuss.flarum.org/d/2384-disable-ability-to-like-own-posts

Ideally this should be an option in the Likes extension I suppose, but no one has ever implemented it.

[deleted]

Littlegolden liking your own post seems a bit narcissistic to me, so I'd prefer to disable that.

Littlegolden

[deleted] Research shows that in a bunch of posts without any likes, if one post has a like, other viewers will be more inclined to give this post a like， so.. . This is a benefits of be able to giving a thumbs up to ourself

ScottBeeson

Two requests

1) Can reactions be persistent like likes? IE, I don't want to have to hover to see reactions.

2) When adding a new reaction, I like that it automatically adds the emoji, but we really need a way to cycle through them. If I type "Bi" it will show Biohazard. I'd like to be able to scroll through matches. For instance, if I type "dance" I see the dancing lady. I know there's a dancing man but I can't find it and I don't know the exact code.

datitisev

ScottBeeson For #2, i.e. you want an emoji selector?

ScottBeeson

datitisev Well, I just want to augment the functionality that's already there since it's kind of weird and not user-friendly. But yes, I guess that's what I'm asking for. 😀

Littlegolden

Why can only reacted once? Someone else reacted with a love to my post, but I couldn't click the love to react to my own post. Is this was designed to be this?

Kylo

Littlegolden https://discuss.flarum.org/d/20655-friendsofflarum-reactions/45

Littlegolden

Kylo 🤣 okay...tx

Littlegolden

Missed an icon?

Ralkage

Littlegolden lol we've known about that one for a while now, just waiting to see if we need to patch any new bugs or add any new features so we don't release a patch for a really minor fix 🤣

Littlegolden

Ralkage okay 🤣 Maybe can add somekinds of click animation effect

AndrewBond

When doing a first time install of this addon I get :

Flarum encountered a boot error (ReflectionException)
Class FoF\Reactions\Listener\AddPostReactionsRelationship does not exist

Littlegolden

AndrewBond Execute in Flarum installation directory, then refresh the page:
php flarum cache: clear

AndrewBond

Littlegolden

Thanks for the tip, I uninstalled, reinstalled and it just worked.

henryonsoftware

I think we should support show the reaction result(how many, who did it) instead of hover to see.

ctml

phloo
SecurityDog
tretoko
henryonsoftware

I've made a few styles for my site to have reactions always be shown without needing to hover. Screenshots for the 5 styles below, all are showing the default view of a post without hovering, most have two screenshots showing different states depending if the user has reacted already or not.

Note that style 1 and 2 (left aligned reactions) are only compatible with gamification extension (as I use), and not default likes extension. I also did not do one for mobile as I do not use my site on mobile but I think it's always visible there anyway. If anyone makes any improvements please share with me so I can use too 🙂

Style 1: Show all actions, left aligned react

@media (min-width: 768px){
    .no-touch .CommentPost aside.Post-actions {
         opacity: 1;
    }
    .Post-actions .item-react {
        position: absolute;
        float: left;
        left: 0;
        top: 3px;
    }
    .Reactions .Reactions--reactions .Button-emoji-parent{
        background-color: #ffffff;
        -webkit-box-shadow: unset;
        box-shadow: unset;
        border-radius: 3rem;
        padding: 6px 5px;
        transition: all .2s ease-in-out
    }
    .Reactions .Reactions--reactions .Button-emoji-parent:hover{
        webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    }
    .Reactions .Button-label {
        margin-left: 0px !important;
    }
    .Reactions{    
        line-height: 1;
        margin-right: 0px !important;
    }
    aside.Post-actions>ul{
        display: inline-flex;
        align-items: center;
    }
   .item-votes .CommentPost-votes .Post-vote {
        background-color: rgba(0,0,0,0);
        border: none;
        margin: 0px;
    }
    .Reactions button{    
        margin-right: 5px;
    }
    .Reactions .Reactions--react {
        display: inline-block;
        vertical-align: text-bottom;
    }
    .Reactions--react{
        margin-right: 4px;
    }
}

Style 2: Show only react, left aligned react (show rest on hover)

@media (min-width: 768px){
    .no-touch .CommentPost aside.Post-actions {
         opacity: 1;
    }
    .Post-actions .item-react {
        position: absolute;
        float: left;
        left: 0;
        top: 3px;
    }
    .Reactions .Reactions--reactions .Button-emoji-parent{
        background-color: #ffffff;
        -webkit-box-shadow: unset;
        box-shadow: unset;
        border-radius: 3rem;
        padding: 6px 5px;
        transition: all .2s ease-in-out
    }
    .Reactions .Reactions--reactions .Button-emoji-parent:hover{
        webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    }
    .Reactions .Button-label {
        margin-left: 0px !important;
    }
    .no-touch .CommentPost .Post-actions ul>li:not(.item-react) {
        opacity: 0;
        transition: all .1s ease-in-out;
    }
    .no-touch .CommentPost :hover .Post-actions ul>li {
        opacity: 1;
        transition: all .1s ease-in-out;
    }
    .Reactions{    
        line-height: 1;
        margin-right: 0px !important;
    }
    aside.Post-actions>ul{
        display: inline-flex;
        align-items: center;
    }
   .item-votes .CommentPost-votes .Post-vote {
        background-color: rgba(0,0,0,0);
        border: none;
        margin: 0px;
    }
    .Reactions button{    
        margin-right: 5px;
    }
    .Reactions .Reactions--react {
        display: inline-block;
        vertical-align: text-bottom;
    }
    .Reactions--react{
        margin-right: 4px;
    }
}

Style 3: Show all actions

@media (min-width: 768px){
    .no-touch .CommentPost aside.Post-actions {
         opacity: 1;
    }
    .Reactions .Reactions--reactions .Button-emoji-parent{
        background-color: #ffffff;
        -webkit-box-shadow: unset;
        box-shadow: unset;
        border-radius: 3rem;
        padding: 6px 5px;
        transition: all .2s ease-in-out
    }
    .Reactions .Reactions--reactions .Button-emoji-parent:hover{
        webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    }
    .Reactions .Button-label {
        margin-left: 0px !important;
    }
    .Reactions{    
        line-height: 1;
        margin-right: 0px !important;
    }
    aside.Post-actions>ul{
        display: inline-flex;
        align-items: center;
    }
    .item-votes .CommentPost-votes .Post-vote {
        background-color: rgba(0,0,0,0);
        border: none;
        margin: 0px;
    }
    .Reactions button{    
        margin-left: 5px;
        margin-right: 5px;
    }
    .Reactions .Reactions--react {
        display: inline-block;
        vertical-align: text-bottom;
    }
    .Reactions--react{
        margin-right: 4px;
    }
}

Style 4: Show only react (show rest on hover)

@media (min-width: 768px){
    .no-touch .CommentPost aside.Post-actions {
         opacity: 1;
    }
    .Reactions .Reactions--reactions .Button-emoji-parent{
        background-color: #ffffff;
        -webkit-box-shadow: unset;
        box-shadow: unset;
        border-radius: 3rem;
        padding: 6px 5px;
        transition: all .2s ease-in-out
    }
    .Reactions .Reactions--reactions .Button-emoji-parent:hover{
        webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    }
    .Reactions .Button-label {
        margin-left: 0px !important;
    }
    .no-touch .CommentPost .Post-actions ul>li:not(.item-react) {
        opacity: 0;
        transition: all .1s ease-in-out;
    }
    .no-touch .CommentPost :hover .Post-actions ul>li {
        opacity: 1;
        transition: all .1s ease-in-out;
    }
    .Reactions{    
        line-height: 1;
        margin-right: 0px !important;
    }
    aside.Post-actions>ul{
        display: inline-flex;
        align-items: center;
    }
    .item-votes .CommentPost-votes .Post-vote {
        background-color: rgba(0,0,0,0);
        border: none;
        margin: 0px;
    }
    .Reactions button{    
        margin-left: 5px;
        margin-right: 5px;
    }
    .Reactions .Reactions--react {
        display: inline-block;
        vertical-align: text-bottom;
    }
    .Reactions--react{
        margin-right: 4px;
    }
}

Style 5: Show emoji/reply/dropdown (gamification votes on hover)

@media (min-width: 768px){
    .no-touch .CommentPost aside.Post-actions {
         opacity: 1;
    }
    .Reactions .Reactions--reactions .Button-emoji-parent{
        background-color: #ffffff;
        -webkit-box-shadow: unset;
        box-shadow: unset;
        border-radius: 3rem;
        padding: 6px 5px;
        transition: all .2s ease-in-out
    }
    .Reactions .Reactions--reactions .Button-emoji-parent:hover{
        webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    }
    .Reactions{    
        line-height: 1;
        margin-right: 0px !important;
    }
    .Reactions .Button-label {
        margin-left: 0px !important;
    }
    .no-touch .CommentPost .Post-actions ul>li:not(.item-react):not(.item-like):not(.item-reply)[class] {
        opacity: 0;
        transition: all .1s ease-in-out
    }
    .no-touch .CommentPost :hover .Post-actions ul>li:not(.item-react):not(.item-like):not(.item-reply)[class] {
        opacity: 1;
        transition: all .1s ease-in-out
    }
    .item-votes .CommentPost-votes .Post-vote {
        background-color: rgba(0,0,0,0);
        border: none;
        margin: 0px;
    }
    .Reactions{    
        line-height: 1;
        margin-right: 0px !important;
    }
    aside.Post-actions>ul{
        display: inline-flex;
        align-items: center;
    }
    .Reactions button{    
        margin-left: 5px;
        margin-right: 5px;
    }
    .Reactions .Reactions--ShowReactions {
        margin-right: 7px;
    }
    .Reactions .Reactions--react {
        display: inline-block;
        vertical-align: text-bottom;
    }
    .Reactions--react{
        margin-right: 4px;
    }
}

« Previous Page Next Page »