I'm looking for sample code that combines a confetti or fireworks animation with a Vue or Vuetify modal dialog. When the page loads I need to splash a message to the user that they have just qualified for a pay increase. With a modal dialog, it's hard to miss the message and the animation just makes them feel like they finally reached that next level, time to celebrate!
Related
I have a v-dialog that opens when page is loaded. Somehow overlay is lost. The behavior is very similar to this bug report: https://github.com/vuetifyjs/vuetify/issues/7798
But in my case overlay works when v-dialog loads after several seconds of page loading, and overlay is lost only when v-dialog is loaded from the very beginning. So I have to find the way to fix it or to force overlay to be shown together with dialog.
I tried to work with v-overlay (to wrap dialog content there), but it's content is not shown as well, if we try to do this while page is loading.
So how can I fix this or force overlay to work?
I have a view, in which there is a redux form field linked to a text input.
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
Second, on finished editing, is there a way to still keep the keypad up there?
I have tried to set blurOnSubmit to false in TextInput, it seems to stop me from losing the focus by clicking outside.
Lastly, there is also a button on that page which will start a request with the input value, on resolved, a modal will slide up from the bottom to show a success screen. This modal is implemented using react-navigation. The modal is a relatively small rectangle shape with the rest part transparent. So users can see the original page even when the success modal is up. In this case, is there a way to always show the keypad in the original screen even when the modal is up?
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
No. React Native doesn't support a way to disable the slide animation.
Second, on finished editing, is there a way to still keep the keypad up there?
If the TextInput is being rendered inside a ScrollView, add keyboardShouldPersistTaps=handled. https://facebook.github.io/react-native/docs/scrollview#keyboardshouldpersisttaps. It will hold the focus.
I would like to create a Modal that pops up from the bottom of the screen (similar to Payment Request API) where a user would fill a form and then presses continue, and the modal scrolls to the next step (i.e the modal remains but next step slides in). Is there any plugin that already exists, or has this been done before? (I'm not sure of the limitations of React Native). Just a side note I know how to make a modal popup from the bottom of the screen but not sure how to make the modal slide horizontal in steps.
define a step in your state
this.state={step:'intial'}
and in your render method use step to find out which model to show
<Modal open={true}>
(this.state.step=='intial'?<view></view>:null>
(this.state.step=='second'?<view></view>:null>
</Modal>
you can use animation to make work better
Let's say I have an app built like the Microsoft weather app.
On launch of app I need to download the forecast from the internet. While waiting to do so I also need to display a progress indicator. Which of the following (if any) is recommended?
Render the page fully with navigation controls (hamburger side menu) as well as page content (but without values since they are data bound). Then overlay a modal control like a popup with a progress indicator inside and a cancel button.
Render only the application root shell with the progress indicator inside (no other content, or navigation controls like hamburger menu are visible). Then once the task is complete, navigate to the home page with content.
Render the home page with content and navigation controls, but hide only the content (with visibility = collapsed) and show a progress indicator in its place. Once data is downloaded hide the progress indicator, and show the content.
I don't know which one of these I'm supposed to use. Is there a recommended way to do this?
Or is there a better way I didn't think of?
There is no one perfect answer for this question but I will try to explain the most common solution. None of points above is good or bad. It is better to concentrate on the user experience.
Render fully page with navigation controls and display loading popup is not really bad idea - user see the whole page with progress ring for instance and has chance to cancel it. But remmber that if data is not loaded or user abort pulling it there will be empty content in the app (if this is first time when user launched the app).
One of the best solutions for scenario you wrote is to use extended Splash Screen. Once you app is launched first Splash Screen is displayed and when you extend it, you can add progress ring to indicate that data is being retrieved.
This is very elegant way to present to the user.
Please see below guidline how to do it:
UWP Extended splash screen
I display a modal dialog with a small "please wait" message whilst an Ajax request is underway. Once that request is finished, the result is injected into the content of the modal dialog. If it is significantly larger, obviously the size calculations are thrown off and the "OK" button disappears off the bottom of the screen, requiring a reload to clear the modal!
Is there anything that can be done to resize/reposition the modal dialog after I inject the new content into it, or do I need to change my logic to show a "please wait" and then close it and display the new modal dialog in its completed state?
If you wish to take over the repositioning logic of a Durandal dialog, you would create a custom dialog context. Place your repositioning logic inside of the compositionComplete handler.
Resize, on the other hand, can be handled strictly with CSS. But it can be handled in the compositionComplete handler of the custom dialog context as well.
We have written several custom dialog contexts, and use the approach above to achieve what you are trying to achieve. We have even gone so far as to include special animations in the compositionComplete handler.
Take a look here in Durandal's documentation.
Also, I have uploaded to my public OneDrive a short movie of one of our custom dialog contexts. You can view it here. The slide-out window that pops in front is actually a custom Durandal dialog context.
In Durandal 2.1.0, there will be a method to to reposition the dialog. See:
https://github.com/BlueSpire/Durandal/blob/Version-2.1.0/docs/2.x/Showing-Message-Boxes-And-Modals.html.md#repositioning-dialogs-after-their-contents-have-been-changed