denshobato_chat_panel 0.0.1 → 0.0.2

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

@@ -117,10 +117,8 @@ $color-blue: #8ac0d9;
 // - - - Chat
 
 .chat-wrapper {
-  min-width: 400px;
-  width: 100%;
-  height: 500px;
   border: 1px solid rgba(0, 0, 0, 0.08);
+  height: 500px;
   padding: 20px;
   position: relative;
   border-radius: 0px 0px 10px 10px;
@@ -188,27 +186,29 @@ $color-blue: #8ac0d9;
       }
     }
     &.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;
+      .user-info {
+        display: inline-block;
+        float: left;
+        width: 60px;
+        height: auto;
+        .message-author {
+          font-size: small;
+          display: block;
+          text-align: center;
+        }
       }
       .chat-message-wrapper,
       .chat-message-content {
         float: left;
       }
       .chat-message-wrapper {
+        .message-time {
+          font-size: xx-small;
+          display: block;
+        }
         &:before {
-          left: -$spacing;
+          left: -20px;
+          top: 30px;
           border-right-color: $color-green;
         }
       }
@@ -218,27 +218,31 @@ $color-blue: #8ac0d9;
       }
     }
     &.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;
+      .user-info {
+        display: inline-block;
+        float: right;
+        width: 60px;
+        height: auto;
+        .message-author {
+          font-size: small;
+          display: block;
+          text-align: center;
+          margin: 0px 0px 0px 0px;
+        }
       }
       .chat-message-wrapper,
       .chat-message-content {
         float: right;
       }
       .chat-message-wrapper {
+        .message-time {
+          font-size: xx-small;
+          display: block;
+          text-align: right;
+        }
         &:before {
           right: -$spacing;
+          top: 30px;
           border-left-color: $color-blue;
         }
       }
@@ -293,7 +297,7 @@ $color-blue: #8ac0d9;
   z-index: 9;
   bottom: 23px;
   .message_input_wrapper {
-    display: inline-block;
+    display: block;
     height: 38px;
     border-radius: 20px;
     border: 1px solid #bcbdc0;
@@ -311,9 +315,8 @@ $color-blue: #8ac0d9;
     }
   }
   .send_message {
-    width: 135px;
-    height: 39px;
-    display: inline-block;
+    width: 20%;
+    display: block;
     border-radius: 50px;
     background-color: #a3d063;
     border: 2px solid #a3d063;
@@ -439,3 +442,35 @@ $color-blue: #8ac0d9;
     color: white;
   }
 }
+
+.denshobato-send-message {
+  width: 70%;
+  position: fixed;
+  bottom: 0px;
+  outline: none;
+  margin-bottom: 30px;
+  z-index: 999;
+  input {
+    width: 70%;
+    border-radius: 20px;
+    border: 1px solid #BBBBBB;
+    padding: 5px 0px 5px 10px;
+  }
+
+  button {
+    width: 15%;
+    display: inline-block;
+    padding: 5px;
+    border-radius: 50px;
+    background-color: #a3d063;
+    border: 2px solid #a3d063;
+    color: white;
+    cursor: pointer;
+    transition: all 0.2s linear;
+    text-align: center;
+    &:hover {
+      color: #a3d063;
+      background-color: white;
+    }
+  }
+}

data/lib/generators/denshobato_chat_panel/install_generator.rb

@@ -13,12 +13,18 @@ module DenshobatoChatPanel
 
       def done
         puts "    =====================================================
-                1. Copy this line to your config/initializers/assets.rb
+                1. Add 'denshobato_chat_panel' method to your model
+                  class User < ActiveRecord::Base
+                    denshobato_for :user
+                    denshobato_chat_panel
+                  end
+
+                2. 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. Add '@import 'denshobato'; to your application.scss'
 
-                3. In layouts/application.erb include javascript file to the bottom
+                4. In layouts/application.erb include javascript file to the bottom
                   Like this:
 
                   <body>
@@ -30,10 +36,10 @@ module DenshobatoChatPanel
                     <%= javascript_include_tag 'denshobato' %>
                   </body>
 
-                4. Mount API route in your routes.rb
+                5. Mount API route in your routes.rb
                    mount Denshobato::DenshobatoApi => '/'
 
-                5. Add this helper with arguments to the page with your conversation
+                6. Add this helper with arguments to the page with your conversation
                    e.g  # => conversation/32
 
                    = render_denshobato_messages(@conversation, current_user)

data/lib/react/components/Message.jsx

@@ -30,10 +30,12 @@ export default class Message extends Component {
 
     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='user-info'>
+          <img className='chat-image chat-image-default' src={message.avatar} />
+          <span className='message-author'>{message.full_name}</span>
+        </div>
         <div className='chat-message-wrapper'>
+          <span className='message-time'>{message.time}</span>
           <div className='chat-message-content'>
             <p>{message.body}</p>
           </div>

data/lib/react/components/MessageForm.jsx

@@ -14,18 +14,11 @@ export default class MessageForm extends Component {
   render() {
     const { fields: { body, senderClass }, handleSubmit } = this.props;
     return (
-      <div>
+      <div className='denshobato-send-message'>
         <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>
+          <input className="message_input" placeholder="Type your message here..." {...body}/>
+          <button onclick={handleSubmit} className="text">Send</button>
+        </form>
       </div>
     );
   }

data/webpack.config.js

@@ -3,7 +3,7 @@ var webpack = require('webpack');
 
 module.exports = {
   entry: './lib/react/denshobato.js',
-  output: { path: __dirname + '/app/assets/javascripts/', filename: 'denshobato.js' },
+  output: { path: './lib/generators/denshobato_chat_panel/assets/javascripts/', filename: 'denshobato.js' },
   resolve: { extensions: ['', '.js', '.jsx'] },
   module: {
     loaders: [

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: denshobato_chat_panel
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - ID25
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-03-11 00:00:00.000000000 Z
+date: 2016-03-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: grape
@@ -114,6 +114,8 @@ files:
 - lib/api/denshobato_api.rb
 - lib/api/message_api.rb
 - lib/denshobato_chat_panel.rb
+- lib/denshobato_chat_panel/chat_panel_helper.rb
+- lib/denshobato_chat_panel/core.rb
 - lib/denshobato_chat_panel/engine.rb
 - lib/denshobato_chat_panel/react_helper.rb
 - lib/denshobato_chat_panel/version.rb