I wanted to create a confirmation dialog in SketchFlow as quickly as possible, with these main objectives:
- Reusable – therefore also only have to change it in one location.
- Quickly – aside from hiccups with z-order.
- Efficiently – point of contention, there may be a simpler way.
So I came up with this approach. Following on from my post the other day about creating re-usable components. I spawned a new reusable screen. With a simple grey background, some text and 2 buttons.
Basic dialog screen
This logout component screen is then associated with another component screen which happens to be my reusable header section, as a common logout button at the top right of every screen. This 2 step embedding of the dialog screen allows it to be automatically added to each of the screens in the SketchFlow application.
Logout Button on Reusable Header
To launch the dialog from any screen the ‘logout’ button on the header screen activates the show dialog animation. But first the logout component screen is positioned below the header component screen, so when it is made visible on the application screens it appears centralised. The ‘Base’ state of the header screen has the logout component screen not-visible.
Header Section with Logout Dialog
Important Tip: The header section will need to be added to all your application screens last to ensure the position of the popup on the z-axis is topmost.
Back to the Logout Dialog:
The animation action for the “No, Stay” is a 2 second fade out on all the components of the dialog. Of course here you can perform any transitions you like. It simply returns the dialog to its hidden state.
Hide Logout Dialog State
The ‘Hide’ state simply sets the visibility at the 2 second keyframe. The ‘* -> Hide’ action performs the fade effect via altering its transparency.
The animation action for the “Yes, Logout” is the same fade as the “No, Stay”. But also has a ‘Navigate To’ action for the home/welcome page of the application (or wherever your logout action will take you).
Navigate & Animate for Logout
I hope that’s simple enough to follow along. In summary:
- 2 Components screens: header and logout
- 2 animations: show logout, hide logout
- 1 ‘navigate to’ action: on the ‘yes’ click
Update:
The logout fade being 2 seconds may look strange when ‘Yes’ is clicked as the Navigate-To action will happen instantly, so a new animation state with a faster fade makes it look less awkward.
