From 69dc3e3ce839b7e2d6802ddc18b3572b104115fb Mon Sep 17 00:00:00 2001
From: ErickSkrauch <erickskrauch@yandex.ru>
Date: Thu, 26 May 2016 00:37:18 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BB=D0=B0=D0=B3=D0=BE=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B6=D0=B5=D0=BD=D0=B0=20=D0=B2=D1=91=D1=80=D1=81=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20=D0=BE=D0=B1?=
 =?UTF-8?q?=D1=80=D0=B0=D1=82=D0=BD=D0=BE=D0=B9=20=D1=81=D0=B2=D1=8F=D0=B7?=
 =?UTF-8?q?=D0=B8.=20=D0=A7=D0=B0=D1=81=D1=82=D1=8C=20=D0=BE=D0=B1=D1=89?=
 =?UTF-8?q?=D0=B8=D1=85=20=D1=81=D1=82=D0=B8=D0=BB=D0=B5=D0=B9=20=D0=B2?=
 =?UTF-8?q?=D1=8B=D0=BD=D0=B5=D1=81=D0=B5=D0=BD=D0=B0=20=D0=B2=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=20Popup=20?=
 =?UTF-8?q?=D0=9E=D0=B1=D1=80=D0=B0=D0=B7=D0=BE=D0=B2=D0=B0=D0=BD=20=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B7=D0=BE=D0=B2=D1=8B=D0=B9=20(=D0=BF=D1=80=D1=8F?=
 =?UTF-8?q?=D0=BC=20=D0=BD=D0=B5=D0=BD=D0=B0=D1=81=D1=82=D0=BE=D1=8F=D1=89?=
 =?UTF-8?q?=D0=B8=D0=B9)=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=20Dropdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/contact/ContactForm.jsx       | 65 ++++++++++++-------
 src/components/contact/contactForm.intl.json |  7 +-
 src/components/contact/contactForm.scss      | 57 +++++++++++------
 src/components/ui/dropdown.scss              | 67 ++++++++++++++++++++
 src/components/ui/form/Dropdown.jsx          | 41 ++++++++++++
 src/components/ui/form/index.js              |  4 +-
 src/components/ui/popup/PopupStack.jsx       |  6 +-
 src/components/ui/popup/popup.scss           | 46 +++++++++++---
 src/i18n/en.json                             |  5 +-
 src/i18n/ru.json                             |  5 +-
 src/icons/webfont/selecter.svg               | 16 +++++
 11 files changed, 264 insertions(+), 55 deletions(-)
 create mode 100644 src/components/ui/dropdown.scss
 create mode 100644 src/components/ui/form/Dropdown.jsx
 create mode 100644 src/icons/webfont/selecter.svg

diff --git a/src/components/contact/ContactForm.jsx b/src/components/contact/ContactForm.jsx
index a710194..e87c3d7 100644
--- a/src/components/contact/ContactForm.jsx
+++ b/src/components/contact/ContactForm.jsx
@@ -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,35 +26,55 @@ 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}>
-                    <Input
-                        {...form.bindField('subject')}
-                        required
-                        label={messages.subject}
-                        skin="light"
-                    />
+                    <div className={popupStyles.body}>
+                        <div className={styles.philosophicalThought}>
+                            <Message {...messages.philosophicalThought} />
+                        </div>
 
-                    <Input
-                        {...form.bindField('email')}
-                        required
-                        label={messages.email}
-                        type="email"
-                        skin="light"
-                    />
+                        <div className={styles.formDisclaimer}>
+                            <Message {...messages.disclaimer} /><br />
+                        </div>
 
-                    <TextArea
-                        {...form.bindField('message')}
-                        required
-                        label={messages.message}
-                        skin="light"
-                    />
+                        <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
+                                    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}>
                         <Button label={messages.send} block />
diff --git a/src/components/contact/contactForm.intl.json b/src/components/contact/contactForm.intl.json
index 3705e6e..42f9a5f 100644
--- a/src/components/contact/contactForm.intl.json
+++ b/src/components/contact/contactForm.intl.json
@@ -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?"
 }
diff --git a/src/components/contact/contactForm.scss b/src/components/contact/contactForm.scss
index 713d93f..adfc8cf 100644
--- a/src/components/contact/contactForm.scss
+++ b/src/components/contact/contactForm.scss
@@ -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;
 }
diff --git a/src/components/ui/dropdown.scss b/src/components/ui/dropdown.scss
new file mode 100644
index 0000000..27ab2cd
--- /dev/null
+++ b/src/components/ui/dropdown.scss
@@ -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);
diff --git a/src/components/ui/form/Dropdown.jsx b/src/components/ui/form/Dropdown.jsx
new file mode 100644
index 0000000..035d7ef
--- /dev/null
+++ b/src/components/ui/form/Dropdown.jsx
@@ -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>
+        );
+    }
+}
diff --git a/src/components/ui/form/index.js b/src/components/ui/form/index.js
index 512d66f..c6e6150 100644
--- a/src/components/ui/form/index.js
+++ b/src/components/ui/form/index.js
@@ -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
 };
diff --git a/src/components/ui/popup/PopupStack.jsx b/src/components/ui/popup/PopupStack.jsx
index 1d72239..db31943 100644
--- a/src/components/ui/popup/PopupStack.jsx
+++ b/src/components/ui/popup/PopupStack.jsx
@@ -30,8 +30,10 @@ export class PopupStack extends Component {
 
                     return (
                         <div className={styles.overlay} key={popup.type + index}>
-                            <div className={styles.popup}>
-                                <Popup {...props} />
+                            <div className={styles.popupWrapper}>
+                                <div className={styles.popup}>
+                                    <Popup {...props} />
+                                </div>
                             </div>
                         </div>
                     );
diff --git a/src/components/ui/popup/popup.scss b/src/components/ui/popup/popup.scss
index 45f3138..efc37e7 100644
--- a/src/components/ui/popup/popup.scss
+++ b/src/components/ui/popup/popup.scss
@@ -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;
+}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e2994ce..006c918 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -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",
diff --git a/src/i18n/ru.json b/src/i18n/ru.json
index 410f978..7a219e4 100644
--- a/src/i18n/ru.json
+++ b/src/i18n/ru.json
@@ -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": "Язык сайта",
diff --git a/src/icons/webfont/selecter.svg b/src/icons/webfont/selecter.svg
new file mode 100644
index 0000000..504f9d0
--- /dev/null
+++ b/src/icons/webfont/selecter.svg
@@ -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>