Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New Save Button component #7515

Closed
JohnONolan opened this issue Oct 7, 2016 · 4 comments
Closed

New Save Button component #7515

JohnONolan opened this issue Oct 7, 2016 · 4 comments
Assignees
@kevinansfield
Labels
affects:admin Anything relating to Ghost Admin css / design / mobile Minor UI issues
Milestone
1.0.0 Beta Ready

Comments

@JohnONolan
Copy link
Member

image

Updated design for save button component, with 4 states:

1. Default

  • Button appears normal, and reads "Save"
  • When button is clicked, go to saving

2. Saving

  • Button gets animated SVG loading spinner, and still reads "Save"
  • Button automatically transitions to either success or fail

3. Success

  • Button gets SVG check icon, which animates-in, and reads "Saved"
  • Button Remains in this state
  • When button is clicked, go to saving

4. Fail

  • Button gets SVG x icon, which animates-in, and reads "Retry"
  • Button Remains in this state
  • When button is clicked, go to saving

Notes

  • Colours and button style are unimportant / just for reference. The important thing is the icons and the behaviour.
  • I found an SVG loading spinner generator here
  • I don't have an animated check or X icon, we'll need to either find or make them
  • Button should not change width between states
  • This issue isn't a priority that needs doing right now, just creating it so that it exists!
@JohnONolan JohnONolan added affects:admin Anything relating to Ghost Admin css / design / mobile Minor UI issues labels Oct 7, 2016
@kevinansfield kevinansfield mentioned this issue Oct 7, 2016
Closed
@kevinansfield
Copy link
Contributor

Do we want to have the spinner displayed for a certain period or can the switch to the Saved state be nearly instantaneous?

@Saytuamin
Copy link

This idea would definitely be welcome, The current save button is rather basic and it would be good to update it to a more responsive design.

@kevinansfield kevinansfield mentioned this issue Jan 19, 2017
Closed
11 tasks
kevinansfield added a commit to kevinansfield/Ghost-Admin that referenced this issue Mar 7, 2017
@kevinansfield
✨ success/failure state spinner buttons
2c5378c 
refs TryGhost/Ghost#7515
- changes to `gh-task-button`:
  - can take `buttonText` (default: "Save"), `runningText` ("Saving"), `successText` ("Saved"), and `failureText` ("Retry") params
  - positional param for `buttonText`
  - default button display can be overridden by passing in a block, in that scenario the component will yield a hash containing all states to be used in this fashion:
    ```
    {{#gh-task-button task=myTask as |task|}}
    {{if task.isIdle "Save me"}}
    {{if task.isRunning "Saving"}}
    {{if task.isSuccess "Thank you!"}}
    {{if task.isFailure "Nooooooo!"}}
    {{/gh-task-button}}
    ```
- update existing uses of `gh-task-button` to match new component signature
kevinansfield added a commit to kevinansfield/Ghost-Admin that referenced this issue Mar 7, 2017
@kevinansfield
✨ success/failure state spinner buttons
e8b83b4 
refs TryGhost/Ghost#7515
- changes to `gh-task-button`:
  - can take `buttonText` (default: "Save"), `runningText` ("Saving"), `successText` ("Saved"), and `failureText` ("Retry") params
  - positional param for `buttonText`
  - default button display can be overridden by passing in a block, in that scenario the component will yield a hash containing all states to be used in this fashion:
    ```
    {{#gh-task-button task=myTask as |task|}}
    {{if task.isIdle "Save me"}}
    {{if task.isRunning "Saving"}}
    {{if task.isSuccess "Thank you!"}}
    {{if task.isFailure "Nooooooo!"}}
    {{/gh-task-button}}
    ```
- update existing uses of `gh-task-button` to match new component signature
@kevinansfield kevinansfield mentioned this issue Mar 7, 2017
Merged
kevinansfield added a commit to kevinansfield/Ghost-Admin that referenced this issue Mar 7, 2017
@kevinansfield
✨ success/failure state spinner buttons
73fcb85 
refs TryGhost/Ghost#7515
- changes to `gh-task-button`:
  - can take `buttonText` (default: "Save"), `runningText` ("Saving"), `successText` ("Saved"), and `failureText` ("Retry") params
  - positional param for `buttonText`
  - default button display can be overridden by passing in a block, in that scenario the component will yield a hash containing all states to be used in this fashion:
    ```
    {{#gh-task-button task=myTask as |task|}}
    {{if task.isIdle "Save me"}}
    {{if task.isRunning "Saving"}}
    {{if task.isSuccess "Thank you!"}}
    {{if task.isFailure "Nooooooo!"}}
    {{/gh-task-button}}
    ```
- update existing uses of `gh-task-button` to match new component signature
acburdine pushed a commit to TryGhost/Admin that referenced this issue Mar 7, 2017
@kevinansfield @acburdine
✨ success/failure state spinner buttons (#566)
bd65c1e 
refs TryGhost/Ghost#7515
- changes to `gh-task-button`:
  - can take `buttonText` (default: "Save"), `runningText` ("Saving"), `successText` ("Saved"), and `failureText` ("Retry") params
  - positional param for `buttonText`
  - default button display can be overridden by passing in a block, in that scenario the component will yield a hash containing all states to be used in this fashion:
    ```
    {{#gh-task-button task=myTask as |task|}}
    {{if task.isIdle "Save me"}}
    {{if task.isRunning "Saving"}}
    {{if task.isSuccess "Thank you!"}}
    {{if task.isFailure "Nooooooo!"}}
    {{/gh-task-button}}
    ```
- update existing uses of `gh-task-button` to match new component signature
@kevinansfield
Copy link
Contributor

The functionality for this has been added via TryGhost/Admin#566. We still have some design work left, namely the animated icons and a review of how the fixed-width should work if the success/failure message is longer than the default message.

There are still a few places where we are not yet using the save-state button, these are being tracked in #7865

@kevinansfield kevinansfield added this to the 1.0.0 milestone Mar 13, 2017
kevinansfield added a commit to kevinansfield/Ghost-Admin that referenced this issue Apr 11, 2017
@kevinansfield
🎨 first pass at animated icons for save-state buttons
e5d6959 
refs TryGhost/Ghost#7515
- adds animated spinner and check SVG icons
- improves SVG sizing/alignment in buttons
- disables old technique of fixing button size because it doesn't work now that buttons have more than a single spinner when running/saved/failed
@kevinansfield kevinansfield mentioned this issue Apr 11, 2017
Merged
kevinansfield added a commit to kevinansfield/Ghost-Admin that referenced this issue Apr 11, 2017
@kevinansfield
🎨 first pass at animated icons for save-state buttons
732cbe9 
refs TryGhost/Ghost#7515
- adds animated spinner and check SVG icons
- improves SVG sizing/alignment in buttons
- disables old technique of fixing button size because it doesn't work now that buttons have more than a single spinner when running/saved/failed
kevinansfield added a commit to kevinansfield/Ghost-Admin that referenced this issue Apr 11, 2017
@kevinansfield
🎨 first pass at animated icons for save-state buttons
382fc95 
refs TryGhost/Ghost#7515
- adds animated spinner and check SVG icons
- improves SVG sizing/alignment in buttons
- disables old technique of fixing button size because it doesn't work now that buttons have more than a single spinner when running/saved/failed
- fixes broken spinner in `gh-spin-button` components
kevinansfield added a commit to kevinansfield/Ghost-Admin that referenced this issue Apr 11, 2017
@kevinansfield
🎨 first pass at animated icons for save-state buttons
83f0687 
refs TryGhost/Ghost#7515
- adds animated spinner and check SVG icons
- improves SVG sizing/alignment in buttons
- disables old technique of fixing button size because it doesn't work now that buttons have more than a single spinner when running/saved/failed
- fixes broken spinner in `gh-spin-button` components
kevinansfield added a commit to kevinansfield/Ghost-Admin that referenced this issue Apr 11, 2017
@kevinansfield
🎨 first pass at animated icons for save-state buttons
d036ff0 
refs TryGhost/Ghost#7515
- adds animated spinner and check SVG icons
- improves SVG sizing/alignment in buttons
- disables old technique of fixing button size because it doesn't work now that buttons have more than a single spinner when running/saved/failed
- fixes broken spinner in `gh-spin-button` components
ErisDS pushed a commit to TryGhost/Admin that referenced this issue Apr 11, 2017
@kevinansfield @ErisDS
🎨 first pass at animated icons for save-state buttons (#637)
5fbcd6e 
refs TryGhost/Ghost#7515
- adds animated spinner and check SVG icons
- improves SVG sizing/alignment in buttons
- disables old technique of fixing button size because it doesn't work now that buttons have more than a single spinner when running/saved/failed
- fixes broken spinner in `gh-spin-button` components
kevinansfield added a commit to TryGhost/Admin that referenced this issue Apr 14, 2017
@kevinansfield
🎨 animated retry icon
5c76346 
refs TryGhost/Ghost#7515
- add a `retry` icon that better matches button text dimensions
- add a spin animation for the retry icon
- use the new retry icon in the default `gh-task-button` template
- add a "restart animation" method to `gh-task-button` so that repeated clicks on a button appear to register the action when local validation means that there's no transition from failed->running->failed
@kevinansfield kevinansfield mentioned this issue Apr 17, 2017
Closed
@kevinansfield
Copy link
Contributor

Closing as complete. The fixed-width requirement still needs some work/discussion so I've opened a new issue for that #8341

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kevinansfield kevinansfield

Labels
affects:admin Anything relating to Ghost Admin css / design / mobile Minor UI issues
Projects
None yet
Milestone
1.0.0 Beta Ready
Development

No branches or pull requests
3 participants
@kevinansfield @JohnONolan @Saytuamin