From e48fca63b90c53bbe390e5ab0cb050b3f13233c5 Mon Sep 17 00:00:00 2001 From: ErickSkrauch Date: Sun, 6 Nov 2016 17:19:52 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B2=D1=91=D1=80=D1=81=D1=82?= =?UTF-8?q?=D0=B0=D0=BD=D1=8B=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=B4?= =?UTF-8?q?=D0=BB=D1=8F=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87?= =?UTF-8?q?=D0=B0=D1=82=D0=B5=D0=BB=D0=B5=D0=B9=20=D0=B0=D0=BA=D0=BA=D0=B0?= =?UTF-8?q?=D1=83=D0=BD=D1=82=D0=BE=D0=B2=20=D0=98=D0=B7=D0=BC=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20=D1=86=D0=B2=D0=B5=D1=82=D0=B0=20=D0=B4?= =?UTF-8?q?=D0=BB=D1=8F=20=D1=87=D1=91=D1=80=D0=BD=D0=BE=D0=B9=20=D0=BA?= =?UTF-8?q?=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20=D0=9E=D0=B1=D1=80=D0=B0=D0=B7?= =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BD=20=D1=81=D1=82=D0=B8=D0=BB=D1=8C=20?= =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D1=81=D0=B2=D0=B5=D1=82=D0=BB=D0=BE=D0=B9?= =?UTF-8?q?=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/accounts/AccountSwitcher.jsx | 66 +++-- src/components/accounts/accountSwitcher.scss | 263 ++++++++++++++---- .../auth/chooseAccount/ChooseAccount.jsx | 1 - .../auth/chooseAccount/ChooseAccountBody.jsx | 2 +- .../auth/chooseAccount/chooseAccount.scss | 17 ++ src/components/langMenu/langMenu.scss | 2 +- src/components/ui/buttons.scss | 12 +- src/components/ui/colors.scss | 4 +- src/components/ui/form/Button.jsx | 8 +- src/components/ui/index.js | 6 +- src/components/userbar/loggedInPanel.scss | 2 +- src/icons/webfont/plus.svg | 7 + 12 files changed, 295 insertions(+), 95 deletions(-) create mode 100644 src/icons/webfont/plus.svg diff --git a/src/components/accounts/AccountSwitcher.jsx b/src/components/accounts/AccountSwitcher.jsx index 30cde92..d700bc2 100644 --- a/src/components/accounts/AccountSwitcher.jsx +++ b/src/components/accounts/AccountSwitcher.jsx @@ -3,7 +3,8 @@ import React, { Component, PropTypes } from 'react'; import classNames from 'classnames'; import { FormattedMessage as Message } from 'react-intl'; -import { skins, SKIN_DARK } from 'components/ui'; +import { skins, SKIN_DARK, COLOR_LIGHT } from 'components/ui'; +import { Button } from 'components/ui/form'; import styles from './accountSwitcher.scss'; import messages from './AccountSwitcher.intl.json'; @@ -12,9 +13,9 @@ 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'}, + {id: 8, username: 'ErickSkrauch', email: 'erickskrauch@yandex.ru'}, + {id: 9, username: 'Ely-en', email: 'ely-en@ely.by'}, + {id: 10, username: 'Ely-by', email: 'ely-pt@ely.by'}, ] }; @@ -31,7 +32,7 @@ export default class AccountSwitcher extends Component { })) }), skin: PropTypes.oneOf(skins), - hightLightActiveAccount: PropTypes.bool, // whether active account should be expanded and shown on the top + highlightActiveAccount: PropTypes.bool, // whether active account should be expanded and shown on the top allowLogout: PropTypes.bool, // whether to show logout icon near each account allowAdd: PropTypes.bool // whether to show add account button }; @@ -60,12 +61,16 @@ export default class AccountSwitcher extends Component { )}> {highlightActiveAccount ? (
-
+
{accounts.active.username}
-
+
{accounts.active.email}
@@ -83,30 +88,47 @@ export default class AccountSwitcher extends Component {
) : null} - {available.map((account) => ( -
-
-
-
- {account.username} -
-
- {account.email} -
-
+ {available.map((account, id) => ( +
+
+ {allowLogout ? (
) : (
)} + +
+
+ {account.username} +
+
+ {account.email} +
+
))} {allowAdd ? (
-
- + - -
+
diff --git a/src/components/accounts/accountSwitcher.scss b/src/components/accounts/accountSwitcher.scss index 455ea61..6cd797a 100644 --- a/src/components/accounts/accountSwitcher.scss +++ b/src/components/accounts/accountSwitcher.scss @@ -1,82 +1,228 @@ @import '~components/ui/colors.scss'; @import '~components/ui/fonts.scss'; -$borderColor: #EEE; +// TODO: эту константу можно заимпортить из panel.scss, но это приводит к странным ошибкам +//@import '~components/ui/panel.scss'; +$bodyLeftRightPadding: 20px; + +$lightBorderColor: #EEE; .accountSwitcher { - background: #fff; - color: #444; text-align: left; - width: 205px; +} - $border: 1px solid $borderColor; - border-left: $border; - border-right: $border; +.accountInfo { + +} + +.accountUsername { + line-height: normal; // button style override +} + +.accountEmail { + line-height: normal; // button style override + font-family: $font-family-base; // button style override } .lightAccountSwitcher { background: #fff; + color: #444; + width: 205px; + + $border: 1px solid $lightBorderColor; + border-left: $border; + border-right: $border; + border-bottom: 7px solid darker($green); + + .item { + padding: 15px; + border-bottom: 1px solid $lightBorderColor; + } + + .accountSwitchItem { + cursor: pointer; + transition: .25s; + + &:hover { + background-color: $lightButtonLight; + } + + &:active { + background-color: $lightButtonDark; + } + } + + .accountIcon { + font-size: 27px; + width: 20px; + text-align: center; + } + + .activeAccountIcon { + font-size: 40px; + } + + .activeAccountInfo { + margin-left: 29px; + } + + .activeAccountUsername { + font-size: 20px; + line-height: normal; // button style override + color: $green; + } + + .activeAccountEmail { + } + + .links { + margin-top: 6px; + } + + .link { + line-height: normal; // button style override + font-size: 12px; // button style override + margin-bottom: 3px; + + &:last-of-type { + margin-bottom: 0; + } + + a { + color: #666; + font-size: 12px; + border-bottom: 1px dotted #666; + text-decoration: none; + transition: .25s; + + &:hover { + border-bottom-color: #aaa; + color: #777; + } + } + } + + .accountInfo { + margin-left: 29px; + margin-right: 25px; + } + + .accountUsername { + color: #666; + font-size: 14px; + } + + .accountEmail { + font-size: 10px; + color: #999; + } + + .addAccount { + } } .darkAccountSwitcher { background: $black; -} -.item { - padding: 15px; - border-bottom: 1px solid $borderColor; + $border: 1px solid lighter($black); + + .item { + padding: 15px 20px; + border-top: 1px solid lighter($black); + transition: .25s; + cursor: pointer; + + &:hover { + background-color: lighter($black); + } + + &:active { + background-color: darker($black); + } + + &:last-of-type { + border-bottom: $border; + } + } + + .accountIcon { + font-size: 35px; + } + + .accountInfo { + margin-left: 30px; + margin-right: 26px; + } + + .accountUsername { + color: #fff; + } + + .accountEmail { + color: #666; + font-size: 12px; + } } .accountIcon { composes: minecraft-character from 'components/ui/icons.scss'; - font-size: 40px; - color: $green; float: left; -} -.activeAccountInfo { - margin-left: 29px; -} - -.activeAccountUsername { - font-size: 20px; - line-height: normal; // button style override - color: $green; -} - -.activeAccountEmail { - font-size: 10px; - color: #999; - - line-height: normal; // button style override - font-family: $font-family-base; // button style override -} - -.links { - margin-top: 6px; -} - -.link { - line-height: normal; // button style override - font-size: 12px; // button style override - margin-bottom: 3px; - - &:last-of-type { - margin-bottom: 0; + &1 { + color: $green; } - a { - color: #666; - font-size: 12px; - border-bottom: 1px dotted #666; - text-decoration: none; - transition: .25s; + &2 { + color: $blue; + } - &:hover { - border-bottom-color: #777; - color: #777; - } + &3 { + color: $violet; + } + + &4 { + color: $orange; + } + + &5 { + color: $dark_blue; + } + + &6 { + color: $light_violet; + } + + &7 { + color: $red; + } +} + +.addIcon { + composes: plus from 'components/ui/icons.scss'; + + color: $green; + position: relative; + bottom: 1px; + margin-right: 3px; +} + +.nextIcon { + composes: arrowRight from 'components/ui/icons.scss'; + + position: relative; + float: right; + + font-size: 24px; + color: #4E4E4E; + line-height: 35px; + left: 0; + + transition: color .25s, left .5s; + + .item:hover & { + color: #aaa; + left: 5px; } } @@ -84,10 +230,11 @@ $borderColor: #EEE; composes: exit from 'components/ui/icons.scss'; color: #cdcdcd; -} + float: right; + line-height: 27px; + transition: .25s; -.nextIcon { - composes: arrowRight from 'components/ui/icons.scss'; - - color: #cdcdcd; + &:hover { + color: #777; + } } diff --git a/src/components/auth/chooseAccount/ChooseAccount.jsx b/src/components/auth/chooseAccount/ChooseAccount.jsx index 1c95553..b220f7d 100644 --- a/src/components/auth/chooseAccount/ChooseAccount.jsx +++ b/src/components/auth/chooseAccount/ChooseAccount.jsx @@ -9,4 +9,3 @@ export default factory({ label: messages.addAccount } }); - diff --git a/src/components/auth/chooseAccount/ChooseAccountBody.jsx b/src/components/auth/chooseAccount/ChooseAccountBody.jsx index 53415dd..a09f95d 100644 --- a/src/components/auth/chooseAccount/ChooseAccountBody.jsx +++ b/src/components/auth/chooseAccount/ChooseAccountBody.jsx @@ -21,7 +21,7 @@ export default class ChooseAccountBody extends BaseAuthBody {
{this.renderErrors()} -
+
{client.name} }} /> diff --git a/src/components/auth/chooseAccount/chooseAccount.scss b/src/components/auth/chooseAccount/chooseAccount.scss index 7c652e5..be1319a 100644 --- a/src/components/auth/chooseAccount/chooseAccount.scss +++ b/src/components/auth/chooseAccount/chooseAccount.scss @@ -1,4 +1,21 @@ +//@import '~components/ui/panel.scss'; +// TODO: эту константу можно заимпортить из panel.scss, но это приводит к странным ошибкам +$bodyLeftRightPadding: 20px; + +//@import '~components/ui/fonts.scss'; +// TODO: эту константу можно заимпортить из fonts.scss, но это приводит к странным ошибкам +$font-family-title: 'Roboto Condensed', Arial, sans-serif; + .accountSwitcherContainer { + margin-left: -$bodyLeftRightPadding; + margin-right: -$bodyLeftRightPadding; +} + +.description { + font-family: $font-family-title; + margin: 5px 0 19px; + line-height: 1.4; + font-size: 16px; } .appName { diff --git a/src/components/langMenu/langMenu.scss b/src/components/langMenu/langMenu.scss index 45321d8..4f37506 100644 --- a/src/components/langMenu/langMenu.scss +++ b/src/components/langMenu/langMenu.scss @@ -56,7 +56,7 @@ transition: .2s; &:hover { - background: #f5f5f5; + background: $lightButtonLight; color: #262626; } diff --git a/src/components/ui/buttons.scss b/src/components/ui/buttons.scss index 7f4b925..e68b3e0 100644 --- a/src/components/ui/buttons.scss +++ b/src/components/ui/buttons.scss @@ -42,7 +42,6 @@ } } -// TODO: не уверен на счёт этого класса. Мб может лучше добавить это как класс-модификатор для .button? .smallButton { composes: button; @@ -52,20 +51,23 @@ line-height: 30px; } -.black { +.light { composes: button; - background-color: $black; + background-color: #fff; + color: #444; &:hover { - background-color: $black-button-light; + color: #262626; + background-color: $lightButtonLight; } &:active { - background-color: $black-button-dark; + background-color: $lightButtonDark; } } +@include button-theme('black', $black); @include button-theme('blue', $blue); @include button-theme('green', $green); @include button-theme('orange', $orange); diff --git a/src/components/ui/colors.scss b/src/components/ui/colors.scss index 8d2cca5..1020f0b 100644 --- a/src/components/ui/colors.scss +++ b/src/components/ui/colors.scss @@ -10,8 +10,8 @@ $light: #ebe8e1; $black: #232323; $defaultButtonTextColor : #fff; -$black-button-light: #392f2c; -$black-button-dark: #1e0b11; +$lightButtonLight: #f5f5f5; +$lightButtonDark: #f5f5f5; // TODO: найти оптимальный цвет для прожатого состояния @function darker($color) { $elyColorsMap : ( diff --git a/src/components/ui/form/Button.jsx b/src/components/ui/form/Button.jsx index 449d30a..245ca24 100644 --- a/src/components/ui/form/Button.jsx +++ b/src/components/ui/form/Button.jsx @@ -19,7 +19,9 @@ export default class Button extends FormComponent { PropTypes.string ]).isRequired, block: PropTypes.bool, - color: PropTypes.oneOf(colors) + small: PropTypes.bool, + color: PropTypes.oneOf(colors), + className: PropTypes.string }; static defaultProps = { @@ -27,7 +29,7 @@ export default class Button extends FormComponent { }; render() { - const { color, block, small } = this.props; + const { color, block, small, className } = this.props; const props = omit(this.props, Object.keys(Button.propTypes)); @@ -37,7 +39,7 @@ export default class Button extends FormComponent {