Comments (24)
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
- aui.editor.publish.js:162
- Symphony.Extensions.AssociationUIEditor.closeEditor
aui.editor.publish.js:162 - dsymphony.min.js:25
- _.event.dispatchsymphony.min.js:25
- q.handlesymphony.min.js:24
2.
- Symphony.Extensions.AssociationUIEditor.closeEditor
`
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.
Related Issues (20)
- aui-editor padding HOT 2
- Incorrect Minimum Editor Height HOT 5
- Association Editor 'Create New' doesn't allow editing HOT 2
- Overlapping Remove Action
- Sorting Conflicts HOT 2
- Add Documentation to Readme
- Child Association Headers suggestion HOT 15
- Editor Icon Missing HOT 17
- Create new Child Association button expands whole row
- Suggestion: Different edit icon HOT 4
- Minor error when changing the association source with pre-existing entries HOT 2
- Can't edit an entry after selection until the section entry is saved HOT 7
- 'Create new' overlay trigger from any field HOT 2
- Drawer shown in Editor
- Create New doesn't handle multiple sections HOT 1
- 2.6.7 support?
- Suggestion: Busy animation
- PHP 7.2 – $provides must be protected (as in class Extension) HOT 1
- Closing Causes Error in Webkit HOT 7
- Editor icon not visible on Editor (Create new) HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from association_ui_editor.