mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

implement new roomheader

Browse source
This commit is contained in:
Matthew Hodgson 2015-10-25 01:52:28 +00:00
parent d16968d528
commit 6e3e0a1447
5 changed files with 51 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/skins/vector/css/molecules/MessageComposer.css
View file

@ -85,7 +85,7 @@ limitations under the License.
.mx_MessageComposer_call {
padding-right: 10px;
padding-top: 3px;
padding-top: 4px;
}
.mx_MessageComposer_upload img {

27
src/skins/vector/css/molecules/RoomHeader.css
View file

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

BIN
src/skins/vector/img/search.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 854 B

After

Width:  |  Height:  |  Size: 742 B

BIN
src/skins/vector/img/settings.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1,003 B

After

Width:  |  Height:  |  Size: 391 B

50
src/skins/vector/views/molecules/RoomHeader.js
View file

@ -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>