In this blog, we show how to arrange sap.ui.core.Icon in a circle like a circular dialer.
.sap-dennisseah-circular-icons-group {
border: solid;
opacity: 0.9;
border-radius: 50%;
}
.sap-dennisseah-circular-icons-group-btn {
position: absolute;
display: table-cell;
opacity: 0.5;
padding: 5px;
border-radius: 100%;
}
.sap-dennisseah-circular-icons-group-btn:hover {
opacity: 1;
}
sap.ui.core.Control.extend('sap.dennisseah.CircularIconsGroup', {
metadata: {
properties: {
borderwidth: {type: "sap.ui.core.CSSSize", defaultValue: '50px'},
diameter: {type: "sap.ui.core.CSSSize", defaultValue: '100px'},
color: {type: "sap.ui.core.CSSColor", defaultValue: '#007cc0'},
btncolor: {type: "sap.ui.core.CSSColor", defaultValue: '#005990'}
},
aggregations: {
icons: {type: "sap.ui.core.Icon"}
}
},
_style: function() {
var styles = [
'height: ' + this.getDiameter(),
'width: ' + this.getDiameter(),
'border-color: ' + this.getColor(),
'border-width: ' + this.getBorderwidth()
];
return styles.join('; ');
},
renderer: function(oRm, oControl) {
oRm.write("<div");
oRm.writeControlData(oControl);
oRm.addClass("sap-dennisseah-circular-icons-group");
oRm.writeClasses();
oRm.write(' style="' + oControl._style() + '">');
var icons = oControl.getAggregation('icons');
for (var i = 0; i < icons.length; i++) {
var icon = icons[i];
icon.addStyleClass('sap-dennisseah-circular-icons-group-btn');
oRm.renderControl(icon);
}
oRm.write("</div>");
},
onAfterRendering: function() {
var that = this;
function center() {
var element = that.$()[0];
var d = element.getBoundingClientRect();
return { cx: d.left + d.width/2, cy: d.top + d.height/2 };
}
var icons = this.getAggregation('icons');
if (icons.length === 0) {
return;
}
var angle = 0;
var borderwidth = parseInt(this.getBorderwidth().replace('px',''));
var width = parseInt(this.getDiameter().replace('px',''));
var center = center();
var step = (2*Math.PI) / icons.length;
for (var i = 0; i < icons.length; i++) {
var ic = icons[i];
var ic_obj = $('#' + ic.getId());
var iradius = Math.max(ic_obj.width(), ic_obj.height());
var base = ((width + borderwidth)/2);
var offset = (iradius/2) + 5; // 5 = padding
var x = Math.round(base * Math.cos(angle)) + center.cx - offset;
var y = Math.round(base * Math.sin(angle)) + center.cy - offset;
ic_obj.css('background-color', this.getBtncolor());
ic_obj.css('width', iradius + 'px');
ic_obj.css('height', iradius + 'px');
ic_obj.css('left', x + 'px');
ic_obj.css('top', y + 'px');
angle += step;
}
}
});
The control can be created in this manner where you have a bunch of icon and their actions (when being pressed.
var ctrl = new sap.dennisseah.CircularIconsGroup({
icons: [
new sap.ui.core.Icon({
src: 'sap-icon://globe',
size: '25px',
press: function() {
alert('global');
}
}),
new sap.ui.core.Icon({
src: 'sap-icon://business-objects-explorer',
size: '25px',
press: function() {
alert('explorer');
}
}),
new sap.ui.core.Icon({
src: 'sap-icon://log',
size: '25px',
press: function() {
alert('log');
}
}),
new sap.ui.core.Icon({
src: 'sap-icon://world',
size: '25px',
press: function() {
alert('world');
}
}),
new sap.ui.core.Icon({
src: 'sap-icon://settings',
size: '25px',
press: function() {
alert('settings');
}
})
]
});
Here is an example. and here is how it looks like
-D
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
38 | |
19 | |
13 | |
13 | |
11 | |
10 | |
10 | |
10 | |
8 | |
8 |