Widget Visual Tweaks
Here’s some inspiration to amplify your widget workflow,
- Changing Uploader Button Color
- Crazy Button
- Uploading Circle Color
- Custom Progress Bar
- Uploaded Image Preview
That’s one of the most common cases, changing the button color. It can be easily done with CSS,
Time for some fun, CSS can really drive your buttons crazy,
With the File Uploader, you track the progress of
your uploads with the circle being filled with color during the process.
The fill color can be changed via the CSS
color property, while
will work for your background.
If you wish to replace the built-in progress bar, you need to listen the current
widget object. You can get it in the
onChange callback. It will be a file
object for regular widgets or a group object for multiple widgets. Then, you
need to listen to the
progress event and change your progress bar in according
to a current
installProgressBar function does all that. It receives the two
arguments: widget instance and progress bar DOM element. Everything else runs on
CSS, animation included.
The default widget behavior is when a user selects an image, its preview is then shown in the upload dialog. You might want to embed this preview in your page somewhere around the widget button. Such a preview could be more informative than simply displaying file names and sizes.
Note, you have full control over size and position of your embed, just use CSS.
Image preview for a multi-file widget may look different:
You can change the displayed images or rearrange the existing oness; all changes will then be reflected in the thumbnail list.