Make adding fields to tasks more intuitive #365

profi248 · 2021-01-02T12:54:15Z

profi248 commented

2021-01-02 12:54:15 +00:00

I tried to make adding fields to a task more understandable, right now I have problems seeing where the newly added field appered. Especially so on mobile, where the field just gets added somewhere outside of the viewport and the user has no feedback. So made these changes:

briefly flash the background of (most) fields that have just been added
scroll the newly added field into viewport if not visible already

Not sure if this is the best approach, but I think it makes it a lot better.
Fields that are visually distinct or have automatic keyboard focus don't have a flashing background.

I tried to make adding fields to a task more understandable, right now I have problems seeing where the newly added field appered. Especially so on mobile, where the field just gets added somewhere outside of the viewport and the user has no feedback. So made these changes: - briefly flash the background of (most) fields that have just been added - scroll the newly added field into viewport if not visible already Not sure if this is the best approach, but I think it makes it a lot better. Fields that are visually distinct or have automatic keyboard focus don't have a flashing background.

profi248 added 1 commit 2021-01-02 12:54:16 +00:00

continuous-integration/drone/pr Build is passing Details

0a5c0869cf Make adding fields to tasks more intuitive

- briefly flash the background of (most) fields that have just been added
- scroll the newly added field into viewport if not visible already

konrad requested changes 2021-01-02 13:10:36 +00:00

konrad left a comment

I think the best way would be to just make sure every settings component can receive a $el.focus() but last time I looked into it that was not easy to achieve. I like the idea of just scrolling it into the viewport, maybe that could be the default? In addition to some elements receiving focus?

I think the best way would be to just make sure every settings component can receive a `$el.focus()` but last time I looked into it that was not easy to achieve. I like the idea of just scrolling it into the viewport, maybe that could be the default? In addition to some elements receiving focus?

src/styles/components/task.scss Outdated

						
				@ -256,1 +256,4 @@

				}

				.flash-background {

				  animation: flash-background 0.75s ease 1;

konrad commented

2021-01-02 13:08:42 +00:00

There's a $transition-duration variable (the name is something like that), please use that to let the the transitions have a consistent duration.

There's a `$transition-duration` variable (the name is something like that), please use that to let the the transitions have a consistent duration.

profi248 commented

2021-01-02 13:50:35 +00:00

The default transition duration is 100ms, which doesn't look good (this transition is kind of a special case). I think adding a new variable just for this (for now) would be the best.

src/views/tasks/TaskDetailView.vue Outdated

						
				@ -550,0 +549,4 @@

									this.$refs[fieldName].$el.focus();

									// animate background flash with CSS animations (if the field's parent has a ref)

									if (typeof this.$refs[fieldName + "Parent"] !== 'undefined')

konrad commented

2021-01-02 13:07:15 +00:00

Please use vue transitions for the flashing.

Please use [vue transitions](https://vuejs.org/v2/api/#transition) for the flashing.

profi248 commented

2021-01-02 13:58:02 +00:00

Okay, will try that

profi248 added 1 commit 2021-01-02 14:12:24 +00:00

continuous-integration/drone/pr Build is passing Details

473c89fee5 transitions via Vue transitions + CSS variable

profi248 commented

2021-01-02 14:18:09 +00:00

I think that most of the inputs will be used with a mouse anyway, so it's not that important. It would probably still be the best solution though. I tried making focus work, but it didn't and I'm not sure what to change right now.

konrad approved these changes 2021-01-04 21:01:53 +00:00

konrad left a comment

Thanks!

The issue with focus not working properly is one for another day™ since that didn't work previously either.

Thanks! The issue with focus not working properly is one for another day™ since that didn't work previously either.

konrad added 1 commit 2021-01-04 21:01:58 +00:00