denshobato_chat_panel 0.0.1

data/lib/generators/denshobato_chat_panel/assets/stylesheets/denshobato.scss

@@ -0,0 +1,441 @@
+$spacing: 20px;
+
+$radius: 4px;
+
+$font-size-default: 20px;
+$font-size-small: 0.65em;
+
+$color-green: #91d98a;
+$color-blue: #8ac0d9;
+
+@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
+
+@mixin clearfix {
+  display: block;
+  overflow: hidden;
+  &:before {
+    @include before;
+  }
+}
+
+@mixin prefix($property, $value) {
+  -webkit-#{$property}: #{$value};
+  -ms-#{$property}: #{$value};
+  -moz-#{$property}: #{$value};
+  -o-#{$property}: #{$value};
+  #{$property}: #{$value};
+}
+
+@mixin radius($rad: $radius) {
+  @include prefix(border-radius, #{$rad});
+}
+
+@mixin before {
+  content: " ";
+  display: block;
+}
+
+.padding {
+  padding: $spacing;
+}
+
+.clearfix {
+  @include clearfix;
+}
+
+.font-size-small {
+  font-size: $font-size-small;
+}
+
+#denshobato-message-panel {
+  width: 75%;
+  display: block;
+  margin: 0 auto;
+}
+
+.top_menu {
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  padding: 18px 40px 5px 40px;
+  border-radius: 10px 10px 0px 0px;
+  z-index: 999;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+  .chat-header {
+    display: block;
+    span {
+      display: block;
+      text-align: center;
+      font-size: 14px;
+      font-style: italic;
+    }
+    p {
+      color: cadetblue;
+      display: inline-grid;
+      text-align: center;
+    }
+  }
+  .refresh-button {
+    float: right;
+    margin: -38px 0px 0px 0px;
+    background: none;
+    border: #a3d063 1px solid;
+    border-radius: 15px;
+    outline: none;
+    &:hover {
+      color: white;
+      background: #a3d063;
+      outline: none;
+      border: none;
+    }
+  }
+  .buttons {
+    margin: 0px 0 0 10px;
+    position: absolute;
+    .button {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      display: inline-block;
+      margin-right: 10px;
+      position: relative;
+      &.close-button {
+        background-color: #f5886e;
+        &:hover {
+          cursor: pointer;
+        }
+      }
+      &.minimize {
+        background-color: #fdbf68;
+      }
+      &.maximize {
+        background-color: #a3d063;
+      }
+    }
+  }
+}
+
+// - - - Chat
+
+.chat-wrapper {
+  min-width: 400px;
+  width: 100%;
+  height: 500px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  padding: 20px;
+  position: relative;
+  border-radius: 0px 0px 10px 10px;
+  display: block;
+  overflow-y: scroll;
+  font-family: "Source Sans Pro", sans-serif;
+  font-size: $font-size-default;
+  font-weight: 300;
+  .chat-content {
+    background-color: white;
+  }
+  .chat-image {
+    float: left;
+    @include radius(50%);
+    &.chat-image-default {
+      width: $spacing * 3;
+      height: $spacing * 3;
+    }
+  }
+  .chat-message {
+    margin-bottom: $spacing;
+    width: 100%;
+    padding: 15px;
+    @include clearfix;
+    &:last-of-type {
+      margin-bottom: 0;
+      position: relative;
+    }
+    .full-name-recipient {
+      display: block;
+      font-size: 12px;
+      font-style: italic;
+      color: grey;
+      margin-top: 0px;
+    }
+    .full-name-sender {
+      @extend .full-name-recipient;
+      text-align: right;
+      color: sienna;
+    }
+    .chat-message-wrapper {
+      max-width: 70%;
+      display: table;
+      margin: 0 $spacing;
+      padding-top: $spacing / 2;
+      position: relative;
+      &:before {
+        @include before;
+        width: 0;
+        height: 0;
+        border: 12px solid transparent;
+        top: $spacing;
+        position: absolute;
+        z-index: 2;
+      }
+      p {
+        padding: $spacing / 2 $spacing;
+        color: white;
+        padding: 10px 15px;
+        font-size: 15px;
+        border-top: 1px solid;
+        &:first-of-type {
+          border-top: 0 !important;
+        }
+      }
+    }
+    &.chat-message-recipient {
+      .message-time {
+        font-size: xx-small;
+        display: block;
+        margin: 0 auto;
+        position: absolute;
+        margin-top: -3px;
+        left: 96px;
+      }
+      .message-author {
+        font-size: small;
+        position: absolute;
+        top: 76px;
+        left: 17px;
+      }
+      .chat-message-wrapper,
+      .chat-message-content {
+        float: left;
+      }
+      .chat-message-wrapper {
+        &:before {
+          left: -$spacing;
+          border-right-color: $color-green;
+        }
+      }
+      p {
+        background-color: $color-green;
+        border-top-color: $color-green - 20;
+      }
+    }
+    &.chat-message-sender {
+      .message-time {
+        font-size: xx-small;
+        display: block;
+        margin: 0 auto;
+        position: absolute;
+        margin-top: -3px;
+        right: 96px;
+      }
+      .message-author {
+        font-size: small;
+        position: absolute;
+        top: 77px;
+        right: 10px;
+      }
+      .chat-message-wrapper,
+      .chat-message-content {
+        float: right;
+      }
+      .chat-message-wrapper {
+        &:before {
+          right: -$spacing;
+          border-left-color: $color-blue;
+        }
+      }
+      p {
+        background: $color-blue;
+        border-top-color: $color-blue - 20;
+      }
+      img {
+        float: right;
+      }
+    }
+    .chat-message-content {
+      @include clearfix;
+      @include radius;
+    }
+    .chat-details {
+      clear: both;
+      width: 100%;
+      @include clearfix;
+      .chat-message-localization {
+        color: #8a8a8a;
+        margin: 0px 0px 0px 0px;
+        display: block;
+        font-size: 10px;
+        border: 1px solid rgba(0, 0, 0, 0.23);
+        padding: 2px 0px 2px 7px;
+        border-radius: 37px;
+        width: 51px;
+        &:hover {
+          background: #f1f1f1;
+          color: black;
+          border: 1px solid white;
+        }
+      }
+    }
+  }
+}
+
+.chat-wrapper::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-wrapper::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.58);
+}
+
+.bottom_wrapper {
+  position: fixed;
+  width: 60%;
+  background-color: white;
+  padding: 10px 10px 0px 10px;
+  z-index: 9;
+  bottom: 23px;
+  .message_input_wrapper {
+    display: inline-block;
+    height: 38px;
+    border-radius: 20px;
+    border: 1px solid #bcbdc0;
+    width: calc(100% - 160px);
+    position: relative;
+    padding: 0 20px;
+    .message_input {
+      border: none;
+      height: 100%;
+      box-sizing: border-box;
+      width: calc(100% - 40px);
+      position: absolute;
+      outline-width: 0;
+      color: gray;
+    }
+  }
+  .send_message {
+    width: 135px;
+    height: 39px;
+    display: inline-block;
+    border-radius: 50px;
+    background-color: #a3d063;
+    border: 2px solid #a3d063;
+    color: white;
+    cursor: pointer;
+    transition: all 0.2s linear;
+    text-align: center;
+    float: right;
+    &:hover {
+      color: #a3d063;
+      background-color: white;
+    }
+    .text {
+      font-size: 18px;
+      font-weight: 300;
+      display: inline-block;
+      line-height: 34px;
+      border: none;
+      background: none;
+      outline: none;
+    }
+  }
+}
+
+.chat-message-localization {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+
+.loading {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 100px auto;
+  position: relative;
+  text-align: center;
+  width: 100%;
+  max-width: 200px;
+  p {
+    border-top: solid 1px #c5c5c5;
+    color: #f93841;
+    padding-top: 15px;
+    width: 100%;
+    animation-name: loading;
+    -webkit-animation: loading 2s ease-out infinite;
+    -moz-animation: loading 2s ease-out infinite;
+    animation: loading 2s ease-out infinite;
+    &:before {
+      content: "";
+      -webkit-border-radius: 30px;
+      -moz-border-radius: 30px;
+      -ms-border-radius: 30px;
+      -o-border-radius: 30px;
+      border-radius: 30px;
+      display: inline-block;
+      border-style: solid;
+      border-width: 20px 20px 20px 20px;
+      border-color: #b2060e transparent transparent transparent;
+      position: absolute;
+      top: -20px;
+      left: -10px;
+      animation-name: loading;
+      -webkit-animation: loading 2s ease-out infinite;
+      -moz-animation: loading 2s ease-out infinite;
+      animation: loading 2s ease-out infinite;
+    }
+  }
+}
+
+@-moz-keyframes loading {
+  0% {
+    left: -15px;
+  }
+  50% {
+    left: 185px;
+    color: #c5c5c5;
+  }
+  100% {
+    left: -15px;
+  }
+}
+
+
+@-webkit-keyframes loading {
+  0% {
+    left: -15px;
+  }
+  50% {
+    left: 185px;
+    color: #c5c5c5;
+  }
+  100% {
+    left: -15px;
+  }
+}
+
+
+@keyframes loading {
+  0% {
+    left: -15px;
+  }
+  50% {
+    left: 185px;
+    color: #c5c5c5;
+  }
+  100% {
+    left: -15px;
+  }
+}
+
+
+.load-messages {
+  border: 2px #a3d063 solid;
+  padding: 5px 20px 5px 20px;
+  font-size: 16px;
+  margin-bottom: 15px;
+  border-radius: 35px;
+  outline: none;
+  background-color: transparent;
+  &:hover {
+    background-color: #a3d063;
+    color: white;
+  }
+}

data/lib/generators/denshobato_chat_panel/install_generator.rb

@@ -0,0 +1,50 @@
+module DenshobatoChatPanel
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.dirname(__FILE__)
+      desc 'Install Chat Panel'
+
+      def copy_conversations
+        puts 'Copying assets'
+
+        copy_file './assets/javascripts/denshobato.js', 'vendor/assets/javascripts/denshobato.js'
+        copy_file './assets/stylesheets/denshobato.scss', 'vendor/assets/stylesheets/denshobato.scss'
+      end
+
+      def done
+        puts "    =====================================================
+                1. Copy this line to your config/initializers/assets.rb
+                  Rails.application.config.assets.precompile += %w( denshobato.js )
+
+                2. Add '@import 'denshobato'; to your application.scss'
+
+                3. In layouts/application.erb include javascript file to the bottom
+                  Like this:
+
+                  <body>
+                    <div class='container'>
+                      <%= render 'layouts/header' %>
+                      <%= yield %>
+                    </div>
+
+                    <%= javascript_include_tag 'denshobato' %>
+                  </body>
+
+                4. Mount API route in your routes.rb
+                   mount Denshobato::DenshobatoApi => '/'
+
+                5. Add this helper with arguments to the page with your conversation
+                   e.g  # => conversation/32
+
+                   = render_denshobato_messages(@conversation, current_user)
+
+                   When @conversation = Denshobato::Conversation.find(params[:id])
+                   and current_user is your signed_in user, e.g Devise current_user etc.
+
+                That's all!
+    =====================================================
+          "
+      end
+    end
+  end
+end

data/lib/react/actions/Conversation.jsx

@@ -0,0 +1,9 @@
+import * as api from '../api/Api';
+export const CONVERSATION  = 'CONVERSATION';
+
+export function conversation(id, user, klass) {
+  return ((dispatch) => {
+    api.conversation(id, user, klass)
+      .then((response) => dispatch({ type: CONVERSATION, response: response.data }));
+  });
+}

data/lib/react/actions/Index.jsx

@@ -0,0 +1,7 @@
+import * as messages from './Messages';
+import * as conversation from './Conversation';
+
+export const actions = {
+  messages: messages,
+  conversation: conversation,
+};

data/lib/react/actions/Messages.jsx

@@ -0,0 +1,30 @@
+import * as api from '../api/Api';
+export const FETCH    = 'FETCH';
+export const CREATE   = 'CREATE';
+export const DELETE   = 'DELETE';
+export const SHOW_ALL = 'SHOW_ALL';
+
+export function fetch(id) {
+  return ((dispatch) => {
+    api.fetch(id)
+      .then((messages) => dispatch({ type: FETCH, data: messages.data }));
+  });
+}
+
+export function create(body, sender, conversation, senderClass) {
+  return ((dispatch) => {
+    api.createMessage(body, sender, conversation, senderClass)
+      .then((message) => dispatch({ type: CREATE, message: message.data }));
+  });
+}
+
+export function deleteMessage(id, conversation) {
+  return ((dispatch) => {
+    api.deleteMessage(id, conversation)
+      .then((response) => dispatch({ type: DELETE, data: response.data, id: id }));
+  });
+}
+
+export function showAll() {
+  return { type: SHOW_ALL, data: true };
+}

data/lib/react/api/Api.jsx

@@ -0,0 +1,19 @@
+import axios from 'axios';
+const API = `${window.location.origin}/api`;
+
+export function fetch(id) {
+  return axios.get(`${API}/messages/get_conversation_messages?id=${id}`);
+
+}
+
+export function conversation(id, user, klass) {
+  return axios.get(`${API}/conversations/conversation_info?id=${id}&user=${user}&class=${klass}`);
+}
+
+export function createMessage(body, sender, conversation, senderClass) {
+  return axios.post(`${API}/messages/create_message`, { message: { body: body, conversation_id: conversation, sender: sender, sender_class: senderClass } });
+}
+
+export function deleteMessage(id, conversation) {
+  return axios.delete(`${API}/messages/delete_message?id=${id}&conversation=${conversation}`);
+}

data/lib/react/components/Message.jsx

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import store from '../store/Store';
+import { actions } from '../actions/Index';
+
+const room = document.getElementById('denshobato-message-panel');
+
+export default class Message extends Component {
+  static propTypes = {
+    message: React.PropTypes.shape({
+      id: React.PropTypes.number.isRequired,
+      body: React.PropTypes.string.isRequired,
+      author: React.PropTypes.string.isRequired,
+    }),
+    sender: React.PropTypes.shape({
+      author: React.PropTypes.string,
+      conversationId: React.PropTypes.number,
+    }),
+  };
+
+  deleteMessage = () => {
+    let result = confirm('Delete Message from your conversation?');
+    if (result) {
+      store.dispatch(actions.messages.deleteMessage(this.props.message.id, this.props.sender.conversationId));
+    };
+  };
+
+  render() {
+    const { message, sender } = this.props;
+    const cssClass = (message.author == sender.author) ? 'recipient' : 'sender';
+
+    return (
+      <div className={`chat-message chat-message-${cssClass}`}>
+        <span className='message-author'>{message.full_name}</span>
+        <img className='chat-image chat-image-default' src={message.avatar} />
+        <span className='message-time'>{message.time}</span>
+        <div className='chat-message-wrapper'>
+          <div className='chat-message-content'>
+            <p>{message.body}</p>
+          </div>
+          <div className='chat-details'>
+            <span className='chat-message-localization font-size-small' onClick={this.deleteMessage}>Remove</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

data/lib/react/components/MessageForm.jsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { reduxForm } from 'redux-form';
+import store from '../store/Store';
+
+export default class MessageForm extends Component {
+  static propTypes = {
+    handleSubmit: React.PropTypes.func.isRequired,
+    fields: React.PropTypes.shape({
+      body: React.PropTypes.object.isRequired,
+      senderClass: React.PropTypes.object.isRequired,
+    }),
+  };
+
+  render() {
+    const { fields: { body, senderClass }, handleSubmit } = this.props;
+    return (
+      <div>
+        <form onSubmit={handleSubmit}>
+          <div className="bottom_wrapper clearfix">
+            <div className="message_input_wrapper">
+              <input className="message_input" placeholder="Type your message here..." {...body}/>
+              </div>
+            <div className="send_message">
+              <div className="icon"></div>
+              <button onclick={handleSubmit} className="text">Send</button>
+            </div>
+          </div>
+      </form>
+      </div>
+    );
+  }
+}
+
+MessageForm = reduxForm({
+  form: 'message-form',
+  fields: ['body', 'senderClass'],
+})(MessageForm);