@@ -7,4 +7,7 @@ $gray: #b0b7b9;

 $gray-light: #dde0e3;

 $black: #282828;

+$border-color: #c5c6c9;

+$status-color: #b0b7b9;

+

 $error: #AD3A3A;

\ No newline at end of file

@@ -1,15 +1,27 @@

 /*

  *= require normalize-rails

+ *= require iconfonts

  *= require_self

- *= require_tree .

 */

-@import "config";

 @import "compass/css3/box-sizing";

+@import "config";

+@import "chat.css.scss";

+@import "sessions.css.scss";

+

 body {

   background: $bg-color;

   border-top: #658489 7px solid;

+  font-size: 12px;

+}

+

+a {

+  text-decoration: none;

+}

+

+a:visited {

+  color: inherit

 }

 input {

@@ -33,26 +45,32 @@ input {

   }

   &:focus {

-    outline: 5px auto $app-color;

+    outline: none;

+    box-shadow: 0px 0px 1px 1px $app-color;

+    border: 1px solid white !important;

   }

 }

 .top-border {

-  border-top: 5px solid $app-color;

+  box-shadow: 0 -5px 0 $app-color;

 }

 .left-border {

-  border-left: 5px solid $app-color !important;

+  box-shadow: -5px 0 0 $app-color;

 }

 .border {

-  border: solid 1px #c5c6c9;

+  border: solid 1px $border-color;

 }

 .no-top-border {

   border-top: 0;

 }

+.no-left-border {

+  border-left: 0;

+}

+

 .alert {

   font-size: 12px;

   &.alert-notice {

@@ -68,6 +86,10 @@ input {

   float: left;

 }

+.right {

+  float: right;

+}

+

 .clear {

   clear: both;

 }

\ No newline at end of file

@@ -1,14 +1,16 @@

-@import "config";

-

 .container {

   width: 1000px;

-  padding: 5px 17px;

+  padding: 10px 17px;

 }

 .leftside {

   width: 23%;

 }

+.rightside {

+  width: 75%;

+}

+

 .roster {

   background: $bg-roster;

   padding: 16px 9px 9px;

@@ -24,10 +26,6 @@

   padding: 4px 3px;

   margin-right: -9px;

-  &:hover {

-    background: #fbfbfb;

-  }

-

   h1, h2, h3 {

     margin: 0 0 1px;

   }

@@ -47,13 +45,30 @@

   h3 {

     font-size: 12px;

-    color: #b0b7b9;

+    color: $status-color;

+    margin-top: -3px;

+

+    .drop-down {

+      position: relative;

+      top: 2px;

+      left: -2px;

+      font-size: 13px;

+    }

   }

   .avatar {

     float: left;

     margin-right: 8px;

-    height: 46px;

+

+    img {

+      height: 32px;

+    }

+

+    &.bigger {

+      img {

+        height: 46px;

+      }

+    }

   }

 }

@@ -75,34 +90,266 @@

     li {

       list-style: none;

-

-      img {

-        width: 32px;

-      }

     }

   }

+  .user:hover {

+    background: #fbfbfb;

+  }

+

   .active-group {

-    margin: 0 -14px 0 -10px;

+    margin: 0 -16px 0 -5px;

     padding: 8px 10px;

     background: white;

     border-right: 1px solid #fcfcfc;

+    &::before {

+      content: '';

+      border-left: 5px solid #24a396 !important;

+      display: block;

+      width: 0;

+      height: 0;

+    }

+

     .user {

-      margin-right: -6px;

+      margin-right: -5px;

       &:hover {

         background: $bg-roster;

       }

     }

   }

+

+  .action {

+    margin-right: 2px;

+

+    .icon-bubble:before {

+      margin-left: 6px;

+    }

+

+    .icon-bubbles:before {

+      margin-left: 6px;

+    }

+

+    .icon-x-full:before {

+      margin-left: 6px;

+    }

+

+    &.invite {

+

+    }

+  }

+}

+

+.status {

+  font-size: 15px;

+  position: relative;

+  top: 2px;

+

+  &::before {

+    content: '\26AB'

+  }

+

+  &.online {

+    color: #83C91F;

+  }

+

+  &.away {

+    color: #E6D105;

+  }

+

+  &.dnd {

+    color: #DC4E06;

+  }

+

+  &.offline {

+    color: #848F99;

+  }

 }

 .toolbox {

   position: absolute;

   bottom: 0;

+  width: 93%;

+

+  input {

+    width: 75%;

+    height: 22px;

+    border-radius: 16px;

+    margin-right: 6px;

+    padding-left: 10px;

+    padding-right: 10px;

+    display: block;

+    float: left;

+  }

+

+  a, a:visited {

+    color: $app-color;

+    border: 1px solid #dde0e3;

+    border-radius: 12px;

+    padding: 5px 4px 4px 5px;

+    margin-left: 0;

+    width: 13px;

+    height: 13px;

+    background: white;

+    display: inline-block;

+  }

 }

 .chatting-window {

+  padding-left: 5px;

+  min-height: 400px;

+}

+

+.tabbar {

-}

\ No newline at end of file

+  .tab {

+    background: #f7f6f5;

+    width: 132px;

+    border: $border-color 1px solid;

+    float: left;

+    padding: 10px 7px 6px 7px;

+    margin: 0 4px -1px 0;

+    font-size: 15px;

+    color: $bg-color;

+

+    &:last-child {

+      margin-right: 0;

+    }

+

+    &.active {

+      width: 240px;

+      background: $bg-roster;

+      font-weight: bold;

+      color: $app-color;

+      padding-bottom: 5px;

+      border-top: 0;

+      padding-top: 12px;

+      line-height: 17px;

+    }

+

+    .icon {

+      margin-right: 4px;

+    }

+  }

+}

+

+.conversation {

+  background: white;

+  padding: 9px;

+

+  .event {

+    color: $status-color;

+    font-weight: bold;

+    font-size: 12px;

+    margin: 10px auto 0;

+    width: 50%;

+    text-align: center;

+  }

+

+  .message-box {

+    width: 75%;

+    color: #393939;

+    background: $bg-roster;

+    border: 1px solid $gray-light;

+    border-radius: 5px;

+    padding: 0 10px;

+    margin-top: 10px;

+    margin-left: 45px;

+    position: relative;

+

+    &::after, &::before {

+      content: '';

+      display: block;

+      width: 0;

+      height: 0;

+      border-right: 8px solid #f4f4f4;

+      border-bottom: 8px solid rgba(255,255,255,0);

+      border-top: 8px solid rgba(255,255,255,0);

+      position: absolute;

+      left: -8px;

+      top: 14px;

+    }

+

+    &::before {

+      z-index: 20;

+    }

+

+    &::after {

+      height: 2px;

+      border-right: 8px solid $gray-light;

+      left: -9px;

+      top: 13px;

+    }

+

+    &.active {

+      background: #dfecea;

+

+      &::before {

+        border-right: 8px solid #dfecea;

+      }

+    }

+

+    .date {

+      color: #949494;

+      text-shadow: white 1px 1px;

+    }

+

+    p {

+      margin: 4px 0 8px;

+    }

+

+    .user {

+      margin-left: -59px;

+

+      &:hover {

+        background: transparent;

+      }

+    }

+  }

+}

+

+.message-writer {

+  padding-top: 20px;

+  padding-left: 9px;

+  border-top: 1px solid $gray-light;

+  margin: 10px -9px 0;

+  position: relative;

+

+  input {

+    margin-top: 0;

+    border-color: black;

+    font-weight: bold;

+  }

+

+  input[type="text"] {

+    font-size: 12px;

+    width: 90%;

+    margin-right: 5px;

+    border-color: $gray-light;

+    color: $app-color;

+

+

+  }

+

+  ::-webkit-input-placeholder {

+    color: $app-color;

+    opacity: 1;

+  }

+  ::-moz-placeholder {

+    color: $app-color;

+    opacity: 1;

+  }

+  :-ms-input-placeholder {

+    color: $app-color;

+    opacity: 1;

+  }

+

+  input[type="submit"] {

+    font-size: 17px;

+    width: 8%;

+    position: absolute;

+    right: 8px;

+    margin: 0;

+  }

+}

@@ -1,5 +1,3 @@

-@import "config";

-

 label {

   display: block;

   color: $gray;

@@ -1,7 +1,7 @@

 class ApplicationController < ActionController::Base

   #protect_from_forgery

-	before_filter :require_login

+	#before_filter :require_login

 	def require_login

 		#if controller_name == 'sessions' && action_name == 'new'

@@ -2,46 +2,129 @@

 - content_for :javascript, javascript_include_tag("application")

 .container

-  .top-border.leftside.left

-    .roster.border.no-top-border.height-setter

+  .leftside.left

+    .roster.border.no-top-border.top-border.height-setter

       .user

-        .avatar

+        .avatar.bigger

           %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

         %h1 Cinan Rakosnik

         %h2 frontend developer

-        %h3 available

+        %h3

+          %span.status.online

+          %a{ href: "#"}

+            available

+            %span.icon-arrow-down.drop-down

       .friends

         %h1.group-header.active Chat group

-        %ul.active-group.border.left-border

-          %li.clear

-            .user

-              .avatar

-                %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

-              %h1 Adam Wolsky

-              %h2 co-founder

-          %li.clear

-            .user

-              .avatar

-                %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

-              %h1 John Savage

-              %h2 web & ui designer

-

+        %ul.active-group.border.no-left-border.left-border

+          %li.clear.user

+            .avatar

+              %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

+            %h1

+              Adam Wolsky

+              %span.status.online

+            %h2 co-founder

+            %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}

+              %span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}

+                %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} kick

+          %li.clear.user

+            .avatar

+              %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

+            %h1

+              John Savage

+              %span.status.away

+            %h2 web & ui designer

+            %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}

+              %span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}

+                %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} kick

+              %span.icon-bubbles{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}

+                %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; font-size: 0.9em;"} invite

         %h1.group-header Friends

         %ul

-          %li.clear

-            .user

-              .avatar

-                %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

-              %h1 Ashley Bond

-              %h2 sexretary

-          %li.clear

-            .user

-              .avatar

-                %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

-              %h1 Bob Awesome

-              %h2 sales manager

+          %li.clear.user{ style: "padding-right: 0"}

+            .avatar

+              %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

+            %h1

+              Ashley Bond

+              %span.status.offline

+            %h2 sexretary

+            %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}

+              -#%span.icon-bubble{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}

+              -#  %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; font-size: 0.9em;"} chat

+              %span.icon-bubbles{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 13px; padding-top: 1px;"}

+                %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; font-size: 0.9em;"} invite

+          %li.clear.user

+            .avatar

+              %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

+            %h1

+              Bob Awesome

+              %span.status.dnd

+            %h2 sales manager

+            %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}

+              %span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}

+                %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} kick

+          %li.clear.user

+            .avatar

+              %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

+            %h1

+              Bob Awesome

+              %span.status.dnd

+            %h2 sales manager

+            %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}

+              %span.icon-bubble{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}

+                %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} chat

       .toolbox

-        %input{type: "text", placeholder: "Search contact"}

-  .chatting-window

-    Chatting

\ No newline at end of file

+        %input{type: "search", placeholder: "Search contact"}

+        %a{ href: "#"}

+          %span.icon-cog

+  .chatting-window.left.rightside

+    .tabbar

+      %a{ href: "#", class: "tab active top-border"}

+        Adam and John

+        %span.right.icon.icon-x

+      %a{ href: "#", class: "tab"}

+         

+        %span.right.icon.icon-x

+      %a{ href: "#", class: "tab"}

+         

+        %span.right.icon.icon-x

+    .conversation.clear.border

+      .messages

+        %a{ href: "#", class: "event" }

+          Load older messages

+          %span.icon-arrow-up

+        .message-box

+          .user

+            .avatar

+              %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

+            -#todo: user name missing in design

+          .date 3 hours ago

+          %p Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Supendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula...

+        .message-box

+          .user

+            .avatar

+              %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

+            -#todo: user name missing in design

+          .date 3 hours ago

+          %p Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Supendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula...

+          -#%hr

+          %p Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Supendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula...

+

+        .event

+          Monday 13.2.2013

+

+        .message-box.active

+          .user

+            .avatar

+              %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

+            -#todo: user name missing in design

+          .date 3 hours ago

+          %p Etiam ullamcorper. Supendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Lorem ipsum dolor sit amet enim.

+

+        .event

+          Adam left the room | 13:45

+

+      .message-writer

+        %input{ type: "text", placeholder: "Type your message here" }

+        %input{ type: "submit", value: "Send" }

@@ -2,6 +2,7 @@ require "spec_helper"

 describe "Chatting behaviour" do

+    #todo change subject in testing roster and chatting window

 	subject { page }

 	describe "should show account info" do

@@ -19,5 +20,31 @@ describe "Chatting behaviour" do

 		it { should have_selector('h1', 'John Savage') }

 		it { should have_selector('h1', 'Adam Wolsky') }

-	end

+    end

+

+    describe "should show tabbar" do

+        before { visit chat_path }

+

+        it { should have_selector(class: 'tabbar') }

+        it { should have_selector('h1', text: 'Adam and John', class: 'tab') }

+    end

+

+    describe "should a conversation" do

+        before { visit chat_path }

+

+        describe "show some messages" do

+            it { should have_selector('img') }

+            it { should have_selector(class: 'date') }

+            #todo should have a message text

+        end

+

+        describe "should show event dates" do

+            it { should have_selector(text: 'Monday 13.2.2013') }

+        end

+

+        describe "should allow write a new message" do

+            it { should have_selector('input', placeholder: 'Type your message here') }

+            it { should have_button('Send') }

+        end

+    end

 end

\ No newline at end of file