new file mode 100644

@@ -0,0 +1,2 @@

+.event

+  Monday 13.2.2013

\ No newline at end of file

new file mode 100644

@@ -0,0 +1,9 @@

+.message-box

+  .user

+    .avatar

+      %img{src: 'assets/avatar.png', alt: I18n.t("chat.roster.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...

\ No newline at end of file

new file mode 100644

@@ -0,0 +1,3 @@

+.message-writer#msg-writer

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

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

\ No newline at end of file

new file mode 100644

@@ -0,0 +1,2 @@

+.conversation.clear.border

+  #{@date}

\ No newline at end of file

new file mode 100644

@@ -0,0 +1,29 @@

+Xmpp.Views.Chat ||= {}

+

+class Xmpp.Views.Chat.WindowView extends Backbone.View

+  template: JST["backbone/templates/chat/window"]

+  el: $('#conversation-js')

+

+  initialize: () ->

+    _.bindAll(this)

+    @tab = @attributes['tab']

+    @date = new Date() #pre testovacie ucely

+

+  render: ->

+    $(@el).html(@template(date: @date.getTime()))

+    @show()

+    return this

+

+  hide: ->

+    $(@el).addClass('hidden')

+    this

+

+  show: ->

+    $(@el).removeClass('hidden')

+    this

+

+  remove: ->

+    @undelegateEvents()

+    $(@el).empty()

+    # @stopListening() TODO: po upgrade na 1.0 uz bude pristupne

+    this

\ No newline at end of file

@@ -26,9 +26,27 @@ class Xmpp.Views.Tabbar.TabView extends Backbone.View

     ))

     return this

+  showChat: ->

+    if !@chatWindow

+      @chatWindow = new Xmpp.Views.Chat.WindowView(attributes: {tab: this})

+      App.debug 'zobrazujem NOVY chat window'

+    else

+      App.debug 'zobrazujem EXISTUJUCI chat window'

+

+    @chatWindow.render()

+

+  destroy: ->

+    App.debug 'destroy chatWindow and tab'

+    @chatWindow.remove()

+    @remove()

+

+  hideChat: ->

+    if @chatWindow

+      @chatWindow.hide();

+

   closeChat: ->

     Backbone.Events.trigger('closeChat', this, @model)

-    @remove()

+    @destroy()

   hasParticipants: (who, withWhom) ->

     @model && @model.get('who') == who && @model.get('withWhom') == withWhom

@@ -7,10 +7,14 @@ class Xmpp.Views.Tabbar.TabbarView extends Backbone.View

   initialize: () ->

     _.bindAll(this)

-    Backbone.Events.on('openChat', @addOrSelect)

-                   .on('closeChat', @removeTab)

+    Backbone.Events.on('openChat', (chat) =>

+      @hideCurrentChatWindow()

+      @addOrSelect(chat)

+    )

+    Backbone.Events.on('closeChat', @removeTab)

     @tabs = []

+    @activeTab = null

     @render()

   addOrSelect: (chat) ->

@@ -30,11 +34,24 @@ class Xmpp.Views.Tabbar.TabbarView extends Backbone.View

       tab.setInactive()

     )

-    tab.setActive().el

+    @activeTab = tab

+    @activeTab.setActive()

+

+    @activeTab.showChat()

+#    App.debug ['aktivny tab: ', @activeTab]

+

+  hideCurrentChatWindow: ->

+    if @activeTab

+      App.debug 'zakryvam chat window'

+      @activeTab.hideChat()

   removeTab: (tab) ->

+#    if @activeTab && @activeTab == tab

+#      App.debug 'nicim tab aj chat window'

+#      @activeTab.destroy()

+

     @tabs = _.without(@tabs, tab)

   render: ->

-    $(@el).html('')

+    $(@el).html(@template())

     return this

@@ -95,4 +95,8 @@ input {

 .clear {

   clear: both;

+}

+

+.hidden {

+  display: none;

 }

\ No newline at end of file

@@ -307,6 +307,7 @@

   .messages {

     min-height: 296px;

+    overflow: auto;

   }

   .message-box {

@@ -16,30 +16,6 @@

       .my-info#js-me

       .friends

         #js-active-friends

-        -#%h1.group-header.active Chat group

-        -#%ul.active-group

-        -#  %li.clear.user

-        -#    .avatar

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

-        -#    %h1

-        -#      Adam Wolsky

-        -#      %span.status.online.icon-record

-        -#    %h2 co-founder

-        -#    %span.action

-        -#      %span.icon-x-full

-        -#        %span kick

-        -#  %li.clear.user

-        -#    .avatar

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

-        -#    %h1

-        -#      John Savage

-        -#      %span.status.away.icon-record

-        -#    %h2 web & ui designer

-        -#    %span.action

-        -#      %span.icon-x-full

-        -#        %span kick

-        -#      %span.icon-bubbles

-        -#        %span invite

         #js-inactive-friends

       .toolbox

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

@@ -48,42 +24,31 @@

   .chatting-window.left.rightside

     .tabbar#tabbar

       #js-tabbar

-    .conversation.clear.border

-      .messages#height-setter-2{style: "overflow: auto;"}

-        %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#msg-writer

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

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

+    #conversation-js

+      -#.conversation.clear.border

+        -#.messages#height-setter-2{style: "overflow: auto;"}

+        -#  %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.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#msg-writer

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

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