From 6e3e0a144746abb3fb9de5e81a987c70ad7360e0 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 25 Oct 2015 01:52:28 +0000
Subject: [PATCH] implement new roomheader

---
 .../vector/css/molecules/MessageComposer.css  |   2 +-
 src/skins/vector/css/molecules/RoomHeader.css |  27 ++++++++--
 src/skins/vector/img/search.png               | Bin 854 -> 742 bytes
 src/skins/vector/img/settings.png             | Bin 1003 -> 391 bytes
 .../vector/views/molecules/RoomHeader.js      |  50 ++++++++++--------
 5 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/src/skins/vector/css/molecules/MessageComposer.css b/src/skins/vector/css/molecules/MessageComposer.css
index ab76c5ac..a74777bf 100644
--- a/src/skins/vector/css/molecules/MessageComposer.css
+++ b/src/skins/vector/css/molecules/MessageComposer.css
@@ -85,7 +85,7 @@ limitations under the License.
 
 .mx_MessageComposer_call {
     padding-right: 10px;
-    padding-top: 3px;
+    padding-top: 4px;
 }
 
 .mx_MessageComposer_upload img {
diff --git a/src/skins/vector/css/molecules/RoomHeader.css b/src/skins/vector/css/molecules/RoomHeader.css
index 80b7c436..312d56a7 100644
--- a/src/skins/vector/css/molecules/RoomHeader.css
+++ b/src/skins/vector/css/molecules/RoomHeader.css
@@ -71,8 +71,7 @@ limitations under the License.
     }
 
 .mx_RoomHeader_rightRow {
-    height: 48px;
-    margin-top: 18px;
+    margin-top: 32px;
     background-color: #fff;
 
     -webkit-box-ordinal-group: 3;
@@ -98,6 +97,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_name {
+    cursor: pointer;
     vertical-align: middle;
     height: 28px;
     color: #454545;
@@ -108,6 +108,26 @@ limitations under the License.
     text-overflow: ellipsis;
 }
 
+.mx_RoomHeader_nametext {
+    display: inline-block;
+}
+
+.mx_RoomHeader_settingsButton {
+    display: inline-block;
+    visibility: hidden;
+    position: relative;
+    bottom: 10px;
+    left: 4px;
+}
+
+.mx_RoomHeader_name:hover {
+    color: #76cfa6;
+}
+
+.mx_RoomHeader_name:hover .mx_RoomHeader_settingsButton {
+    visibility: visible;
+}
+
 .mx_RoomHeader_nameEditing {
     padding-left: 16px;
     padding-right: 16px;
@@ -151,7 +171,6 @@ limitations under the License.
 }
 
 .mx_RoomHeader_button {
-    height: 48px;
     display: table-cell;
     vertical-align: middle;
     padding-left: 8px;
@@ -168,4 +187,4 @@ limitations under the License.
 
 .mx_RoomHeader_voipButtons {
     margin-top: 18px;
-}
\ No newline at end of file
+}
diff --git a/src/skins/vector/img/search.png b/src/skins/vector/img/search.png
index d2c99855d079d3491605e43ee0e569190dac7e1f..2f98d2904822b67ecfd0096434d22d17443c7e03 100644
GIT binary patch
literal 742
zcmV<C0vY{@P)<h;3K|Lk000e1NJLTq000#L000vR1^@s6e@;e=00001b5ch_0Itp)
z=>Px%ph-kQR5%f(R7*%zQ54<#oa^T)BqiF%iDeX7U}YK<Xg>-hYn0$GZ6pnHp!sxo
z2MtoRiL)rA<fXhK$UzVU(Pv`WvnNQYh*naW1(~0GzI*oWJnPBrb+7a}le5oSYp-+e
z-TNGbm|+f@@r#Su*%nxt%-{hbW>CTC*r*u3SyG~6<c>?UqYZ%@g(#pH7$%w3gak1~
z0P7iWBLI2Gg4=ER70>KBPVus-x8GL|fZM=Qoh^BlL$TtzKxd9bQGqOaTXvV;iskL=
zCDW$<t^<nc@WO}H7ut)8LUw^YJ|DcEES2F^iXXS;mEX5>_E=Ou=tv~yVimSJS2Bzw
zwdS0jL&Of0c%re-pJF$%$09vN?hpbeF72%vwi9mg#a*T2h};Wk6}V{xKwKsfymb>e
z;;e=MVY?%zL4iO?3_Rr~aKaTC<Aj{*#6>WHx(|VAotwZ3mvNM+yTG+)g|7OTcGi9P
z=R<~N1`7V@mLaCq>|o?myg~m~H&HCk2JBN|9*D)GYjJr`O;{k_0kW!0-Cj|`ZLaU{
z&eLC)#fF@A)9C60H18~X0?aSxS0&VY16>>3#7zUfTmz|+Kwd+lQ%wQi5hv~PHI0xB
zFS?HlprcIqNMDFy$uqBs;yoneGlT*8sBp7x{?Cfk8x>l(8|U%VBEzfZo)JHorhX=V
zj9*M6(7Av=Em2wps5o02r0SPSF~X!E4o-eue3+S@OmmCjv%30BQ{k&J&8PvS(ER%~
zSE4uaH`AY+tvH!%irL_nGD)xr4Q^KoP9k7N(w9)1dGO4_Kbb~%Y<%uJMgk9^pmqw&
z0{x2$zr9PTT`E*m^tW?!ZuvbT_9J1Pf%0i2KVj{s{r`2+=ph>Vy0bv2Y6ci@?HTF#
Y4jDfV9bl4!EC2ui07*qoM6N<$g2TyJ%K!iX

literal 854
zcmV-c1F8IpP)<h;3K|Lk000e1NJLTq001BW001Be0ssI2{21+{0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!_(?=TRCwC#R#{IIQ52p#cj*d+vX!Q_
zLNt;XAsRzWG{Fcl1|KBG#DC<k&{ua8F+M2x;H&XT2u2`MOD&*m9a`F1?&9f^2GGJ(
z;Kg_{ncO*N?)}bwE>cQq$4R<&%=91NKqB=7sT`llieygY9L1H^L{Y@2_l5A;Rzh^-
z9svEGMTR9_rR{Y~oomG>0=StWg0wtW%LO@Sh&4-%L}`DR{v|*<&z~f%^KIlp8z}k*
zO;-wXV#)4p!lN;U5NZq{Yl-`F=17$FG~udP(=aMMLY1D%ueMOH({`6nAB}q&3-b7)
z4T{%J_hJOD4^Z7pba=xWIKXEZ-Hfw^oS5El8URRcal=;NoXTf_AP+`6od9d#03X({
z7>?3+OOBArEx>e^_lK)~XS!A|Re;aRo1%Uk_Mp#M?%IN!Oa!Z+Y~MtzNl!Q9FNSan
z0Qufbt2_5k^qREWudfuPD*(tPaArA#nwu)B{1YT7@3@Nr1kg{kLfN0NW1Fjb(E~n6
zD>A5Xf?T(XPOrXPl&5GZM<L~*bdjdOrkX?Kj#8-Byse<l-NvA=1<!BoikK?vXv^xu
zcb^Wlm=`@k>=s}kOw-$9-IOky43}zplSA)w3jnn<)I}$kY%X05(T{5!%<>V`K&u$+
zWbGdP&G&;b<_$5k$p_oXgV`e3-N3*ZOL)8lJ^N;@)$x^3>cgt@He;U&k&7MldW=2%
zYR+sr4a|d*`K$K(6({D$P^%GtssC`P8IDTj#nguA^r34J_9A7)1Nu;e!h{%4S(iHK
z<p^^NQ0d828+_K_KTHMHM0E}792zZ5p?I(qSW~FS3nql%MvPfPdzrElK|C5~d!`6F
z%)JQQ1-kz%%3BE!Ai<CTJ?{2;>5f)&sG$$-{Psz2UkiD(VCA?POE5V4-lqasf0Vb1
ztKDq4n?6rknSum&!Caci*azP#8lr(V8e;m>q<N)_`Y;TuBZ|QuS~cZl#)ffpr^kCN
g0RQOK@s|Jt0O-3~Z<YDI&Hw-a07*qoM6N<$g8e~}(f|Me

diff --git a/src/skins/vector/img/settings.png b/src/skins/vector/img/settings.png
index 445a3909e45e3a769c5012d1c5c1c72e6f048f37..264b3c9bc3fae654afde7a755cb424cbf46debef 100644
GIT binary patch
literal 391
zcmV;20eJq2P)<h;3K|Lk000e1NJLTq000aC000aK1^@s6R&`wG00001b5ch_0Itp)
z=>Px$K}keGR45gNk-<vCKoEv!)(x%CpgrhK!D3ZBc=GDGAc&P5#EYQVqCtECp;U@`
z6og30L3*!GAX2SLeFYWYz-rPNXBQKq6kXWOKi~WrW@iz8t=*2FN98;s0ET_a*XK%4
zX^U`xO8Y#golFx5P8czV2#3~0-~sZR=uLoLu{yK<s!c-c%%v2Z2L%mV!Mf#8P!(<?
z=4>EhQJIJUjxGK3z*Cb}m0Q0cEsQ5#=2rL~j+zak6OKH#)47;H?;+p>iZI6dg8O1v
z`Pv_GhMnhh-nNtm|7rb6(WFMbq!5mb*~#iNsk{;ExBvkiP}IM&BiOqSigJ%;oE-F(
zA69FHQeay`;O#-CG*gUQCjP!dZ$&0@!_2PC*h`Ge`$V(`!0jmdST_8}I~h>EYfL#q
lsw<;orf|A8>vj!~*B3OzZD<giTGjvn002ovPDHLkV1nG!t5^U4

literal 1003
zcmV<H0~Gv;P)<h;3K|Lk000e1NJLTq001BW001Be0ssI2{21+{0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#jY&j7RCwCdR?ANlK^*SvtGmS3w$KOo
zLM=o<Djq;Z!ACq8FJ3%oVl>91fq3*k@T$R^7d@KD!HbCp14w)k69QVI0t!)qQu?4J
zeeBbZG_>1gX`z9Gb7;Cdv-8b-zwi5Ih^A?lootk4hui-Tz-)f#m#DmyRcowNt7{8i
zkxdr4Zz6@w9=6k;!m^ViJ<S3kWZNiuJ1<7F+6_N{%ER7k5oFCWydYIhk*aA}W;m_v
z=BQ3D`!yzy#pKI-+5CWjlO9=;Y#cf2WZs9QxTtyr`lOpN-II|bJU$ptf#_xj9nPrJ
zNyWocO%BFyrzqX`zmm#$R9?)eemjl9Lkki*?+2==br?o~cOem@?=}g!$4Ex4<~O8K
z-~0S$w#7-G_Ht!v5K61(d<8a2%x>syb<+5@e32a-0W%foJ(N+QuJQm~K5jChEUm+k
zR1Lr=IDYZp(2Ma?3FVBBE3YC<fvVONGlRXqn915%QddQdM&yj5UE0I#+ePOGU_8DG
z#^knYc0&ME8|sGsF4h$-<oAlwKP%pD;P<c1IFnSKO=YefvigL=I*vH#;gFONweDKZ
zoT9#o^yi3t%*7nE(RyZH{}pfg3$vru+i2kR&t&ynHP~0JFt8v!o=BMhAZKEtcBhf=
za2M?{E^1bq=pl0rcwh{@g^37h+|9t}_z#O10gz%R+$OFD`{3PFHh6EUOIR<GRgD1E
zR%$w-tRL+asJWE6YVqDHm|!DjFq;t|;9?Zb@-UeGu`H`PZ^IS|Nt<0UVx!K`lA~Do
zBVp;u_cUGxba`HY>TRilhd+kpsYGGPEJd!?Tc1v55I*^rz=MjQRP^f8X)G#t)UdtH
zLa8hojYuf?l>=6TQlTYO8@z)V><Op_eqPRIaS$CZ;e%X50>7CP;Y_{P;Hg^;JT!x<
zV*4OLzxJGy5f#^+O!>GTn9D9p+WA^;t64NSFWOjgq0U++i?B=&U&&3t%~N_?YzW{H
zs9;>tCw_@Z^_e)hAepMx$Qn-Fp;f!5&-z%n4;hIK1&Z?nI!5Ati!0#WZ=<pHiMR}=
zJ3Z{CZWVa*VG*&cIM&W&l)cTxw6CQIyaF|MdD+!7d2#hjcJnlXfHFIi&FW4F=7k4x
zk5FDx(qN)Iz^gwJ9Ft4tZXdTj_o7F^6y)Dt!yr*Wd{1-LHebB*H#_7^U?*;N6}Nu^
Z3;>$)(R0SCAn*VH002ovPDHLkV1g(4+<yQ7

diff --git a/src/skins/vector/views/molecules/RoomHeader.js b/src/skins/vector/views/molecules/RoomHeader.js
index de6aea15..c4e4cdcc 100644
--- a/src/skins/vector/views/molecules/RoomHeader.js
+++ b/src/skins/vector/views/molecules/RoomHeader.js
@@ -59,7 +59,6 @@ module.exports = React.createClass({
             var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
 
             var call_buttons;
-            var zoom_button;
             if (this.state && this.state.call_state != 'ended') {
                 var muteVideoButton;
                 var activeCall = (
@@ -111,16 +110,15 @@ module.exports = React.createClass({
                 cancel_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onCancelClick}>Cancel</div>
                 save_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save Changes</div>
             } else {
+                // <EditableText label={this.props.room.name} initialValue={actual_name} placeHolder="Name" onValueChanged={this.onNameChange} />
                 name =
-                    <div className="mx_RoomHeader_name">
-                        <EditableText label={this.props.room.name} initialValue={actual_name} placeHolder="Name" onValueChanged={this.onNameChange} />
+                    <div className="mx_RoomHeader_name" onClick={this.props.onSettingsClick}>
+                        <div className="mx_RoomHeader_nametext">{ this.props.room.name }</div>
+                        <div className="mx_RoomHeader_settingsButton">
+                            <img src="img/settings.png" width="12" height="12"/>
+                        </div>
                     </div>
                 if (topic) topic_el = <div className="mx_RoomHeader_topic" title={topic.getContent().topic}>{ topic.getContent().topic }</div>;
-                settings_button = (
-                    <div className="mx_RoomHeader_button" onClick={this.props.onSettingsClick}>
-                        <img src="img/settings.png" width="32" height="32"/>
-                    </div>
-                );
             }
 
             var roomAvatar = null;
@@ -130,12 +128,23 @@ module.exports = React.createClass({
                 );
             }
 
-            if (activeCall && activeCall.type == "video") {
-                zoom_button = (
-                    <div className="mx_RoomHeader_button" onClick={this.onFullscreenClick}>
-                        <img src="img/zoom.png" title="Fullscreen" alt="Fullscreen" width="32" height="32" style={{ 'marginTop': '3px' }}/>
-                    </div>
-                );
+            var zoom_button, video_button, voice_button;
+            if (activeCall) {
+                if (activeCall.type == "video") {
+                    zoom_button = (
+                        <div className="mx_RoomHeader_button" onClick={this.onFullscreenClick}>
+                            <img src="img/zoom.png" title="Fullscreen" alt="Fullscreen" width="32" height="32" style={{ 'marginTop': '3px' }}/>
+                        </div>
+                    );
+                }
+                video_button = 
+                        <div className="mx_RoomHeader_button mx_RoomHeader_video" onClick={activeCall && activeCall.type === "video" ? this.onMuteVideoClick : this.onVideoClick}>
+                            <img src="img/video.png" title="Video call" alt="Video call" width="32" height="32"/>
+                        </div>;
+                voice_button =
+                        <div className="mx_RoomHeader_button mx_RoomHeader_voice" onClick={activeCall ? this.onMuteAudioClick : this.onVoiceClick}>
+                            <img src="img/voip.png" title="VoIP call" alt="VoIP call" width="32" height="32"/>
+                        </div>;
             }
 
             header =
@@ -153,16 +162,11 @@ module.exports = React.createClass({
                     {cancel_button}
                     {save_button}
                     <div className="mx_RoomHeader_rightRow">
-                        { settings_button }
+                        { video_button }
+                        { voice_button }
                         { zoom_button }
-                        <div className="mx_RoomHeader_button mx_RoomHeader_search">
-                            <img src="img/search.png" title="Search" alt="Search" width="32" height="32"/>
-                        </div>
-                        <div className="mx_RoomHeader_button mx_RoomHeader_video" onClick={activeCall && activeCall.type === "video" ? this.onMuteVideoClick : this.onVideoClick}>
-                            <img src="img/video.png" title="Video call" alt="Video call" width="32" height="32"/>
-                        </div>
-                        <div className="mx_RoomHeader_button mx_RoomHeader_voice" onClick={activeCall ? this.onMuteAudioClick : this.onVoiceClick}>
-                            <img src="img/voip.png" title="VoIP call" alt="VoIP call" width="32" height="32"/>
+                        <div className="mx_RoomHeader_button">
+                            <img src="img/search.png" title="Search" alt="Search" width="21" height="19"/>
                         </div>
                     </div>
                 </div>