Badge is commonly used these days. So I am sharing an implementation of badge control.
CSS
.sap-dennisseah-badge {
margin: 2px;
display: flex;
border-radius: 6px;
font-size: 12px;
height: 30px;
opacity:0.8;
justify-content: flex-start;
cursor:pointer
}
.sap-dennisseah-badge:hover {
opacity:1;
}
.sap-dennisseah-badge-text{
margin: 3px;
background-color: transparent;
white-space: nowrap;
display: block;
padding: 5px;
color: #fff;
text-overflow: ellipsis;
overflow: hidden;
font-weight: 550;
}
.sap-dennisseah-badge-num {
margin-top: 6px;
margin-right: 10px;
padding-top:2px;
background-color: #FFF;
width: 40px;
text-align:center;
border-radius: 5px;
height: 15px;
font-weight: bold;
color: #333;
}
Javascript
sap.ui.core.Control.extend('sap.dennisseah.Badge', {
metadata: {
properties: {
text: {type:'string', defaultValue: 'untitled'},
value: {type:'int', defaultValue: 0},
width: {type: 'sap.ui.core.CSSSize', defaultValue: '150px'},
color: {type: 'sap.ui.core.CSSColor', defaultValue: '#007cc0'}
},
events: {
pressed: {}
}
},
_width : function(minus) {
var w = parseInt(this.getWidth().replace('px', '')) + minus;
return w + 'px';
},
_style : function() {
var styles = [
'background-color: ' + this.getColor(),
'width: ' + this.getWidth()
];
return styles.join(';');
},
renderer: function(oRm, oControl) {
oRm.write("<div");
oRm.writeControlData(oControl);
oRm.addClass("sap-dennisseah-badge");
oRm.writeClasses();
oRm.write(' style="' + oControl._style() + '">');
oRm.write('<div class="sap-dennisseah-badge-text" style="width:' +
oControl._width(-40) + '">' + oControl.getText() + '</div>');
oRm.write('<div class="sap-dennisseah-badge-num">' + oControl.getValue() + '</div>');
oRm.write("</div>");
},
onAfterRendering: function() {
var that = this;
this.$().click(function(e) {
that.firePressed({text: that.getText(), value: that.getValue()});
})
}
});
And here is how they can be created
var b1 = new sap.dennisseah.Badge({
text: 'Inbox', value:100, color: 'orange',
pressed: function(e) {
alert('inbox pressed');
}});
b1.placeAt('content');
Here is an working example.
-D
