This procedure shows you how to change the default animation icon shown when processing a file loading request.
Overview
To change the animation icon used, you will customize the ChromeBarItemUploadStatusWidget
.
Create your own ChromeBarItemUploadStatus Widget
In <GBC_PROJECT_DIR>/customization/<customization_project>/js/
add a js file : MyChromeBarItemUploadStatusWidget.js
In this example we inherit the default widget ChromeBarItemUploadStatusWidget
to modify the way the icon is created.
The icon is shown only when the widget is processing the loading of a file.
// in MyChromeBarItemUploadStatusWidget.js
// Inherit this customized widget from ChromeBarItemUploadStatusWidget
modulum('MyChromeBarItemUploadStatusWidget', ['ChromeBarItemUploadStatusWidget', 'WidgetFactory'],
function(context, cls) {
/**
* Custom upload icon in ChromeBar
* @class MyChromeBarItemUploadStatusWidget
* @memberOf classes
* @extends classes.ChromeBarItemUploadStatusWidget
*/
cls.MyChromeBarItemUploadStatusWidget = context.oo.Class(cls.ChromeBarItemUploadStatusWidget, function($super) {
return /** @lends classes.MyChromeBarItemUploadStatusWidget.prototype */ {
__name: "MyChromeBarItemUploadStatusWidget",
__templateName: "ChromeBarItemWidget",
/**
* @inheritDoc
*/
constructor: function(opts) {
$super.constructor.call(this, opts);
// in default widget, we call: this.setImage("zmdi-upload");
this.setImage(context.ThemeService.getResource("img/html5_circle.gif"));
},
};
});
// Declare the custom widget as the default one
cls.WidgetFactory.registerBuilder('ChromeBarItemUploadStatus', cls.MyChromeBarItemUploadStatusWidget);
});
In this example:
- The image used, is located in
<customization_project_dir>/resources/img/
folder.NOTE: You can access the image with javascript with the method:
context.ThemeService.getResource("my-image")
For more information see theTheme resources API
.
Rebuild using grunt.
$ grunt --customization=<customization_project_dir>
Test
View the changes by opening an app with file upload feature in your browser.
TIP: You may need to use CTRL + F5 to clear the browser cache before you see your changes.
NOTE: If you want to configure the loading bar when the app is processing instead, see File loading icon (center) topic