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 @@
-
-
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 =