In this blog, we show how to arrange sap.ui.core.Icon in a circle like a circular dialer.
CSS
.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;
}
Javascript
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; } } });
Example
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