Page Animation Inspiration about association_ui_editor HOT 24 CLOSED

Loving the slide behind and push reveal transitions :)

from association_ui_editor.

Andrew, what's the most natural animation for the paper in the extension context in your eyes (thinking of the way it appears and its direction)?

from association_ui_editor.

I'm thinking a slide from left to right that overlays the main section. Would love a little bounce on the paper layer as it settles and also when we commit/save the child entry and click to return to the main entry.

As for which one from the examples I like the Different Easing from right. Which fits the visual trait of progression deeper into entries the further to the right we go. Could still do with a settling bounce though :) Does that make sense?

from association_ui_editor.

Does that make sense?

Kind of :)

The introduction of new pages is visually tricky, especially when we'll have multiple layers.
Maybe I'll create different branches with different animations.

from association_ui_editor.

Additional question: How should removing a page/paper work in your eyes?

from association_ui_editor.

Good idea.

What is the plan then? load child entry via ajax into hidden container?

from association_ui_editor.

With regards to removing, if you mean removing from the screen then I think it should be a user action to return to the parent item and not on a save/edit of the child entry and the page/paper should slide away in the opposite direction it entered the UI. A close icon would be good.. sort of modal like or a breadcrumb trail type effect could take us back to the parent entry. Thoughts?

from association_ui_editor.

Our idea was to remove the overlaid page when you either click on the page behind (parent) or when you click on a close button (not sure about an icon because Symphony doesn't use that kind of icons).

My question was more related to the animation of the removal in correspondance to the introduction we talked about before.

from association_ui_editor.

Hi Nils,

Like the idea of clicking on the page behind. that works. No worries about icons.

In my head I see either the page falls away or animates off to the right out of the screen but has a subtle move to the left before it moves to the right... It's called anticipation in the animation world I'll try and find an example.

from association_ui_editor.

NIls, Maybe the animation of the container off to the right should also fade out as it moves off screen?

from association_ui_editor.

This is nice: The bounce in stuff: http://daneden.github.io/animate.css/

from association_ui_editor.

Found this on Codepen and modded it a bit to try and explain entering and exiting screen idea: http://codepen.io/andrewminton/pen/qazGt Click te close text to exit and click the header of the underlying div to bring the top most layer back onto screen.

from association_ui_editor.

How is everything going Nils? Anything you'd like me to test for you, just let me know.

from association_ui_editor.

Apologise for the delay on our front! All good here.
We are currently remodelling our office and our schedule has been a bit too optimistic. Sitting between boxes right now, trying to get everything up and running again.

from association_ui_editor.

Nice! no rush just here if you needed me to look at anything/bounce some thoughts.. #bored basically :)

from association_ui_editor.

I just pushed the first bits and piece to introduce subpages. Problems:

• iframe doesn't display in Firefox (mixed content!?)
• nested iframes (aka subsubpages) are problematic due to browser restrictions
• page header hierachy isn't clear visually

from association_ui_editor.

Notes for further testing:

• Gecko doesn't allow nesting of the same location in an iframe at all.
• Webkit doesn't allow nesting of the same location in an iframe on the second level.

I changed the testing code accordingly.

from association_ui_editor.

Andrew, if you have some time, it would be nice if you could have a look at how the page are introduced now. I think it works quite well but a fresh look might be helpful.

The editor doesn't update the update the items yet. I hope to work on this tomorrow.

from association_ui_editor.

Cool! will take a look this evening and report back with findings! hope the office is an inspiring workspace for you now :)

from association_ui_editor.

Nils, Liking the intro and exit of the UI. nice and smooth.

I'm not seeing content when clicking to edit a child entry. Is this
correct? I get an error in chrome:

`Uncaught TypeError: Cannot read property '1' of null

1. aui.editor.publish.js:162
   1. Symphony.Extensions.AssociationUIEditor.closeEditor
      aui.editor.publish.js:162
   2. dsymphony.min.js:25
   3. _.event.dispatchsymphony.min.js:25
   4. q.handlesymphony.min.js:24
      2.

`
Do you think the UI icon/method to launch the editor window could be more
prominent? it's not intuitive right now or has that bit not been tackled
yet? and if not apologies for jumping the gun.

On 28 July 2014 18:54, Nils Hörrmann [email protected] wrote:

Andrew, if you have some time, it would be nice if you could have a look
at how the page are introduced now. I think it works quite well but a fresh
look might be helpful.

The editor doesn't update the update the items yet. I hope to work on this
tomorrow.

—
Reply to this email directly or view it on GitHub
#1 (comment)
.

from association_ui_editor.

Another observation. Once you drag to re-order the items I can no longer click to edit the items.. icon isn't clickable and hover state/mouse does not change.

from association_ui_editor.

Aaand one more thing.. Having an association field in the child entry will not populate that field with any entries if it's using the association_ui_selector option... no entries get populated into the field.

from association_ui_editor.

I'm not seeing content when clicking to edit a child entry

No, that's not correct.

from association_ui_editor.

it's not intuitive right now or has that bit not been tackled yet?

I'm open to suggestions but in general I think that it works.

from association_ui_editor.