OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

replace existing icon in composer with the new one

pull/21833/head
Bruno Windels 2019-02-01 13:40:42 +01:00
parent 0cdf3d0898
commit 09c3391dd8
4 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
res/css/views/rooms/_MessageComposer.scss
View File

@ -23,6 +23,10 @@ limitations under the License.
padding-left: 84px;
}
.mx_MessageComposer_wrapper.mx_MessageComposer_hasE2EIcon {
padding-left: 109px;
}
.mx_MessageComposer_replaced_wrapper {
margin-left: auto;
margin-right: auto;
@ -71,9 +75,10 @@ limitations under the License.
width: 100%;
}
.mx_MessageComposer_e2eIcon {
.mx_MessageComposer_e2eIcon.mx_E2EIcon {
position: absolute;
left: 60px;
background-color: $composer-e2e-icon-color;
}
.mx_MessageComposer_noperm_error {

2
res/themes/dharma/css/_dharma.scss
View File

@ -142,6 +142,8 @@ $roomheader-addroom-color: #91A1C0;
$roomtopic-color: #9fa9ba;
$eventtile-meta-color: $roomtopic-color;
$composer-e2e-icon-color: #c9ced6;
// ********************
$roomtile-name-color: #61708b;

2
res/themes/light/css/_base.scss
View File

@ -134,6 +134,8 @@ $roomheader-color: $primary-fg-color;
$roomheader-addroom-color: $primary-bg-color;
$roomtopic-color: $settings-grey-fg-color;
$eventtile-meta-color: $roomtopic-color;
$composer-e2e-icon-color: #c9ced6;
// ********************
$roomtile-name-color: rgba(69, 69, 69, 0.8);

33
src/components/views/rooms/MessageComposer.js
View File

@ -26,6 +26,9 @@ import RoomViewStore from '../../../stores/RoomViewStore';
import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
import Stickerpicker from './Stickerpicker';
import { makeRoomPermalink } from '../../../matrix-to';
import classNames from 'classnames';
import E2EIcon from './E2EIcon';
const formatButtonList = [
_td("bold"),
@ -316,25 +319,14 @@ export default class MessageComposer extends React.Component {
);
}
let e2eImg; let e2eTitle; let e2eClass;
const roomIsEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
if (roomIsEncrypted) {
// FIXME: show a /!\ if there are untrusted devices in the room...
e2eImg = require("../../../../res/img/e2e-verified.svg");
e2eTitle = _t('Encrypted room');
e2eClass = 'mx_MessageComposer_e2eIcon';
} else {
e2eImg = require("../../../../res/img/e2e-unencrypted.svg");
e2eTitle = _t('Unencrypted room');
e2eClass = 'mx_MessageComposer_e2eIcon mx_filterFlipColor';
if (this.props.e2eStatus) {
controls.push(<E2EIcon
status={this.props.e2eStatus}
key="e2eIcon"
className="mx_MessageComposer_e2eIcon" />
);
}
controls.push(
<img key="e2eIcon" className={e2eClass} src={e2eImg} width="12" height="12"
alt={e2eTitle} title={e2eTitle}
/>,
);
let callButton;
let videoCallButton;
let hangupButton;
@ -413,6 +405,7 @@ export default class MessageComposer extends React.Component {
key="controls_formatting" />
) : null;
const roomIsEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
let placeholderText;
if (this.state.isQuoting) {
if (roomIsEncrypted) {
@ -509,9 +502,13 @@ export default class MessageComposer extends React.Component {
</div>;
}
const wrapperClasses = classNames({
mx_MessageComposer_wrapper: true,
mx_MessageComposer_hasE2EIcon: !!this.props.e2eStatus,
});
return (
<div className="mx_MessageComposer">
<div className="mx_MessageComposer_wrapper">
<div className={wrapperClasses}>
<div className="mx_MessageComposer_row">
{ controls }
</div>