diff --git a/res/css/_components.scss b/res/css/_components.scss
index aedb5c1334..5145133127 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -53,10 +53,8 @@
@import "./views/avatars/_PulsedAvatar.scss";
@import "./views/context_menus/_IconizedContextMenu.scss";
@import "./views/context_menus/_MessageContextMenu.scss";
-@import "./views/context_menus/_RoomTileContextMenu.scss";
@import "./views/context_menus/_StatusMessageContextMenu.scss";
@import "./views/context_menus/_TagTileContextMenu.scss";
-@import "./views/context_menus/_TopLeftMenu.scss";
@import "./views/context_menus/_WidgetContextMenu.scss";
@import "./views/dialogs/_AddressPickerDialog.scss";
@import "./views/dialogs/_Analytics.scss";
@@ -157,7 +155,6 @@
@import "./views/right_panel/_UserInfo.scss";
@import "./views/right_panel/_VerificationPanel.scss";
@import "./views/room_settings/_AliasSettings.scss";
-@import "./views/room_settings/_ColorSettings.scss";
@import "./views/rooms/_AppsDrawer.scss";
@import "./views/rooms/_Autocomplete.scss";
@import "./views/rooms/_AuxPanel.scss";
diff --git a/res/css/views/context_menus/_RoomTileContextMenu.scss b/res/css/views/context_menus/_RoomTileContextMenu.scss
deleted file mode 100644
index 9697ac9bef..0000000000
--- a/res/css/views/context_menus/_RoomTileContextMenu.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket 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_RoomTileContextMenu {
- padding: 6px;
-}
-
-.mx_RoomTileContextMenu_tag_icon {
- padding-right: 8px;
- padding-left: 4px;
- display: inline-block;
-}
-
-.mx_RoomTileContextMenu_tag_icon_set {
- padding-right: 8px;
- padding-left: 4px;
- display: none;
-}
-
-.mx_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave {
- padding-top: 8px;
- padding-right: 20px;
- padding-bottom: 8px;
- cursor: pointer;
- white-space: nowrap;
- display: flex;
- align-items: center;
- line-height: $font-16px;
-}
-
-.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet {
- font-weight: bold;
-}
-
-.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon {
- display: none;
-}
-
-.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon_set {
- display: inline-block;
-}
-
-.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldDisabled {
- color: rgba(0, 0, 0, 0.2);
-}
-
-.mx_RoomTileContextMenu_separator {
- margin-top: 0;
- margin-bottom: 0;
- border-bottom-style: none;
- border-left-style: none;
- border-right-style: none;
- border-top-style: solid;
- border-top-width: 1px;
- border-color: $menu-border-color;
-}
-
-.mx_RoomTileContextMenu_leave {
- color: $warning-color;
-}
-
-.mx_RoomTileContextMenu_notif_picker {
- position: absolute;
- top: 16px;
- left: 5px;
-}
-
-.mx_RoomTileContextMenu_notif_field {
- padding-top: 4px;
- padding-right: 6px;
- padding-bottom: 10px;
- padding-left: 8px; /* 20px */
- cursor: pointer;
- white-space: nowrap;
- display: flex;
- align-items: center;
-}
-
-.mx_RoomTileContextMenu_notif_field.mx_RoomTileContextMenu_notif_fieldSet {
- font-weight: bold;
-}
-
-.mx_RoomTileContextMenu_notif_field.mx_RoomTileContextMenu_notif_fieldDisabled {
- color: rgba(0, 0, 0, 0.2);
-}
-
-.mx_RoomTileContextMenu_notif_icon {
- padding-right: 4px;
- padding-left: 4px;
-}
-
-.mx_RoomTileContextMenu_notif_activeIcon {
- display: inline-block;
- opacity: 0;
- position: relative;
- left: -5px;
-}
-
-.mx_RoomTileContextMenu_notif_fieldSet .mx_RoomTileContextMenu_notif_activeIcon {
- opacity: 1;
-}
diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss
deleted file mode 100644
index e0f5dd47bd..0000000000
--- a/res/css/views/context_menus/_TopLeftMenu.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
-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_TopLeftMenu {
- min-width: 210px;
- border-radius: 4px;
-
- .mx_TopLeftMenu_greyedText {
- font-size: $font-12px;
- opacity: 0.5;
- }
-
- .mx_TopLeftMenu_upgradeLink {
- font-size: $font-12px;
-
- img {
- margin-left: 5px;
- }
- }
-
- .mx_TopLeftMenu_section:not(:last-child) {
- border-bottom: 1px solid $menu-border-color;
- }
-
- .mx_TopLeftMenu_section_noIcon {
- margin: 5px 0;
- padding: 5px 20px 5px 15px;
-
- div:not(:first-child) {
- margin-top: 5px;
- }
- }
-
- .mx_TopLeftMenu_section_withIcon {
- margin: 5px 0;
- padding: 0;
- list-style: none;
-
- .mx_TopLeftMenu_icon_home::after {
- mask-image: url('$(res)/img/feather-customised/home.svg');
- }
-
- .mx_TopLeftMenu_icon_help::after {
- mask-image: url('$(res)/img/feather-customised/life-buoy.svg');
- }
-
- .mx_TopLeftMenu_icon_settings::after {
- mask-image: url('$(res)/img/feather-customised/settings.svg');
- }
-
- .mx_TopLeftMenu_icon_signin::after {
- mask-image: url('$(res)/img/feather-customised/sign-in.svg');
- }
-
- .mx_TopLeftMenu_icon_signout::after {
- mask-image: url('$(res)/img/feather-customised/sign-out.svg');
- }
-
- .mx_AccessibleButton::after {
- mask-repeat: no-repeat;
- mask-position: 0 center;
- mask-size: $font-16px;
- position: absolute;
- width: $font-16px;
- height: $font-16px;
- content: "";
- top: 5px;
- left: 14px;
- background-color: $primary-fg-color;
- }
-
- .mx_AccessibleButton {
- position: relative;
- cursor: pointer;
- white-space: nowrap;
- padding: 5px 20px 5px 43px;
- }
-
- .mx_AccessibleButton:hover {
- background-color: $menu-selected-color;
- }
- }
-}
diff --git a/res/css/views/room_settings/_ColorSettings.scss b/res/css/views/room_settings/_ColorSettings.scss
deleted file mode 100644
index fc6a4443ad..0000000000
--- a/res/css/views/room_settings/_ColorSettings.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
-Copyright 2019 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_ColorSettings_roomColor {
- display: inline-block;
- position: relative;
- width: 37px;
- height: 37px;
- border: 1px solid #979797;
- margin-right: 13px;
- cursor: pointer;
-}
-
-.mx_ColorSettings_roomColor_selected {
- position: absolute;
- left: 10px;
- top: 4px;
- cursor: default !important;
-}
-
-.mx_ColorSettings_roomColorPrimary {
- height: 10px;
- position: absolute;
- bottom: 0px;
- width: 100%;
-}
diff --git a/src/components/views/context_menus/RoomTileContextMenu.js b/src/components/views/context_menus/RoomTileContextMenu.js
deleted file mode 100644
index b08cf3be60..0000000000
--- a/src/components/views/context_menus/RoomTileContextMenu.js
+++ /dev/null
@@ -1,404 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-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 createReactClass from 'create-react-class';
-import classNames from 'classnames';
-import * as sdk from '../../../index';
-import { _t, _td } from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher/dispatcher';
-import DMRoomMap from '../../../utils/DMRoomMap';
-import * as Rooms from '../../../Rooms';
-import * as RoomNotifs from '../../../RoomNotifs';
-import Modal from '../../../Modal';
-import RoomListActions from '../../../actions/RoomListActions';
-import RoomViewStore from '../../../stores/RoomViewStore';
-import {sleep} from "../../../utils/promise";
-import {MenuItem, MenuItemCheckbox, MenuItemRadio} from "../../structures/ContextMenu";
-
-const RoomTagOption = ({active, onClick, src, srcSet, label}) => {
- const classes = classNames('mx_RoomTileContextMenu_tag_field', {
- 'mx_RoomTileContextMenu_tag_fieldSet': active,
- 'mx_RoomTileContextMenu_tag_fieldDisabled': false,
- });
-
- return (
-
-
-
- { label }
-
- );
-};
-
-const NotifOption = ({active, onClick, src, label}) => {
- const classes = classNames('mx_RoomTileContextMenu_notif_field', {
- 'mx_RoomTileContextMenu_notif_fieldSet': active,
- });
-
- return (
-
-
-
- { label }
-
- );
-};
-
-export default createReactClass({
- displayName: 'RoomTileContextMenu',
-
- propTypes: {
- room: PropTypes.object.isRequired,
- /* callback called when the menu is dismissed */
- onFinished: PropTypes.func,
- },
-
- getInitialState() {
- const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
- return {
- roomNotifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
- isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"),
- isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"),
- isDirectMessage: Boolean(dmRoomMap.getUserIdForRoomId(this.props.room.roomId)),
- };
- },
-
- componentDidMount: function() {
- this._unmounted = false;
- },
-
- componentWillUnmount: function() {
- this._unmounted = true;
- },
-
- _toggleTag: function(tagNameOn, tagNameOff) {
- if (!MatrixClientPeg.get().isGuest()) {
- sleep(500).then(() => {
- dis.dispatch(RoomListActions.tagRoom(
- MatrixClientPeg.get(),
- this.props.room,
- tagNameOff, tagNameOn,
- undefined, 0,
- ), true);
-
- this.props.onFinished();
- });
- }
- },
-
- _onClickFavourite: function() {
- // Tag room as 'Favourite'
- if (!this.state.isFavourite && this.state.isLowPriority) {
- this.setState({
- isFavourite: true,
- isLowPriority: false,
- });
- this._toggleTag("m.favourite", "m.lowpriority");
- } else if (this.state.isFavourite) {
- this.setState({isFavourite: false});
- this._toggleTag(null, "m.favourite");
- } else if (!this.state.isFavourite) {
- this.setState({isFavourite: true});
- this._toggleTag("m.favourite");
- }
- },
-
- _onClickLowPriority: function() {
- // Tag room as 'Low Priority'
- if (!this.state.isLowPriority && this.state.isFavourite) {
- this.setState({
- isFavourite: false,
- isLowPriority: true,
- });
- this._toggleTag("m.lowpriority", "m.favourite");
- } else if (this.state.isLowPriority) {
- this.setState({isLowPriority: false});
- this._toggleTag(null, "m.lowpriority");
- } else if (!this.state.isLowPriority) {
- this.setState({isLowPriority: true});
- this._toggleTag("m.lowpriority");
- }
- },
-
- _onClickDM: function() {
- if (MatrixClientPeg.get().isGuest()) return;
-
- const newIsDirectMessage = !this.state.isDirectMessage;
- this.setState({
- isDirectMessage: newIsDirectMessage,
- });
-
- Rooms.guessAndSetDMRoom(
- this.props.room, newIsDirectMessage,
- ).then(sleep(500)).finally(() => {
- // Close the context menu
- if (this.props.onFinished) {
- this.props.onFinished();
- }
- }, (err) => {
- const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
- Modal.createTrackedDialog('Failed to set Direct Message status of room', '', ErrorDialog, {
- title: _t('Failed to set Direct Message status of room'),
- description: ((err && err.message) ? err.message : _t('Operation failed')),
- });
- });
- },
-
- _onClickLeave: function() {
- // Leave room
- dis.dispatch({
- action: 'leave_room',
- room_id: this.props.room.roomId,
- });
-
- // Close the context menu
- if (this.props.onFinished) {
- this.props.onFinished();
- }
- },
-
- _onClickReject: function() {
- dis.dispatch({
- action: 'reject_invite',
- room_id: this.props.room.roomId,
- });
-
- // Close the context menu
- if (this.props.onFinished) {
- this.props.onFinished();
- }
- },
-
- _onClickForget: function() {
- // FIXME: duplicated with RoomSettings (and dead code in RoomView)
- MatrixClientPeg.get().forget(this.props.room.roomId).then(() => {
- // Switch to another room view if we're currently viewing the
- // historical room
- if (RoomViewStore.getRoomId() === this.props.room.roomId) {
- dis.dispatch({ action: 'view_next_room' });
- }
- }, function(err) {
- const errCode = err.errcode || _td("unknown error code");
- const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
- Modal.createTrackedDialog('Failed to forget room', '', ErrorDialog, {
- title: _t('Failed to forget room %(errCode)s', {errCode: errCode}),
- description: ((err && err.message) ? err.message : _t('Operation failed')),
- });
- });
-
- // Close the context menu
- if (this.props.onFinished) {
- this.props.onFinished();
- }
- },
-
- _saveNotifState: function(newState) {
- if (MatrixClientPeg.get().isGuest()) return;
-
- const oldState = this.state.roomNotifState;
- const roomId = this.props.room.roomId;
-
- this.setState({
- roomNotifState: newState,
- });
- RoomNotifs.setRoomNotifsState(roomId, newState).then(() => {
- // delay slightly so that the user can see their state change
- // before closing the menu
- return sleep(500).then(() => {
- if (this._unmounted) return;
- // Close the context menu
- if (this.props.onFinished) {
- this.props.onFinished();
- }
- });
- }, (error) => {
- // TODO: some form of error notification to the user
- // to inform them that their state change failed.
- // For now we at least set the state back
- if (this._unmounted) return;
- this.setState({
- roomNotifState: oldState,
- });
- });
- },
-
- _onClickAlertMe: function() {
- this._saveNotifState(RoomNotifs.ALL_MESSAGES_LOUD);
- },
-
- _onClickAllNotifs: function() {
- this._saveNotifState(RoomNotifs.ALL_MESSAGES);
- },
-
- _onClickMentions: function() {
- this._saveNotifState(RoomNotifs.MENTIONS_ONLY);
- },
-
- _onClickMute: function() {
- this._saveNotifState(RoomNotifs.MUTE);
- },
-
- _renderNotifMenu: function() {
- return (
-
-
-
})
-
-
-
-
-
-
-
- );
- },
-
- _onClickSettings: function() {
- dis.dispatch({
- action: 'open_room_settings',
- room_id: this.props.room.roomId,
- });
- if (this.props.onFinished) {
- this.props.onFinished();
- }
- },
-
- _renderSettingsMenu: function() {
- return (
-
-
-
- );
- },
-
- _renderLeaveMenu: function(membership) {
- if (!membership) {
- return null;
- }
-
- let leaveClickHandler = null;
- let leaveText = null;
-
- switch (membership) {
- case "join":
- leaveClickHandler = this._onClickLeave;
- leaveText = _t('Leave');
- break;
- case "leave":
- case "ban":
- leaveClickHandler = this._onClickForget;
- leaveText = _t('Forget');
- break;
- case "invite":
- leaveClickHandler = this._onClickReject;
- leaveText = _t('Reject');
- break;
- }
-
- return (
-
-
-
- );
- },
-
- _renderRoomTagMenu: function() {
- return (
-
-
-
-
-
- );
- },
-
- render: function() {
- const myMembership = this.props.room.getMyMembership();
-
- switch (myMembership) {
- case 'join':
- return
- { this._renderNotifMenu() }
-
- { this._renderLeaveMenu(myMembership) }
-
- { this._renderRoomTagMenu() }
-
- { this._renderSettingsMenu() }
- ;
- case 'invite':
- return
- { this._renderLeaveMenu(myMembership) }
-
;
- default:
- return
- { this._renderLeaveMenu(myMembership) }
-
- { this._renderSettingsMenu() }
- ;
- }
- },
-});
diff --git a/src/components/views/context_menus/TopLeftMenu.js b/src/components/views/context_menus/TopLeftMenu.js
deleted file mode 100644
index ec99c63724..0000000000
--- a/src/components/views/context_menus/TopLeftMenu.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/*
-Copyright 2018, 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-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 dis from '../../../dispatcher/dispatcher';
-import { _t } from '../../../languageHandler';
-import LogoutDialog from "../dialogs/LogoutDialog";
-import Modal from "../../../Modal";
-import SdkConfig from '../../../SdkConfig';
-import { getHostingLink } from '../../../utils/HostingLink';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {MenuItem} from "../../structures/ContextMenu";
-import * as sdk from "../../../index";
-import {getHomePageUrl} from "../../../utils/pages";
-import {Action} from "../../../dispatcher/actions";
-
-export default class TopLeftMenu extends React.Component {
- static propTypes = {
- displayName: PropTypes.string.isRequired,
- userId: PropTypes.string.isRequired,
- onFinished: PropTypes.func,
-
- // Optional function to collect a reference to the container
- // of this component directly.
- containerRef: PropTypes.func,
- };
-
- constructor() {
- super();
- this.viewHomePage = this.viewHomePage.bind(this);
- this.openSettings = this.openSettings.bind(this);
- this.signIn = this.signIn.bind(this);
- this.signOut = this.signOut.bind(this);
- }
-
- hasHomePage() {
- return !!getHomePageUrl(SdkConfig.get());
- }
-
- render() {
- const isGuest = MatrixClientPeg.get().isGuest();
-
- const hostingSignupLink = getHostingLink('user-context-menu');
- let hostingSignup = null;
- if (hostingSignupLink) {
- hostingSignup =
- {_t(
- "
Upgrade to your own domain", {},
- {
- a: sub =>
-
{sub},
- },
- )}
-
-
-
-
;
- }
-
- let homePageItem = null;
- if (this.hasHomePage()) {
- homePageItem = (
-
- );
- }
-
- let signInOutItem;
- if (isGuest) {
- signInOutItem = (
-
- );
- } else {
- signInOutItem = (
-
- );
- }
-
- const helpItem = (
-
- );
-
- const settingsItem = (
-
- );
-
- return
-
-
{this.props.displayName}
-
{this.props.userId}
- {hostingSignup}
-
-
- {homePageItem}
- {settingsItem}
- {helpItem}
- {signInOutItem}
-
-
;
- }
-
- openHelp = () => {
- this.closeMenu();
- const RedesignFeedbackDialog = sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
- Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
- };
-
- viewHomePage() {
- dis.dispatch({action: 'view_home_page'});
- this.closeMenu();
- }
-
- openSettings() {
- dis.fire(Action.ViewUserSettings);
- this.closeMenu();
- }
-
- signIn() {
- dis.dispatch({action: 'start_login'});
- this.closeMenu();
- }
-
- signOut() {
- Modal.createTrackedDialog('Logout E2E Export', '', LogoutDialog);
- this.closeMenu();
- }
-
- closeMenu() {
- if (this.props.onFinished) this.props.onFinished();
- }
-}
diff --git a/src/components/views/room_settings/ColorSettings.js b/src/components/views/room_settings/ColorSettings.js
deleted file mode 100644
index 2179bd905e..0000000000
--- a/src/components/views/room_settings/ColorSettings.js
+++ /dev/null
@@ -1,154 +0,0 @@
-/*
-Copyright 2016 OpenMarket 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 createReactClass from 'create-react-class';
-
-import Tinter from '../../../Tinter';
-import dis from '../../../dispatcher/dispatcher';
-import SettingsStore from "../../../settings/SettingsStore";
-import {SettingLevel} from "../../../settings/SettingLevel";
-
-const ROOM_COLORS = [
- // magic room default values courtesy of Ribot
- [Tinter.getKeyRgb()[0], Tinter.getKeyRgb()[1]],
- ["#81bddb", "#eaf1f4"],
- ["#bd79cb", "#f3eaf5"],
- ["#c65d94", "#f5eaef"],
- ["#e55e5e", "#f5eaea"],
- ["#eca46f", "#f5eeea"],
- ["#dad658", "#f5f4ea"],
- ["#80c553", "#eef5ea"],
- ["#bb814e", "#eee8e3"],
- //["#595959", "#ececec"], // Grey makes everything appear disabled, so remove it for now
-];
-
-// Dev note: this component is not attached anywhere, but is left here as it
-// has a high possibility of being used in the nearish future.
-// Ref: https://github.com/vector-im/element-web/issues/8421
-
-export default createReactClass({
- displayName: 'ColorSettings',
-
- propTypes: {
- room: PropTypes.object.isRequired,
- },
-
- getInitialState: function() {
- const data = {
- index: 0,
- primary_color: ROOM_COLORS[0][0],
- secondary_color: ROOM_COLORS[0][1],
- hasChanged: false,
- };
- const scheme = SettingsStore.getValueAt(SettingLevel.ROOM_ACCOUNT, "roomColor", this.props.room.roomId);
-
- if (scheme.primary_color && scheme.secondary_color) {
- // We only use the user's scheme if the scheme is valid.
- data.primary_color = scheme.primary_color;
- data.secondary_color = scheme.secondary_color;
- }
- data.index = this._getColorIndex(data);
-
- if (data.index === -1) {
- // append the unrecognised colours to our palette
- data.index = ROOM_COLORS.length;
- ROOM_COLORS.push([
- scheme.primary_color, scheme.secondary_color,
- ]);
- }
- return data;
- },
-
- saveSettings: function() { // : Promise
- if (!this.state.hasChanged) {
- return Promise.resolve(); // They didn't explicitly give a color to save.
- }
- const originalState = this.getInitialState();
- if (originalState.primary_color !== this.state.primary_color ||
- originalState.secondary_color !== this.state.secondary_color) {
- console.log("ColorSettings: Saving new color");
- // We would like guests to be able to set room colour but currently
- // they can't, so we still send the request but display a sensible
- // error if it fails.
- // TODO: Support guests for room color. Technically this is possible via granular settings
- // Granular settings would mean the guest is forced to use the DEVICE level though.
- SettingsStore.setValue("roomColor", this.props.room.roomId, SettingLevel.ROOM_ACCOUNT, {
- primary_color: this.state.primary_color,
- secondary_color: this.state.secondary_color,
- }).catch(function(err) {
- if (err.errcode === 'M_GUEST_ACCESS_FORBIDDEN') {
- dis.dispatch({action: 'require_registration'});
- }
- });
- }
- return Promise.resolve(); // no color diff
- },
-
- _getColorIndex: function(scheme) {
- if (!scheme || !scheme.primary_color || !scheme.secondary_color) {
- return -1;
- }
- // XXX: we should validate these values
- for (let i = 0; i < ROOM_COLORS.length; i++) {
- const room_color = ROOM_COLORS[i];
- if (room_color[0] === String(scheme.primary_color).toLowerCase() &&
- room_color[1] === String(scheme.secondary_color).toLowerCase()) {
- return i;
- }
- }
- return -1;
- },
-
- _onColorSchemeChanged: function(index) {
- // preview what the user just changed the scheme to.
- Tinter.tint(ROOM_COLORS[index][0], ROOM_COLORS[index][1]);
- this.setState({
- index: index,
- primary_color: ROOM_COLORS[index][0],
- secondary_color: ROOM_COLORS[index][1],
- hasChanged: true,
- });
- },
-
- render: function() {
- return (
-
- { ROOM_COLORS.map((room_color, i) => {
- let selected;
- if (i === this.state.index) {
- selected = (
-
-
})
-
- );
- }
- const boundClick = this._onColorSchemeChanged.bind(this, i);
- return (
-
- );
- }) }
-
- );
- },
-});
diff --git a/test/end-to-end-tests/src/usecases/settings.js b/test/end-to-end-tests/src/usecases/settings.js
index a405fde9fb..52e4bb7e0a 100644
--- a/test/end-to-end-tests/src/usecases/settings.js
+++ b/test/end-to-end-tests/src/usecases/settings.js
@@ -18,9 +18,9 @@ limitations under the License.
const assert = require('assert');
async function openSettings(session, section) {
- const menuButton = await session.query(".mx_TopLeftMenuButton_name");
+ const menuButton = await session.query(".mx_UserMenu");
await menuButton.click();
- const settingsItem = await session.query(".mx_TopLeftMenu_icon_settings");
+ const settingsItem = await session.query(".mx_UserMenu_iconSettings");
await settingsItem.click();
if (section) {
const sectionButton = await session.query(