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

Invert composer mode icon

pull/28788/head^2
Florian Duros 2022-10-26 10:42:18 +02:00
parent c7dbb5947f
commit bdaa1acf59
No known key found for this signature in database
GPG Key ID: 9700AA5870258A0B
5 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
res/img/element-icons/room/composer/plain_text.svg
View File

@ -1,10 +1,9 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <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)"> <g clip-path="url(#clip0_1456_146350)">
<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="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"/>
<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> </g>
<defs> <defs>
<clipPath id="clip0_1456_146365"> <clipPath id="clip0_1456_146350">
<rect width="20" height="20" fill="white"/> <rect width="20" height="20" fill="white"/>
</clipPath> </clipPath>
</defs> </defs>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 921 B

After

Width:  |  Height:  |  Size: 818 B

7
res/img/element-icons/room/composer/rich_text.svg
View File

@ -1,9 +1,10 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <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)"> <g clip-path="url(#clip0_1456_146365)">
<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"/> <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> </g>
<defs> <defs>
<clipPath id="clip0_1456_146350"> <clipPath id="clip0_1456_146365">
<rect width="20" height="20" fill="white"/> <rect width="20" height="20" fill="white"/>
</clipPath> </clipPath>
</defs> </defs>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 818 B

After

Width:  |  Height:  |  Size: 921 B

2
src/components/views/rooms/MessageComposer.tsx
View File

@ -559,7 +559,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
showPollsButton={this.state.showPollsButton} showPollsButton={this.state.showPollsButton}
showStickersButton={this.showStickersButton} showStickersButton={this.showStickersButton}
showComposerModeButton={this.state.isWysiwygLabEnabled} showComposerModeButton={this.state.isWysiwygLabEnabled}
isComposerModeToggled={this.state.isRichTextEnabled} isRichTextEnabled={this.state.isRichTextEnabled}
onComposerModeClick={this.onRichTextToggle} onComposerModeClick={this.onRichTextToggle}
toggleButtonMenu={this.toggleButtonMenu} toggleButtonMenu={this.toggleButtonMenu}
showVoiceBroadcastButton={this.state.showVoiceBroadcastButton} showVoiceBroadcastButton={this.state.showVoiceBroadcastButton}

16
src/components/views/rooms/MessageComposerButtons.tsx
View File

@ -55,7 +55,7 @@ interface IProps {
toggleButtonMenu: () => void; toggleButtonMenu: () => void;
showVoiceBroadcastButton: boolean; showVoiceBroadcastButton: boolean;
onStartVoiceBroadcastClick: () => void; onStartVoiceBroadcastClick: () => void;
isComposerModeToggled: boolean; isRichTextEnabled: boolean;
showComposerModeButton: boolean; showComposerModeButton: boolean;
onComposerModeClick: () => void; onComposerModeClick: () => void;
} }
@ -89,7 +89,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
mainButtons = [ mainButtons = [
emojiButton(props), emojiButton(props),
props.showComposerModeButton && 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 uploadButton(), // props passed via UploadButtonContext
]; ];
moreButtons = [ moreButtons = [
@ -403,19 +403,21 @@ function showLocationButton(
} }
interface WysiwygToggleButtonProps { interface WysiwygToggleButtonProps {
isToggled: boolean; isRichTextEnabled: boolean;
onClick: MouseEventHandler<HTMLDivElement>; 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 return <CollapsibleButton
className="mx_MessageComposer_button" className="mx_MessageComposer_button"
iconClassName={classNames({ iconClassName={classNames({
"mx_MessageComposer_plain_text": !isToggled, "mx_MessageComposer_plain_text": isRichTextEnabled,
"mx_MessageComposer_rich_text": isToggled, "mx_MessageComposer_rich_text": !isRichTextEnabled,
})} })}
onClick={onClick} onClick={onClick}
title={_t("Switch to plain text mode")} title={title}
/>; />;
} }

2
src/i18n/strings/en_EN.json
View File

@ -1874,6 +1874,8 @@
"Voice Message": "Voice Message", "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.", "You do not have permission to start polls in this room.": "You do not have permission to start polls in this room.",
"Poll": "Poll", "Poll": "Poll",
"Show formatting": "Show formatting",
"Show plain text": "Show plain text",
"Bold": "Bold", "Bold": "Bold",
"Italics": "Italics", "Italics": "Italics",
"Strikethrough": "Strikethrough", "Strikethrough": "Strikethrough",