... | ... |
@@ -7,22 +7,21 @@ |
7 | 7 |
%p change |
8 | 8 |
%h1 |
9 | 9 |
%input{ type: 'text', title: "#{@jid}", class: 'js-edit-name', value: "#{@name}"} |
10 |
- %h2 #{@message || '<input type="text" class="js-edit-status empty" value="'+I18n.t('chat.roster.change_status_msg')+'">' } |
|
11 |
- -#todo: nastylovat placeholder |
|
10 |
+ %h2{style: 'margin-top: -5px'} #{@message || '<input type="text" class="js-edit-status empty" value="'+I18n.t('chat.roster.change_status_msg')+'">' } |
|
12 | 11 |
%h3 |
13 | 12 |
.rolldown.js-change-state |
14 | 13 |
.js-state-clickable{ 'data-state' => 'online' } |
15 | 14 |
%span.status.icon-record.online |
16 | 15 |
%a.active{ href: '#' } |
17 | 16 |
Online |
18 |
- %br |
|
17 |
+ %span.icon-arrow-down.drop-down |
|
19 | 18 |
.hidden.js-state-clickable{ 'data-state' => 'away' } |
20 | 19 |
%span.status.icon-record.away |
21 | 20 |
%a{ href: '#' } |
22 | 21 |
Away |
23 |
- %br |
|
22 |
+ %span.icon-arrow-down.drop-down |
|
24 | 23 |
.hidden.js-state-clickable{ 'data-state' => 'dnd' } |
25 | 24 |
%span.status.icon-record.dnd |
26 | 25 |
%a{ href: '#' } |
27 | 26 |
DND |
28 |
- %span.icon-arrow-down.drop-down |
|
29 | 27 |
\ No newline at end of file |
28 |
+ %span.icon-arrow-down.drop-down |
|
30 | 29 |
\ No newline at end of file |
... | ... |
@@ -83,6 +83,7 @@ class Xmpp.Views.Contacts.MeView extends Backbone.View |
83 | 83 |
.find('.hidden').removeClass('hidden') |
84 | 84 |
|
85 | 85 |
$('.rolldown').removeClass('js-change-state') |
86 |
+ .find('.drop-down').addClass('hidden') |
|
86 | 87 |
|
87 | 88 |
confirmChangeState: (e) -> |
88 | 89 |
$this = $(e.currentTarget) |
... | ... |
@@ -92,6 +93,7 @@ class Xmpp.Views.Contacts.MeView extends Backbone.View |
92 | 92 |
.children().addClass('hidden') |
93 | 93 |
|
94 | 94 |
$('.rolldown').find('a').removeClass('active') |
95 |
+ .find('.drop-down').removeClass('hidden') |
|
95 | 96 |
|
96 | 97 |
$this.removeClass('hidden') |
97 | 98 |
.find('a').addClass('active') |
... | ... |
@@ -43,6 +43,7 @@ |
43 | 43 |
.wrap { |
44 | 44 |
overflow-y: auto; |
45 | 45 |
overflow-x: hidden; |
46 |
+ width: 210px; |
|
46 | 47 |
} |
47 | 48 |
} |
48 | 49 |
|
... | ... |
@@ -75,7 +76,7 @@ |
75 | 75 |
h3 { |
76 | 76 |
font-size: 12px; |
77 | 77 |
color: $status-color; |
78 |
- margin-top: -3px; |
|
78 |
+ margin-top: -2px; |
|
79 | 79 |
|
80 | 80 |
.rolldown { |
81 | 81 |
clear: both; |
... | ... |
@@ -84,24 +85,31 @@ |
84 | 84 |
width: 67px; |
85 | 85 |
font-weight: normal; |
86 | 86 |
float: left; |
87 |
+ z-index: 10; |
|
88 |
+ |
|
87 | 89 |
a { |
88 | 90 |
color: $status-color; |
89 | 91 |
} |
90 | 92 |
|
91 | 93 |
&.editing { |
92 | 94 |
background: white; |
95 |
+ @include box-shadow(rgba(33,87,81, 0.4) 0 0 2px); |
|
93 | 96 |
} |
94 | 97 |
|
95 | 98 |
.active { |
96 | 99 |
font-weight: bold; |
97 | 100 |
} |
101 |
+ |
|
102 |
+ div { |
|
103 |
+ clear: both; |
|
104 |
+ } |
|
98 | 105 |
} |
99 | 106 |
|
100 | 107 |
.drop-down { |
101 | 108 |
position: relative; |
102 |
- top: 1px; |
|
103 |
- left: 54px; |
|
109 |
+ top: 2px; |
|
104 | 110 |
font-size: 13px; |
111 |
+ float: right; |
|
105 | 112 |
} |
106 | 113 |
} |
107 | 114 |
|
... | ... |
@@ -252,6 +260,7 @@ |
252 | 252 |
padding: 8px 10px; |
253 | 253 |
background: white; |
254 | 254 |
border-right: 0 !important; |
255 |
+ z-index: 1; |
|
255 | 256 |
|
256 | 257 |
li { |
257 | 258 |
background: white; |
... | ... |
@@ -275,7 +284,7 @@ |
275 | 275 |
} |
276 | 276 |
|
277 | 277 |
.action { |
278 |
- margin-right: 2px; |
|
278 |
+ margin-right: 5px; |
|
279 | 279 |
margin-top: -31px; |
280 | 280 |
float: right; |
281 | 281 |
width: 67px; |
... | ... |
@@ -289,6 +298,10 @@ |
289 | 289 |
padding-right: 10px; |
290 | 290 |
padding-top: 1px; |
291 | 291 |
|
292 |
+ &:hover { |
|
293 |
+ cursor: pointer; |
|
294 |
+ } |
|
295 |
+ |
|
292 | 296 |
&:before { |
293 | 297 |
margin-left: 6px; |
294 | 298 |
} |
... | ... |
@@ -335,7 +348,7 @@ |
335 | 335 |
.status { |
336 | 336 |
font-size: 15px; |
337 | 337 |
position: relative; |
338 |
- top: 2px; |
|
338 |
+ top: 1px; |
|
339 | 339 |
|
340 | 340 |
&.online, &.away, &.dnd, &.offline { |
341 | 341 |
font-size: 11px; |