PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

switch SVGs from imgs to objects

Browse source
This commit is contained in:
Matthew Hodgson 2016-01-03 22:30:52 +00:00
parent 640aa45956
commit 4f915d622e
3 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/structures/RoomView.js
View file

@ -1174,7 +1174,7 @@ module.exports = React.createClass({
if (this.state.syncState === "ERROR") { if (this.state.syncState === "ERROR") {
statusBar = ( statusBar = (
<div className="mx_RoomView_connectionLostBar"> <div className="mx_RoomView_connectionLostBar">
<img src="img/warning.svg" width="24" height="23" alt="/!\ "/> <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
<div className="mx_RoomView_connectionLostBar_textArea"> <div className="mx_RoomView_connectionLostBar_textArea">
<div className="mx_RoomView_connectionLostBar_title"> <div className="mx_RoomView_connectionLostBar_title">
Connectivity to the server has been lost. Connectivity to the server has been lost.
@ -1194,7 +1194,7 @@ module.exports = React.createClass({
<div className="mx_RoomView_tabCompleteWrapper"> <div className="mx_RoomView_tabCompleteWrapper">
<TabCompleteBar entries={this.tabComplete.peek(6)} /> <TabCompleteBar entries={this.tabComplete.peek(6)} />
<div className="mx_RoomView_tabCompleteEol"> <div className="mx_RoomView_tabCompleteEol">
<img src="img/eol.svg" width="22" height="16" alt="->|"/> <object type="image/svg+xml" data="img/eol.svg" width="22" height="16" title="->|"/>
Auto-complete Auto-complete
</div> </div>
</div> </div>
@ -1204,7 +1204,7 @@ module.exports = React.createClass({
else if (this.state.hasUnsentMessages) { else if (this.state.hasUnsentMessages) {
statusBar = ( statusBar = (
<div className="mx_RoomView_connectionLostBar"> <div className="mx_RoomView_connectionLostBar">
<img src="img/warning.svg" width="24" height="23" alt="/!\ "/> <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
<div className="mx_RoomView_connectionLostBar_textArea"> <div className="mx_RoomView_connectionLostBar_textArea">
<div className="mx_RoomView_connectionLostBar_title"> <div className="mx_RoomView_connectionLostBar_title">
Some of your messages have not been sent. Some of your messages have not been sent.
@ -1268,7 +1268,7 @@ module.exports = React.createClass({
if (this.state.draggingFile) { if (this.state.draggingFile) {
fileDropTarget = <div className="mx_RoomView_fileDropTarget"> fileDropTarget = <div className="mx_RoomView_fileDropTarget">
<div className="mx_RoomView_fileDropTargetLabel"> <div className="mx_RoomView_fileDropTargetLabel">
<img src="img/upload-big.svg" width="45" height="59" alt="Drop File Here"/><br/> <object type="image/svg+xml" data="img/upload-big.svg" width="45" height="59" title="Drop File Here"/><br/>
Drop File Here Drop File Here
</div> </div>
</div>; </div>;
@ -1306,24 +1306,28 @@ module.exports = React.createClass({
if (call.type === "video") { if (call.type === "video") {
zoomButton = ( zoomButton = (
<div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick}> <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick}>
<img src="img/fullscreen.svg" title="Fill screen" alt="Fill screen" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/> <object type="image/svg+xml" data="img/fullscreen.svg" title="Fill screen" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
</div> </div>
); );
videoMuteButton = videoMuteButton =
<div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}> <div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}>
<img src={call.isLocalVideoMuted() ? "img/video-unmute.svg" : "img/video-mute.svg"} width="31" height="27"/> <img src={call.isLocalVideoMuted() ? "img/video-unmute.svg" : "img/video-mute.svg"}
alt={call.isLocalVideoMuted() ? "Click to unmute video" : "Click to mute video"}
width="31" height="27"/>
</div> </div>
} }
voiceMuteButton = voiceMuteButton =
<div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}> <div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
<img src={call.isMicrophoneMuted() ? "img/voice-unmute.svg" : "img/voice-mute.svg"} width="21" height="26"/> <img src={call.isMicrophoneMuted() ? "img/voice-unmute.svg" : "img/voice-mute.svg"}
alt={call.isMicrophoneMuted() ? "Click to unmute audio" : "Click to mute audio"}
width="21" height="26"/>
</div> </div>
if (!statusBar) { if (!statusBar) {
statusBar = statusBar =
<div className="mx_RoomView_callBar"> <div className="mx_RoomView_callBar">
<img src="img/sound-indicator.svg" width="23" height="20" alt=""/> <img src="img/sound-indicator.svg" width="23" height="20"/>
<b>Active call</b> <b>Active call</b>
</div>; </div>;
} }
@ -1334,7 +1338,7 @@ module.exports = React.createClass({
{ videoMuteButton } { videoMuteButton }
{ zoomButton } { zoomButton }
{ statusBar } { statusBar }
<img className="mx_RoomView_voipChevron" src="img/voip-chevron.svg" width="22" height="17"/> <object type="image/svg+xml" className="mx_RoomView_voipChevron" data="img/voip-chevron.svg" width="22" height="17"/>
</div> </div>
} }

6
src/components/views/rooms/MessageComposer.js
View file

@ -474,11 +474,11 @@ module.exports = React.createClass({
else { else {
callButton = callButton =
<div className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick}> <div className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick}>
<img src="img/voice.svg" alt="Voice call" title="Voice call" width="16" height="26"/> <object type="image/svg+xml" data="img/voice.svg" title="Voice call" width="16" height="26"/>
</div> </div>
videoCallButton = videoCallButton =
<div className="mx_MessageComposer_videocall" onClick={this.onCallClick}> <div className="mx_MessageComposer_videocall" onClick={this.onCallClick}>
<img src="img/call.svg" alt="Video call" title="Video call" width="30" height="22"/> <object type="image/svg+xml" data="img/call.svg" title="Video call" width="30" height="22"/>
</div> </div>
} }
@ -493,7 +493,7 @@ module.exports = React.createClass({
<textarea ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." /> <textarea ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
</div> </div>
<div className="mx_MessageComposer_upload" onClick={this.onUploadClick}> <div className="mx_MessageComposer_upload" onClick={this.onUploadClick}>
<img src="img/upload.svg" alt="Upload file" title="Upload file" width="19" height="24"/> <object type="image/svg+xml" data="img/upload.svg" title="Upload file" width="19" height="24"/>
<input type="file" style={uploadInputStyle} ref="uploadInput" onChange={this.onUploadFileSelected} /> <input type="file" style={uploadInputStyle} ref="uploadInput" onChange={this.onUploadFileSelected} />
</div> </div>
{ hangupButton } { hangupButton }

18
src/components/views/rooms/RoomHeader.js
View file

@ -119,7 +119,7 @@ module.exports = React.createClass({
<div className="mx_RoomHeader_nametext" title={ this.props.room.name }>{ this.props.room.name }</div> <div className="mx_RoomHeader_nametext" title={ this.props.room.name }>{ this.props.room.name }</div>
{ searchStatus } { searchStatus }
<div className="mx_RoomHeader_settingsButton"> <div className="mx_RoomHeader_settingsButton">
<img src="img/settings.svg" width="12" height="12"/> <object type="image/svg+xml" data="img/settings.svg" width="12" height="12"/>
</div> </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>;
@ -135,18 +135,18 @@ module.exports = React.createClass({
var leave_button; var leave_button;
if (this.props.onLeaveClick) { if (this.props.onLeaveClick) {
leave_button = leave_button =
<div className="mx_RoomHeader_button mx_RoomHeader_leaveButton"> <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onLeaveClick}>
<img src="img/leave.svg" title="Leave room" alt="Leave room" <object type="image/svg+xml" data="img/leave.svg" title="Leave room"
width="26" height="20" onClick={this.props.onLeaveClick}/> width="26" height="20"/>
</div>; </div>;
} }
var forget_button; var forget_button;
if (this.props.onForgetClick) { if (this.props.onForgetClick) {
forget_button = forget_button =
<div className="mx_RoomHeader_button mx_RoomHeader_leaveButton"> <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onForgetClick}>
<img src="img/leave.svg" title="Forget room" alt="Forget room" <object type="image/svg+xml" data="img/leave.svg" title="Forget room"
width="26" height="20" onClick={this.props.onForgetClick}/> width="26" height="20"/>
</div>; </div>;
} }
@ -166,8 +166,8 @@ module.exports = React.createClass({
<div className="mx_RoomHeader_rightRow"> <div className="mx_RoomHeader_rightRow">
{ forget_button } { forget_button }
{ leave_button } { leave_button }
<div className="mx_RoomHeader_button"> <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick}>
<img src="img/search.svg" title="Search" alt="Search" width="21" height="19" onClick={this.props.onSearchClick}/> <object type="image/svg+xml" data="img/search.svg" title="Search" width="21" height="19"/>
</div> </div>
</div> </div>
</div> </div>