Merge pull request #3641 from matrix-org/travis/e2e-icon

Fix positioning, size, and colour of the composer e2e icon
This commit is contained in:
Travis Ralston 2019-11-20 11:16:54 -07:00 committed by GitHub
commit e33bfe93b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 19 deletions

View file

@ -23,10 +23,6 @@ limitations under the License.
padding-left: 84px; padding-left: 84px;
} }
.mx_MessageComposer_wrapper.mx_MessageComposer_hasE2EIcon {
padding-left: 109px;
}
.mx_MessageComposer_replaced_wrapper { .mx_MessageComposer_replaced_wrapper {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -78,10 +74,10 @@ limitations under the License.
.mx_MessageComposer_e2eIcon.mx_E2EIcon { .mx_MessageComposer_e2eIcon.mx_E2EIcon {
position: absolute; position: absolute;
left: 60px; left: 60px;
width: 16px;
&::after { height: 16px;
background-color: $composer-e2e-icon-color; margin-right: 0; // Counteract the E2EIcon class
} margin-left: 3px; // Counteract the E2EIcon class
} }
.mx_MessageComposer_noperm_error { .mx_MessageComposer_noperm_error {

View file

@ -25,7 +25,6 @@ import RoomViewStore from '../../../stores/RoomViewStore';
import Stickerpicker from './Stickerpicker'; import Stickerpicker from './Stickerpicker';
import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks'; import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
import ContentMessages from '../../../ContentMessages'; import ContentMessages from '../../../ContentMessages';
import classNames from 'classnames';
import E2EIcon from './E2EIcon'; import E2EIcon from './E2EIcon';
function ComposerAvatar(props) { function ComposerAvatar(props) {
@ -353,13 +352,9 @@ export default class MessageComposer extends React.Component {
); );
} }
const wrapperClasses = classNames({
mx_MessageComposer_wrapper: true,
mx_MessageComposer_hasE2EIcon: !!this.props.e2eStatus,
});
return ( return (
<div className="mx_MessageComposer"> <div className="mx_MessageComposer">
<div className={wrapperClasses}> <div className="mx_MessageComposer_wrapper">
<div className="mx_MessageComposer_row"> <div className="mx_MessageComposer_row">
{ controls } { controls }
</div> </div>

View file

@ -460,13 +460,9 @@ export default class SlateMessageComposer extends React.Component {
const showFormatBar = this.state.showFormatting && this.state.inputState.isRichTextEnabled; const showFormatBar = this.state.showFormatting && this.state.inputState.isRichTextEnabled;
const wrapperClasses = classNames({
mx_MessageComposer_wrapper: true,
mx_MessageComposer_hasE2EIcon: !!this.props.e2eStatus,
});
return ( return (
<div className="mx_MessageComposer"> <div className="mx_MessageComposer">
<div className={wrapperClasses}> <div className="mx_MessageComposer_wrapper">
<div className="mx_MessageComposer_row"> <div className="mx_MessageComposer_row">
{ controls } { controls }
</div> </div>