re-skin the notification bar

This commit is contained in:
Matthew Hodgson 2015-11-08 23:37:14 +00:00
parent 9526deb024
commit 05d921256f
5 changed files with 41 additions and 13 deletions

View File

@ -15,20 +15,40 @@ limitations under the License.
*/
.mx_MatrixToolbar {
text-align: center;
background-color: #ff0064;
background-color: #76cfa6;
color: #fff;
font-weight: bold;
padding: 6px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.mx_MatrixToolbar button {
margin-left: 12px;
.mx_MatrixToolbar_warning {
margin-left: 16px;
margin-right: 8px;
margin-top: -2px;
}
.mx_MatrixToolbar_link
{
color: #fff ! important;
text-decoration: underline ! important;
cursor: pointer;
}
.mx_MatrixToolbar_close {
float: right;
margin-top: 3px;
margin-right: 12px;
-webkit-flex: 1;
flex: 1;
cursor: pointer;
}
text-align: right;
}
.mx_MatrixToolbar_close img {
display: block;
float: right;
margin-right: 10px;
}

View File

@ -35,7 +35,7 @@ limitations under the License.
-webkit-order: 1;
order: 1;
height: 21px;
height: 40px;
}
.mx_MatrixChat_toolbarShowing {

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -28,12 +28,20 @@ module.exports = React.createClass({
Notifier.setToolbarHidden(true);
},
onClick: function() {
var Notifier = sdk.getComponent('organisms.Notifier');
Notifier.setEnabled(true);
},
render: function() {
var EnableNotificationsButton = sdk.getComponent("atoms.EnableNotificationsButton");
return (
<div className="mx_MatrixToolbar">
You are not receiving desktop notifications. <EnableNotificationsButton />
<div className="mx_MatrixToolbar_close"><img src="img/close-white.png" width="16" height="16" onClick={ this.hideToolbar } /></div>
<img className="mx_MatrixToolbar_warning" src="img/warning.png" width="28" height="28" alt="/!\"/>
<div>
You are not receiving desktop notifications. <a className="mx_MatrixToolbar_link" onClick={ this.onClick }>Enable them now</a>
</div>
<div className="mx_MatrixToolbar_close"><img src="img/cancel-black2.png" width="23" height="23" onClick={ this.hideToolbar } /></div>
</div>
);
}