#48: create dummy account switcher component

src/components/accounts/AccountSwitcher.jsx

@@ -0,0 +1,77 @@
+import React, { Component, PropTypes } from 'react';
+
+import styles from './accountSwitcher.scss';
+
+const accounts = {
+    active: {id: 7, username: 'SleepWalker', email: 'danilenkos@auroraglobal.com'},
+    available: [
+        {id: 7, username: 'SleepWalker', email: 'danilenkos@auroraglobal.com'},
+        {id: 8, username: 'ErickSkrauch', email: 'erick@foo.bar'},
+        {id: 9, username: 'Ely-en', email: 'ely@-enfoo.bar'},
+        {id: 10, username: 'Ely-by', email: 'ely-by@foo.bar'},
+    ]
+};
+
+export default class AccountSwitcher extends Component {
+    render() {
+        return (
+            <div className={styles.accountSwitcher}>
+                <div>
+                    <div className="account-icon"></div>
+                    <div>
+                        <div>
+                            {accounts.active.username}
+                        </div>
+                        <div>
+                            {accounts.active.email}
+                        </div>
+                        <a href="">
+                            Перейти в профиль Ely.by
+                        </a>
+                        <a href="">
+                            Выйти
+                        </a>
+                    </div>
+                </div>
+                {accounts.available.map((account) => (
+                    <div key={account.id}>
+                        <div className="account-icon"></div>
+                        <div>
+                            <div>
+                                {account.username}
+                            </div>
+                            <div>
+                                {account.email}
+                            </div>
+                        </div>
+                        <div className={styles.logoutIcon}></div>
+                    </div>
+                ))}
+                <div>
+                    <div>
+                        <span>+</span>
+                        Добавить аккаунт
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+/*
+import { intlShape } from 'react-intl';
+
+import messages from './LoggedInPanel.intl.json';
+
+
+    static contextTypes = {
+        intl: intlShape.isRequired
+    };
+                <button
+                    onClick={this.onLogout}
+                    className={classNames(buttons.green, buttonGroups.item)}
+                    title={this.context.intl.formatMessage(messages.logout)}
+                >
+                    <span className={styles.logoutIcon} />
+                </button>
+ */

src/components/accounts/accountSwitcher.scss

@@ -0,0 +1,10 @@
+.accountSwitcher {
+    background: #fff;
+    color: #444;
+}
+
+.logoutIcon {
+    composes: exit from 'components/ui/icons.scss';
+
+    color: #cdcdcd;
+}

src/components/accounts/index.js

@@ -0,0 +1 @@
+export AccountSwitcher from './AccountSwitcher';

src/components/ui/button-groups.scss

@@ -3,6 +3,9 @@
 }
 
 .item {
+    // TODO: in some cases we do not need overflow hidden
+    // probably, it is better to create a separate class for children, that will
+    // enable overflow hidden and ellipsis
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;

src/components/userbar/LoggedInPanel.js

@@ -1,51 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-
-import classNames from 'classnames';
-import { Link } from 'react-router';
-import { intlShape } from 'react-intl';
-
-import buttons from 'components/ui/buttons.scss';
-import buttonGroups from 'components/ui/button-groups.scss';
-
-import messages from './LoggedInPanel.intl.json';
-import styles from './loggedInPanel.scss';
-
-import { userShape } from 'components/user/User';
-
-export default class LoggedInPanel extends Component {
-    static displayName = 'LoggedInPanel';
-    static propTypes = {
-        user: userShape,
-        onLogout: PropTypes.func.isRequired
-    };
-
-    static contextTypes = {
-        intl: intlShape.isRequired
-    };
-
-    render() {
-        const { user } = this.props;
-
-        return (
-            <div className={classNames(buttonGroups.horizontalGroup, styles.loggedInPanel)}>
-                <Link to="/" className={classNames(buttons.green, buttonGroups.item)}>
-                    <span className={styles.userIcon} />
-                    <span className={styles.userName}>{user.username}</span>
-                </Link>
-                <button
-                    onClick={this.onLogout}
-                    className={classNames(buttons.green, buttonGroups.item)}
-                    title={this.context.intl.formatMessage(messages.logout)}
-                >
-                    <span className={styles.logoutIcon} />
-                </button>
-            </div>
-        );
-    }
-
-    onLogout = (event) => {
-        event.preventDefault();
-
-        this.props.onLogout();
-    };
-}

src/components/userbar/LoggedInPanel.jsx

@@ -0,0 +1,43 @@
+import React, { Component, PropTypes } from 'react';
+
+import classNames from 'classnames';
+
+import buttons from 'components/ui/buttons.scss';
+import { AccountSwitcher } from 'components/accounts';
+
+import styles from './loggedInPanel.scss';
+
+import { userShape } from 'components/user/User';
+
+export default class LoggedInPanel extends Component {
+    static displayName = 'LoggedInPanel';
+    static propTypes = {
+        user: userShape,
+        onLogout: PropTypes.func.isRequired
+    };
+
+    render() {
+        const { user } = this.props;
+
+        return (
+            <div className={classNames(styles.loggedInPanel)}>
+                {/* this button must be a div, because some browsers force overflow hidden on button elements */}
+                <div className={classNames(buttons.green, styles.activeAccount)}>
+                    <span className={styles.userIcon} />
+                    <span className={styles.userName}>{user.username}</span>
+                    <span className={styles.expandIcon} />
+
+                    <div className={classNames(styles.accountSwitcherContainer)}>
+                        <AccountSwitcher />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    onLogout = (event) => {
+        event.preventDefault();
+
+        this.props.onLogout();
+    };
+}

src/components/userbar/loggedInPanel.scss

@@ -1,5 +1,14 @@
 .loggedInPanel {
-    justify-content: flex-end;
+}
+
+.activeAccount {
+    position: relative;
+
+    &:hover {
+        .accountSwitcherContainer {
+            display: block;
+        }
+    }
 }
 
 .userIcon {
@@ -11,12 +20,22 @@
     padding-right: 5px;
 }
 
+.expandIcon {
+    composes: arrow from 'components/ui/icons.scss';
+
+    margin-left: 5px;
+    font-size: 12px;
+}
+
 .userName {
 
 }
 
-.logoutIcon {
-    composes: exit from 'components/ui/icons.scss';
+.accountSwitcherContainer {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    cursor: auto;
 
-    color: #cdcdcd;
+    display: none;
 }