Replace the avatar next to the composer with a status entry menu
The checkmark might change, and there appears to be some state tracking mishaps that need to be worked out. Part of https://github.com/vector-im/riot-web/issues/1528pull/21833/head
Travis Ralston
parent
dd382ecb05
commit
a91963e5ee
|
|
@ -24,6 +24,7 @@
|
||||||
@import "./structures/_ViewSource.scss";
|
@import "./structures/_ViewSource.scss";
|
||||||
@import "./structures/login/_Login.scss";
|
@import "./structures/login/_Login.scss";
|
||||||
@import "./views/avatars/_BaseAvatar.scss";
|
@import "./views/avatars/_BaseAvatar.scss";
|
||||||
|
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
|
||||||
@import "./views/context_menus/_MessageContextMenu.scss";
|
@import "./views/context_menus/_MessageContextMenu.scss";
|
||||||
@import "./views/context_menus/_RoomTileContextMenu.scss";
|
@import "./views/context_menus/_RoomTileContextMenu.scss";
|
||||||
@import "./views/context_menus/_TagTileContextMenu.scss";
|
@import "./views/context_menus/_TagTileContextMenu.scss";
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
/*
|
||||||
|
Copyright 2018 New Vector Ltd
|
||||||
|
|
||||||
|
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_MemberStatusMessageAvatar {
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_MemberStatusMessageAvatar_contextMenu_message {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
|
border: 1px solid $input-border-color;
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 7px 7px 7px 9px;
|
||||||
|
width: 135px;
|
||||||
|
background-color: $primary-bg-color !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_MemberStatusMessageAvatar_contextMenu_submit {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_MemberStatusMessageAvatar_contextMenu_submit img {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_MemberStatusMessageAvatar_contextMenu hr {
|
||||||
|
border: 0.5px solid $menu-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_MemberStatusMessageAvatar_contextMenu_clearIcon {
|
||||||
|
margin: 5px 15px 5px 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_MemberStatusMessageAvatar_contextMenu_clear {
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_MemberStatusMessageAvatar_contextMenu_hasStatus .mx_MemberStatusMessageAvatar_contextMenu_clear {
|
||||||
|
color: $warning-color;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
version="1.1"
|
||||||
|
id="Layer_1"
|
||||||
|
x="0px"
|
||||||
|
y="0px"
|
||||||
|
viewBox="-11 13 24 24"
|
||||||
|
xml:space="preserve"
|
||||||
|
sodipodi:docname="icons-checkmark.svg"
|
||||||
|
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
|
||||||
|
id="metadata3753"><rdf:RDF><cc:Work
|
||||||
|
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
|
||||||
|
id="defs3751">
|
||||||
|
|
||||||
|
</defs><sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1278"
|
||||||
|
inkscape:window-height="1368"
|
||||||
|
id="namedview3749"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="25.166667"
|
||||||
|
inkscape:cx="11.698485"
|
||||||
|
inkscape:cy="12.769194"
|
||||||
|
inkscape:window-x="1359"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="_x30_3_x5F_4-Uploading" />
|
||||||
|
<style
|
||||||
|
type="text/css"
|
||||||
|
id="style3734">
|
||||||
|
.st1{fill:none;stroke-width:2;stroke-linecap:round;}
|
||||||
|
</style>
|
||||||
|
<title
|
||||||
|
id="title3736">icons_create_room</title>
|
||||||
|
<desc
|
||||||
|
id="desc3738">Created with sketchtool.</desc>
|
||||||
|
<g
|
||||||
|
id="_x30_3-Input"
|
||||||
|
sketch:type="MSPage">
|
||||||
|
<g
|
||||||
|
id="_x30_3_x5F_4-Uploading"
|
||||||
|
transform="translate(-20.000000, -726.000000)"
|
||||||
|
sketch:type="MSArtboardGroup">
|
||||||
|
<g
|
||||||
|
sketch:type="MSShapeGroup"
|
||||||
|
transform="translate(0,708)"
|
||||||
|
id="Room-list_x2F_Footer">
|
||||||
|
<g
|
||||||
|
transform="translate(20,18)"
|
||||||
|
id="icons_create_room">
|
||||||
|
<circle
|
||||||
|
style="fill:#76cfa6"
|
||||||
|
r="12"
|
||||||
|
cy="25"
|
||||||
|
cx="1"
|
||||||
|
id="Oval-1-Copy-7" />
|
||||||
|
|
||||||
|
<g
|
||||||
|
id="g3762"><path
|
||||||
|
sodipodi:nodetypes="cc"
|
||||||
|
id="Line"
|
||||||
|
class="st1"
|
||||||
|
d="m -0.75165563,28.062914 7.10000003,-7.1"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round" /><path
|
||||||
|
id="Line_1_"
|
||||||
|
class="st1"
|
||||||
|
d="m -3.0960264,25.175497 2.34437077,2.887417"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round"
|
||||||
|
sodipodi:nodetypes="cc" /></g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,165 @@
|
||||||
|
/*
|
||||||
|
Copyright 2018 New Vector Ltd
|
||||||
|
|
||||||
|
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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { _t } from '../../../languageHandler';
|
||||||
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||||
|
import AccessibleButton from '../elements/AccessibleButton';
|
||||||
|
import MemberAvatar from '../avatars/MemberAvatar';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import * as ContextualMenu from "../../structures/ContextualMenu";
|
||||||
|
import GenericElementContextMenu from "../context_menus/GenericElementContextMenu";
|
||||||
|
|
||||||
|
export default class MemberStatusMessageAvatar extends React.Component {
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
this._onRoomStateEvents = this._onRoomStateEvents.bind(this);
|
||||||
|
this._onClick = this._onClick.bind(this);
|
||||||
|
this._onClearClick = this._onClearClick.bind(this);
|
||||||
|
this._onSubmit = this._onSubmit.bind(this);
|
||||||
|
this._onStatusChange = this._onStatusChange.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) {
|
||||||
|
throw new Error("Cannot use MemberStatusMessageAvatar on anyone but the logged in user");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
|
||||||
|
|
||||||
|
if (this.props.member.user) {
|
||||||
|
this.setState({message: this.props.member.user.statusMessage});
|
||||||
|
} else {
|
||||||
|
this.setState({message: ""});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
if (MatrixClientPeg.get()) {
|
||||||
|
MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_onRoomStateEvents(ev, state) {
|
||||||
|
if (ev.getStateKey() !== MatrixClientPeg.get().getUserId()) return;
|
||||||
|
if (ev.getType() !== "im.vector.user_status") return;
|
||||||
|
// TODO: We should be relying on `this.props.member.user.statusMessage`
|
||||||
|
this.setState({message: ev.getContent()["status"]});
|
||||||
|
this.forceUpdate();
|
||||||
|
}
|
||||||
|
|
||||||
|
_onClick(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
const elementRect = e.target.getBoundingClientRect();
|
||||||
|
|
||||||
|
// The window X and Y offsets are to adjust position when zoomed in to page
|
||||||
|
const x = (elementRect.left + window.pageXOffset) - (elementRect.width / 2) + 3;
|
||||||
|
const chevronOffset = 12;
|
||||||
|
let y = elementRect.top + (elementRect.height / 2) + window.pageYOffset;
|
||||||
|
y = y - (chevronOffset + 4); // where 4 is 1/4 the height of the chevron
|
||||||
|
|
||||||
|
const contextMenu = this._renderContextMenu();
|
||||||
|
|
||||||
|
ContextualMenu.createMenu(GenericElementContextMenu, {
|
||||||
|
chevronOffset: chevronOffset,
|
||||||
|
chevronFace: 'bottom',
|
||||||
|
left: x,
|
||||||
|
top: y,
|
||||||
|
menuWidth: 190,
|
||||||
|
element: contextMenu,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async _onClearClick(e) {
|
||||||
|
await MatrixClientPeg.get().setStatusMessage("");
|
||||||
|
this.setState({message: ""});
|
||||||
|
}
|
||||||
|
|
||||||
|
_onSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
MatrixClientPeg.get().setStatusMessage(this.state.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
_onStatusChange(e) {
|
||||||
|
this.setState({message: e.target.value});
|
||||||
|
}
|
||||||
|
|
||||||
|
_renderContextMenu() {
|
||||||
|
const form = <form className="mx_MemberStatusMessageAvatar_contextMenu_form" onSubmit={this._onSubmit}>
|
||||||
|
<input type="text" key="message" placeholder={_t("Set a new status...")}
|
||||||
|
className="mx_MemberStatusMessageAvatar_contextMenu_message"
|
||||||
|
defaultValue={this.state.message} onChange={this._onStatusChange} maxLength="60"
|
||||||
|
/>
|
||||||
|
<AccessibleButton onClick={this._onSubmit} element="div" className="mx_MemberStatusMessageAvatar_contextMenu_submit">
|
||||||
|
<img src="img/icons-checkmark.svg" width="22" height="22" />
|
||||||
|
</AccessibleButton>
|
||||||
|
</form>;
|
||||||
|
|
||||||
|
const clearIcon = this.state.message ? "img/cancel-red.svg" : "img/cancel.svg";
|
||||||
|
const clearButton = <AccessibleButton onClick={this._onClearClick} disabled={!this.state.message}
|
||||||
|
className="mx_MemberStatusMessageAvatar_contextMenu_clear">
|
||||||
|
<img src={clearIcon} alt={_t('Clear status')} width="12" height="12"
|
||||||
|
className="mx_filterFlipColor mx_MemberStatusMessageAvatar_contextMenu_clearIcon"
|
||||||
|
/>
|
||||||
|
<span>{_t("Clear status")}</span>
|
||||||
|
</AccessibleButton>;
|
||||||
|
|
||||||
|
const menuClasses = classNames({
|
||||||
|
"mx_MemberStatusMessageAvatar_contextMenu": true,
|
||||||
|
"mx_MemberStatusMessageAvatar_contextMenu_hasStatus": this.state.message,
|
||||||
|
});
|
||||||
|
|
||||||
|
return <div className={menuClasses}>
|
||||||
|
{ form }
|
||||||
|
<hr />
|
||||||
|
{ clearButton }
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const hasStatus = this.props.member.user ? !!this.props.member.user.statusMessage : false;
|
||||||
|
|
||||||
|
const classes = classNames({
|
||||||
|
"mx_MemberStatusMessageAvatar": true,
|
||||||
|
"mx_MemberStatusMessageAvatar_hasStatus": hasStatus,
|
||||||
|
});
|
||||||
|
|
||||||
|
return <AccessibleButton onClick={this._onClick} className={classes} element="div">
|
||||||
|
<MemberAvatar member={this.props.member}
|
||||||
|
width={this.props.width}
|
||||||
|
height={this.props.height}
|
||||||
|
resizeMethod={this.props.resizeMethod}
|
||||||
|
/>
|
||||||
|
</AccessibleButton>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
MemberStatusMessageAvatar.propTypes = {
|
||||||
|
member: PropTypes.object.isRequired,
|
||||||
|
width: PropTypes.number,
|
||||||
|
height: PropTypes.number,
|
||||||
|
resizeMethod: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
MemberStatusMessageAvatar.defaultProps = {
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
resizeMethod: 'crop',
|
||||||
|
};
|
||||||
|
|
@ -291,7 +291,7 @@ export default class MessageComposer extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const uploadInputStyle = {display: 'none'};
|
const uploadInputStyle = {display: 'none'};
|
||||||
const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
|
const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
|
||||||
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
||||||
const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
|
const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
|
||||||
|
|
||||||
|
|
@ -300,7 +300,7 @@ export default class MessageComposer extends React.Component {
|
||||||
if (this.state.me) {
|
if (this.state.me) {
|
||||||
controls.push(
|
controls.push(
|
||||||
<div key="controls_avatar" className="mx_MessageComposer_avatar">
|
<div key="controls_avatar" className="mx_MessageComposer_avatar">
|
||||||
<MemberAvatar member={this.state.me} width={24} height={24} />
|
<MemberStatusMessageAvatar member={this.state.me} width={24} height={24} />
|
||||||
</div>,
|
</div>,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1054,6 +1054,8 @@
|
||||||
"Low Priority": "Low Priority",
|
"Low Priority": "Low Priority",
|
||||||
"Direct Chat": "Direct Chat",
|
"Direct Chat": "Direct Chat",
|
||||||
"View Community": "View Community",
|
"View Community": "View Community",
|
||||||
|
"Clear status": "Clear status",
|
||||||
|
"Set a new status...": "Set a new status...",
|
||||||
"Sorry, your browser is <b>not</b> able to run Riot.": "Sorry, your browser is <b>not</b> able to run Riot.",
|
"Sorry, your browser is <b>not</b> able to run Riot.": "Sorry, your browser is <b>not</b> able to run Riot.",
|
||||||
"Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.",
|
"Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.",
|
||||||
"Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.": "Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.",
|
"Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.": "Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue