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

Облагорожена вёрстка формы обратной связи.

Browse Source 
Часть общих стилей вынесена в компонент Popup
Образован базовый (прям ненастоящий) компонент Dropdown
This commit is contained in:
ErickSkrauch 2016-05-26 00:37:18 +03:00
parent 40466189fd
commit 69dc3e3ce8
11 changed files with 264 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/contact/ContactForm.jsx
View File

@ -3,11 +3,12 @@ import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
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 icons from 'components/ui/icons.scss';
import styles from './contactForm.scss';
import popupStyles from 'components/ui/popup/popup.scss';
import messages from './contactForm.intl.json';
export default class ContactForm extends Component {
@ -25,21 +26,34 @@ export default class ContactForm extends Component {
return (
<div className={styles.contactForm}>
<div className={styles.header}>
<h2 className={styles.title}>
<div className={popupStyles.header}>
<h2 className={popupStyles.headerTitle}>
<Message {...messages.title} />
</h2>
<span className={classNames(icons.close, styles.close)} onClick={onClose} />
</div>
<Form form={form} onSubmit={this.onSubmit}>
<div className={popupStyles.body}>
<div className={styles.philosophicalThought}>
<Message {...messages.philosophicalThought} />
</div>
<div className={styles.formDisclaimer}>
<Message {...messages.disclaimer} /><br />
</div>
<div className={styles.pairInputRow}>
<div className={styles.pairInput}>
<Input
{...form.bindField('subject')}
required
label={messages.subject}
skin="light"
/>
</div>
<div className={styles.pairInput}>
<Input
{...form.bindField('email')}
required
@ -47,6 +61,12 @@ export default class ContactForm extends Component {
type="email"
skin="light"
/>
</div>
</div>
<div className={styles.formMargin}>
<Dropdown label={messages.whichQuestion} block />
</div>
<TextArea
{...form.bindField('message')}
@ -54,6 +74,7 @@ export default class ContactForm extends Component {
label={messages.message}
skin="light"
/>
</div>
<div className={styles.footer}>
<Button label={messages.send} block />

7
src/components/contact/contactForm.intl.json
View File

@ -1,7 +1,10 @@
{
"title": "Contact Us",
"title": "Feedback form",
"subject": "Subject",
"email": "E-mail",
"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?"
}

57
src/components/contact/contactForm.scss
View File

@ -1,31 +1,52 @@
@import '~components/ui/colors.scss';
@import '~components/ui/fonts.scss';
@import '~components/ui/popup/popup.scss';
.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 {
display: none;
position: absolute;
right: 10px;
top: 10px;
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 {
margin: -30px;
margin-top: 0;
}

67
src/components/ui/dropdown.scss Normal file
View 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
View 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
src/components/ui/form/index.js
View File

@ -4,6 +4,7 @@ import Checkbox from './Checkbox';
import Button from './Button';
import Form from './Form';
import FormModel from './FormModel';
import Dropdown from './Dropdown';
export {
Input,
@ -11,5 +12,6 @@ export {
Button,
Checkbox,
Form,
FormModel
FormModel,
Dropdown
};

2
src/components/ui/popup/PopupStack.jsx
View File

@ -30,10 +30,12 @@ export class PopupStack extends Component {
return (
<div className={styles.overlay} key={popup.type + index}>
<div className={styles.popupWrapper}>
<div className={styles.popup}>
<Popup {...props} />
</div>
</div>
</div>
);
})}
</div>

46
src/components/ui/popup/popup.scss
View File

@ -1,3 +1,8 @@
@import '~components/ui/colors.scss';
@import '~components/ui/fonts.scss';
$popupPadding: 20px;
.overlay {
position: fixed;
top: 0;
@ -7,7 +12,7 @@
z-index: 200;
background: rgba(255, 255, 255, 0.8);
background: rgba(#fff, 0.8);
text-align: center;
white-space: nowrap;
@ -24,18 +29,27 @@
}
}
.popup {
.popupWrapper {
$padding: 20px;
$maxPopupWidth: 500px;
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;
text-align: left;
vertical-align: middle;
width: 400px;
max-width: 90%;
background: #fff;
padding: 30px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(#000, 0.2);
color: #666;
:invalid {
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;
}

5
src/i18n/en.json
View File

@ -63,11 +63,14 @@
"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.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.message": "Message",
"components.contact.philosophicalThought": "Properly formulated question - half of the answer",
"components.contact.send": "Send",
"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.rules": "Rules",
"components.langMenu.siteLanguage": "Site language",

5
src/i18n/ru.json
View File

@ -63,11 +63,14 @@
"components.auth.resendActivation.sendNewEmail": "Отправить новое письмо",
"components.auth.resendActivation.specifyYourEmail": "Укажите здесь ваш регистрационный E-mail адрес и мы вышлем на него новое письмо с кодом активации аккаунта",
"components.auth.resendActivation.title": "Не получил письмо",
"components.contact.disclaimer": "Пожалуйста, формируйте свои обращения, предоставляя максимум полезной информации, чтобы мы могли как можно быстрее понять вашу проблему и решить её",
"components.contact.email": "E-mail",
"components.contact.message": "Сообщение",
"components.contact.philosophicalThought": "Правильно сформулированный вопрос - половина ответа",
"components.contact.send": "Отправить",
"components.contact.subject": "Тема",
"components.contact.title": "Обратная связь",
"components.contact.title": "Форма обратной связи",
"components.contact.whichQuestion": "По каком вопросу?",
"components.footerMenu.contactUs": "Обратная связь",
"components.footerMenu.rules": "Правила сайта",
"components.langMenu.siteLanguage": "Язык сайта",

16
src/icons/webfont/selecter.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 492 B