Invert composer mode icon
							parent
							
								
									c7dbb5947f
								
							
						
					
					
						commit
						bdaa1acf59
					
				| 
						 | 
				
			
			@ -1,10 +1,9 @@
 | 
			
		|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 | 
			
		||||
<g clip-path="url(#clip0_1456_146365)">
 | 
			
		||||
<path d="M7.00042 13.7333H13.6671L14.5471 15.8667C14.7471 16.3467 15.2137 16.6667 15.7337 16.6667C16.6537 16.6667 17.2671 15.72 16.9071 14.88L11.7337 2.92C11.4937 2.36 10.9471 2 10.3337 2C9.72042 2 9.17375 2.36 8.93375 2.92L3.76042 14.88C3.40042 15.72 4.02708 16.6667 4.94708 16.6667C5.46708 16.6667 5.93375 16.3467 6.13375 15.8667L7.00042 13.7333ZM10.3337 4.64L12.8271 11.3333H7.84042L10.3337 4.64Z" fill="#C1C6CD"/>
 | 
			
		||||
<path d="M0.5 9.66927C0.5 10.6787 1.32386 11.5026 2.33333 11.5026H18.3333C19.3428 11.5026 20.1667 10.6787 20.1667 9.66927C20.1667 8.6598 19.3428 7.83594 18.3333 7.83594H2.33333C1.32386 7.83594 0.5 8.6598 0.5 9.66927Z" fill="#C1C6CD" stroke="white"/>
 | 
			
		||||
<g clip-path="url(#clip0_1456_146350)">
 | 
			
		||||
<path d="M1 18.6667C1 19.4 1.6 20 2.33333 20H18.3333C19.0667 20 19.6667 19.4 19.6667 18.6667C19.6667 17.9333 19.0667 17.3333 18.3333 17.3333H2.33333C1.6 17.3333 1 17.9333 1 18.6667ZM7 11.7333H13.6667L14.5467 13.8667C14.7467 14.3467 15.2133 14.6667 15.7333 14.6667C16.6533 14.6667 17.2667 13.72 16.9067 12.88L11.7333 0.92C11.4933 0.36 10.9467 0 10.3333 0C9.72 0 9.17333 0.36 8.93333 0.92L3.76 12.88C3.4 13.72 4.02667 14.6667 4.94667 14.6667C5.46667 14.6667 5.93333 14.3467 6.13333 13.8667L7 11.7333ZM10.3333 2.64L12.8267 9.33333H7.84L10.3333 2.64Z" fill="#C1C6CD"/>
 | 
			
		||||
</g>
 | 
			
		||||
<defs>
 | 
			
		||||
<clipPath id="clip0_1456_146365">
 | 
			
		||||
<clipPath id="clip0_1456_146350">
 | 
			
		||||
<rect width="20" height="20" fill="white"/>
 | 
			
		||||
</clipPath>
 | 
			
		||||
</defs>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
		 Before Width: | Height: | Size: 921 B After Width: | Height: | Size: 818 B  | 
| 
						 | 
				
			
			@ -1,9 +1,10 @@
 | 
			
		|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 | 
			
		||||
<g clip-path="url(#clip0_1456_146350)">
 | 
			
		||||
<path d="M1 18.6667C1 19.4 1.6 20 2.33333 20H18.3333C19.0667 20 19.6667 19.4 19.6667 18.6667C19.6667 17.9333 19.0667 17.3333 18.3333 17.3333H2.33333C1.6 17.3333 1 17.9333 1 18.6667ZM7 11.7333H13.6667L14.5467 13.8667C14.7467 14.3467 15.2133 14.6667 15.7333 14.6667C16.6533 14.6667 17.2667 13.72 16.9067 12.88L11.7333 0.92C11.4933 0.36 10.9467 0 10.3333 0C9.72 0 9.17333 0.36 8.93333 0.92L3.76 12.88C3.4 13.72 4.02667 14.6667 4.94667 14.6667C5.46667 14.6667 5.93333 14.3467 6.13333 13.8667L7 11.7333ZM10.3333 2.64L12.8267 9.33333H7.84L10.3333 2.64Z" fill="#C1C6CD"/>
 | 
			
		||||
<g clip-path="url(#clip0_1456_146365)">
 | 
			
		||||
<path d="M7.00042 13.7333H13.6671L14.5471 15.8667C14.7471 16.3467 15.2137 16.6667 15.7337 16.6667C16.6537 16.6667 17.2671 15.72 16.9071 14.88L11.7337 2.92C11.4937 2.36 10.9471 2 10.3337 2C9.72042 2 9.17375 2.36 8.93375 2.92L3.76042 14.88C3.40042 15.72 4.02708 16.6667 4.94708 16.6667C5.46708 16.6667 5.93375 16.3467 6.13375 15.8667L7.00042 13.7333ZM10.3337 4.64L12.8271 11.3333H7.84042L10.3337 4.64Z" fill="#C1C6CD"/>
 | 
			
		||||
<path d="M0.5 9.66927C0.5 10.6787 1.32386 11.5026 2.33333 11.5026H18.3333C19.3428 11.5026 20.1667 10.6787 20.1667 9.66927C20.1667 8.6598 19.3428 7.83594 18.3333 7.83594H2.33333C1.32386 7.83594 0.5 8.6598 0.5 9.66927Z" fill="#C1C6CD" stroke="white"/>
 | 
			
		||||
</g>
 | 
			
		||||
<defs>
 | 
			
		||||
<clipPath id="clip0_1456_146350">
 | 
			
		||||
<clipPath id="clip0_1456_146365">
 | 
			
		||||
<rect width="20" height="20" fill="white"/>
 | 
			
		||||
</clipPath>
 | 
			
		||||
</defs>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
		 Before Width: | Height: | Size: 818 B After Width: | Height: | Size: 921 B  | 
| 
						 | 
				
			
			@ -559,7 +559,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
 | 
			
		|||
                            showPollsButton={this.state.showPollsButton}
 | 
			
		||||
                            showStickersButton={this.showStickersButton}
 | 
			
		||||
                            showComposerModeButton={this.state.isWysiwygLabEnabled}
 | 
			
		||||
                            isComposerModeToggled={this.state.isRichTextEnabled}
 | 
			
		||||
                            isRichTextEnabled={this.state.isRichTextEnabled}
 | 
			
		||||
                            onComposerModeClick={this.onRichTextToggle}
 | 
			
		||||
                            toggleButtonMenu={this.toggleButtonMenu}
 | 
			
		||||
                            showVoiceBroadcastButton={this.state.showVoiceBroadcastButton}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -55,7 +55,7 @@ interface IProps {
 | 
			
		|||
    toggleButtonMenu: () => void;
 | 
			
		||||
    showVoiceBroadcastButton: boolean;
 | 
			
		||||
    onStartVoiceBroadcastClick: () => void;
 | 
			
		||||
    isComposerModeToggled: boolean;
 | 
			
		||||
    isRichTextEnabled: boolean;
 | 
			
		||||
    showComposerModeButton: boolean;
 | 
			
		||||
    onComposerModeClick: () => void;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -89,7 +89,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
 | 
			
		|||
        mainButtons = [
 | 
			
		||||
            emojiButton(props),
 | 
			
		||||
            props.showComposerModeButton &&
 | 
			
		||||
                <ComposerModeButton key="composerModeButton" isToggled={props.isComposerModeToggled} onClick={props.onComposerModeClick} />,
 | 
			
		||||
                <ComposerModeButton key="composerModeButton" isRichTextEnabled={props.isRichTextEnabled} onClick={props.onComposerModeClick} />,
 | 
			
		||||
            uploadButton(), // props passed via UploadButtonContext
 | 
			
		||||
        ];
 | 
			
		||||
        moreButtons = [
 | 
			
		||||
| 
						 | 
				
			
			@ -403,19 +403,21 @@ function showLocationButton(
 | 
			
		|||
}
 | 
			
		||||
 | 
			
		||||
interface WysiwygToggleButtonProps {
 | 
			
		||||
    isToggled: boolean;
 | 
			
		||||
    isRichTextEnabled: boolean;
 | 
			
		||||
    onClick: MouseEventHandler<HTMLDivElement>;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function ComposerModeButton({ isToggled, onClick }: WysiwygToggleButtonProps) {
 | 
			
		||||
function ComposerModeButton({ isRichTextEnabled, onClick }: WysiwygToggleButtonProps) {
 | 
			
		||||
    const title = isRichTextEnabled ? _t("Show plain text") : _t("Show formatting");
 | 
			
		||||
 | 
			
		||||
    return <CollapsibleButton
 | 
			
		||||
        className="mx_MessageComposer_button"
 | 
			
		||||
        iconClassName={classNames({
 | 
			
		||||
            "mx_MessageComposer_plain_text": !isToggled,
 | 
			
		||||
            "mx_MessageComposer_rich_text": isToggled,
 | 
			
		||||
            "mx_MessageComposer_plain_text": isRichTextEnabled,
 | 
			
		||||
            "mx_MessageComposer_rich_text": !isRichTextEnabled,
 | 
			
		||||
        })}
 | 
			
		||||
        onClick={onClick}
 | 
			
		||||
        title={_t("Switch to plain text mode")}
 | 
			
		||||
        title={title}
 | 
			
		||||
    />;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1874,6 +1874,8 @@
 | 
			
		|||
    "Voice Message": "Voice Message",
 | 
			
		||||
    "You do not have permission to start polls in this room.": "You do not have permission to start polls in this room.",
 | 
			
		||||
    "Poll": "Poll",
 | 
			
		||||
    "Show formatting": "Show formatting",
 | 
			
		||||
    "Show plain text": "Show plain text",
 | 
			
		||||
    "Bold": "Bold",
 | 
			
		||||
    "Italics": "Italics",
 | 
			
		||||
    "Strikethrough": "Strikethrough",
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue