search

joshwcomeau / guppy

🐠A friendly application manager and task runner for React.js
ISC License
3.27k stars 154 forks source link

Save flash for app settings & project configuration #314

Open AWolf81 opened 5 years ago

AWolf81 commented 5 years ago

During the work on PR #295 we've noticed that we need a message after the saving acutally happend so the user gets a feedback.

We'd like to change the behaviour at ProjectConfiguationModal too. As there it will autohide the dialog and this is the feedback that saving happend. We'd like to keep the modal open and show the flash message as well.

Describe the solution you'd like Add a small text saved close to the save button that will auto hide after 2 seconds. Styling could be similar to the style from the info text on ProjectConfiguration modal if save button is blocked.

I think it's OK to add a saved flag on app-status.reducer and then the component that will display the flash can connect to this do display the message for two seconds and clear afterwards the saved flag with an action.

Additional context This requires the app-settings feature from PR #295. You could start working if you're using app-settings branch as base for your work.

syn228 commented 5 years ago

I'll give it a shot!

AWolf81 commented 5 years ago

I have another idea that I'd like to discuss. I'm not sure if we should remove the auto-close after save because most of the time you'll save and close the modal. We could create an app-setting for this to switch between the behaviours.

The save flash could be displayed in both situations by delaying the close until the flash will hide.

I think we should add a close or cancel button close to the save button so it's also possible to dismiss the modal with a button.

syn228 commented 5 years ago

I thought the auto-close was fine. I was thinking of adding the save flash after the auto-close at the bottom of the current screen that auto-hides after 2 seconds or so. I also wonder if it's necessary for the app to prompt the user for confirmation when changing the project name. I think adding a close/cancel button is definitely helpful. It could be put next to "save project" button and maybe prompt user for "discard changes" confirmation if there are any changes already made to the project configurations.

AWolf81 commented 5 years ago

Yes, sounds good. I like the idea of having toast messages that will auto-hide. For now it's OK to auto-close dialogs on save & show a message about saving afterwards. We could add the other behaviour later. If it's really needed.

I think React-Redux-Toastr Repo & demo would be good. There are probably other libs but that was the first I've found. Maybe you c

I think the prompt after project name change is needed as it's asking if it's OK to rename the project folder as well. Some users just want to rename the name inside package.json and not the project folder on disk.

The prompt with a warning of unsaved changes would be also great. Can this also be triggered with the backdrop dismiss?

AWolf81 commented 5 years ago

I played a bit with the toast messages because I wanted to check how this is working.

You can find my code here. Just not sure how to do the styling - using css with important feels a bit hacky.

syn228 commented 5 years ago

Thanks for the code! I'll play around with it and see if I can tweak the styling a bit.