Swiching table layout to flexbox layout

[dartcafe]

First attempt for layout switching to flexbox

[dartcafe]

@skjnldsv: Could need some review....

[skjnldsv]

@dartcafe you should have mentioned me sooner! :)

[dartcafe]

Ne. I had to play first and understand.

[skjnldsv]

Hum, this remind me of a codepen I saw not long ago! :)
This is a nice integration of the flex layout. It could use some fixes here and there to increase the usability. Like the title length is too wide, it looks strange. The opacity on the buttons is not consistent. The thumbnail progress is missing?

Nice work ! ;)

[dartcafe]

Got me. Yes, I used https://codepen.io/vasansr/pen/PZOJXr as a pattern, because it behaves, like I wanted the table to behave. So I could play a little bit with the synchronizion of the columns.

The status icons are back but not finished. Not sure which status we can provide and what are the right icons. I can imagine, that the followinging status are worth displaying:

• poll finished
• poll in progress

in combination with (not) voted by user.

[v1r0x]

Looks nice! :) A lot cleaner and less hacky 👍

[skjnldsv]

@dartcafe nothing wrong using other's good ideas! ;)

[dartcafe]

Changes depend on nextcloud/server#6735, because of the calculation of the time spans.

[dartcafe]

Some suggenstions for the status icons:

• open vote
  voted by user
  unvoted by user
  variant unvoted by user
• closed/expired vote
  voted by user
  unvoted by user
  variant unvoted by user
  variant unvoted by user

[v1r0x]

Nice work! I think it would be more consistent when closed/expired polls also have an arrow instead of the circle. The red color should be enough for (new) users to indicate that it is expired. What do you think?

unvoted by user
unvoted by user

are my favorites for unvoted :)

[dartcafe]

I choosed another icon to make it easier for color-blind people. But I think, I have to resize the arrow. I agree with the colors. After that I think we can omit the participated column.

@skjnldsv: I want to close the pull request after the decision for the icons. Can you make a review of the current state? I think, it needs some polish.
@jancborchardt: Do you have some comments?

[v1r0x]

@jancborchardt If the polls are displayed in the app navigation what should be in the main view?
I agree with you that the current UI isn't completely NC-ish, but I'm not sure if it would be better/useful in regard to the (then maybe empty) main view.

[skjnldsv]

The main view should be empty then. Just load the first poll. You'll save the user many clicks! :)

[splitt3r]

I think doing it like the Tasks app is a good choice:

The left navigation allows filtering by active / not active anymore ... the content lists the polls for the current filter and the right sidebar has some further details or even the edit function?

But for this to work we need to nearly recreate the whole app 😁. After doing that the app will be pretty awesome and streamlined. We should consider using the deck / tasks / NC stack with Angular and some HTTP endpoints.

[v1r0x]

The main view should be empty then. Just load the first poll. You'll save the user many clicks! :)

@skjnldsv Many? Not sure about that 😉 If a user opens one poll, they save exactly 0 clicks 😛
I think an empty main view is ugly. There should be something...at least something like that. 😉

[jancborchardt]

@v1r0x as @skjnldsv states: The left app-navigation is for listing the polls, and the app-content is for displaying one poll. :)

The left navigation allows filtering by active / not active anymore ... the content lists the polls for the current filter and the right sidebar has some further details or even the edit function?

@splitt3r well this is not exactly how the Tasks app does it. Currently the Polls app has a mode in the content: Either list of polls, or one poll. That is confusing. The Tasks app only ever shows tasks in the content.

The more apt comparison would be: Tasks app uses app-navigation for a list of task lists, Polls would use it for a list of polls. Tasks uses app-navigation for a list of the tasks in the selected list, Polls would use it for a list of the participants and answers in that selected poll. (The poll detail view as we have now already.)

What do you think @v1r0x @skjnldsv @dartcafe? The main point is that the two entirely different view modes in the content are very confusing. This is the same issue we have and will fix in the Deck app: nextcloud/deck#12

[jancborchardt]

@v1r0x well for the empty main view at the start we will have the proper .emptycontent view, looking something like

Polls app icon
No polls created yet
[ Start with your first poll ]

Just as in all other apps, and in empty folders etc.

And as @skjnldsv mentioned, when you open the app, the first poll should be loaded. Or rather, the last one you had open.

[v1r0x]

@v1r0x as @skjnldsv states: The left app-navigation is for listing the polls, and the app-content is for displaying one poll. :)

Yes, I know 😉 But when you open the polls app you have around 90% white and 10% navigation.

Edit: @jancborchardt ok, opening the most recently used or the most important (e.g. expires in 1 hour) is a good alternative.

[splitt3r]

We should move this discussion in an issue 💪

[skjnldsv]

I agree with Jan on this, having two views is confusing! :/
I like the idea of sorting the poll by importance. :)

We could move this into a new issue yes. We'll list the requirements there.
As a reference, the documentation pr on the app navigation is complete. It will be very helpful!

[dartcafe]

regarding the navigation. #163 was intended for buliding a navigation thru the polls and for filtering. @jancborchardt already stated this and I company the suggestion. #104 alredy has a startfor this. For me the problem is, that I have to fiddle a little bit to get this worked. I would like to continue the diskussion in #163 and not in this PR.

The mal list is not useless IMHO, because a more detailed list can make some sense, if there are many polls to administer.

[dartcafe]

@skjnldsv: @v1r0x: Are there pending change reqests, or can we close the PR? At least we can merge rc-0.8 to the master branch and bake the release...

[v1r0x]

@dartcafe since the expire message is a problem in core I'm ok with a merge.

[jancborchardt]

The mal list is not useless IMHO, because a more detailed list can make some sense, if there are many polls to administer.

I know it's always tempting to introduce more details, and I don't want to downplay your great work. :)
Nextcloud apps in general focus to be very simple to understand and get out of the way. And for simple votes our competition is Doodle, so we need to be absolutely dead-simple and easy to use. Any confusion is frustration. ;)

[jancborchardt]

So yeah, let's get this improvement in and cntinue in a new issue / pull request. :)

[skjnldsv]

I'm OK here! :)

[dartcafe]

I know it's always tempting to introduce more details, and I don't want to downplay your great work. :)
Hehe. Don't worry. I don't take that personal. I see your view.

[dartcafe]

@skjnldsv I would like to apply the tooltips, but I don't get it. Can you give me an example, how to get this working?

[skjnldsv]

@jancborchardt do we have a default class for tooltip-init?

[jancborchardt]

@dartcafe @skjnldsv you have to use the title attribute and then one line of JS with $('.element').tooltip();

Check how it's done in the personal settings for example (am on mobile atm :)

[skjnldsv]

@jancborchardt so everyone has to launch a js script for its own tooltip ?
We should support an universal class :)

[jancborchardt]

@skjnldsv yes, there’s lots to be improved. :) I’m just stating how it works now.

Btw, I opened a new issue about the moving-polls-list-to-navigation discussion we had above: #228

[dartcafe]

$('.alt-tooltip').tooltip(); works for all element with the alt-tooltip class.