Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Archive /

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo

Putting Icons on Action Buttons to make them more noticable: Good idea?


Go to End


25 Posts   13511 Views

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

23 June 2007 at 4:21pm

> One small piece of criticism I have is that the font size is a little big. Perhaps if it was more consistent with the font size on the tabs it would look better?

Thanks for pointing that out. I also realized that the buttons needed to be moved lower, because the second gap where I had placed them only occured where there were nested tabs. I moved them lower so they will work in all sections of the CMS.
Example of why I had to move the buttons lower down the page: http://www.elijahlofgren.com/silverstripe/images/usability/13-ff2-reason-very-bottom.png

Fixed. New before and after screenshots and patch: http://www.elijahlofgren.com/silverstripe/images/usability/13-buttons-bottom-right-lower-smaller-before-after-screenshots.html

>> All in all though, I think it's a great change. Elijah, are the buttons always fixed in that position? For example, if the TinyMCE editor got larger, and the page required scrolling, would the buttons be in a fixed position, or would they be at the bottom once you've scrolled all the way down?

They are always fixed in the correct position because of the use of position: absolute. :)

Thank you very much for your encouraging and helpful feedback,

Elijah

Avatar
Sam

Administrator, 690 Posts

24 June 2007 at 1:00pm

Good work, Elijah.

One small point - the "tick" icon shouldn't have a green background anymore - would you be able to clean this up? :-)

Avatar
Tim

Community Member, 201 Posts

25 June 2007 at 10:57am

Agree with there changes of position. Some other enchantments I feel would be good.

1) Change “Save Draft” and “Publish” wording and functionality as described here, http://www.silverstripe.com/silverstripe-development/flat/626?showPost=901

2) Make the buttons more “responsive” – this can be achieved with mouseovers.

3) I think the buttons should also change when the user has click on them, for example when the user clicks on “save” the save text on the save button should change to “saving…” with a little Ajax save animation or something

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

27 June 2007 at 5:49am

Edited: 27/06/2007 5:50am

> One small point - the "tick" icon shouldn't have a green background anymore - would you be able to clean this up? :-)

Done. :)

> 1) Change “Save Draft” and “Publish” wording and functionality as described here, http://www.silverstripe.com/silverstripe-development/flat/626?showPost=901

Done. It even involved a net reduction in code: http://www.elijahlofgren.com/silverstripe/patches/Usability-Issue-13-Publish-to-Save-and-Publish-cms-sapphire-gsoc-r37424.patch

> 2) Make the buttons more “responsive” – this can be achieved with mouseovers.

I ended up simply making the background color change to white on hover (except for delete buttons, the background changes to red). We could change it to green if you think that would be better. However, I'm not sure how that would look.

> 3) I think the buttons should also change when the user has click on them, for example when the user clicks on “save” the save text on the save button should change to “saving…” with a little Ajax save animation or something

I plan to work on this today. :)

Enjoying coding,

Elijah

Avatar
Tim

Community Member, 201 Posts

27 June 2007 at 11:06am

Great stuff :-)

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

27 June 2007 at 3:06pm

I've made it so that the "Save" button text changes to "Saving..." and the "Save & Publish" button changes to "Publish..." while the request is being sent to server: http://www.elijahlofgren.com/silverstripe/patches/Make-Button-Text-Change-on-Submit-cms-gsoc-r37464.patch

Tomorrow I plan on changing the button tags from 'input' to 'button' so I can add a loading icon. In addition, I'll try to add this effect to all the other action buttons. :)

Avatar
Markus

Google Summer of Code Hacker, 152 Posts

27 June 2007 at 9:37pm

Good work, but a small thing I noticed is that the bottom border of the tabs in the "File & Images" and "Security" section is now behind the buttons.
The problem doesn't exist in "Site Content" (haven't tested "Newsletters" and "Statistics").

This happens only in IE7, in Firefox everything is fine.

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

28 June 2007 at 1:11pm

> Good work, but a small thing I noticed is that the bottom border of the tabs in the "File & Images" and "Security" section is now behind the buttons.
Thanks! Fixed in r37498.

That bug caused me to decide to work on moving the 'Delete' and 'Move Files' buttons in the File & Images again. I would love feedback on my changes here:
http://www.silverstripe.com/google-summer-of-code-forum/flat/1607?showPost=1791#post1791

Thanks,

Elijah