mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-09-29 23:07:31 +05:30
Облагорожена вёрстка формы обратной связи.
Часть общих стилей вынесена в компонент Popup Образован базовый (прям ненастоящий) компонент Dropdown
This commit is contained in:
parent
40466189fd
commit
69dc3e3ce8
@ -3,11 +3,12 @@ import React, { Component, PropTypes } from 'react';
|
|||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { FormattedMessage as Message } from 'react-intl';
|
import { FormattedMessage as Message } from 'react-intl';
|
||||||
|
|
||||||
import { Input, TextArea, Button, Form, FormModel } from 'components/ui/form';
|
import { Input, TextArea, Button, Form, FormModel, Dropdown } from 'components/ui/form';
|
||||||
import site from 'services/api/site';
|
import site from 'services/api/site';
|
||||||
import icons from 'components/ui/icons.scss';
|
import icons from 'components/ui/icons.scss';
|
||||||
|
|
||||||
import styles from './contactForm.scss';
|
import styles from './contactForm.scss';
|
||||||
|
import popupStyles from 'components/ui/popup/popup.scss';
|
||||||
import messages from './contactForm.intl.json';
|
import messages from './contactForm.intl.json';
|
||||||
|
|
||||||
export default class ContactForm extends Component {
|
export default class ContactForm extends Component {
|
||||||
@ -25,35 +26,55 @@ export default class ContactForm extends Component {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.contactForm}>
|
<div className={styles.contactForm}>
|
||||||
<div className={styles.header}>
|
<div className={popupStyles.header}>
|
||||||
<h2 className={styles.title}>
|
<h2 className={popupStyles.headerTitle}>
|
||||||
<Message {...messages.title} />
|
<Message {...messages.title} />
|
||||||
</h2>
|
</h2>
|
||||||
<span className={classNames(icons.close, styles.close)} onClick={onClose} />
|
<span className={classNames(icons.close, styles.close)} onClick={onClose} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Form form={form} onSubmit={this.onSubmit}>
|
<Form form={form} onSubmit={this.onSubmit}>
|
||||||
<Input
|
<div className={popupStyles.body}>
|
||||||
{...form.bindField('subject')}
|
<div className={styles.philosophicalThought}>
|
||||||
required
|
<Message {...messages.philosophicalThought} />
|
||||||
label={messages.subject}
|
</div>
|
||||||
skin="light"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Input
|
<div className={styles.formDisclaimer}>
|
||||||
{...form.bindField('email')}
|
<Message {...messages.disclaimer} /><br />
|
||||||
required
|
</div>
|
||||||
label={messages.email}
|
|
||||||
type="email"
|
|
||||||
skin="light"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<TextArea
|
<div className={styles.pairInputRow}>
|
||||||
{...form.bindField('message')}
|
<div className={styles.pairInput}>
|
||||||
required
|
<Input
|
||||||
label={messages.message}
|
{...form.bindField('subject')}
|
||||||
skin="light"
|
required
|
||||||
/>
|
label={messages.subject}
|
||||||
|
skin="light"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.pairInput}>
|
||||||
|
<Input
|
||||||
|
{...form.bindField('email')}
|
||||||
|
required
|
||||||
|
label={messages.email}
|
||||||
|
type="email"
|
||||||
|
skin="light"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.formMargin}>
|
||||||
|
<Dropdown label={messages.whichQuestion} block />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TextArea
|
||||||
|
{...form.bindField('message')}
|
||||||
|
required
|
||||||
|
label={messages.message}
|
||||||
|
skin="light"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className={styles.footer}>
|
<div className={styles.footer}>
|
||||||
<Button label={messages.send} block />
|
<Button label={messages.send} block />
|
||||||
|
@ -1,7 +1,10 @@
|
|||||||
{
|
{
|
||||||
"title": "Contact Us",
|
"title": "Feedback form",
|
||||||
"subject": "Subject",
|
"subject": "Subject",
|
||||||
"email": "E-mail",
|
"email": "E-mail",
|
||||||
"message": "Message",
|
"message": "Message",
|
||||||
"send": "Send"
|
"send": "Send",
|
||||||
|
"philosophicalThought": "Properly formulated question - half of the answer",
|
||||||
|
"disclaimer": "Please formulate your feedback providing as much useful information, as possible to help us understand your problem and solve it",
|
||||||
|
"whichQuestion" : "What are you interested in?"
|
||||||
}
|
}
|
||||||
|
@ -1,31 +1,52 @@
|
|||||||
|
@import '~components/ui/colors.scss';
|
||||||
|
@import '~components/ui/fonts.scss';
|
||||||
|
@import '~components/ui/popup/popup.scss';
|
||||||
|
|
||||||
.contactForm {
|
.contactForm {
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
|
||||||
position: relative;
|
|
||||||
margin: -30px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
padding: 10px 10px 0;
|
|
||||||
border-bottom: 1px solid #D6D6D6;
|
|
||||||
background: #F5F5F5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #444;
|
|
||||||
font-size: 30px;
|
|
||||||
line-height: 68px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
|
display: none;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.philosophicalThought {
|
||||||
|
font-family: $font-family-title;
|
||||||
|
font-size: 19px;
|
||||||
|
color: $green;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formDisclaimer {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 14px;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 400px;
|
||||||
|
margin: 0 auto 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pairInputRow {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pairInput {
|
||||||
|
width: 50%;
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
margin-right: $popupPadding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.formMargin {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
margin: -30px;
|
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
67
src/components/ui/dropdown.scss
Normal file
67
src/components/ui/dropdown.scss
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
@import '~components/ui/colors.scss';
|
||||||
|
@import '~components/ui/fonts.scss';
|
||||||
|
|
||||||
|
$dropdownPadding: 15px;
|
||||||
|
|
||||||
|
@mixin dropdown-theme($themeName, $backgroundColor) {
|
||||||
|
.#{$themeName} {
|
||||||
|
composes: dropdown;
|
||||||
|
|
||||||
|
background-color: $backgroundColor;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: lighter($backgroundColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active { // TODO: +.open, чтобы он был ужатый в раскрытом состоянии
|
||||||
|
background-color: darker($backgroundColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 50px;
|
||||||
|
// 28px - ширина иконки при заданном размере шрифта
|
||||||
|
padding: 0 ($dropdownPadding * 2 + 28px) 0 $dropdownPadding;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
font-family: $font-family-title;
|
||||||
|
color: $defaultButtonTextColor;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 50px;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
transition: background-color 0.25s;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggleIcon {
|
||||||
|
composes: selecter from './icons.scss';
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
right: $dropdownPadding;
|
||||||
|
top: 16px;
|
||||||
|
font-size: 17px;
|
||||||
|
transition: right .3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint
|
||||||
|
|
||||||
|
.dropdown:hover & {
|
||||||
|
right: $dropdownPadding - 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown:active & { // TODO: + .open, смотри коммент выше
|
||||||
|
right: $dropdownPadding + 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include dropdown-theme('green', $green);
|
41
src/components/ui/form/Dropdown.jsx
Normal file
41
src/components/ui/form/Dropdown.jsx
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import React, { PropTypes } from 'react';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
import styles from 'components/ui/dropdown.scss';
|
||||||
|
|
||||||
|
import FormComponent from './FormComponent';
|
||||||
|
|
||||||
|
export default class Dropdown extends FormComponent {
|
||||||
|
static displayName = 'Dropdown';
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
label: PropTypes.oneOfType([
|
||||||
|
PropTypes.shape({
|
||||||
|
id: PropTypes.string
|
||||||
|
}),
|
||||||
|
PropTypes.string
|
||||||
|
]).isRequired,
|
||||||
|
block: PropTypes.bool,
|
||||||
|
color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet'])
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { color = 'green', block } = this.props;
|
||||||
|
|
||||||
|
const props = {
|
||||||
|
...this.props
|
||||||
|
};
|
||||||
|
|
||||||
|
props.label = this.formatMessage(props.label);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classNames(styles[color], {
|
||||||
|
[styles.block]: block
|
||||||
|
})} {...props}>
|
||||||
|
{props.label}
|
||||||
|
<span className={styles.toggleIcon} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@ -4,6 +4,7 @@ import Checkbox from './Checkbox';
|
|||||||
import Button from './Button';
|
import Button from './Button';
|
||||||
import Form from './Form';
|
import Form from './Form';
|
||||||
import FormModel from './FormModel';
|
import FormModel from './FormModel';
|
||||||
|
import Dropdown from './Dropdown';
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Input,
|
Input,
|
||||||
@ -11,5 +12,6 @@ export {
|
|||||||
Button,
|
Button,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Form,
|
Form,
|
||||||
FormModel
|
FormModel,
|
||||||
|
Dropdown
|
||||||
};
|
};
|
||||||
|
@ -30,8 +30,10 @@ export class PopupStack extends Component {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.overlay} key={popup.type + index}>
|
<div className={styles.overlay} key={popup.type + index}>
|
||||||
<div className={styles.popup}>
|
<div className={styles.popupWrapper}>
|
||||||
<Popup {...props} />
|
<div className={styles.popup}>
|
||||||
|
<Popup {...props} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -1,3 +1,8 @@
|
|||||||
|
@import '~components/ui/colors.scss';
|
||||||
|
@import '~components/ui/fonts.scss';
|
||||||
|
|
||||||
|
$popupPadding: 20px;
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -7,7 +12,7 @@
|
|||||||
|
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
|
|
||||||
background: rgba(255, 255, 255, 0.8);
|
background: rgba(#fff, 0.8);
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@ -24,18 +29,27 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup {
|
.popupWrapper {
|
||||||
|
$padding: 20px;
|
||||||
|
$maxPopupWidth: 500px;
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: $maxPopupWidth + $padding * 2;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: $padding auto;
|
||||||
|
padding: 0 $padding;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup {
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
width: 400px;
|
|
||||||
max-width: 90%;
|
|
||||||
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 30px;
|
box-shadow: 0 0 10px rgba(#000, 0.2);
|
||||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
|
||||||
|
color: #666;
|
||||||
|
|
||||||
:invalid {
|
:invalid {
|
||||||
button {
|
button {
|
||||||
@ -44,3 +58,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: $light;
|
||||||
|
padding: 15px $popupPadding;
|
||||||
|
border-bottom: 1px solid #dedede;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerTitle {
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: $font-family-title;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
padding: $popupPadding;
|
||||||
|
}
|
||||||
|
@ -63,11 +63,14 @@
|
|||||||
"components.auth.resendActivation.sendNewEmail": "Send new E-mail",
|
"components.auth.resendActivation.sendNewEmail": "Send new E-mail",
|
||||||
"components.auth.resendActivation.specifyYourEmail": "Please, enter an E-mail you've registered with and we will send you new activation code.",
|
"components.auth.resendActivation.specifyYourEmail": "Please, enter an E-mail you've registered with and we will send you new activation code.",
|
||||||
"components.auth.resendActivation.title": "Did not received an E-mail",
|
"components.auth.resendActivation.title": "Did not received an E-mail",
|
||||||
|
"components.contact.disclaimer": "Please formulate your feedback providing as much useful information, as possible to help us understand your problem and solve it",
|
||||||
"components.contact.email": "E-mail",
|
"components.contact.email": "E-mail",
|
||||||
"components.contact.message": "Message",
|
"components.contact.message": "Message",
|
||||||
|
"components.contact.philosophicalThought": "Properly formulated question - half of the answer",
|
||||||
"components.contact.send": "Send",
|
"components.contact.send": "Send",
|
||||||
"components.contact.subject": "Subject",
|
"components.contact.subject": "Subject",
|
||||||
"components.contact.title": "Contact Us",
|
"components.contact.title": "Feedback form",
|
||||||
|
"components.contact.whichQuestion": "What are you interested in?",
|
||||||
"components.footerMenu.contactUs": "Contact Us",
|
"components.footerMenu.contactUs": "Contact Us",
|
||||||
"components.footerMenu.rules": "Rules",
|
"components.footerMenu.rules": "Rules",
|
||||||
"components.langMenu.siteLanguage": "Site language",
|
"components.langMenu.siteLanguage": "Site language",
|
||||||
|
@ -63,11 +63,14 @@
|
|||||||
"components.auth.resendActivation.sendNewEmail": "Отправить новое письмо",
|
"components.auth.resendActivation.sendNewEmail": "Отправить новое письмо",
|
||||||
"components.auth.resendActivation.specifyYourEmail": "Укажите здесь ваш регистрационный E-mail адрес и мы вышлем на него новое письмо с кодом активации аккаунта",
|
"components.auth.resendActivation.specifyYourEmail": "Укажите здесь ваш регистрационный E-mail адрес и мы вышлем на него новое письмо с кодом активации аккаунта",
|
||||||
"components.auth.resendActivation.title": "Не получил письмо",
|
"components.auth.resendActivation.title": "Не получил письмо",
|
||||||
|
"components.contact.disclaimer": "Пожалуйста, формируйте свои обращения, предоставляя максимум полезной информации, чтобы мы могли как можно быстрее понять вашу проблему и решить её",
|
||||||
"components.contact.email": "E-mail",
|
"components.contact.email": "E-mail",
|
||||||
"components.contact.message": "Сообщение",
|
"components.contact.message": "Сообщение",
|
||||||
|
"components.contact.philosophicalThought": "Правильно сформулированный вопрос - половина ответа",
|
||||||
"components.contact.send": "Отправить",
|
"components.contact.send": "Отправить",
|
||||||
"components.contact.subject": "Тема",
|
"components.contact.subject": "Тема",
|
||||||
"components.contact.title": "Обратная связь",
|
"components.contact.title": "Форма обратной связи",
|
||||||
|
"components.contact.whichQuestion": "По каком вопросу?",
|
||||||
"components.footerMenu.contactUs": "Обратная связь",
|
"components.footerMenu.contactUs": "Обратная связь",
|
||||||
"components.footerMenu.rules": "Правила сайта",
|
"components.footerMenu.rules": "Правила сайта",
|
||||||
"components.langMenu.siteLanguage": "Язык сайта",
|
"components.langMenu.siteLanguage": "Язык сайта",
|
||||||
|
16
src/icons/webfont/selecter.svg
Normal file
16
src/icons/webfont/selecter.svg
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
id="selecter"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
x="0px"
|
||||||
|
y="0px"
|
||||||
|
viewBox="-291 389 28 17"
|
||||||
|
style="enable-background:new -291 389 28 17;"
|
||||||
|
xml:space="preserve"
|
||||||
|
>
|
||||||
|
<rect x="-291" y="389" class="st0" width="28" height="3"/>
|
||||||
|
<rect x="-291" y="396" class="st0" width="28" height="3"/>
|
||||||
|
<rect x="-291" y="403" class="st0" width="28" height="3"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 492 B |
Loading…
Reference in New Issue
Block a user