ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-12-27 15:30:37 +05:30
Code Issues Packages Projects Releases Wiki Activity

Довёрстаны стили для переключателей аккаунтов

Browse Source 
Изменены цвета для чёрной кнопки
Образован стиль для светлой кнопки
This commit is contained in:
ErickSkrauch 2016-11-06 17:19:52 +03:00
parent 31538efa69
commit e48fca63b9
12 changed files with 295 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/accounts/AccountSwitcher.jsx
View File

@ -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 ? (
<div className={styles.item}>
<div className={styles.accountIcon}></div>
<div className={classNames(
styles.accountIcon,
styles.activeAccountIcon,
styles.accountIcon1
)}></div>
<div className={styles.activeAccountInfo}>
<div className={styles.activeAccountUsername}>
{accounts.active.username}
</div>
<div className={styles.activeAccountEmail}>
<div className={classNames(styles.accountEmail, styles.activeAccountEmail)}>
{accounts.active.email}
</div>
<div className={styles.links}>
@ -83,30 +88,47 @@ export default class AccountSwitcher extends Component {
</div>
</div>
) : null}
{available.map((account) => (
<div className={styles.item} key={account.id}>
<div className="account-icon"></div>
<div>
<div>
{account.username}
</div>
<div>
{account.email}
</div>
</div>
{available.map((account, id) => (
<div className={classNames(styles.item, styles.accountSwitchItem)} key={account.id}>
<div className={classNames(
styles.accountIcon,
styles[`accountIcon${id % 7 + (highlightActiveAccount ? 2 : 1)}`]
)}></div>
{allowLogout ? (
<div className={styles.logoutIcon}></div>
) : (
<div className={styles.nextIcon}></div>
)}
<div className={styles.accountInfo}>
<div className={styles.accountUsername}>
{account.username}
</div>
<div className={styles.accountEmail}>
{account.email}
</div>
</div>
</div>
))}
{allowAdd ? (
<div>
<div>
<span className={styles.addAccount}>+</span>
<Message {...messages.addAccount} />
</div>
<Button
color={COLOR_LIGHT}
block
small
className={styles.addAccount}
label={
<Message {...messages.addAccount}>
{(message) =>
<span>
<div className={styles.addIcon} />
{message}
</span>
}
</Message>
}
/>
</div>
) : null}
</div>

263
src/components/accounts/accountSwitcher.scss
View File

@ -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;
}
}

1
src/components/auth/chooseAccount/ChooseAccount.jsx
View File

@ -9,4 +9,3 @@ export default factory({
label: messages.addAccount
}
});

2
src/components/auth/chooseAccount/ChooseAccountBody.jsx
View File

@ -21,7 +21,7 @@ export default class ChooseAccountBody extends BaseAuthBody {
<div>
{this.renderErrors()}
<div>
<div className={styles.description}>
<Message {...messages.description} values={{
appName: <span className={styles.appName}>{client.name}</span>
}} />

17
src/components/auth/chooseAccount/chooseAccount.scss
View File

@ -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 {

2
src/components/langMenu/langMenu.scss
View File

@ -56,7 +56,7 @@
transition: .2s;
&:hover {
background: #f5f5f5;
background: $lightButtonLight;
color: #262626;
}

12
src/components/ui/buttons.scss
View File

@ -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);

4
src/components/ui/colors.scss
View File

@ -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 : (

8
src/components/ui/form/Button.jsx
View File

@ -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 {
<button className={classNames(buttons[color], {
[buttons.block]: block,
[buttons.smallButton]: small
})}
}, className)}
{...props}
>
{label}

6
src/components/ui/index.js
View File

@ -8,6 +8,8 @@ export const COLOR_VIOLET = 'violet';
export const COLOR_LIGHT_VIOLET = 'lightViolet';
export const COLOR_ORANGE = 'orange';
export const COLOR_RED = 'red';
export const COLOR_BLACK = 'black';
export const COLOR_LIGHT = 'light';
export const colors = [
COLOR_GREEN,
@ -16,7 +18,9 @@ export const colors = [
COLOR_VIOLET,
COLOR_LIGHT_VIOLET,
COLOR_ORANGE,
COLOR_RED
COLOR_RED,
COLOR_BLACK,
COLOR_LIGHT
];
export const skins = [SKIN_DARK, SKIN_LIGHT];

2
src/components/userbar/loggedInPanel.scss
View File

@ -41,7 +41,7 @@
.accountSwitcherContainer {
position: absolute;
top: 100%;
right: 0;
right: -2px;
cursor: auto;
display: none;

7
src/icons/webfont/plus.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.2" baseProfile="tiny" id="&#x421;&#x43B;&#x43E;&#x439;_1"
xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="17px" height="19px"
viewBox="0 0 17 19">
<polygon fill="#FFFFFF" points="17,11.93 10.927,11.93 10.927,18 6.073,18 6.073,11.93 0,11.93 0,7.064 6.073,7.064 6.073,1
10.927,1 10.927,7.064 17,7.064 "/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 387 B