implement new roomheader

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 {

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;
-}
+}

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>