... | ... |
@@ -53,6 +53,9 @@ this.App = |
53 | 53 |
) |
54 | 54 |
) |
55 | 55 |
|
56 |
+ updateMyStatus: (message, state)-> |
|
57 |
+ App.Com.trigger(event: 'app.roster.updateMyStatus', data: {message: message, state: state}) |
|
58 |
+ |
|
56 | 59 |
removeContactRemote: (contact, client) -> |
57 | 60 |
App.Com.trigger(event: 'app.roster.removeContact', data: {jid: contact, client: client}) |
58 | 61 |
|
... | ... |
@@ -1,10 +1,22 @@ |
1 | 1 |
.user |
2 | 2 |
.avatar.bigger{ title: "#{@jid}" } |
3 |
- %img{ src: "#{@avatar || 'assets/avatar.png'}", alt: I18n.t("chat.roster.avatar_alt") } |
|
3 |
+ %img{ src: "#{@avatar || 'assets/avatar.png'}", alt: I18n.t('chat.roster.avatar_alt') } |
|
4 | 4 |
%h1{ title: "#{@jid}"} #{@name } |
5 |
- %h2 #{@message || '<i>'+I18n.t('chat.roster.change_status_msg')+'</i>'} |
|
5 |
+ %h2 #{@message || '<input type="text" class="js-click-edit empty" value="'+I18n.t('chat.roster.change_status_msg')+'">'} |
|
6 | 6 |
%h3 |
7 |
- %span.status.icon-record{ class: "#{@status}" } |
|
8 |
- %a{ href: "#"} |
|
9 |
- #{@status} |
|
10 |
- %span.icon-arrow-down.drop-down |
|
11 | 7 |
\ No newline at end of file |
8 |
+ .rolldown.js-change-state |
|
9 |
+ .js-state-clickable{ 'data-state': 'online' } |
|
10 |
+ %span.status.icon-record.online |
|
11 |
+ %a.active{ href: '#' } |
|
12 |
+ Online |
|
13 |
+ %br |
|
14 |
+ .hidden.js-state-clickable{ 'data-state': 'away' } |
|
15 |
+ %span.status.icon-record.away |
|
16 |
+ %a{ href: '#' } |
|
17 |
+ Away |
|
18 |
+ %br |
|
19 |
+ .hidden.js-state-clickable{ 'data-state': 'dnd' } |
|
20 |
+ %span.status.icon-record.dnd |
|
21 |
+ %a{ href: '#' } |
|
22 |
+ DND |
|
23 |
+ %span.icon-arrow-down.drop-down |
|
12 | 24 |
\ No newline at end of file |
... | ... |
@@ -4,6 +4,12 @@ class Xmpp.Views.Contacts.MeView extends Backbone.View |
4 | 4 |
template: JST["backbone/templates/contacts/me"] |
5 | 5 |
el: $('#js-me') |
6 | 6 |
|
7 |
+ events: |
|
8 |
+ 'click .js-click-edit': (e) -> @editMyStatus(e) |
|
9 |
+ 'keypress .js-click-edit': (e) -> @confirmMyStatus(e) |
|
10 |
+ 'click .js-change-state': (e) -> @openChangeState(e) |
|
11 |
+ 'click .js-state-clickable': (e) -> @confirmChangeState(e) |
|
12 |
+ |
|
7 | 13 |
initialize: () -> |
8 | 14 |
_.bindAll(this) |
9 | 15 |
|
... | ... |
@@ -16,4 +22,61 @@ class Xmpp.Views.Contacts.MeView extends Backbone.View |
16 | 16 |
render: -> |
17 | 17 |
contact = @model.toJSON() |
18 | 18 |
$(@el).html(@template(contact)) |
19 |
- this |
|
20 | 19 |
\ No newline at end of file |
20 |
+ this |
|
21 |
+ |
|
22 |
+ editMyStatus: (e) -> |
|
23 |
+ $this = $(e.currentTarget) |
|
24 |
+ |
|
25 |
+ if ($this.hasClass('empty')) |
|
26 |
+ $this.val('') |
|
27 |
+ |
|
28 |
+ if (! $this.hasClass('editing')) |
|
29 |
+ $this.removeClass('empty') |
|
30 |
+ .addClass('editing') |
|
31 |
+ |
|
32 |
+ confirmMyStatus: (e) -> |
|
33 |
+ if (e.which != 13 && e.which != 10) |
|
34 |
+ return |
|
35 |
+ |
|
36 |
+ $this = $(e.currentTarget) |
|
37 |
+ |
|
38 |
+ if ($this.val() == '') |
|
39 |
+ $this.removeClass('editing') |
|
40 |
+ .addClass('empty') |
|
41 |
+ .val(I18n.t('chat.roster.change_status_msg')) |
|
42 |
+ else |
|
43 |
+ $this.removeClass('editing') |
|
44 |
+ |
|
45 |
+ $this.blur() |
|
46 |
+ App.Com.updateMyStatus(@_getStatusMessage(), @_getState()) |
|
47 |
+ |
|
48 |
+ openChangeState: (e) -> |
|
49 |
+ $this = $(e.currentTarget) |
|
50 |
+ |
|
51 |
+ $this.addClass('editing') |
|
52 |
+ .find('.hidden').removeClass('hidden') |
|
53 |
+ |
|
54 |
+ $('.rolldown').removeClass('js-change-state') |
|
55 |
+ |
|
56 |
+ confirmChangeState: (e) -> |
|
57 |
+ $this = $(e.currentTarget) |
|
58 |
+ |
|
59 |
+ $('.rolldown').removeClass('editing') |
|
60 |
+ .addClass('js-change-state') |
|
61 |
+ .children().addClass('hidden') |
|
62 |
+ |
|
63 |
+ $('.rolldown').find('a').removeClass('active') |
|
64 |
+ |
|
65 |
+ $this.removeClass('hidden') |
|
66 |
+ .find('a').addClass('active') |
|
67 |
+ |
|
68 |
+ App.Com.updateMyStatus(@_getStatusMessage(), @_getState()) |
|
69 |
+ |
|
70 |
+ _getStatusMessage: -> |
|
71 |
+ if $('.js-click-edit').hasClass('empty') |
|
72 |
+ return '' |
|
73 |
+ else |
|
74 |
+ $('.js-click-edit').val() |
|
75 |
+ |
|
76 |
+ _getState: -> |
|
77 |
+ $('.js-state-clickable:not(.hidden)').data('state') |
... | ... |
@@ -41,10 +41,30 @@ |
41 | 41 |
} |
42 | 42 |
|
43 | 43 |
h2 { |
44 |
- font-size: 11px; |
|
45 |
- font-weight: normal; |
|
46 |
- color: #7e8b90; |
|
47 |
- text-shadow: white 1px 1px; |
|
44 |
+ input { |
|
45 |
+ border: 0; |
|
46 |
+ background: transparent; |
|
47 |
+ width: 151px; |
|
48 |
+ padding: 0; |
|
49 |
+ outline: none; |
|
50 |
+ margin: 0; |
|
51 |
+ font-style: italic; |
|
52 |
+ font-size: 11px; |
|
53 |
+ font-weight: normal; |
|
54 |
+ color: #7e8b90; |
|
55 |
+ text-shadow: white 1px 1px; |
|
56 |
+ height: 18px; |
|
57 |
+ |
|
58 |
+ &:focus { |
|
59 |
+ border: none !important; |
|
60 |
+ } |
|
61 |
+ |
|
62 |
+ &.editing { |
|
63 |
+ padding: 3px 0; |
|
64 |
+ font-style: normal; |
|
65 |
+ text-shadow: none; |
|
66 |
+ } |
|
67 |
+ } |
|
48 | 68 |
} |
49 | 69 |
|
50 | 70 |
h3 { |
... | ... |
@@ -52,10 +72,28 @@ |
52 | 52 |
color: $status-color; |
53 | 53 |
margin-top: -3px; |
54 | 54 |
|
55 |
+ .rolldown { |
|
56 |
+ clear: both; |
|
57 |
+ left: 54px; |
|
58 |
+ position: relative; |
|
59 |
+ top: -8px; |
|
60 |
+ width: 67px; |
|
61 |
+ font-weight: normal; |
|
62 |
+ float: left; |
|
63 |
+ |
|
64 |
+ &.editing { |
|
65 |
+ background: white; |
|
66 |
+ } |
|
67 |
+ |
|
68 |
+ .active { |
|
69 |
+ font-weight: bold; |
|
70 |
+ } |
|
71 |
+ } |
|
72 |
+ |
|
55 | 73 |
.drop-down { |
56 | 74 |
position: relative; |
57 | 75 |
top: 2px; |
58 |
- left: -2px; |
|
76 |
+ left: 36px; |
|
59 | 77 |
font-size: 13px; |
60 | 78 |
} |
61 | 79 |
} |
... | ... |
@@ -107,8 +145,18 @@ |
107 | 107 |
} |
108 | 108 |
} |
109 | 109 |
|
110 |
- .user:hover { |
|
111 |
- background: #fbfbfb; |
|
110 |
+ .user { |
|
111 |
+ h2 { |
|
112 |
+ font-size: 11px; |
|
113 |
+ font-weight: normal; |
|
114 |
+ color: #7e8b90; |
|
115 |
+ text-shadow: white 1px 1px; |
|
116 |
+ } |
|
117 |
+ |
|
118 |
+ &:hover { |
|
119 |
+ background: #fbfbfb; |
|
120 |
+ } |
|
121 |
+ |
|
112 | 122 |
} |
113 | 123 |
|
114 | 124 |
.active-group { |
... | ... |
@@ -153,6 +153,29 @@ class WsRosterController < WebsocketRails::BaseController |
153 | 153 |
trigger_success jid: jid, vcard: vcard, status: presence |
154 | 154 |
end |
155 | 155 |
|
156 |
+ def me_update_status |
|
157 |
+ status_message = message[:message] |
|
158 |
+ state = message[:state] |
|
159 |
+ |
|
160 |
+ xmpp_state = case state |
|
161 |
+ when 'away' then :away |
|
162 |
+ when 'dnd' then :dnd |
|
163 |
+ else nil |
|
164 |
+ end |
|
165 |
+ |
|
166 |
+ presence = Jabber::Presence.new |
|
167 |
+ presence.show = xmpp_state |
|
168 |
+ presence.status = status_message |
|
169 |
+ |
|
170 |
+ connection_store[:clients].each do |client| |
|
171 |
+ client.send(presence) |
|
172 |
+ end |
|
173 |
+ end |
|
174 |
+ |
|
175 |
+ def me_update_vcard |
|
176 |
+ |
|
177 |
+ end |
|
178 |
+ |
|
156 | 179 |
def disconnect |
157 | 180 |
connection_store[:clients] && connection_store[:clients].each do |client| |
158 | 181 |
client.close() |
... | ... |
@@ -54,6 +54,8 @@ WebsocketRails::EventMap.describe do |
54 | 54 |
subscribe :startPolling, to: WsRosterController, with_method: :start_polling_contacts_state |
55 | 55 |
subscribe :setPresence, to: WsRosterController, with_method: :set_presence |
56 | 56 |
subscribe :myself, to: WsRosterController, with_method: :myself |
57 |
+ subscribe :updateMyStatus, to: WsRosterController, with_method: :me_update_status |
|
58 |
+ subscribe :updateMyVcard, to: WsRosterController, with_method: :me_update_vcard |
|
57 | 59 |
subscribe :removeContact, to: WsRosterController, with_method: :remove_contact |
58 | 60 |
end |
59 | 61 |
|