Create 'Import your contacts' bio action

Improve the layout of bio actions

src/components/bio/actions/import-contacts.js

@@ -0,0 +1,131 @@
+/*
+ This file is a part of libertysoil.org website
+ Copyright (C) 2017  Loki Education (Social Enterprise)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React, { PropTypes } from 'react';
+import isEqual from 'lodash/isEqual';
+import Switch from 'react-toggle-switch';
+import Link from 'react-router/lib/Link';
+
+import { addError } from '../../../actions/messages';
+import Button from '../../button';
+import Modal from '../../sidebar-modal';
+import Card from '../card';
+
+const icon = { icon: 'image', pack: 'fa' };
+
+const SERVICES = [
+  { name: 'gmail', title: 'Gmail', img: '/images/services/gmail.png' },
+  { name: 'yahoo', title: 'Yahoo!', img: '/images/services/yahoo.png' }
+];
+
+export default class ImportContactsAction extends React.Component {
+  static displayName = 'ImportContactsAction';
+
+  static propTypes = {
+    dispatch: PropTypes.func,
+    // eslint-disable-next-line react/no-unused-prop-types
+    triggers: PropTypes.shape({
+      uploadPicture: PropTypes.func,
+      updateUserInfo: PropTypes.func
+    })
+  };
+
+  static defaultProps = {
+    dispatch: () => {}
+  };
+
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      isActive: false,
+      isChecked: false
+    };
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextProps !== this.props || !isEqual(nextState, this.state);
+  }
+
+  handleCardClick = () => {
+    this.setState({ isActive: true });
+  };
+
+  handleModalClose = () => {
+    this.setState({ isActive: false });
+  };
+
+  handleSwitch = () => {
+    this.setState((state) => ({ isChecked: !state.isChecked }));
+  };
+
+  handleSubmit = async () => {
+    try {
+      this.handleModalClose();
+    } catch (e) {
+      this.props.dispatch(addError(e.message));
+    }
+  };
+
+  render() {
+    return (
+      <Card
+        className="bio__card--bg_1"
+        icon={icon}
+        title="Import your contacts"
+        onClick={this.handleCardClick}
+      >
+        <Modal.Overlay isVisible={this.state.isActive}>
+          <Modal isVisible={this.state.isActive} onHide={this.handleModalClose}>
+            <Modal.Header onClose={this.handleModalClose}>
+              Import your contacts
+            </Modal.Header>
+            <Modal.Body>
+              Importing your contacts does not send out any invitations.
+              <div className="sidebar-modal__actions layout layout-align_vertical">
+                {SERVICES.map(s =>
+                  <div className="service-card" key={s.name}>
+                    <img alt={s.title} className="service-card__icon" src={s.img} />
+                    <div className="service-card__title">{s.title}</div>
+                  </div>
+                )}
+              </div>
+              <div className="sidebar-modal__actions layout layout-align_vertical">
+                <Switch on={this.state.isChecked} onClick={this.handleSwitch} />
+                <span className="margin--all_left--h font--size_small">
+                  Email each and everyone I know about us.&nbsp;
+                  <Link className="font--underlined" to="/settings">Learn more</Link>
+                </span>
+              </div>
+              <div className="layout sidebar-modal__actions">
+                <Button
+                  className="sidebar-modal__button sidebar-modal__button--type_submit"
+                  title="Import"
+                  onClick={this.handleSubmit}
+                />
+                <Button
+                  className="sidebar-modal__button sidebar-modal__button--type_cancel"
+                  title="No."
+                  onClick={this.handleModalClose}
+                />
+              </div>
+            </Modal.Body>
+          </Modal>
+        </Modal.Overlay>
+      </Card>
+    );
+  }
+}

src/components/bio/actions/index.js

@@ -18,4 +18,4 @@
 export { default as UpdateProfilePictureAction } from './update-profile-picture';
 export { default as UpdateUserPicture } from './update-userpic';
 export { default as UpdateNameAction } from './update-name';
-
+export { default as ImportContactsAction } from './import-contacts';

src/less/blocks/bio.less

@@ -134,7 +134,6 @@
   }
 
   &__card {
-    margin-top: 20px;
     min-width: 100px;
     max-width: 180px;
     flex: 1;
@@ -262,16 +261,11 @@
   }
 
   &__actions {
-    @media (min-width: 1024px) and (max-width: 1599px),
-      (min-width: 414px) and (max-width: 479px) {
-      > .bio__card:last-child {
-        margin-left: 0;
-      }
-    }
-    @media (max-width: 413px) {
-      > .bio__card + .bio__card {
-        margin-left: 10px;
-      }
+    margin-left: -20px;
+
+    > .bio__card {
+      margin-left: 20px;
+      margin-bottom: 20px;
     }
   }
 }

src/less/blocks/font.less

@@ -72,6 +72,12 @@
     }
   }
 
+  &--size {
+    &_small {
+      font-size: 12px;
+    }
+  }
+
   &--family_san-francisco {
     font-family: 'San Francisco Display', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif;
   }

src/less/blocks/service-card.less

@@ -0,0 +1,26 @@
+.service-card {
+  padding: 0 9px;
+  cursor: pointer;
+
+  &__icon {
+    display: block;
+    padding: 8px;
+    width: 60px;
+    height: 60px;
+    background-color: #fff;
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
+  }
+
+  &__title {
+    margin-top: 6px;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.7);
+    text-align: center;
+  }
+
+  &:hover {
+    .service-card__title {
+      text-decoration: underline;
+    }
+  }
+}

src/less/blocks/sidebar-modal.less

@@ -107,4 +107,40 @@
     overflow-y: auto;
     height: 100%;
   }
+
+  &__actions {
+    margin-top: 40px;
+  }
+
+  &__button {
+    width: 100px;
+    border-radius: 2px;
+    font-size: 14px;
+    font-weight: 500;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
+
+    &--type {
+      &_submit {
+        color: #fff;
+        background: #3b963f;
+        //background: -moz-linear-gradient(top, #3b963f 0%, #318334 100%);
+        //background: -webkit-linear-gradient(top, #3b963f 0%,#318334 100%);
+        background: linear-gradient(to bottom, #3b963f 0%,#318334 100%);
+        //filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b963f', endColorstr='#318334',GradientType=0 );
+      }
+
+      &_cancel {
+        color: #000;
+        background: #f9f9f9;
+        //background: -moz-linear-gradient(top, #f9f9f9 0%, #efedf0 100%);
+        //background: -webkit-linear-gradient(top, #f9f9f9 0%,#efedf0 100%);
+        background: linear-gradient(to bottom, #f9f9f9 0%,#efedf0 100%);
+        //filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#efedf0',GradientType=0 );
+      }
+    }
+
+    & + & {
+      margin-left: 20px;
+    }
+  }
 }

src/less/styles.less

@@ -142,3 +142,4 @@
 @import 'blocks/bio';
 @import 'blocks/sidebar-modal';
 @import 'blocks/switch';
+@import 'blocks/service-card';