diff --git a/src/components/views/context_menus/PresenceContextMenu.js b/src/components/views/context_menus/PresenceContextMenu.js
new file mode 100644
index 0000000000..3a3dc2fa47
--- /dev/null
+++ b/src/components/views/context_menus/PresenceContextMenu.js
@@ -0,0 +1,101 @@
+/*
+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() {
+ if (this.isCurrent) return;
+ 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 (
+
+
+ { _t(STATUS_LABELS[this.props.forStatus]) }
+
+ );
+ },
+});
+
+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((
+
+ ));
+ }
+
+ return (
+
+ { statusElements }
+
+ );
+ },
+});
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 4702ae93a1..e1a6024b3c 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -68,6 +68,8 @@
"What's New": "What's New",
"Update": "Update",
"What's new?": "What's new?",
+ "Appear Offline": "Appear Offline",
+ "Away": "Away",
"A new version of Riot is available.": "A new version of Riot is available.",
"To return to your account in future you need to set a password": "To return to your account in future you need to set a password",
"Toolbox": "Toolbox",
diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index 8a333071cd..c598e7cddc 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -132,6 +132,10 @@ textarea {
color: $secondary-accent-color;
}
+#mx_theme_tertiaryAccentColor {
+ color: $roomsublist-label-bg-color;
+}
+
.mx_Dialog_wrapper {
position: fixed;
z-index: 4000;
diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 77449d81b4..a59f2f520e 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -15,6 +15,7 @@
@import "./matrix-react-sdk/structures/_UserSettings.scss";
@import "./matrix-react-sdk/structures/login/_Login.scss";
@import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss";
+@import "./matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss";
@import "./matrix-react-sdk/views/dialogs/_BugReportDialog.scss";
@import "./matrix-react-sdk/views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss";
@@ -80,6 +81,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";
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
index d3e73a9a15..a0191b92cf 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
@@ -94,6 +94,60 @@ limitations under the License.
left: 1px;
}
+.mx_ContextualMenu.mx_ContextualMenu_top {
+ top: 8px;
+}
+
+.mx_ContextualMenu_chevron_top {
+ position: absolute;
+ left: 0px;
+ top: -8px;
+ width: 0;
+ height: 0;
+ border-left: 8px solid transparent;
+ border-bottom: 8px solid $menu-border-color;
+ border-right: 8px solid transparent;
+}
+
+.mx_ContextualMenu_chevron_top:after{
+ content:'';
+ width: 0;
+ height: 0;
+ border-left: 7px solid transparent;
+ border-bottom: 7px solid $menu-bg-color;
+ border-right: 7px solid transparent;
+ position:absolute;
+ left: -7px;
+ top: 1px;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_bottom {
+ bottom: 8px;
+}
+
+.mx_ContextualMenu_chevron_bottom {
+ position: absolute;
+ left: 0px;
+ bottom: -8px;
+ width: 0;
+ height: 0;
+ border-left: 8px solid transparent;
+ border-top: 8px solid $menu-border-color;
+ border-right: 8px solid transparent;
+}
+
+.mx_ContextualMenu_chevron_bottom:after{
+ content:'';
+ width: 0;
+ height: 0;
+ border-left: 7px solid transparent;
+ border-top: 7px solid $menu-bg-color;
+ border-right: 7px solid transparent;
+ position:absolute;
+ left: -7px;
+ bottom: 1px;
+}
+
.mx_ContextualMenu_field {
padding: 3px 6px 3px 6px;
cursor: pointer;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss b/src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss
new file mode 100644
index 0000000000..a15f8eaa65
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss
@@ -0,0 +1,43 @@
+/*
+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_MemberPresenceAvatar {
+ display: inline-block;
+ position: relative;
+}
+
+.mx_MemberPresenceAvatar_status {
+ display: block;
+ width: 10px;
+ height: 10px;
+ border-radius: 10px;
+
+ position: absolute;
+ bottom: -2px;
+ right: -3px;
+}
+
+.mx_MemberPresenceAvatar_status_online {
+ background-color: $presence-online;
+}
+
+.mx_MemberPresenceAvatar_status_unavailable {
+ background-color: $presence-unavailable;
+}
+
+.mx_MemberPresenceAvatar_status_offline {
+ background-color: $presence-offline;
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
index 7fe2b03cf4..8376cea739 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
@@ -14,8 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-// .mx_AppsDrawer {
-// }
+.mx_AppsDrawer {
+ margin: 5px;
+}
.mx_AppsContainer {
display: flex;
@@ -75,16 +76,22 @@ limitations under the License.
}
.mx_AppTileMenuBar {
- // height: 15px;
margin: 0;
padding: 2px 10px;
- // background-color: $e2e-verified-color;
border-bottom: 1px solid $primary-hairline-color;
font-size: 10px;
+ background-color: $widget-menu-bar-bg-color;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
}
.mx_AppTileMenuBarWidgets {
float: right;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
}
.mx_AppTileMenuBarWidget {
// pointer-events: none;
@@ -101,7 +108,7 @@ limitations under the License.
}
.mx_AppTileMenuBarWidget:hover {
- border: 1px solid $primary-hairline-color;
+ border: 1px solid $primary-fg-color;
border-radius: 2px;
}
@@ -193,8 +200,12 @@ form.mx_Custom_Widget_Form div {
.mx_AppPermissionWarning {
text-align: center;
- padding: 30px 0;
background-color: $primary-bg-color;
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
.mx_AppPermissionWarningImage {
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index a3346d1074..62d7af0640 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -111,6 +111,10 @@ $panel-divider-color: rgba(118, 207, 166, 0.2);
// ********************
+$widget-menu-bar-bg-color: #d3efe1;
+
+// ********************
+
// event tile lifecycle
$event-encrypting-color: #abddbc;
$event-sending-color: #ddd;
@@ -131,6 +135,11 @@ $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
$e2e-unverified-color: #e8bf37;
$e2e-warning-color: #ba6363;
+// presence
+$presence-online: #60de00;
+$presence-unavailable: #deb800;
+$presence-offline: #b7b7b7;
+
/*** ImageView ***/
$lightbox-bg-color: #454545;
$lightbox-fg-color: #ffffff;
@@ -156,6 +165,7 @@ $progressbar-color: #000;
padding-right: 1.5em;
cursor: pointer;
display: inline-block;
+ outline: none;
}
@define-mixin mx_DialogButton_hover {
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index 595783c377..c140f7079f 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -30,6 +30,17 @@ $preview-bar-bg-color: #333;
// left-panel style muted accent color
$secondary-accent-color: $primary-bg-color;
+// stop the tinter trying to change the secondary accent color
+// by overriding the key to something untintable
+// XXX: this is a bit of a hack.
+#mx_theme_secondaryAccentColor {
+ color: #c0ff33 ! important; // deliberately off by one
+}
+
+#mx_theme_tertiaryAccentColor {
+ color: #c0ffee ! important;
+}
+
// used by RoomDirectory permissions
$plinth-bg-color: #474747;
@@ -99,6 +110,10 @@ $panel-divider-color: rgba(118, 207, 166, 0.2);
// ********************
+$widget-menu-bar-bg-color: #454545;
+
+// ********************
+
// event tile lifecycle
$event-encrypting-color: rgba(171, 221, 188, 0.4);
$event-sending-color: #888;
@@ -127,6 +142,25 @@ $lightbox-border-color: #ffffff;
// unused?
$progressbar-color: #000;
+// XXX: copypasted from _base in order to pick up the right FG color...
+@define-mixin mx_DialogButton {
+ /* align images in buttons (eg spinners) */
+ vertical-align: middle;
+ border: 0px;
+ border-radius: 36px;
+ font-family: $font-family;
+ font-size: 14px;
+ color: $accent-fg-color;
+ background-color: $accent-color;
+ width: auto;
+ padding: 7px;
+ padding-left: 1.5em;
+ padding-right: 1.5em;
+ cursor: pointer;
+ display: inline-block;
+ outline: none;
+}
+
// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it
// better match the theme. Typically applied to dark grey 'off' buttons or
// light grey 'on' buttons.
diff --git a/src/skins/vector/css/vector-web/views/context_menus/_PresenceContextMenuOption.scss b/src/skins/vector/css/vector-web/views/context_menus/_PresenceContextMenuOption.scss
new file mode 100644
index 0000000000..bfe81125e0
--- /dev/null
+++ b/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;
+}
diff --git a/src/skins/vector/img/edit.svg b/src/skins/vector/img/edit.svg
index a0be3454e1..9ba0060774 100644
--- a/src/skins/vector/img/edit.svg
+++ b/src/skins/vector/img/edit.svg
@@ -1,13 +1,11 @@
-
diff --git a/src/skins/vector/img/edit_green.svg b/src/skins/vector/img/edit_green.svg
new file mode 100644
index 0000000000..f7f4c7adcb
--- /dev/null
+++ b/src/skins/vector/img/edit_green.svg
@@ -0,0 +1,11 @@
+
+
+
diff --git a/src/skins/vector/img/warning_yellow.svg b/src/skins/vector/img/warning_yellow.svg
new file mode 100644
index 0000000000..4d227517d2
--- /dev/null
+++ b/src/skins/vector/img/warning_yellow.svg
@@ -0,0 +1,34 @@
+
+
+
+
diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss
index 2962ee9d4b..bd05efa020 100644
--- a/src/skins/vector/themes/status/css/_status.scss
+++ b/src/skins/vector/themes/status/css/_status.scss
@@ -90,7 +90,11 @@ $secondary-accent-color: #586C7B;
// by overriding the key to something untintable
// XXX: this is a bit of a hack.
#mx_theme_secondaryAccentColor {
- color: #586C7C ! important; // deliberately off by one
+ color: #c0ffee ! important;
+}
+
+#mx_theme_tertiaryAccentColor {
+ color: #c0ffee ! important;
}
// used by RoomDirectory permissions
@@ -163,6 +167,10 @@ $panel-divider-color: rgba(0, 0, 0, 0.2);
// ********************
+$widget-menu-bar-bg-color: #f7f7f7;
+
+// ********************
+
// event tile lifecycle
$event-encrypting-color: #abddbc;
$event-sending-color: #ddd;
diff --git a/src/vector/index.html b/src/vector/index.html
index 36047aca7a..8568d96a92 100644
--- a/src/vector/index.html
+++ b/src/vector/index.html
@@ -27,7 +27,7 @@
if (match) {
var title = match[1].charAt(0).toUpperCase() + match[1].slice(1);
%>
-
+
<% } else { %>
<% }
@@ -73,6 +73,6 @@
-
+