Browse code

CSS a HTML pre zmenu avatara

Cinan Rakosnik authored on 16/05/2013 at 12:22:37
Showing 5 changed files
... ...
@@ -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
 
... ...
@@ -1,6 +1,7 @@
1 1
 $bg-color: #DEDBDB;
2 2
 $app-color: #24a396;
3 3
 $bg-roster: #F4F4F4;
4
+$inactive-color: #658489;
4 5
 
5 6
 $white: #fff;
6 7
 $gray: #b0b7b9;
... ...
@@ -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
 }