[issue] let edit feature fit figma design & UX smooth

[sync-by-unito]

Updated: order to fit figma design for asset page edit feature (see comment or sub-task)

1. Temporarily remove "edit" on options list now.
2. add back this edit totally fit figma design, like this flow → could add them on future sprint
3. when Bump protractor from 5.4.4 to 7.0.0 #2 finish, remove current edit feature on iframe

Reproduce steps

1. choose an asset, press upper right button
2. press edit
3. type content, press "ok"
4. the caption doesn't display the new content, need re-enter could display it.

User story

As a capture app user, I want the edited content could be display immediately so that I can confirm the caption is.

┆Issue is synchronized with this Asana task by Unito
┆Created By: Kenny Hung
┆Link To Task: https://app.asana.com/0/1201016280880500/1203292734517486

[sync-by-unito]

➤ Sam commented:

Here is PR ( #2278 ) (claap included)

[sync-by-unito]

➤ Sam commented:

Kenny Hung, when I was doing this task I also realized that I can improve explore tab reload.

Here is the reload explore tab UX before ( https://i.imgur.com/gafQtkI.mp4 ) and after ( https://i.imgur.com/ER1yXWD.mp4 ).

If you want I can

• create a ticket something like (better UX for reload explore tab)
• add as a dependency for v221108
• and submit the PR code

Or we can do it next sprint let me know what you think

[sync-by-unito]

➤ Kenny Hung commented:

Sam (cc Tammy Yang )You mean you could improve the explore tab reload performance further?

[sync-by-unito]

➤ Tammy Yang commented:

Sam yes, please do. Performance is the biggest priority in general, so let's always try to include the fix in the latest confident sprint

[sync-by-unito]

➤ Kenny Hung commented:

SamTammy Yang I have opened this card improve explore tab reload ( https://app.asana.com/0/1201016280880500/1203324312350000/f )and add as depoendency for v221108. Thanks.

[sync-by-unito]

➤ Bofu Chen commented:

Sam Can you remind me that why do we need this PR: #2278 (review) ( #2278 (review) )

Currently, to update the caption, I can

1. Click an asset in the profile tab
2. Click the asset's caption directly (not click the settings button on the top-right corner)
3. Edit the caption

SamTammy Yang Is it better if we

1. remove the "Edit" option, or
2. make it have the same behavior as clicking the caption

[sync-by-unito]

➤ Sam commented:

Bofu Chen without this commit if you update caption the changes will not be reflected so you need to go back and open details page to see updated caption

So that pr reloads iframe in details page when caption is updated.

[sync-by-unito]

➤ Bofu Chen commented:

If I updated the caption by clicking it directly, I can update the caption smoothly.

If I updated the caption by clicking the "Edit" option, I can reproduce this issue. That's why I suggest to remove the "Edit" option or leverage the existing mechanism.

[sync-by-unito]

➤ Sam commented:

Kenny Hung, did you know that we can update the caption from the iframe?
Here is the demo ( https://i.imgur.com/uLkMtKd.mp4 ), I think updating the caption from the iframe is better because it works well with the iframe.

[sync-by-unito]

➤ Kenny Hung commented:

I know that, but from figma design, it should edit on options button. It's my proposal.

1. Temporarily remove "edit" on options list now.
2. add back this edit totally fit figma design, like this flow ( https://app.claap.io/numbers-protocol/edit-feature-on-figma-design-c-O35CsUM4Uy-Mv2bQgEt4GjX ) → could add them on future sprint
3. when Bump protractor from 5.4.4 to 7.0.0 #2 finish, remove current edit feature on iframe

It could have the close UX in a short term & fit the figma design in the future.
How about you? Tammy YangSamEthan Wu

[sync-by-unito]

➤ Tammy Yang commented:

Kenny Hung agreed, let's do that.
Make sure edit in iframe match the Figma design.

[sync-by-unito]

➤ Ethan Wu commented:

so i think the challenge here is that for the asset page in profile tab we leverage both ionic and iframe elements

asset page (iframe)

top tool bar (ionic)