Browse code
CSS a HTML pre zmenu avatara
Cinan Rakosnik authored on 16/05/2013 at 12:22:37Showing 5 changed files
- app/assets/javascripts/backbone/templates/contacts/me.hamlc
- app/assets/javascripts/backbone/views/contacts/me.js.coffee
- app/assets/stylesheets/_config.scss
- app/assets/stylesheets/application.css.scss
- app/assets/stylesheets/chat.css.scss
| ... | ... |
@@ -1,23 +1,26 @@ |
| 1 | 1 |
.user |
| 2 | 2 |
.avatar.bigger{ title: "#{@jid}" }
|
| 3 | 3 |
%img{ src: "#{@avatar || 'assets/avatar.png'}", alt: I18n.t('chat.roster.avatar_alt') }
|
| 4 |
+ .change-avatar.hidden |
|
| 5 |
+ .background |
|
| 6 |
+ %p change |
|
| 4 | 7 |
%h1 |
| 5 | 8 |
%input{ type: 'text', title: "#{@jid}", class: 'js-edit-name', value: "#{@name}"}
|
| 6 | 9 |
%h2 #{@message || '<input type="text" class="js-edit-status empty" value="'+I18n.t('chat.roster.change_status_msg')+'">' }
|
| 7 | 10 |
-#todo: nastylovat placeholder |
| 8 | 11 |
%h3 |
| 9 | 12 |
.rolldown.js-change-state |
| 10 |
- .js-state-clickable{ 'data-state': 'online' }
|
|
| 13 |
+ .js-state-clickable{ 'data-state' => 'online' }
|
|
| 11 | 14 |
%span.status.icon-record.online |
| 12 | 15 |
%a.active{ href: '#' }
|
| 13 | 16 |
Online |
| 14 | 17 |
%br |
| 15 |
- .hidden.js-state-clickable{ 'data-state': 'away' }
|
|
| 18 |
+ .hidden.js-state-clickable{ 'data-state' => 'away' }
|
|
| 16 | 19 |
%span.status.icon-record.away |
| 17 | 20 |
%a{ href: '#' }
|
| 18 | 21 |
Away |
| 19 | 22 |
%br |
| 20 |
- .hidden.js-state-clickable{ 'data-state': 'dnd' }
|
|
| 23 |
+ .hidden.js-state-clickable{ 'data-state' => 'dnd' }
|
|
| 21 | 24 |
%span.status.icon-record.dnd |
| 22 | 25 |
%a{ href: '#' }
|
| 23 | 26 |
DND |
| ... | ... |
@@ -14,6 +14,9 @@ class Xmpp.Views.Contacts.MeView extends Backbone.View |
| 14 | 14 |
'click .js-change-state': (e) -> @openChangeState(e) |
| 15 | 15 |
'click .js-state-clickable': (e) -> @confirmChangeState(e) |
| 16 | 16 |
|
| 17 |
+ 'mouseover .avatar': -> $('.change-avatar').show()
|
|
| 18 |
+ 'mouseout .avatar': -> $('.change-avatar').hide()
|
|
| 19 |
+ |
|
| 17 | 20 |
initialize: () -> |
| 18 | 21 |
_.bindAll(this) |
| 19 | 22 |
|
| ... | ... |
@@ -5,6 +5,7 @@ |
| 5 | 5 |
*/ |
| 6 | 6 |
|
| 7 | 7 |
@import "compass/css3/box-sizing"; |
| 8 |
+@import "compass/css3/opacity"; |
|
| 8 | 9 |
|
| 9 | 10 |
@import "config"; |
| 10 | 11 |
@import "chat.css.scss"; |
| ... | ... |
@@ -14,7 +15,7 @@ |
| 14 | 14 |
|
| 15 | 15 |
body {
|
| 16 | 16 |
background: $bg-color; |
| 17 |
- border-top: #658489 7px solid; |
|
| 17 |
+ border-top: $inactive-color 7px solid; |
|
| 18 | 18 |
font-size: 12px; |
| 19 | 19 |
font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif; |
| 20 | 20 |
} |
| ... | ... |
@@ -142,20 +142,50 @@ |
| 142 | 142 |
|
| 143 | 143 |
margin-right: 8px; |
| 144 | 144 |
|
| 145 |
- img {
|
|
| 146 |
- height: 32px; |
|
| 147 |
- |
|
| 148 |
- margin: 0 auto; |
|
| 149 |
- display: block; |
|
| 150 |
- } |
|
| 151 |
- |
|
| 152 | 145 |
&.bigger {
|
| 153 | 146 |
height: 46px; |
| 154 | 147 |
width: 46px; |
| 148 |
+ position: relative; |
|
| 155 | 149 |
|
| 156 | 150 |
img {
|
| 157 | 151 |
height: 46px; |
| 158 | 152 |
} |
| 153 |
+ |
|
| 154 |
+ .change-avatar {
|
|
| 155 |
+ &:hover {
|
|
| 156 |
+ cursor: pointer; |
|
| 157 |
+ } |
|
| 158 |
+ |
|
| 159 |
+ .background {
|
|
| 160 |
+ position: absolute; |
|
| 161 |
+ top: 0; |
|
| 162 |
+ left: 0; |
|
| 163 |
+ height: 46px; |
|
| 164 |
+ width: 46px; |
|
| 165 |
+ background: $inactive-color; |
|
| 166 |
+ @include opacity(0.8); |
|
| 167 |
+ } |
|
| 168 |
+ |
|
| 169 |
+ |
|
| 170 |
+ p {
|
|
| 171 |
+ position: absolute; |
|
| 172 |
+ top: 3px; |
|
| 173 |
+ left: 4px; |
|
| 174 |
+ color: $gray-light; |
|
| 175 |
+ font-weight: bold; |
|
| 176 |
+ |
|
| 177 |
+ &:hover {
|
|
| 178 |
+ text-decoration: underline; |
|
| 179 |
+ } |
|
| 180 |
+ } |
|
| 181 |
+ } |
|
| 182 |
+ } |
|
| 183 |
+ |
|
| 184 |
+ img {
|
|
| 185 |
+ height: 32px; |
|
| 186 |
+ |
|
| 187 |
+ margin: 0 auto; |
|
| 188 |
+ display: block; |
|
| 159 | 189 |
} |
| 160 | 190 |
} |
| 161 | 191 |
} |