IntenseWebs/freeipa
3
0
Fork 0
mirror of https://salsa.debian.org/freeipa-team/freeipa.git synced 2025-02-25 18:55:28 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add working widget

Browse Source 
This widget can be used as notification that some other widget is working.
It shows spinner and cover the other widget by specified color.

https://fedorahosted.org/freeipa/ticket/5381

Reviewed-By: Petr Vobornik <pvoborni@redhat.com>
This commit is contained in:
Pavel Vomacka 2016-04-22 10:31:07 +02:00 committed by Petr Vobornik
parent f243bd2d65
commit 3d61aca623
2 changed files with 77 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
install/ui/less/widgets.less
View File

@ -143,6 +143,20 @@
}
}
// Working widget
.working-widget {
position: absolute;
display: none;
justify-content: center;
width: 100%;
height: 100%;
.spinner {
align-self: center;
}
}
// workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=409254
tbody:empty { display: none; }

63
install/ui/src/freeipa/widget.js
View File

@ -324,6 +324,69 @@ IPA.widget = function(spec) {
return that;
};
/**
* Working widget which contains spinner and can be used while some other
* widget is working.
*
* @class
* @param {Object} spec
*/
IPA.working_widget = function(spec) {
spec = spec || {};
spec.base_css_class = spec.base_css_class || 'working-widget';
var that = IPA.widget(spec);
/**
* Patternfly class name which defines size of spinner. Possible values:
* ''|'spinner-lg'|'spinner-sm'|'spinner-xs'
*
* @property {string} class_name
*/
that.spinner_size_cls = spec.spinner_size_cls || 'spinner-sm';
/**
* The variable defines the background color of working widget.
*
* @property {string} color definition
*/
that.bg_color = spec.bg_color || 'rgba(255,255,255,0.7)';
/**
* Z-index of this widget.
*
* @property {number}
*/
that.z_index = spec.z_index || 99;
that.create = function(container) {
that.spin_div = $('<div />', {
'class': that.base_css_class,
style: 'background-color: ' + that.bg_color + ';'
+ 'z-index: ' + that.z_index + ';'
});
that.spinner = $('<div />', {
'class': 'spinner ' + that.spinner_size_cls
}).appendTo(that.spin_div);
that.spin_div.appendTo(container);
that.on('hide-spinner', function() {
that.spin_div.fadeOut();
});
that.on('display-spinner', function() {
that.spin_div.fadeIn();
that.spin_div.css('display', 'flex');
that.spin_div.css('display', '-webkit-flex');
});
};
return that;
};
/**
* Base class for input gathering widgets.
* @class