diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index db8eb4995d..89115669d3 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -255,14 +255,29 @@ limitations under the License. } .mx_MessageComposer_formatbar_markdown { + height: 17px; + width: 30px; margin-right: 64px; } .mx_MessageComposer_input_markdownIndicator { - cursor: pointer; height: 10px; + width: 12px; padding: 4px 4px 4px 0; - opacity: 0.8; +} + +.mx_MessageComposer_formatbar_markdown, +.mx_MessageComposer_input_markdownIndicator { + cursor: pointer; + mask-image: url('$(res)/img/markdown.svg'); + mask-size: contain; + mask-position: center; + mask-repeat: no-repeat; + background-color: $composer-button-color; + + &.mx_MessageComposer_markdownDisabled { + opacity: 0.2; + } } .mx_MatrixChat_useCompactLayout { diff --git a/res/img/button-md-false.png b/res/img/button-md-false.png deleted file mode 100644 index 6debbccc93..0000000000 Binary files a/res/img/button-md-false.png and /dev/null differ diff --git a/res/img/button-md-false.svg b/res/img/button-md-false.svg deleted file mode 100644 index 6414933d96..0000000000 --- a/res/img/button-md-false.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - D335F9E8-C813-47D7-B1BE-C8DEF2C8214F - Created with sketchtool. - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/res/img/button-md-false@2x.png b/res/img/button-md-false@2x.png deleted file mode 100644 index 497f5385d1..0000000000 Binary files a/res/img/button-md-false@2x.png and /dev/null differ diff --git a/res/img/button-md-false@3x.png b/res/img/button-md-false@3x.png deleted file mode 100644 index 1184e6b351..0000000000 Binary files a/res/img/button-md-false@3x.png and /dev/null differ diff --git a/res/img/button-md-true.png b/res/img/button-md-true.png deleted file mode 100644 index 2e39c55e1e..0000000000 Binary files a/res/img/button-md-true.png and /dev/null differ diff --git a/res/img/button-md-true.svg b/res/img/button-md-true.svg deleted file mode 100644 index 2acc4f675c..0000000000 --- a/res/img/button-md-true.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - 2A63B135-4281-4FBB-A88C-012AE22E9594 - Created with sketchtool. - - - - - - - - - \ No newline at end of file diff --git a/res/img/button-md-true@2x.png b/res/img/button-md-true@2x.png deleted file mode 100644 index ad9067f385..0000000000 Binary files a/res/img/button-md-true@2x.png and /dev/null differ diff --git a/res/img/button-md-true@3x.png b/res/img/button-md-true@3x.png deleted file mode 100644 index d615867dc4..0000000000 Binary files a/res/img/button-md-true@3x.png and /dev/null differ diff --git a/res/img/markdown.svg b/res/img/markdown.svg new file mode 100644 index 0000000000..9aadd3cb7f --- /dev/null +++ b/res/img/markdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 10142b2b4b..7eef868ef7 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -499,15 +499,16 @@ export default class MessageComposer extends React.Component {
{ formatButtons } -
- +
+ + onClick={this.onToggleFormattingClicked} + className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor" + src={require("../../../../res/img/icon-text-cancel.svg")} + />
; } diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index ab89e402ae..1954ca0d84 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -60,6 +60,7 @@ import ReplyPreview from "./ReplyPreview"; import RoomViewStore from '../../../stores/RoomViewStore'; import ReplyThread from "../elements/ReplyThread"; import {ContentHelpers} from 'matrix-js-sdk'; +import AccessibleButton from '../elements/AccessibleButton'; const EMOJI_UNICODE_TO_SHORTNAME = mapUnicodeToShort(); const REGEX_EMOJI_WHITESPACE = new RegExp('(?:^|\\s)(' + asciiRegexp + ')\\s$'); @@ -1582,6 +1583,11 @@ export default class MessageComposerInput extends React.Component { placeholder = undefined; } + const markdownClasses = classNames({ + mx_MessageComposer_input_markdownIndicator: true, + mx_MessageComposer_markdownDisabled: this.state.isRichTextEnabled, + }); + return (
@@ -1596,10 +1602,10 @@ export default class MessageComposerInput extends React.Component { />
- +