From 05d921256fbe5de4f1aa3476d190ff89b2d888a0 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 8 Nov 2015 23:37:14 +0000
Subject: [PATCH] re-skin the notification bar
---
.../vector/css/molecules/MatrixToolbar.css | 40 +++++++++++++-----
src/skins/vector/css/pages/MatrixChat.css | 2 +-
src/skins/vector/img/cancel-black2.png | Bin 0 -> 1182 bytes
src/skins/vector/img/warning.png | Bin 0 -> 1478 bytes
.../vector/views/molecules/MatrixToolbar.js | 12 +++++-
5 files changed, 41 insertions(+), 13 deletions(-)
create mode 100644 src/skins/vector/img/cancel-black2.png
create mode 100644 src/skins/vector/img/warning.png
diff --git a/src/skins/vector/css/molecules/MatrixToolbar.css b/src/skins/vector/css/molecules/MatrixToolbar.css
index 99c28240..b545b1ad 100644
--- a/src/skins/vector/css/molecules/MatrixToolbar.css
+++ b/src/skins/vector/css/molecules/MatrixToolbar.css
@@ -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;
-}
\ No newline at end of file
+ text-align: right;
+}
+
+.mx_MatrixToolbar_close img {
+ display: block;
+ float: right;
+ margin-right: 10px;
+}
diff --git a/src/skins/vector/css/pages/MatrixChat.css b/src/skins/vector/css/pages/MatrixChat.css
index f649aa24..e74eb6c8 100644
--- a/src/skins/vector/css/pages/MatrixChat.css
+++ b/src/skins/vector/css/pages/MatrixChat.css
@@ -35,7 +35,7 @@ limitations under the License.
-webkit-order: 1;
order: 1;
- height: 21px;
+ height: 40px;
}
.mx_MatrixChat_toolbarShowing {
diff --git a/src/skins/vector/img/cancel-black2.png b/src/skins/vector/img/cancel-black2.png
new file mode 100644
index 0000000000000000000000000000000000000000..a928c61b0967e83932676228efd004bc9cbf1705
GIT binary patch
literal 1182
zcmeAS@N?(olHy`uVBq!ia0vp^;vmey1SIo4oWBDp$r9IylHmNblJdl&R0hYC{G?O`
z&)mfH)S%SFl*+=BsWuD@%o>>?5hW46K32*3xq68pHF_1f1wh>l3^w)^1&PVosU-?Y
zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP
zs8ErclUHn2VXFi-*9yo63F|8<fR&VF+bTgE72zA8;GAESs$i;TrkiYFX0Bjvsb^?v
zZf;_(qhMrUXsT~utZ!_fYh-L?Vqj%rqyPm<K--E^(yW49+@N*=dA3R!B_#z``ugSN
z<$C4Ddih1^`i7R4mih)p`bI{&Koz>hm3bwJ6}oxF$}kgLQj3#|G7CyF^YauyCMG83
zmzLNn0bL65LT&-v*t}wBFaZNhzap_f-%!s0<RzFwUtj!6b93RUi%Wu15$?rmaB)aw
zL8^XGYH@yPQ8F;%(v(3~6<9eJr6!i-7lq{K=fFZSAS1sdzc?emK*8A=9BK+0zKO}1
zc_2Yeur6O;E6=>*lEl2^R8JRMC7?NanVBh8E{;a7Mow;K<}NNShK8=Dj*f=rPR`~=
zW^NYF=7tvLFugAM$)&lec_lEtDG0shIQ4=OL~a4lW|!2W%(B!Jx1#)91+d4hGI6`b
z1gCjWy(zfeVv19*KF~4xpy)-4ZkP}-4S|^O#0%uWlYeR+FwGYM6ZZwf-<KH}7<oKh
z978H@CFxl2?`cdraKwSvVVUOt|NoCCom#DYeO{hzuUb3zpWnaVf86!hLAO9qtmB}4
zeC>~lw}umRpQau<aiZgXhq|<1&8~klS|{@!6<J`GS<kKT`0vl^AG}S{iWw_ZUS{?r
zah*s$<HN%1WX9yn$gR}!L8|3Ahe+@TiI)2uCBYk{zWl#m|Hm!CkoE3@|2*~e|BmIe
zlm!Ry>|!VqtW)M#68q?qLf&=-_UHTO@8?{mEcVCE!D)IzQ;On@EfO<1m*<Ej1*spL
za@Hy3)scJwZbLT#6OJe&0TZUxj+gE&(@<qz-omh94?|knpH}Woj%)thd0{8C^_tSc
qDXD3bIJdZL>pxQ@e)c2-BOAlr`8PUuEETZ_l^C9`elF{r5}E*JrIHB%
literal 0
HcmV?d00001
diff --git a/src/skins/vector/img/warning.png b/src/skins/vector/img/warning.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5553530a8478d549139c265bec0492be4252d7e
GIT binary patch
literal 1478
zcmeAS@N?(olHy`uVBq!ia0vp^G9b*s1SJ3FdmIK*k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+m^Cs(B1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxOgGuU%v{0TQqR!T
z+}y-mN5ROz&{W^RSl`${*T~q)#K6kLNC66zfVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj
z%k|2Q_413-^$jg8E%gnI^o@*kfhu&1EAvVcD|GXUm0>2hq!uR^WfqiV=I1GZOiWD5
zFD<cE0=g99h1>$Tv3bSNU;+l1ennz|zM-B0$V)JVzP|XC=H|jx7ncO3BHWAB;Np<V
zf>iyW)Z+ZoqGVvir744~DzI`cN=+=uFAB-e&w+(vKt_H^esM;Afr7I$IMft0d=ry1
z^FV@{U|qhxR-SpqC5d^-sh%#jN<ee;GBZ=GTpW#Djhx(!%w1eu3=LgP9UTqLot({$
z%-k%T%?&NgVR~KilS^|`^GaZPQxJNMaq0ynh};68%`T}$nPsUdZbkXI3Sf_0WnyuQ
zvw@qjp|gRdInYtq-2%~@g2gRRy^c8b>H{644~kx-=!OXa(-4RWPrN`5Jo%^Q0n>aD
zFma1kbOSRMlZmH`V@SoVBpvJhJ&m^-Ivd#<)Y>))EcW>FFMR$zYo-4Eu|<Nn=dS$G
z-`W}ETp9oWjECLv&;QIPyft~Rc>Z^M_G=T(ulw@9=XP`oBy9V)^U}-jB9dCgUnk#t
z7oO2{Pxzg|pa1^*7S0oXZ*<7AkBO&hj>7D9wa2z}MmS&X+Z)>WE2QD!%aXR*yF7n?
z321&_`F+N}KgxG6{QqyOcCWS2LZaeeVAWH`7X42zcHg{}t|Fba;qTHfYxQ3&dh@1W
z+37dGbMF72l%VnXeZ2#}kVjU2{cXKEm!^ectLJgq{&qCjdQ-pV$lrJ3fo+>=|2{VP
z&baCZKU+@NhWg*HO`bCbwlTeR_j{Z0q4D88^*41<e?vaJEN5!_wC8VXyXlgM!j#YU
z{|%kx?*>et`Tb_yALW%kOv{8%&YoW=rS<2-?3-3HEBi%f%=l*@Q`w=(e5Pog@VkdP
zOKq0jOa9lb9Q=B!k%f`Lo8x*b>mIHBw6eVXY|DjME*<NV!e<$bZQiClx1%JUt$xJC
zqMz`sd8!eIv#q+~RN0IJ_oq3A_cS*5A9P|)uPl4J`Q5zh8f{F@QBOtQ1%0{~tnv7<
zxs4&)`GgAwp;n(6<5}YEjxUHmz2Nw{4Nny1LW`!`GkQ12&p8v|{C}f?kcY+eID;6a
z1yAgi58JD$ypJyv`>SxyFHyD1#^)Emwebp@P3Jh+g7)u-(A(AhdCzZNo%t5_|I$>B
zu9+`$rhn_tKDX2F&V{-8FQ4yvGkjYH@4aIz4h@V9Yt2rEe*eW<3@TYYUHx3vIVCg!
E0HiWF6951J
literal 0
HcmV?d00001
diff --git a/src/skins/vector/views/molecules/MatrixToolbar.js b/src/skins/vector/views/molecules/MatrixToolbar.js
index 4a299f14..361e39d6 100644
--- a/src/skins/vector/views/molecules/MatrixToolbar.js
+++ b/src/skins/vector/views/molecules/MatrixToolbar.js
@@ -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>
);
}