From da29057fd8a98e8c922d1972f8f565e0a7df4b27 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 5 Sep 2019 12:10:45 +0200 Subject: [PATCH 1/4] move format bar to own component --- res/css/_components.scss | 1 + .../views/rooms/_BasicMessageComposer.scss | 65 --------------- .../rooms/_MessageComposerFormatBar.scss | 81 ++++++++++++++++++ .../views/rooms/BasicMessageComposer.js | 83 ++++++------------- .../views/rooms/MessageComposerFormatBar.js | 79 ++++++++++++++++++ 5 files changed, 186 insertions(+), 123 deletions(-) create mode 100644 res/css/views/rooms/_MessageComposerFormatBar.scss create mode 100644 src/components/views/rooms/MessageComposerFormatBar.js diff --git a/res/css/_components.scss b/res/css/_components.scss index fb6058df00..213d0d714c 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -146,6 +146,7 @@ @import "./views/rooms/_MemberInfo.scss"; @import "./views/rooms/_MemberList.scss"; @import "./views/rooms/_MessageComposer.scss"; +@import "./views/rooms/_MessageComposerFormatBar.scss"; @import "./views/rooms/_PinnedEventTile.scss"; @import "./views/rooms/_PinnedEventsPanel.scss"; @import "./views/rooms/_PresenceLabel.scss"; diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss index e897352d7e..b32a44219a 100644 --- a/res/css/views/rooms/_BasicMessageComposer.scss +++ b/res/css/views/rooms/_BasicMessageComposer.scss @@ -73,69 +73,4 @@ limitations under the License. position: relative; height: 0; } - - .mx_BasicMessageComposer_formatBar { - display: none; - width: calc(26px * 5); - height: 24px; - position: absolute; - cursor: pointer; - border-radius: 4px; - background-color: $message-action-bar-bg-color; - user-select: none; - - &.mx_BasicMessageComposer_formatBar_shown { - display: block; - } - - > * { - white-space: nowrap; - display: inline-block; - position: relative; - border: 1px solid $message-action-bar-border-color; - margin-left: -1px; - - &:hover { - border-color: $message-action-bar-hover-border-color; - } - } - - .mx_BasicMessageComposer_formatButton { - width: 27px; - height: 24px; - box-sizing: border-box; - } - - .mx_BasicMessageComposer_formatButton::after { - content: ''; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - mask-repeat: no-repeat; - mask-position: center; - background-color: $message-action-bar-fg-color; - } - - .mx_BasicMessageComposer_formatBold::after { - mask-image: url('$(res)/img/format/bold.svg'); - } - - .mx_BasicMessageComposer_formatItalic::after { - mask-image: url('$(res)/img/format/italics.svg'); - } - - .mx_BasicMessageComposer_formatStrikethrough::after { - mask-image: url('$(res)/img/format/strikethrough.svg'); - } - - .mx_BasicMessageComposer_formatQuote::after { - mask-image: url('$(res)/img/format/quote.svg'); - } - - .mx_BasicMessageComposer_formatCode::after { - mask-image: url('$(res)/img/format/code.svg'); - } - } } diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss new file mode 100644 index 0000000000..2e74076e2a --- /dev/null +++ b/res/css/views/rooms/_MessageComposerFormatBar.scss @@ -0,0 +1,81 @@ +/* +Copyright 2019 New Vector Ltd +Copyright 2019 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_MessageComposerFormatBar { + display: none; + width: calc(26px * 5); + height: 24px; + position: absolute; + cursor: pointer; + border-radius: 4px; + background-color: $message-action-bar-bg-color; + user-select: none; + + &.mx_MessageComposerFormatBar_shown { + display: block; + } + + > * { + white-space: nowrap; + display: inline-block; + position: relative; + border: 1px solid $message-action-bar-border-color; + margin-left: -1px; + + &:hover { + border-color: $message-action-bar-hover-border-color; + } + } + + .mx_MessageComposerFormatBar_button { + width: 27px; + height: 24px; + box-sizing: border-box; + } + + .mx_MessageComposerFormatBar_button::after { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + mask-repeat: no-repeat; + mask-position: center; + background-color: $message-action-bar-fg-color; + } + + .mx_MessageComposerFormatBar_buttonIconBold::after { + mask-image: url('$(res)/img/format/bold.svg'); + } + + .mx_MessageComposerFormatBar_buttonIconItalic::after { + mask-image: url('$(res)/img/format/italics.svg'); + } + + .mx_MessageComposerFormatBar_buttonIconStrikethrough::after { + mask-image: url('$(res)/img/format/strikethrough.svg'); + } + + .mx_MessageComposerFormatBar_buttonIconQuote::after { + mask-image: url('$(res)/img/format/quote.svg'); + } + + .mx_MessageComposerFormatBar_buttonIconCode::after { + mask-image: url('$(res)/img/format/code.svg'); + } +} diff --git a/src/components/views/rooms/BasicMessageComposer.js b/src/components/views/rooms/BasicMessageComposer.js index e0468e9969..b37552da2a 100644 --- a/src/components/views/rooms/BasicMessageComposer.js +++ b/src/components/views/rooms/BasicMessageComposer.js @@ -35,7 +35,7 @@ import TypingStore from "../../../stores/TypingStore"; import EMOJIBASE from 'emojibase-data/en/compact.json'; import SettingsStore from "../../../settings/SettingsStore"; import EMOTICON_REGEX from 'emojibase-regex/emoticon'; -import { _t } from '../../../languageHandler'; +import sdk from '../../../index'; const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$'); @@ -251,31 +251,13 @@ export default class BasicMessageEditor extends React.Component { if (this._hasTextSelected && selection.isCollapsed) { this._hasTextSelected = false; if (this._formatBarRef) { - this._formatBarRef.classList.remove("mx_BasicMessageComposer_formatBar_shown"); + this._formatBarRef.hide(); } } else if (!selection.isCollapsed) { this._hasTextSelected = true; if (this._formatBarRef) { - this._formatBarRef.classList.add("mx_BasicMessageComposer_formatBar_shown"); const selectionRect = selection.getRangeAt(0).getBoundingClientRect(); - - let leftOffset = 0; - let node = this._formatBarRef; - while (node.offsetParent) { - node = node.offsetParent; - leftOffset += node.offsetLeft; - } - - let topOffset = 0; - node = this._formatBarRef; - while (node.offsetParent) { - node = node.offsetParent; - topOffset += node.offsetTop; - } - - this._formatBarRef.style.left = `${selectionRect.left - leftOffset}px`; - // 12 is half the height of the bar (e.g. to center it) and 16 is an offset that felt ok. - this._formatBarRef.style.top = `${selectionRect.top - topOffset - 16 - 12}px`; + this._formatBarRef.showAt(selectionRect); } } } @@ -431,40 +413,28 @@ export default class BasicMessageEditor extends React.Component { return caretPosition; } - _wrapSelectionAsInline(prefix, suffix = prefix) { + _onFormatAction = (action) => { const range = getRangeForSelection( this._editorRef, this.props.model, document.getSelection()); - formatInline(range, prefix, suffix); - } - - _formatBold = () => { - this._wrapSelectionAsInline("**"); - } - - _formatItalic = () => { - this._wrapSelectionAsInline("*"); - } - - _formatStrikethrough = () => { - this._wrapSelectionAsInline("", ""); - } - - _formatQuote = () => { - const range = getRangeForSelection( - this._editorRef, - this.props.model, - document.getSelection()); - formatRangeAsQuote(range); - } - - _formatCode = () => { - const range = getRangeForSelection( - this._editorRef, - this.props.model, - document.getSelection()); - formatRangeAsCode(range); + switch (action) { + case "bold": + formatInline(range, "**"); + break; + case "italics": + formatInline(range, "*"); + break; + case "strikethrough": + formatInline(range, "", ""); + break; + case "code": + formatRangeAsCode(range); + break; + case "quote": + formatRangeAsQuote(range); + break; + } } render() { @@ -486,15 +456,12 @@ export default class BasicMessageEditor extends React.Component { const classes = classNames("mx_BasicMessageComposer", { "mx_BasicMessageComposer_input_error": this.state.showVisualBell, }); + + const MessageComposerFormatBar = sdk.getComponent('rooms.MessageComposerFormatBar'); + return (
{ autoComplete } -
this._formatBarRef = ref}> - - - - - -
+ this._formatBarRef = ref} onAction={this._onFormatAction} />
this._formatBarRef = ref}> + this.props.onAction("bold")} icon="Bold" /> + this.props.onAction("italics")} icon="Italic" /> + this.props.onAction("strikethrough")} icon="Strikethrough" /> + this.props.onAction("code")} icon="Code" /> + this.props.onAction("quote")} icon="Quote" /> +
); + } + + showAt(selectionRect) { + this._formatBarRef.classList.add("mx_MessageComposerFormatBar_shown"); + let leftOffset = 0; + let node = this._formatBarRef; + while (node.offsetParent) { + node = node.offsetParent; + leftOffset += node.offsetLeft; + } + + let topOffset = 0; + node = this._formatBarRef; + while (node.offsetParent) { + node = node.offsetParent; + topOffset += node.offsetTop; + } + + this._formatBarRef.style.left = `${selectionRect.left - leftOffset}px`; + // 12 is half the height of the bar (e.g. to center it) and 16 is an offset that felt ok. + this._formatBarRef.style.top = `${selectionRect.top - topOffset - 16 - 12}px`; + } + + hide() { + this._formatBarRef.classList.remove("mx_MessageComposerFormatBar_shown"); + } +} + +class FormatButton extends React.PureComponent { + static propTypes = { + label: PropTypes.string.isRequired, + onClick: PropTypes.func.isRequired, + icon: PropTypes.string.isRequired, + } + + render() { + const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`; + return ( + + + ); + } +} From b4b9c7d07244136e12b4e0792a0d602f2ee5e9a8 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 5 Sep 2019 13:22:42 +0200 Subject: [PATCH 2/4] Add tooltip for format buttons --- .../rooms/_MessageComposerFormatBar.scss | 6 ++++++ .../views/rooms/MessageComposerFormatBar.js | 19 ++++++++++++++----- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss index 2e74076e2a..c8ca218b13 100644 --- a/res/css/views/rooms/_MessageComposerFormatBar.scss +++ b/res/css/views/rooms/_MessageComposerFormatBar.scss @@ -79,3 +79,9 @@ limitations under the License. mask-image: url('$(res)/img/format/code.svg'); } } + +.mx_MessageComposerFormatBar_buttonTooltip { + white-space: nowrap; + font-size: 12px; + font-weight: 600; +} diff --git a/src/components/views/rooms/MessageComposerFormatBar.js b/src/components/views/rooms/MessageComposerFormatBar.js index cc3f341653..154c8b0d31 100644 --- a/src/components/views/rooms/MessageComposerFormatBar.js +++ b/src/components/views/rooms/MessageComposerFormatBar.js @@ -17,6 +17,8 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; import { _t } from '../../../languageHandler'; +import sdk from '../../../index'; + export default class MessageComposerFormatBar extends React.PureComponent { static propTypes = { @@ -67,13 +69,20 @@ class FormatButton extends React.PureComponent { } render() { + const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip'); const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`; + const tooltipContent = ( +
{this.props.label}
+ ); + return ( - - + + + + ); } } From d6a493a2b11e3cdfb969eb990054b6ee6ce776fd Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 5 Sep 2019 13:27:33 +0200 Subject: [PATCH 3/4] fixup: language strings moved --- src/i18n/strings/en_EN.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index d42734d5a4..6529e7322c 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -760,11 +760,6 @@ " (unsupported)": " (unsupported)", "Join as voice or video.": "Join as voice or video.", "Ongoing conference call%(supportedText)s.": "Ongoing conference call%(supportedText)s.", - "Bold": "Bold", - "Italics": "Italics", - "Strikethrough": "Strikethrough", - "Code block": "Code block", - "Quote": "Quote", "Some devices for this user are not trusted": "Some devices for this user are not trusted", "Some devices in this encrypted room are not trusted": "Some devices in this encrypted room are not trusted", "All devices for this user are trusted": "All devices for this user are trusted", @@ -836,6 +831,11 @@ "The conversation continues here.": "The conversation continues here.", "This room has been replaced and is no longer active.": "This room has been replaced and is no longer active.", "You do not have permission to post to this room": "You do not have permission to post to this room", + "Bold": "Bold", + "Italics": "Italics", + "Strikethrough": "Strikethrough", + "Code block": "Code block", + "Quote": "Quote", "Server error": "Server error", "Server unavailable, overloaded, or something else went wrong.": "Server unavailable, overloaded, or something else went wrong.", "Command error": "Command error", From 042822c90a3ea71e3c67be9468f6673d1241242e Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 6 Sep 2019 10:37:28 +0200 Subject: [PATCH 4/4] copyright is solely assigned to matrix foundation now, copy paste error --- res/css/views/rooms/_MessageComposerFormatBar.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss index c8ca218b13..f56214224d 100644 --- a/res/css/views/rooms/_MessageComposerFormatBar.scss +++ b/res/css/views/rooms/_MessageComposerFormatBar.scss @@ -1,5 +1,4 @@ /* -Copyright 2019 New Vector Ltd Copyright 2019 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License");