Revert "Merge pull request #3804 from vector-im/dbkr/left_panel_for_newbies_2"

This reverts commit e6133820a2, reversing changes made to d1db602b3a.
2017-05-16 16:27:58 +01:00 · 2017-05-16 16:27:58 +01:00 · 3cead032c2
parent 0e0918d07c
commit 3cead032c2
7 changed files with 170 additions and 111 deletions
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@ -1,6 +1,5 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -15,8 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React from 'react';
-import sdk from 'matrix-react-sdk';
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var sdk = require('matrix-react-sdk')
+var dis = require('matrix-react-sdk/lib/dispatcher');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');

 module.exports = React.createClass({
    displayName: 'BottomLeftMenu',
@ -26,28 +30,121 @@ module.exports = React.createClass({
        teamToken: React.PropTypes.string,
    },

+    getInitialState: function() {
+        return({
+            directoryHover : false,
+            roomsHover : false,
+            homeHover: false,
+            peopleHover : false,
+            settingsHover : false,
+        });
+    },
+
+    // Room events
+    onDirectoryClick: function() {
+        dis.dispatch({ action: 'view_room_directory' });
+    },
+
+    onDirectoryMouseEnter: function() {
+        this.setState({ directoryHover: true });
+    },
+
+    onDirectoryMouseLeave: function() {
+        this.setState({ directoryHover: false });
+    },
+
+    onRoomsClick: function() {
+        dis.dispatch({ action: 'view_create_room' });
+    },
+
+    onRoomsMouseEnter: function() {
+        this.setState({ roomsHover: true });
+    },
+
+    onRoomsMouseLeave: function() {
+        this.setState({ roomsHover: false });
+    },
+
+    // Home button events
+    onHomeClick: function() {
+        dis.dispatch({ action: 'view_home_page' });
+    },
+
+    onHomeMouseEnter: function() {
+        this.setState({ homeHover: true });
+    },
+
+    onHomeMouseLeave: function() {
+        this.setState({ homeHover: false });
+    },
+
+    // People events
+    onPeopleClick: function() {
+        dis.dispatch({ action: 'view_create_chat' });
+    },
+
+    onPeopleMouseEnter: function() {
+        this.setState({ peopleHover: true });
+    },
+
+    onPeopleMouseLeave: function() {
+        this.setState({ peopleHover: false });
+    },
+
+    // Settings events
+    onSettingsClick: function() {
+        dis.dispatch({ action: 'view_user_settings' });
+    },
+
+    onSettingsMouseEnter: function() {
+        this.setState({ settingsHover: true });
+    },
+
+    onSettingsMouseLeave: function() {
+        this.setState({ settingsHover: false });
+    },
+
+    // Get the label/tooltip to show
+    getLabel: function(label, show) {
+        if (show) {
+            var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
+            return <RoomTooltip className="mx_BottomLeftMenu_tooltip" label={label} />;
+        }
+    },
+
    render: function() {
-        const HomeButton = sdk.getComponent('elements.HomeButton');
-        const StartChatButton = sdk.getComponent('elements.StartChatButton');
-        const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton');
-        const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton');
-        const SettingsButton = sdk.getComponent('elements.SettingsButton');
+        var TintableSvg = sdk.getComponent('elements.TintableSvg');

        var homeButton;
        if (this.props.teamToken) {
-            homeButton = <HomeButton tooltip={true} />;
+            homeButton = (
+                <AccessibleButton className="mx_BottomLeftMenu_homePage" onClick={ this.onHomeClick } onMouseEnter={ this.onHomeMouseEnter } onMouseLeave={ this.onHomeMouseLeave } >
+                    <TintableSvg src="img/icons-home.svg" width="25" height="25" />
+                    { this.getLabel("Welcome page", this.state.homeHover) }
+                </AccessibleButton>
+            );
        }

        return (
            <div className="mx_BottomLeftMenu">
                <div className="mx_BottomLeftMenu_options">
                    { homeButton }
-                    <StartChatButton tooltip={true} />
-                    <RoomDirectoryButton tooltip={true} />
-                    <CreateRoomButton tooltip={true} />
-                    <span className="mx_BottomLeftMenu_settings">
-                        <SettingsButton tooltip={true} />
-                    </span>
+                    <AccessibleButton className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
+                        <TintableSvg src="img/icons-people.svg" width="25" height="25" />
+                        { this.getLabel("Start chat", this.state.peopleHover) }
+                    </AccessibleButton>
+                    <AccessibleButton className="mx_BottomLeftMenu_directory" onClick={ this.onDirectoryClick } onMouseEnter={ this.onDirectoryMouseEnter } onMouseLeave={ this.onDirectoryMouseLeave } >
+                        <TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
+                        { this.getLabel("Room directory", this.state.directoryHover) }
+                    </AccessibleButton>
+                    <AccessibleButton className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } >
+                        <TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
+                        { this.getLabel("Create new room", this.state.roomsHover) }
+                    </AccessibleButton>
+                    <AccessibleButton className="mx_BottomLeftMenu_settings" onClick={ this.onSettingsClick } onMouseEnter={ this.onSettingsMouseEnter } onMouseLeave={ this.onSettingsMouseLeave } >
+                        <TintableSvg src="img/icons-settings.svg" width="25" height="25" />
+                        { this.getLabel("Settings", this.state.settingsHover) }
+                    </AccessibleButton>
                </div>
            </div>
        );
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@ -1,5 +1,4 @@
 /*
-Copyright 2017 Vector Creations Ltd
 Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
@ -84,8 +83,6 @@ var RoomSubList = React.createClass({
        incomingCall: React.PropTypes.object,
        onShowMoreRooms: React.PropTypes.func,
        searchFilter: React.PropTypes.string,
-        emptyContent: React.PropTypes.node, // content shown if the list is empty
-        headerItems: React.PropTypes.node, // content shown in the sublist header
    },

    getInitialState: function() {
@ -472,15 +469,16 @@ var RoomSubList = React.createClass({

    render: function() {
        var connectDropTarget = this.props.connectDropTarget;
+        var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget');
        var TruncatedList = sdk.getComponent('elements.TruncatedList');

        var label = this.props.collapsed ? null : this.props.label;

-        let content;
-        if (this.state.sortedList.length == 0) {
-            content = this.props.emptyContent;
-        } else {
-            content = this.makeRoomTiles();
+        //console.log("render: " + JSON.stringify(this.state.sortedList));
+
+        var target;
+        if (this.state.sortedList.length == 0 && this.props.editable) {
+            target = <RoomDropTarget label={ 'Drop here to ' + this.props.verb }/>;
        }

        var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
@ -500,7 +498,8 @@ var RoomSubList = React.createClass({
            if (!this.state.hidden) {
                subList = <TruncatedList className={ classes } truncateAt={this.state.truncateAt}
                                         createOverflowElement={this._createOverflowTile} >
-                                { content }
+                                { target }
+                                { this.makeRoomTiles() }
                          </TruncatedList>;
            }
            else {
@ -522,7 +521,6 @@ var RoomSubList = React.createClass({
                        roomNotificationCount={ this.roomNotificationCount() }
                        onClick={ this.onClick }
                        onHeaderClick={ this.props.onHeaderClick }
-                        headerItems={this.props.headerItems}
                    />
                    { subList }
                </div>
@ -544,7 +542,6 @@ var RoomSubList = React.createClass({
                            roomNotificationCount={ this.roomNotificationCount() }
                            onClick={ this.onClick }
                            onHeaderClick={ this.props.onHeaderClick }
-                            headerItems={this.props.headerItems}
                        />
                     : undefined }
                    { (this.props.showSpinner && !this.state.hidden) ? <Loader /> : undefined }
--- a/src/components/structures/RoomSubListHeader.js
+++ b/src/components/structures/RoomSubListHeader.js
@ -14,11 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React from 'react';
-import classNames from 'classnames';
-import sdk from 'matrix-react-sdk';
-import { formatCount } from 'matrix-react-sdk/lib/utils/FormattingUtils';
-import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var classNames = require('classnames');
+var sdk = require('matrix-react-sdk')
+var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils');
+var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
+var ConstantTimeDispatcher = require('matrix-react-sdk/lib/ConstantTimeDispatcher');

 module.exports = React.createClass({
    displayName: 'RoomSubListHeader',
@ -37,7 +42,6 @@ module.exports = React.createClass({
        hidden: React.PropTypes.bool,
        onClick: React.PropTypes.func,
        onHeaderClick: React.PropTypes.func,
-        headerItems: React.PropTypes.node, // content shown in the sublist header
    },

    getDefaultProps: function() {
@ -59,34 +63,35 @@ module.exports = React.createClass({
    // },

    render: function() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");

-        const subListNotifications = this.props.roomNotificationCount;
-        const subListNotifCount = subListNotifications[0];
-        const subListNotifHighlight = subListNotifications[1];
+        var subListNotifications = this.props.roomNotificationCount;
+        var subListNotifCount = subListNotifications[0];
+        var subListNotifHighlight = subListNotifications[1];

-        const chevronClasses = classNames({
+        var chevronClasses = classNames({
            'mx_RoomSubList_chevron': true,
            'mx_RoomSubList_chevronRight': this.props.hidden,
            'mx_RoomSubList_chevronDown': !this.props.hidden,
        });

-        const badgeClasses = classNames({
+        var badgeClasses = classNames({
            'mx_RoomSubList_badge': true,
            'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
        });

-        let badge;
+        var badge;
        if (subListNotifCount > 0) {
-            badge = <div className={badgeClasses}>{ formatCount(subListNotifCount) }</div>;
-        } else if (subListNotifHighlight) {
+            badge = <div className={badgeClasses}>{ FormattingUtils.formatCount(subListNotifCount) }</div>;
+        }
+        else if (subListNotifHighlight) {
            badge = <div className={badgeClasses}>!</div>;   
        }

        // When collapsed, allow a long hover on the header to show user
        // the full tag name and room count
-        let title;
-        const roomCount = this.props.roomCount;
+        var title;
+        var roomCount = this.props.roomCount;
        if (this.props.collapsed) {
            title = this.props.label;
            if (roomCount !== '') {
@ -94,9 +99,9 @@ module.exports = React.createClass({
            }
        }

-        let incomingCall;
+        var incomingCall;
        if (this.props.isIncomingCallRoom) {
-            const IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
+            var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
            incomingCall = <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={ this.props.incomingCall }/>;
        }

@ -104,7 +109,6 @@ module.exports = React.createClass({
            <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
                <AccessibleButton onClick={ this.props.onClick } className="mx_RoomSubList_label" tabIndex="0">
                    { this.props.collapsed ? '' : this.props.label }
-                    {this.props.headerItems}
                    <div className="mx_RoomSubList_roomCount">{ roomCount }</div>
                    <div className={chevronClasses}></div>
                    { badge }
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@ -27,7 +27,6 @@
@import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss";
@import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
@import "./matrix-react-sdk/views/elements/_RichText.scss";
-@import "./matrix-react-sdk/views/elements/_RoleButton.scss";
@import "./matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss";
@import "./matrix-react-sdk/views/login/_ServerConfig.scss";
@import "./matrix-react-sdk/views/messages/_MEmoteBody.scss";
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss
@ -1,33 +0,0 @@
-/*
-Copyright 2107 Vector Creations 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_RoleButton {
-    margin-left: 4px;
-    margin-right: 4px;
-    cursor: pointer;
-    display: inline-block;
-}
-
-.mx_RoleButton object {
-    pointer-events: none;
-}
-
-.mx_RoleButton_tooltip {
-    display: inline-block;
-    position: relative;
-    top: -25px;
-    left: 6px;
-}
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss
@ -1,6 +1,5 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2107 Vector Creations Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -38,25 +37,3 @@ limitations under the License.
 .mx_RoomList_scrollbar .gm-scrollbar.-vertical {
    z-index: 6;
 }
-
-.mx_RoomList_emptySubListTip {
-    font-size: 13px;
-    margin-left: 18px;
-    margin-right: 18px;
-    margin-top: 8px;
-    margin-bottom: 7px;
-    padding: 5px;
-    border: 1px dashed $accent-color;
-    color: $primary-fg-color;
-    background-color: $droptarget-bg-color;
-    border-radius: 4px;
-}
-
-.mx_RoomList_emptySubListTip .mx_RoleButton {
-    vertical-align: -3px;
-}
-
-.mx_RoomList_headerButtons {
-    position: absolute;
-    right: 60px;
-}
--- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
@ -64,25 +64,43 @@ limitations under the License.
    pointer-events: none;
 }

-.collapsed .mx_RoleButton {
+.mx_LeftPanel .mx_BottomLeftMenu_homePage,
+.mx_LeftPanel .mx_BottomLeftMenu_directory,
+.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
+.mx_LeftPanel .mx_BottomLeftMenu_people,
+.mx_LeftPanel .mx_BottomLeftMenu_settings {
+    display: inline-block;
+    cursor: pointer;
+}
+
+.collapsed .mx_BottomLeftMenu_homePage,
+.collapsed .mx_BottomLeftMenu_directory,
+.collapsed .mx_BottomLeftMenu_createRoom,
+.collapsed .mx_BottomLeftMenu_people,
+.collapsed .mx_BottomLeftMenu_settings {
    margin-right: 0px ! important;
    padding-top: 3px ! important;
    padding-bottom: 3px ! important;
 }

-.mx_BottomLeftMenu_options .mx_RoleButton {
-    margin-left: 0px;
+.mx_LeftPanel .mx_BottomLeftMenu_homePage,
+.mx_LeftPanel .mx_BottomLeftMenu_directory,
+.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
+.mx_LeftPanel .mx_BottomLeftMenu_people {
    margin-right: 10px;
 }

-.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings {
+.mx_LeftPanel .mx_BottomLeftMenu_settings {
    float: right;
 }

-.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton {
-    margin-right: 0px;
-}
-
 .mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
    float: none;
 }
+
+.mx_LeftPanel .mx_BottomLeftMenu_tooltip {
+    display: inline-block;
+    position: relative;
+    top: -25px;
+    left: 6px;
+}