From 94aac62f255859a95d22b813e4e1004dca21449c Mon Sep 17 00:00:00 2001 From: Travis Ralston <travpc@gmail.com> Date: Mon, 15 Oct 2018 14:26:02 -0600 Subject: [PATCH] Move the login box from the left sidebar to where the composer is Fixes https://github.com/vector-im/riot-web/issues/4227 This includes removing the collapse button that isn't needed anymore. --- res/css/structures/_LoginBox.scss | 1 + src/components/structures/LeftPanel.js | 10 +---- src/components/structures/LoginBox.js | 62 ++++++-------------------- src/components/structures/RoomView.js | 7 ++- 4 files changed, 22 insertions(+), 58 deletions(-) diff --git a/res/css/structures/_LoginBox.scss b/res/css/structures/_LoginBox.scss index 7f6199c451..0a3e21a980 100644 --- a/res/css/structures/_LoginBox.scss +++ b/res/css/structures/_LoginBox.scss @@ -19,6 +19,7 @@ limitations under the License. height: unset !important; padding-top: 13px !important; padding-bottom: 14px !important; + order: 4; } .mx_LoginBox_loginButton_wrapper { diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index ebe5d7f507..72d640bcac 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -181,14 +181,8 @@ var LeftPanel = React.createClass({ const BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu'); const CallPreview = sdk.getComponent('voip.CallPreview'); - let topBox; - if (this.context.matrixClient.isGuest()) { - const LoginBox = sdk.getComponent('structures.LoginBox'); - topBox = <LoginBox collapsed={ this.props.collapsed }/>; - } else { - const SearchBox = sdk.getComponent('structures.SearchBox'); - topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />; - } + const SearchBox = sdk.getComponent('structures.SearchBox'); + const topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />; const classes = classNames( "mx_LeftPanel", diff --git a/src/components/structures/LoginBox.js b/src/components/structures/LoginBox.js index a9ea1f95c6..a2269706ee 100644 --- a/src/components/structures/LoginBox.js +++ b/src/components/structures/LoginBox.js @@ -1,5 +1,6 @@ /* Copyright 2017 Vector Creations Ltd +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. @@ -16,31 +17,15 @@ limitations under the License. 'use strict'; -var React = require('react'); +const React = require('react'); import { _t } from '../../languageHandler'; -var sdk = require('../../index') -var dis = require('../../dispatcher'); -var rate_limited_func = require('../../ratelimitedfunc'); -var AccessibleButton = require('../../components/views/elements/AccessibleButton'); +const dis = require('../../dispatcher'); +const AccessibleButton = require('../../components/views/elements/AccessibleButton'); module.exports = React.createClass({ displayName: 'LoginBox', propTypes: { - collapsed: React.PropTypes.bool, - }, - - onToggleCollapse: function(show) { - if (show) { - dis.dispatch({ - action: 'show_left_panel', - }); - } - else { - dis.dispatch({ - action: 'hide_left_panel', - }); - } }, onLoginClick: function() { @@ -52,41 +37,20 @@ module.exports = React.createClass({ }, render: function() { - var TintableSvg = sdk.getComponent('elements.TintableSvg'); - - var toggleCollapse; - if (this.props.collapsed) { - toggleCollapse = - <AccessibleButton className="mx_SearchBox_maximise" onClick={ this.onToggleCollapse.bind(this, true) }> - <TintableSvg src="img/maximise.svg" width="10" height="16" alt="Expand panel"/> + const loginButton = ( + <div className="mx_LoginBox_loginButton_wrapper"> + <AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}> + { _t("Login") } </AccessibleButton> - } - else { - toggleCollapse = - <AccessibleButton className="mx_SearchBox_minimise" onClick={ this.onToggleCollapse.bind(this, false) }> - <TintableSvg src="img/minimise.svg" width="10" height="16" alt="Collapse panel"/> + <AccessibleButton className="mx_LoginBox_registerButton" element="button" onClick={this.onRegisterClick}> + { _t("Register") } </AccessibleButton> - } + </div> + ); - var loginButton; - if (!this.props.collapsed) { - loginButton = ( - <div className="mx_LoginBox_loginButton_wrapper"> - <AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}> - { _t("Login") } - </AccessibleButton> - <AccessibleButton className="mx_LoginBox_registerButton" element="button" onClick={this.onRegisterClick}> - { _t("Register") } - </AccessibleButton> - </div> - ); - } - - var self = this; return ( - <div className="mx_SearchBox mx_LoginBox"> + <div className="mx_LoginBox"> { loginButton } - { toggleCollapse } </div> ); } diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 32121d6de5..62c596e939 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1669,7 +1669,7 @@ module.exports = React.createClass({ let messageComposer, searchInfo; const canSpeak = ( // joined and not showing search results - myMembership == 'join' && !this.state.searchResults + myMembership === 'join' && !this.state.searchResults ); if (canSpeak) { messageComposer = @@ -1683,6 +1683,11 @@ module.exports = React.createClass({ />; } + if (MatrixClientPeg.get().isGuest()) { + const LoginBox = sdk.getComponent('structures.LoginBox'); + messageComposer = <LoginBox/>; + } + // TODO: Why aren't we storing the term/scope/count in this format // in this.state if this is what RoomHeader desires? if (this.state.searchResults) {