diff --git a/src/components/ui/button-groups.scss b/src/components/ui/button-groups.scss
new file mode 100644
index 0000000..b1515a9
--- /dev/null
+++ b/src/components/ui/button-groups.scss
@@ -0,0 +1,18 @@
+.group {
+ position: relative; // это нужно только чтобы postcss не удалял пустой класс и composes мог его схавать
+}
+
+.horizontalGroup {
+ composes: group;
+}
+
+.item {
+ $borderConfig: 1px solid rgba(#fff, 0.15);
+
+ float: left;
+ border-left: $borderConfig;
+
+ &:last-child {
+ border-right: $borderConfig;
+ }
+}
diff --git a/src/components/userbar/LoggedInPanel.js b/src/components/userbar/LoggedInPanel.js
new file mode 100644
index 0000000..5758e90
--- /dev/null
+++ b/src/components/userbar/LoggedInPanel.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+
+import classNames from 'classnames';
+import { Link } from 'react-router';
+import { intlShape, FormattedMessage as Message } from 'react-intl';
+
+import buttons from 'components/ui/buttons.scss';
+import buttonGroups from 'components/ui/button-groups.scss';
+
+import messages from './LoggedInPanel.messages.js';
+import styles from './loggedInPanel.scss';
+
+import { userShape } from 'components/user/User';
+
+export default class LoggedInPanel extends Component {
+ static displayName = 'LoggedInPanel';
+ static propTypes = {
+ user: userShape
+ };
+
+ static contextTypes = {
+ intl: intlShape.isRequired
+ };
+
+ render() {
+ const { user } = this.props;
+
+ return (
+
+
+
+ {user.username}
+
+
+
+
+
+ );
+ }
+}
diff --git a/src/components/userbar/LoggedInPanel.messages.js b/src/components/userbar/LoggedInPanel.messages.js
new file mode 100644
index 0000000..1149c8f
--- /dev/null
+++ b/src/components/userbar/LoggedInPanel.messages.js
@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+ logout: {
+ id: 'logout',
+ defaultMessage: 'Logout'
+ }
+});
diff --git a/src/components/userbar/Userbar.jsx b/src/components/userbar/Userbar.jsx
index 33283c1..fce3013 100644
--- a/src/components/userbar/Userbar.jsx
+++ b/src/components/userbar/Userbar.jsx
@@ -10,6 +10,8 @@ import styles from './userbar.scss';
import { userShape } from 'components/user/User';
+import LoggedInPanel from './LoggedInPanel';
+
export default class Userbar extends Component {
static displayName = 'Userbar';
static propTypes = {
@@ -28,9 +30,7 @@ export default class Userbar extends Component {
)
: (
-
-
-
+
)
}
diff --git a/src/components/userbar/Userbar.messages.js b/src/components/userbar/Userbar.messages.js
index 4732f14..5974e7d 100644
--- a/src/components/userbar/Userbar.messages.js
+++ b/src/components/userbar/Userbar.messages.js
@@ -4,10 +4,5 @@ export default defineMessages({
register: {
id: 'register',
defaultMessage: 'Join'
- },
-
- logout: {
- id: 'logout',
- defaultMessage: 'Logout'
}
});
diff --git a/src/components/userbar/loggedInPanel.scss b/src/components/userbar/loggedInPanel.scss
new file mode 100644
index 0000000..0febb60
--- /dev/null
+++ b/src/components/userbar/loggedInPanel.scss
@@ -0,0 +1,19 @@
+
+.userIcon {
+ composes: user from 'components/ui/icons.scss';
+
+ position: relative;
+ bottom: 2px;
+
+ padding-right: 5px;
+}
+
+.userName {
+
+}
+
+.logoutIcon {
+ composes: exit from 'components/ui/icons.scss';
+
+ color: #cdcdcd;
+}
diff --git a/src/icons/webfont/exit.svg b/src/icons/webfont/exit.svg
new file mode 100644
index 0000000..60e18da
--- /dev/null
+++ b/src/icons/webfont/exit.svg
@@ -0,0 +1,5 @@
+
+
+