implement new roomheader
This commit is contained in:
parent
d16968d528
commit
6e3e0a1447
5 changed files with 51 additions and 28 deletions
|
@ -85,7 +85,7 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_MessageComposer_call {
|
.mx_MessageComposer_call {
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
padding-top: 3px;
|
padding-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MessageComposer_upload img {
|
.mx_MessageComposer_upload img {
|
||||||
|
|
|
@ -71,8 +71,7 @@ limitations under the License.
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomHeader_rightRow {
|
.mx_RoomHeader_rightRow {
|
||||||
height: 48px;
|
margin-top: 32px;
|
||||||
margin-top: 18px;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
-webkit-box-ordinal-group: 3;
|
-webkit-box-ordinal-group: 3;
|
||||||
|
@ -98,6 +97,7 @@ limitations under the License.
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomHeader_name {
|
.mx_RoomHeader_name {
|
||||||
|
cursor: pointer;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
color: #454545;
|
color: #454545;
|
||||||
|
@ -108,6 +108,26 @@ limitations under the License.
|
||||||
text-overflow: ellipsis;
|
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 {
|
.mx_RoomHeader_nameEditing {
|
||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
padding-right: 16px;
|
padding-right: 16px;
|
||||||
|
@ -151,7 +171,6 @@ limitations under the License.
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomHeader_button {
|
.mx_RoomHeader_button {
|
||||||
height: 48px;
|
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
|
@ -168,4 +187,4 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_RoomHeader_voipButtons {
|
.mx_RoomHeader_voipButtons {
|
||||||
margin-top: 18px;
|
margin-top: 18px;
|
||||||
}
|
}
|
||||||
|
|
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 topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
|
||||||
|
|
||||||
var call_buttons;
|
var call_buttons;
|
||||||
var zoom_button;
|
|
||||||
if (this.state && this.state.call_state != 'ended') {
|
if (this.state && this.state.call_state != 'ended') {
|
||||||
var muteVideoButton;
|
var muteVideoButton;
|
||||||
var activeCall = (
|
var activeCall = (
|
||||||
|
@ -111,16 +110,15 @@ module.exports = React.createClass({
|
||||||
cancel_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onCancelClick}>Cancel</div>
|
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>
|
save_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save Changes</div>
|
||||||
} else {
|
} else {
|
||||||
|
// <EditableText label={this.props.room.name} initialValue={actual_name} placeHolder="Name" onValueChanged={this.onNameChange} />
|
||||||
name =
|
name =
|
||||||
<div className="mx_RoomHeader_name">
|
<div className="mx_RoomHeader_name" onClick={this.props.onSettingsClick}>
|
||||||
<EditableText label={this.props.room.name} initialValue={actual_name} placeHolder="Name" onValueChanged={this.onNameChange} />
|
<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>
|
</div>
|
||||||
if (topic) topic_el = <div className="mx_RoomHeader_topic" title={topic.getContent().topic}>{ topic.getContent().topic }</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;
|
var roomAvatar = null;
|
||||||
|
@ -130,12 +128,23 @@ module.exports = React.createClass({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (activeCall && activeCall.type == "video") {
|
var zoom_button, video_button, voice_button;
|
||||||
zoom_button = (
|
if (activeCall) {
|
||||||
<div className="mx_RoomHeader_button" onClick={this.onFullscreenClick}>
|
if (activeCall.type == "video") {
|
||||||
<img src="img/zoom.png" title="Fullscreen" alt="Fullscreen" width="32" height="32" style={{ 'marginTop': '3px' }}/>
|
zoom_button = (
|
||||||
</div>
|
<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 =
|
header =
|
||||||
|
@ -153,16 +162,11 @@ module.exports = React.createClass({
|
||||||
{cancel_button}
|
{cancel_button}
|
||||||
{save_button}
|
{save_button}
|
||||||
<div className="mx_RoomHeader_rightRow">
|
<div className="mx_RoomHeader_rightRow">
|
||||||
{ settings_button }
|
{ video_button }
|
||||||
|
{ voice_button }
|
||||||
{ zoom_button }
|
{ zoom_button }
|
||||||
<div className="mx_RoomHeader_button mx_RoomHeader_search">
|
<div className="mx_RoomHeader_button">
|
||||||
<img src="img/search.png" title="Search" alt="Search" width="32" height="32"/>
|
<img src="img/search.png" title="Search" alt="Search" width="21" height="19"/>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue