From 5b88b64950fc6033347a7003dbf2681868adad36 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 14 Jan 2019 16:41:14 -0600 Subject: [PATCH] Rework custom status context menu This updates the custom status context menu to match the latest comps. A single button is used for setting / clearing, depending on what is appropriate. The state logic is also changed to depend on events and storage from js-sdk for the committed status message. This makes it easy to distinguish the value being edited from what's currently committed. --- .../_StatusMessageContextMenu.scss | 55 ++++++----- res/img/icons-checkmark.svg | 17 ---- res/themes/dharma/css/_dharma.scss | 4 +- res/themes/light/css/_base.scss | 2 + .../context_menus/StatusMessageContextMenu.js | 98 +++++++++++++------ src/i18n/strings/en_EN.json | 4 +- 6 files changed, 103 insertions(+), 77 deletions(-) delete mode 100644 res/img/icons-checkmark.svg diff --git a/res/css/views/context_menus/_StatusMessageContextMenu.scss b/res/css/views/context_menus/_StatusMessageContextMenu.scss index 873ad99495..8b25f3a122 100644 --- a/res/css/views/context_menus/_StatusMessageContextMenu.scss +++ b/res/css/views/context_menus/_StatusMessageContextMenu.scss @@ -14,42 +14,43 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_StatusMessageContextMenu_message { - display: inline-block; - border-radius: 3px 0 0 3px; +.mx_StatusMessageContextMenu { + padding: 10px; +} + +.mx_StatusMessageContextMenu_form { + display: flex; + flex-direction: column; +} + +input.mx_StatusMessageContextMenu_message { + border-radius: 4px; border: 1px solid $input-border-color; - font-size: 13px; - padding: 7px 7px 7px 9px; - width: 135px; - background-color: $primary-bg-color !important; + padding: 6.5px 11px; + background-color: $primary-bg-color; + font-weight: normal; + margin: 0 0 10px; } -.mx_StatusMessageContextMenu_submit { - display: inline-block; +.mx_StatusMessageContextMenu_message::placeholder { + color: $memberstatus-placeholder-color; } -.mx_StatusMessageContextMenu_submitFaded { - opacity: 0.5; +.mx_StatusMessageContextMenu_submit, +.mx_StatusMessageContextMenu_clear { + @mixin mx_DialogButton; + align-self: start; + font-size: 12px; + padding: 6px 1em; + border: 1px solid transparent; } -.mx_StatusMessageContextMenu_submit img { - vertical-align: middle; - margin-left: 8px; -} - -.mx_StatusMessageContextMenu hr { - border: 0.5px solid $menu-border-color; -} - -.mx_StatusMessageContextMenu_clearIcon { - margin: 5px 15px 5px 5px; - vertical-align: middle; +.mx_StatusMessageContextMenu_submit[disabled] { + opacity: 0.49; } .mx_StatusMessageContextMenu_clear { - padding: 2px; -} - -.mx_StatusMessageContextMenu_hasStatus .mx_StatusMessageContextMenu_clear { color: $warning-color; + background-color: transparent; + border: 1px solid $warning-color; } diff --git a/res/img/icons-checkmark.svg b/res/img/icons-checkmark.svg deleted file mode 100644 index 3c5392003d..0000000000 --- a/res/img/icons-checkmark.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Tick - Created with Sketch. - - - - - - - - - - - - diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 732cabf494..73dc0a71e4 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -68,7 +68,7 @@ $event-selected-color: #f7f7f7; $primary-hairline-color: #e5e5e5; // used for the border of input text fields -$input-border-color: #f0f0f0; +$input-border-color: #e7e7e7; $input-darker-bg-color: rgba(193, 201, 214, 0.29); $input-darker-fg-color: #9fa9ba; $input-lighter-bg-color: #f2f5f8; @@ -192,6 +192,8 @@ $progressbar-color: #000; $room-warning-bg-color: #fff8e3; +$memberstatus-placeholder-color: $roomtile-name-color; + /*** form elements ***/ // .mx_textinput is a container for a text input diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss index 10a8fcd1e5..cf539bd1f2 100644 --- a/res/themes/light/css/_base.scss +++ b/res/themes/light/css/_base.scss @@ -188,6 +188,8 @@ $progressbar-color: #000; $room-warning-bg-color: #fff8e3; +$memberstatus-placeholder-color: $roomtile-name-color; + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/src/components/views/context_menus/StatusMessageContextMenu.js b/src/components/views/context_menus/StatusMessageContextMenu.js index d062fc2a3e..9916f5d347 100644 --- a/src/components/views/context_menus/StatusMessageContextMenu.js +++ b/src/components/views/context_menus/StatusMessageContextMenu.js @@ -19,7 +19,6 @@ import PropTypes from 'prop-types'; import { _t } from '../../../languageHandler'; import MatrixClientPeg from '../../../MatrixClientPeg'; import AccessibleButton from '../elements/AccessibleButton'; -import classNames from 'classnames'; export default class StatusMessageContextMenu extends React.Component { static propTypes = { @@ -31,13 +30,42 @@ export default class StatusMessageContextMenu extends React.Component { super(props, context); this.state = { - message: props.user ? props.user._unstable_statusMessage : "", + message: this.comittedStatusMessage, }; } + componentWillMount() { + const { user } = this.props; + if (!user) { + return; + } + user.on("User._unstable_statusMessage", this._onStatusMessageCommitted); + } + + componentWillUmount() { + const { user } = this.props; + if (!user) { + return; + } + user.removeListener( + "User._unstable_statusMessage", + this._onStatusMessageCommitted, + ); + } + + get comittedStatusMessage() { + return this.props.user ? this.props.user._unstable_statusMessage : ""; + } + + _onStatusMessageCommitted = () => { + // The `User` object has observed a status message change. + this.setState({ + message: this.comittedStatusMessage, + }); + }; + _onClearClick = async (e) => { await MatrixClientPeg.get()._unstable_setStatusMessage(""); - this.setState({message: ""}); }; _onSubmit = (e) => { @@ -46,41 +74,49 @@ export default class StatusMessageContextMenu extends React.Component { }; _onStatusChange = (e) => { - this.setState({message: e.target.value}); + // The input field's value was changed. + this.setState({ + message: e.target.value, + }); }; render() { - const formSubmitClasses = classNames({ - "mx_StatusMessageContextMenu_submit": true, - "mx_StatusMessageContextMenu_submitFaded": !this.state.message, // no message == faded - }); + let actionButton; + if (this.comittedStatusMessage) { + if (this.state.message === this.comittedStatusMessage) { + actionButton = + {_t("Clear status")} + ; + } else { + actionButton = + {_t("Update status")} + ; + } + } else { + actionButton = + {_t("Set status")} + ; + } - const form =
- - - - + const form = + + {actionButton}
; - const clearIcon = this.state.message ? "img/cancel-red.svg" : "img/cancel.svg"; - const clearButton = - {_t('Clear - {_t("Clear status")} - ; - - const menuClasses = classNames({ - "mx_StatusMessageContextMenu": true, - "mx_StatusMessageContextMenu_hasStatus": this.state.message, - }); - - return
+ return
{ form } -
- { clearButton }
; } } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index a7b75c136b..ef0ff1ebf7 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1087,8 +1087,10 @@ "Forget": "Forget", "Low Priority": "Low Priority", "Direct Chat": "Direct Chat", - "Set a new status...": "Set a new status...", "Clear status": "Clear status", + "Update status": "Update status", + "Set status": "Set status", + "Set a new status...": "Set a new status...", "View as Grid": "View as Grid", "View Community": "View Community", "Sorry, your browser is not able to run Riot.": "Sorry, your browser is not able to run Riot.",