Enhancements for polls feature

[JannikStreek]

In the poll creation area:

• In the poll creation area the delete icons are not centered properly (at least in some browsers)

In the voting area (of a posted poll):

• Align the radio buttons with the text following the radio buttons => see comment by Augier
• Remove the right shift of the option descriptions, which is created while the result of the poll is shown (via the 'show result' link inside a posted poll)
• Introduce a reminder for the user inside the posted poll with the option he/she voted for
• Fix design with long labels Poll design is broken with long label #7573

On the stream and SPV (rendering of post with poll):

• Render poll also for reshared posts

Mobile app version:

• Render poll
• Allow voting in poll

General:

• Sometimes wrong ordering of answers!?

[DeadSuperHero]

Got a screenshot? :)

[jhass]

As always partial solutions to the above points are accepted. We're also open to suggestions to improve the design of the results view and voting area.

[JannikStreek]

Delete icons (on iceweasel):

Alignment of radio buttons with text (its nearly aligned, but just a little bit is missing):

for the other tasks screenshots are not really helping, I guess...just checkout the dev and start creating and voting, I guess it becomes obvious then.

[goobertron]

I've just noticed that each poll option is assigned a number, starting at 1 for option 1 of the first poll created on the pod. So, if someone creates a poll (the first on the pod) with three options, those are assigned numbers 1, 2 and 3; when a second poll is created with four options, those are assigned numbers 4, 5, 6 and 7.

Given that different pods will be assigning these numbers to different polls, will this definitely federate properly between pods? I hope so, but I just raise it as I've noticed it.

[JannikStreek]

@goobertron, it should work, because a PollParticipation ships with the guid of the PollAnswer...so the id of a PollAnswer is not really used in the federation part. But maybe we should discuss this in orig. pull request?

[goobertron]

OK, that's good. At least now it's merged in develop, it'll be out there in the wild on pods pulling that branch, so it can be tested.

Interestingly, in the three browsers I've been testing the polls in (Firefox, Opera and Safari), the radio buttons are a lot more out of alignment than in your screenshot.

@Flaburgan @taratatach we're also going to need a mobile version of the polls in stream and SPV. I'd love to help with this, just tried to start work on it but had no idea how to do it, sorry.

[Flaburgan]

I'd like to add the "clic on label to check the radio button" option, which should be present by default if the label has a for attribute correctly set.

[goobertron]

I've just pulled the latest develop with the poll updates from @hpetru into my local environment. It looks really good.

There's just one small thing I've noticed: that is that in the bars, the radius of the dark grey ('votes cast') part of the bar is larger than the light grey ('empty') part. This means that at the left-hand end of bars which have a % votes of greater than 0, the end is more curved than bars in which the % is zero (and at the right-hand end of bars in which the % is less than 100%).

[Flaburgan]

Looks like the click on label is now fixed by the new design.
There's still an issue though: when the message content is empty, a click on preview or post does nothing

[jaywink]

Hey I just merged the polls in and they're awesome! <3

But one huge missing thing - polls are not shown for a reshared post. This is very confusing since a person viewing the reshare (stream or spv) can't even tell it has a poll (viewing on the same pod).

I'll add this to the list in this issue if ok, no need to open a separate tracking issue imho.

[goobertron]

One further suggestion:

• At the moment, as far as I can, see polls never finish. It would be good to at least have the option of closing them. It might be good to add an option to close them manually, and also to be able to specify a time for the voting to finish when creating a poll. If there's a close time, it would perhaps be useful to note on an open poll '{days} and {hours} left to vote' or 'voting finishes at {time} on {date}'; on closed polls, you could perhaps display 'this poll closed at {time} on {date}'.

Re the reminder of which option the user has voted for: This could be done either by adding a line underneath the poll reading something like 'You voted: Pasta', or by doing something on the poll graph itself, like highlighting the bar of the option I voted for in a colour (I'd suggest a pale blue to match the background on hover over the items in the left menu of the stream), or by placing an icon such as a tick next to the relevant bar. I think I'd favour colouring the bar for the voted option. There could also be a tooltip on hover: 'You voted for this!'

[jaywink]

I added lack mobile view rendering of poll here. I think the poll ending is a good idea but should be raised as a separate issue, since it's more of an enhancement than lack of current functionality.

To release polls imho we really need to render them in reshared and mobile view. Participating from mobile imho could be done later.

[goobertron]

@JannikStreek would you be happy to edit the title of this issue to something like 'Enhancements for polls feature' so it can be a collection point for all live issues relating to the feature? With something around which a lot of development is going on, it can be useful to have an issue to track progress of them all, so if this could be broadened from UI tweaks to any polishing work (so, for instance, the idea of having an end time for polls could be included) that would be great.

[JannikStreek]

@goobertron done

[Flaburgan]

It looks like we have an order problem, I don't know why but in diaspora-fr.org the order is not the same than on iliketoast for example:

https://diaspora-fr.org/posts/335933
https://iliketoast.net/posts/229676

[Flaburgan]

Looks like the answer last voted is displayed last.

[JannikStreek]

@Flaburgan I think it might be a federation issue: Maybe the other servers save the answers in a different order, therefore the order is different. I just checked on a local server, voting does not seem to have an effect on the order.

[Flaburgan]

@JannikStreek I don't think federation is related, I just created a poll locally on diaspora-fr.org, with 3 options, test1, test2, test3. When I posted the poll, the order became test2, test1, test3. Then I replied to the poll, voting test2. The order became test1, test3, test2. Maybe it's something specific to my pod (you can test it with testaccount / testaccount) but I don't get why it would be like that.

[goobertron]

Yes, in the example Fla links to above, my post (with the poll) was made on diaspora-fr.org, and it was on that same pod on which the options were displayed in the wrong order - viewed from another pod, they were in the correct order. So it seems not to be a federation thing.

I wonder whether this could be prevented from happening in future (even if it is only affecting one pod at the moment) by specifying that options should be displayed in order of their ID numbers. That could force a pod to display them in the correct order, even if it wanted to display them in a different order.

[jaywink]

Could we have a count of votes when hovering over the percentage - or something like that? Now when I view results, I have to use maths to actually know how many voted Yes for example :D And my maths skills suck :(

[cmrd-senya]

Would be nice to have a possibility to shut the poll by the author. Make it finished, so people can't vote anymore.

[netagonen]

Hi! @Rete2 and me would like to work on this issue as a part of RGSoC 2017 :). Specifically we want to add this feature: Introduce a reminder for the user inside the posted poll with the option he/she voted for. Is anyone working on this already? In any case, we will keep you posted how it goes!

[denschub]

Is anyone working on this already?

Not that we are aware of! And now that you have posted this comment, it should be clear that you are working on this. Thanks for tackling this.

[denschub]

I'm unassigning this task from the 0.7.0.0 milestone, since we started to plan some things. That does not mean you have to wait long to get your pull request merged, since we can easily put this into a minor release, but I am removing the milestone so we can, in theory, release 0.7.0.0 without this. :)

[netagonen]

@denschub, no problem :) It takes us some time.
We also wanted to discuss here the presentation of the reminder to the user's vote. We want to suggest the solution similar to the one in the attached picture, but we will of course accept other suggestions. Note that this is a temporary solution, we might add more cosmetic changes to it (e.g. quotes, bold, etc.)

[Flaburgan]

I would have used a color or bold on the option to show the one picked up.

[SuperTux88]

I also thought about a different color or a check mark at the picked answer. Because a poll can have many answers, and then it's cooler to directly see which one was your answer and how many others selected it (instead of looking at the bottom and then searching your answer in the list).

[goobertron]

That sounds like a good solution. I suggest using the diaspora blue for the option the user has voted for.

[netagonen]

hi all, we are progressing with the issue which is great. this is our current temporary solution (so the user's vote is indicated next to the answer option, but we will replace the "you" with another design)

Regarding the actual presentation: we wanted to discuss the color option. First of all, we were wondering the color what should we change? the answer's text color or the progress bar one? Second, we if we are talking about changing the progress bar color, than the question is if changing the color is prominent enough when the user have a similar color as his diaspora theme. For instance, my diaspora color theme is Egyptian blue. I wonder If changing the user's vote option to blue would be enough.

[Flaburgan]

I was talking about changing the color of the label, so "John" for example. But you can also do that for the drawing, that should simply be a new color variable which will have to be redefined by themes.

[netagonen]

Cool, we will just change the label, thanks!

[netagonen]

OK! these ir our solution so far:

We still feel it is not clear enough that this indicates the user's vote. In case the user's vote is the most popular one, that could be confusing. We suggest also adding some text next to the label, e.g. "your vote". What do you think?

[Flaburgan]

So I did the test on discourse. And here is the way it displays it:

So yeah, I guess the chart color but taking care of color themes is the best move here. Just add a variable $selected-poll-options in variables.scss.

[svbergerem]

In the color themes Original gray, Original white background and Dark the progress bars are gray. What do you think about making the progress bars gray in the other themes as well by removing the override? Then we could use the “main color“ ($brand-primary) for the answer you voted for.

[SuperTux88]

Yes, I think we should make the selected bar with color, and make the other bars gray again for the blue, green and pink color-themes, so all color-themes work the same with polls (default and dark are already gray). As an alternative we could use different brightness on the blue, green and pink color-themes.

And I wouldn't change the text-color. The blue you used is never used on the default color theme, so it looks strange. If you use the same blue as for links, it looks like a link (which it isn't). So making the bar with color looks like the best way for me.

We could also add a text next to the answer-text, but it shouldn't look like it's part of the question (what your "(you)" does). But something looking like a badge/label (like the feature label here on GitHub in the sidebar).

[netagonen]

Hi, thanks for all the answers. I am a bit confused, so let me just see that I got it right:
You are for changing the color of the progress bar to $brand-primary when it's the user's vote?
And then you are also for making the other bars gray in the other color themes? Should we do that as well and if yes- how :) ?

[SuperTux88]

You are for changing the color of the progress bar to $brand-primary when it's the user's vote?

Yes

And then you are also for making the other bars gray in the other color themes? Should we do that as well and if yes- how :) ?

By removing this line.

[svbergerem]

The progress bar color override here:

diaspora/app/assets/stylesheets/color_themes/_color_theme_override.scss

Line 9 in 280a9e2

.poll_form .progress .bar { background-color: $main-color-dark; }

There is another override here

diaspora/app/assets/stylesheets/color_themes/_color_theme_override_dark.scss

Line 24 in 280a9e2

.bar { background-color: $gray-light; }

for the dark theme but that shouldn't bother you since it only sets the color of the progress bar to a different gray.

[netagonen]

Thanks!

[goobertron]

You are for changing the color of the progress bar to $brand-primary when it's the user's vote?
And then you are also for making the other bars gray in the other color themes?

That gets my vote too (for what it's worth).

[svbergerem]

1. The failing tests look unrelated to me and they are working for me using your code. Maybe run bin/rake tests:generate_fixtures again before running jasmine. The tests will fail whenever there are changes on the generated pages that the jasmine tests rely on.
2. No, modifying only poll_view_spec.js for the frontend code looks good to me.
3. You didn't change the code for mobile polls, so there are no changes in spec/integration/mobile_posts_spec.rb needed. If you want to change the mobile polls as well then you would have to change app/views/status_messages/_poll.mobile.haml.

You can chat with us on IRC (#diaspora-dev) whenever there is someone to talk to.

[Flaburgan]

Poll design is currently broken with long labels, see #7573