Add presence context menu and styling

Signed-off-by: Travis Ralston <travpc@gmail.com>

src/components/views/context_menus/PresenceContextMenu.js

@@ -0,0 +1,100 @@
+/*
+Copyright 2017 Travis Ralston
+
+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 { _t, _td } from 'matrix-react-sdk/lib/languageHandler';
+import sdk from 'matrix-react-sdk';
+
+const STATUS_LABELS = {
+    "online": _td("Online"),
+    "unavailable": _td("Away"),
+    "offline": _td("Appear Offline"),
+};
+
+const PresenceContextMenuOption = React.createClass({
+    displayName: 'PresenceContextMenuOption',
+
+    propTypes: {
+        forStatus: React.PropTypes.string.isRequired,
+        isCurrent: React.PropTypes.bool,
+        onChange: React.PropTypes.func.isRequired,
+    },
+
+    onClick: function() {
+        this.props.onChange(this.props.forStatus);
+    },
+
+    render: function() {
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+
+        const indicatorClasses = "mx_PresenceContextMenuOption_indicator "
+            + "mx_PresenceContextMenuOption_indicator_" + this.props.forStatus;
+
+        let classNames = "mx_PresenceContextMenuOption";
+        if (this.props.isCurrent) classNames += " mx_PresenceContextMenuOption_current";
+
+        return (
+            <AccessibleButton className={classNames} element="div" onClick={this.onClick}>
+                <div className={indicatorClasses}></div>
+                { _t(STATUS_LABELS[this.props.forStatus]) }
+            </AccessibleButton>
+        );
+    },
+});
+
+module.exports = React.createClass({
+    displayName: 'PresenceContextMenu',
+
+    propTypes: {
+        // "online", "unavailable", or "offline"
+        currentStatus: React.PropTypes.string.isRequired,
+
+        // Called when the user wants to change their status.
+        // Args: (newStatus:string)
+        onChange: React.PropTypes.func.isRequired,
+
+        // callback called when the menu is dismissed
+        onFinished: React.PropTypes.func,
+    },
+
+    getInitialState() {
+        return {
+            currentStatus: this.props.currentStatus,
+        };
+    },
+
+    onChange: function(newStatus) {
+        this.props.onChange(newStatus);
+        this.setState({currentStatus: newStatus});
+    },
+
+    render: function() {
+        const statusElements = [];
+        for (let status of Object.keys(STATUS_LABELS)) {
+            statusElements.push((
+                <PresenceContextMenuOption forStatus={status} key={status}
+                                           onChange={this.onChange}
+                                           isCurrent={status === this.state.currentStatus} />
+            ));
+        }
+
+        return (
+            <div>
+                { statusElements }
+            </div>
+        );
+    },
+});

src/i18n/strings/en_EN.json

@@ -72,6 +72,8 @@
   "Loading bug report module": "Loading bug report module",
   "Low Priority": "Low Priority",
   "Members": "Members",
+  "Appear Offline": "Appear Offline",
+  "Away": "Away",
   "Mentions only": "Mentions only",
   "Messages containing my display name": "Messages containing my display name",
   "Messages containing <span>keywords</span>": "Messages containing <span>keywords</span>",

src/skins/vector/css/_components.scss

@@ -80,6 +80,7 @@
 @import "./vector-web/structures/_RoomSubList.scss";
 @import "./vector-web/structures/_ViewSource.scss";
 @import "./vector-web/views/context_menus/_MessageContextMenu.scss";
+@import "vector-web/views/context_menus/_PresenceContextMenuOption.scss";
 @import "./vector-web/views/context_menus/_RoomTileContextMenu.scss";
 @import "./vector-web/views/dialogs/_ChangelogDialog.scss";
 @import "./vector-web/views/dialogs/_DevtoolsDialog.scss";

src/skins/vector/css/vector-web/views/context_menus/_PresenceContextMenuOption.scss

@@ -0,0 +1,42 @@
+/*
+Copyright 2017 Travis Ralston
+
+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_PresenceContextMenuOption_indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 10px;
+    display: inline-block;
+    margin-right: 5px;
+}
+
+.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_online {
+    background-color: $presence-online;
+}
+
+.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_unavailable {
+    background-color: $presence-unavailable;
+}
+
+.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_offline {
+    background-color: $presence-offline;
+}
+
+.mx_PresenceContextMenuOption {
+    padding: 2px;
+}
+
+.mx_PresenceContextMenuOption.mx_PresenceContextMenuOption_current {
+    font-weight: 700;
+}