diff --git a/res/css/views/dialogs/_UserSettingsDialog.scss b/res/css/views/dialogs/_UserSettingsDialog.scss index 2849573790..6872149318 100644 --- a/res/css/views/dialogs/_UserSettingsDialog.scss +++ b/res/css/views/dialogs/_UserSettingsDialog.scss @@ -44,3 +44,8 @@ limitations under the License. .mx_UserSettingsDialog_labsIcon:before { mask-image: url('$(res)/img/feather-icons/flag.svg'); } + +.mx_UserSettingsDialog_flairIcon:before { + // TODO: Use the real icon + mask-image: url('$(res)/img/feather-icons/flag.svg'); +} diff --git a/res/css/views/groups/_GroupPublicityToggle.scss b/res/css/views/groups/_GroupPublicityToggle.scss index 3ea4aa07d6..a4784fea99 100644 --- a/res/css/views/groups/_GroupPublicityToggle.scss +++ b/res/css/views/groups/_GroupPublicityToggle.scss @@ -20,19 +20,8 @@ limitations under the License. margin: 8px; } -.mx_GroupPublicity_toggle > label { - display: flex; - align-items: flex-start; -} - -.mx_GroupPublicity_toggle > label, .mx_GroupPublicity_toggle .mx_GroupTile { - width: 50%; -} - -.mx_GroupPublicity_toggle input { - margin-right: 8px; - vertical-align: -4px; + width: calc(100% - 60px); // 48px switch + some padding } .mx_GroupPublicity_toggle .mx_GroupTile { @@ -40,3 +29,7 @@ limitations under the License. align-items: flex-start; cursor: pointer; } + +.mx_GroupPublicity_toggle .mx_ToggleSwitch { + float: right; +} diff --git a/src/components/views/dialogs/UserSettingsDialog.js b/src/components/views/dialogs/UserSettingsDialog.js index b47b2368f9..376ed800ce 100644 --- a/src/components/views/dialogs/UserSettingsDialog.js +++ b/src/components/views/dialogs/UserSettingsDialog.js @@ -28,6 +28,7 @@ import NotificationSettingsTab from "../settings/tabs/NotificationSettingsTab"; import PreferencesSettingsTab from "../settings/tabs/PreferencesSettingsTab"; import VoiceSettingsTab from "../settings/tabs/VoiceSettingsTab"; import HelpSettingsTab from "../settings/tabs/HelpSettingsTab"; +import FlairSettingsTab from "../settings/tabs/FlairSettingsTab"; // TODO: Ditch this whole component export class TempTab extends React.Component { @@ -58,6 +59,11 @@ export default class UserSettingsDialog extends React.Component { "mx_UserSettingsDialog_settingsIcon", , )); + tabs.push(new Tab( + _td("Flair"), + "mx_UserSettingsDialog_flairIcon", + , + )); tabs.push(new Tab( _td("Notifications"), "mx_UserSettingsDialog_bellIcon", diff --git a/src/components/views/groups/GroupPublicityToggle.js b/src/components/views/groups/GroupPublicityToggle.js index ff0fc553b8..e27bf9a9d5 100644 --- a/src/components/views/groups/GroupPublicityToggle.js +++ b/src/components/views/groups/GroupPublicityToggle.js @@ -18,7 +18,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import sdk from '../../../index'; import GroupStore from '../../../stores/GroupStore'; -import { _t } from '../../../languageHandler.js'; +import ToggleSwitch from "../elements/ToggleSwitch"; export default React.createClass({ displayName: 'GroupPublicityToggle', @@ -52,8 +52,7 @@ export default React.createClass({ if (this._groupStoreToken) this._groupStoreToken.unregister(); }, - _onPublicityToggle: function(e) { - e.stopPropagation(); + _onPublicityToggle: function() { this.setState({ busy: true, // Optimistic early update @@ -68,21 +67,11 @@ export default React.createClass({ render() { const GroupTile = sdk.getComponent('groups.GroupTile'); - const input = ; - const labelText = !this.state.ready ? _t("Loading...") : - (this.state.isGroupPublicised ? - _t("Flair will appear if enabled in room settings") : - _t("Flair will not appear") - ); return
- +
; }, }); diff --git a/src/components/views/groups/GroupUserSettings.js b/src/components/views/groups/GroupUserSettings.js index a349a34caf..210fca404a 100644 --- a/src/components/views/groups/GroupUserSettings.js +++ b/src/components/views/groups/GroupUserSettings.js @@ -43,9 +43,9 @@ export default React.createClass({ }); }, - _renderGroupPublicity() { + render() { let text = ""; - let scrollbox =
; + let groupPublicityToggles = null; const groups = this.state.groups; if (this.state.error) { @@ -54,16 +54,10 @@ export default React.createClass({ text = _t('Loading...'); } else if (groups.length > 0) { const GroupPublicityToggle = sdk.getComponent('groups.GroupPublicityToggle'); - const GeminiScrollbarWrapper = sdk.getComponent('elements.GeminiScrollbarWrapper'); - const groupPublicityToggles = groups.map((groupId, index) => { + groupPublicityToggles = groups.map((groupId, index) => { return ; }); text = _t('Display your community flair in rooms configured to show it.'); - scrollbox =
- - { groupPublicityToggles } - -
; } else { text = _t("You're not currently a member of any communities."); } @@ -71,16 +65,10 @@ export default React.createClass({ return (

{ text }

- { scrollbox } +
+ { groupPublicityToggles } +
); }, - - render() { - const groupPublicity = this._renderGroupPublicity(); - - return
- { groupPublicity } -
; - }, }); diff --git a/src/components/views/settings/tabs/FlairSettingsTab.js b/src/components/views/settings/tabs/FlairSettingsTab.js new file mode 100644 index 0000000000..db513a161a --- /dev/null +++ b/src/components/views/settings/tabs/FlairSettingsTab.js @@ -0,0 +1,52 @@ +/* +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. +*/ + +import React from 'react'; +import {_t} from "../../../../languageHandler"; +import {DragDropContext} from "react-beautiful-dnd"; +import GroupUserSettings from "../../groups/GroupUserSettings"; +import MatrixClientPeg from "../../../../MatrixClientPeg"; +import PropTypes from "prop-types"; +import {MatrixClient} from "matrix-js-sdk"; + +export default class FlairSettingsTab extends React.Component { + static childContextTypes = { + matrixClient: PropTypes.instanceOf(MatrixClient), + }; + + constructor() { + super(); + } + + getChildContext() { + return { + matrixClient: MatrixClientPeg.get(), + }; + } + + render() { + return ( +
+ {_t("Flair")} +
+ + + +
+
+ ); + } +} diff --git a/src/components/views/settings/tabs/GeneralSettingsTab.js b/src/components/views/settings/tabs/GeneralSettingsTab.js index c1df7f4665..b25076c366 100644 --- a/src/components/views/settings/tabs/GeneralSettingsTab.js +++ b/src/components/views/settings/tabs/GeneralSettingsTab.js @@ -16,11 +16,7 @@ limitations under the License. import React from 'react'; import {_t} from "../../../../languageHandler"; -import MatrixClientPeg from "../../../../MatrixClientPeg"; -import GroupUserSettings from "../../groups/GroupUserSettings"; -import PropTypes from "prop-types"; import {MatrixClient} from "matrix-js-sdk"; -import { DragDropContext } from 'react-beautiful-dnd'; import ProfileSettings from "../ProfileSettings"; import EmailAddresses from "../EmailAddresses"; import PhoneNumbers from "../PhoneNumbers"; @@ -37,10 +33,6 @@ const Modal = require("../../../../Modal"); const dis = require("../../../../dispatcher"); export default class GeneralSettingsTab extends React.Component { - static childContextTypes = { - matrixClient: PropTypes.instanceOf(MatrixClient), - }; - constructor() { super(); @@ -50,12 +42,6 @@ export default class GeneralSettingsTab extends React.Component { }; } - getChildContext() { - return { - matrixClient: MatrixClientPeg.get(), - }; - } - _onLanguageChange = (newLanguage) => { if (this.state.language === newLanguage) return; @@ -110,11 +96,6 @@ export default class GeneralSettingsTab extends React.Component {
{_t("Profile")} - - {_t("Flair")} - - -
); }