implement new roomheader
This commit is contained in:
Matthew Hodgson
parent
d16968d528
commit
6e3e0a1447
5 changed files with 51 additions and 28 deletions
|
|
@ -85,7 +85,7 @@ limitations under the License.
|
|||
|
||||
.mx_MessageComposer_call {
|
||||
padding-right: 10px;
|
||||
padding-top: 3px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_upload img {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 854 B After Width: | Height: | Size: 742 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1,003 B After Width: | Height: | Size: 391 B |
|
|
@ -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,13 +128,24 @@ module.exports = React.createClass({
|
|||
);
|
||||
}
|
||||
|
||||
if (activeCall && activeCall.type == "video") {
|
||||
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 =
|
||||
<div className="mx_RoomHeader_wrapper">
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue