Skip to content

Implement scrolling per stack - #2230

Merged
juliusknorr merged 7 commits into
masterfrom
enh/scroll-stacks
Nov 6, 2020
Merged

Implement scrolling per stack#2230
juliusknorr merged 7 commits into
masterfrom
enh/scroll-stacks

Conversation

@juliusknorr

@juliusknorrjuliusknorr commented Aug 24, 2020•
edited
Loading

Copy link
Copy Markdown
Member

Implements #2184

Peek 2020-10-13 11-36

  • Scroll each stack individually
  • Fade out cards at the top when scrolling
  • Scroll to card once inserted

@nextcloud/designers What do you think? Feels a bit more natural to use than always scrolling all lists

@juliusknorrjuliusknorr added this to the ⭐ 1.1.0 milestone Aug 24, 2020
@stefan-niedermann

stefan-niedermann commented Aug 24, 2020•
edited
Loading

Copy link
Copy Markdown
Member

Really awesome it was if the scrollbar thumbs were a bit thiner and hidden until one hovers a column. Should be possible with pure CSS, at least in Chrome. (imho they have too much attention)

@juliusknorr

juliusknorr commented Aug 24, 2020

Copy link
Copy Markdown
MemberAuthor

Really awesome it was if the scrollbar thumbs were a bit thiner and hidden until one hovers a column. Should be possible with pure CSS, at least in Chrome. (imho they have too much attention)

I also thought about that but was a bit concerned about the discoverability then.

This was referenced Sep 1, 2020
Merged
Merged
@juliusknorrjuliusknorr mentioned this pull request Sep 17, 2020
Merged
@juliusknorr

juliusknorr commented Oct 2, 2020

Copy link
Copy Markdown
MemberAuthor

Let's move this to the next release

@juliusknorrjuliusknorr modified the milestones: ⭐ 1.1.0, 1.1.1Oct 2, 2020
@juliusknorrjuliusknorr modified the milestones: 1.1.1, 1.1.2Oct 13, 2020
@juliusknorr
juliusknorrforce-pushed the enh/scroll-stacks branch 2 times, most recently from 173c506 to 348057bCompareOctober 13, 2020 09:40
@juliusknorr
juliusknorr marked this pull request as ready for review October 13, 2020 09:40
@juliusknorrjuliusknorr modified the milestones: 1.1.2, 1.2.0Oct 13, 2020
jancborchardt
jancborchardt reviewed Oct 13, 2020
View reviewed changes

@jancborchardtjancborchardt left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, only some details – your call if to be fixed here or separately:

  • When you click the "Add" button, the entire stack moves a bit down cause of the new element. Would be nicer if it wouldn’t move
  • The autoscrolling to the inserted card could use a quick animation so people know what happened
  • Agree with @stefan-niedermann about the scrollbar, but we could also leave that for now for discoverability indeed.

@juliusknorr

juliusknorr commented Oct 13, 2020

Copy link
Copy Markdown
MemberAuthor

When you click the "Add" button, the entire stack moves a bit down cause of the new element. Would be nicer if it wouldn’t move

But then we would overlay the existing cards, which I would prefer not to do.

The autoscrolling to the inserted card could use a quick animation so people know what happened

👍 Let me see if i can make that happen.

Agree with @stefan-niedermann about the scrollbar, but we could also leave that for now for discoverability indeed.

Then let's keep it for now. We can still experiment with hiding it in a follow up.

@juliusknorrjuliusknorr mentioned this pull request Oct 13, 2020
Merged
@juliusknorr
juliusknorrforce-pushed the enh/scroll-stacks branch 2 times, most recently from ee592e1 to 69a3d4bCompareOctober 14, 2020 15:43
@jakobroehrljakobroehrl linked an issue Oct 28, 2020 that may be closed by this pull request
Make columns independently scrollable #2184
Closed
@juliusknorrjuliusknorr mentioned this pull request Nov 2, 2020
Closed
@juliusknorr
Implement scrolling per stack
bd9fe49
Signed-off-by: Julius Härtl <jus@bitgrid.net>
@juliusknorr
Fix new card input positioning
7efd702
Signed-off-by: Julius Härtl <jus@bitgrid.net>
@juliusknorr
Fix card hover/active states
c1423cd
Signed-off-by: Julius Härtl <jus@bitgrid.net>
@juliusknorr
Revert "Do not scroll cards into view"
d0147cb
This reverts commit abf6713.
Signed-off-by: Julius Härtl <jus@bitgrid.net>
@juliusknorr
Implement fading out the cards when scrolling
8ae580f
Signed-off-by: Julius Härtl <jus@bitgrid.net>
@juliusknorr
Use smooth scrolling to the center
4b8c811
Signed-off-by: Julius Härtl <jus@bitgrid.net>
@juliusknorrjuliusknorr mentioned this pull request Nov 3, 2020
Closed
1 task
@juliusknorr

juliusknorr commented Nov 4, 2020

Copy link
Copy Markdown
MemberAuthor

🏓 for reviews again :)

skjnldsv
skjnldsv reviewed Nov 4, 2020
View reviewed changes
Comment threadsrc/components/board/Stack.vue Outdated
<template>
<div class="stack">
<div v-click-outside="stopCardCreation" class="stack--header">
<div v-click-outside="stopCardCreation" class="stack--header" :class="{'stack--header--add': showAddCard }">

@skjnldsvskjnldsvNov 4, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a weird BEM syntax ^^

@juliusknorrjuliusknorrNov 6, 2020

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed 🙈 adjusted with 78299b3

@juliusknorr
Apply proper BEM syntax
78299b3
Signed-off-by: Julius Härtl <jus@bitgrid.net>
@juliusknorr
juliusknorr merged commit 297e060 into masterNov 6, 2020
@juliusknorr
juliusknorr deleted the enh/scroll-stacks branch November 6, 2020 10:57
@der-flo

der-flo commented Nov 23, 2020

Copy link
Copy Markdown

This change makes it hard to scroll on iOS because every finger tip immediately starts dragging a card.

@der-flo

der-flo commented Nov 27, 2020

Copy link
Copy Markdown

This change makes it hard to scroll on iOS because every finger tip immediately starts dragging a card.

@juliushaertl Should I open a new issue?

@der-floder-flo mentioned this pull request Dec 4, 2020
Closed
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@skjnldsvskjnldsvskjnldsv approved these changes
@jakobroehrljakobroehrlAwaiting requested review from jakobroehrl
@marcoambrosinimarcoambrosiniAwaiting requested review from marcoambrosini
@jancborchardtjancborchardtAwaiting requested review from jancborchardt

Assignees

No one assigned

Labels

3. to reviewdesignenhancement

Projects

None yet

Milestone

1.2.0

Development

Successfully merging this pull request may close these issues.

Make columns independently scrollable

5 participants

@juliusknorr@stefan-niedermann@der-flo@jancborchardt@skjnldsv