Add chat component (WIP)

source/index.html.erb

@@ -19,6 +19,7 @@ body: home
 					<h4>Example pages</h4>
 					<ul>
 						<li><a href="/whole-page-text/">Whole page text</a></li>
+						<li><a href="/messaging/">Messaging system</a></li>
 					</ul>
 				</div>
 				<div class="col-sm-6">

source/javascripts/body/messaging_filter.js

@@ -0,0 +1,20 @@
+(function () {
+  'use strict';
+
+  if ( $('.messaging-page').length ) {
+    $('#message-search').keyup(function(){
+      var search = $(this).val().toLowerCase();
+      var $elements = $('.message')
+
+      if(search){
+        $elements.each(function(){
+          var text = $(this).text().toLowerCase();
+          (text.indexOf(search) >= 0) ? $(this).show() : $(this).hide();
+        });
+      }else{
+        $elements.show();
+      }
+    });
+  }
+
+})();

source/javascripts/body/messaging_open_chat.js

@@ -0,0 +1,17 @@
+(function () {
+  'use strict';
+
+  if ( $('.messaging-page').length ) {
+    $('.message').on('click', function(e) {
+      e.preventDefault();
+      $('.chat-container').addClass('active');
+      $('.message').removeClass('active')
+      $(this).addClass('active')
+    });
+    $('.btn-back-to-messages').on('click', function(e) {
+      e.preventDefault();
+      $('.chat-container').removeClass('active');
+    });
+  }
+
+})();

source/javascripts/head.js

@@ -1 +1,2 @@
-//= require modernizr
+//= require modernizr
+//= require_tree ./head

source/javascripts/head/messaging_scroll.js

@@ -0,0 +1,20 @@
+(function () {
+  'use strict';
+
+  $(document).on('ready',function(){
+    if ( $('.messaging-page').length ) {
+      $(".chat-container > .content").mCustomScrollbar({
+        axis: 'y',
+        theme:"minimal-dark",
+        setTop: $(".chat-container > .content > .wrapper").height() + 'px',
+        advanced:{
+          autoUpdateTimeout: 0,
+          scrollInertia: 100,
+          updateOnImageLoad: true,
+          updateOnContentResize: true
+        }
+      });
+    }
+  });
+
+})();

source/messaging/index.html.erb

@@ -0,0 +1,11 @@
+---
+title: Messaging
+messaging_user_link: /profile
+subscription: true
+empty: true
+---
+
+<div class="messaging-page">
+  <%= partial "partials/messaging/message-list" %>
+  <%= partial "partials/messaging/chat-container" %>
+</div>

source/partials/messaging/_chat-container.html.erb

@@ -0,0 +1,82 @@
+<section class="chat-container">
+  <header class="messaging-header">
+    <h1 class="title">
+      <a href="#" class="btn-back-to-messages">
+        <span class="sr-only">Back</span>
+        <i class="fa fa-angle-left" aria-hidden="true"></i>
+      </a>
+      <% if current_page.data.messaging_title_link %>
+      <a class="message-title" href="<%= current_page.data.messaging_title_link %>">
+        ORDER #12412
+      </a>
+      <% end %>
+      <a class="message-user" href="<%= current_page.data.messaging_user_link %>">
+        <%= lorem.name %>
+      </a>
+    </h1>
+    <% if current_page.data.messaging_attachment %>
+    <div class="attachment">
+      <i class="icon"></i>
+      <input type="file" class="upload">
+    </div>
+    <% end %>
+  </header>
+  <div class="content">
+    <div class="wrapper">
+      <% if current_page.data.empty == true %>
+        <div class="alert alert-info" role="alert">
+          Para contratar a este usuario solicita una propuesta a través del
+            chat, indicando el servicio que quieres contratar y describiendo
+            los requisitos del trabajo.
+        </div>
+      <% else %>
+        <% if current_page.data.messaging_attachment %>
+        <%= partial "partials/messaging/chat-message-attachment",
+          :locals => {
+            :align => 'left'
+          } %>
+        <%= partial "partials/messaging/chat-message-attachment",
+          :locals => {
+            :align => 'right',
+            :type => 'image',
+            :url => 'example1.jpg'
+          }  %>
+        <% end %>
+        <% for i in 1..rand(2..4) %>
+        <%= partial "partials/messaging/chat-message" %>
+        <% end %>
+        <div class="chat-message-time unread">
+          <time>Unread</time>
+        </div>
+        <% for i in 1..rand(2..6) %>
+        <%= partial "partials/messaging/chat-message" %>
+        <% end %>
+        <div class="chat-message-time">
+          <time>Today</time>
+        </div>
+        <% for i in 1..rand(2..6) %>
+        <%= partial "partials/messaging/chat-message" %>
+        <% end %>
+        <div class="chat-message-time">
+          <time><%= lorem.date %></time>
+        </div>
+        <% for i in 1..rand(2..6) %>
+        <%= partial "partials/messaging/chat-message" %>
+        <% end %>
+        <div class="chat-message-time">
+          <time><%= lorem.date %></time>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <footer class="messaging-footer messaging-footer-input">
+    <div class="input-wrapper">
+      <input type="text" class="form-control" placeholder="Say something">
+    </div>
+    <div class="buttons-wrapper">
+      <button class="btn btn-primary">
+        Send
+      </button>
+    </div>
+  </footer>
+</section>

source/partials/messaging/_chat-message-attachment.html.erb

@@ -0,0 +1,21 @@
+<% attachment = defined?(type) ? type : 'file' %>
+<% file_url = defined?(url) ? url : false %>
+<% message_align = defined?(align) ? align : ['right','left'].sample %>
+
+<div class="chat-message attachment <%= attachment %> <%= message_align %>" >
+  <a class="chat-message-content" href="<%= "/images/#{file_url}" if file_url %>"
+    target="_blank">
+    <div class="content">
+      <div class="preview">
+        <% if attachment == "image" &&  file_url %>
+        <%= image_tag file_url %>
+        <% else %>
+        <i class="icon"></i>
+        <% end %>
+      </div>
+      <div class="text">
+        Exemple-file-name.ext
+      </div>
+    </div>
+  </a>
+</div>

source/partials/messaging/_chat-message.html.erb

@@ -0,0 +1,5 @@
+<div class="chat-message <%= ['right','left'].sample %>">
+  <div class="chat-message-content">
+    <%= lorem.sentence %>
+  </div>
+</div>

source/partials/messaging/_message-list-message.html.erb

@@ -0,0 +1,29 @@
+<% unread_message = defined?(unread) ? unread : false %>
+<% active_message = defined?(active) ? 'active' : false %>
+<% date_message = defined?(date) ? date : "#{rand(1...30)}/#{rand(1...12)}/2016" %>
+<a href="javascript:void(0)" class="message <%= active_message if active_message %>">
+  <div class="message-image">
+    <%= image_tag "messaging/example-user#{rand(1...6)}.jpg" %>
+  </div>
+  <div class="message-content">
+    <div class="message-date">
+      <%= date_message %>
+    </div>
+    <% if current_page.data.message_title %>
+    <div class="message-title">
+      <%= ["Order ##{rand(0..10000)}",'CONVERSATION'].sample %>
+    </div>
+    <% end %>
+    <div class="message-user">
+      <%= lorem.name %>
+    </div>
+    <% if unread_message %>
+    <div class="badge">
+      <%= unread_message %>
+    </div>
+    <% end %>
+    <div class="message-text">
+      <%= lorem.sentence %>
+    </div>
+  </div>
+</a>

source/partials/messaging/_message-list.html.erb

@@ -0,0 +1,32 @@
+<section class="message-list">
+    <header class="messaging-header">
+      <h1 class="title">Messages</h1>
+      <input type="text" id="message-search" placeholder="Filter messages">
+    </header>
+    <div class="content">
+      <%= partial 'partials/messaging/message-list-message',
+        :locals => {
+          :active => true,
+          :unread => 10,
+          :date => '00:10',
+        }
+      %>
+
+      <%= partial 'partials/messaging/message-list-message',
+        :locals => {
+          :unread => 3,
+          :date => '23:10',
+        }
+      %>
+
+      <%= partial 'partials/messaging/message-list-message',
+        :locals => {
+          :date => 'Yesterday',
+        }
+      %>
+
+      <% for i in (0..5) %>
+        <%= partial 'partials/messaging/message-list-message' %>
+      <% end %>
+    </div>
+  </section>

source/stylesheets/application.css.scss

@@ -27,6 +27,7 @@
 @import 'blocks/hero';
 @import 'blocks/list-tabulated';
 @import 'blocks/main-content';
+@import 'blocks/messaging';
 @import 'blocks/modals';
 @import 'blocks/nav-inline';
 @import 'blocks/nav-pills';