Merge pull request #4039 from marpo60/diaspora_with_sprites

Add Sprites to Diaspora!

Gemfile

@@ -109,6 +109,7 @@ gem 'gon', '4.0.2'
 group :assets do
   gem 'bootstrap-sass', '2.2.2.0'
   gem 'sass-rails', '3.2.6'
+  gem 'compass-rails', '1.0.3'
 
   # Windows and OSX have an execjs compatible runtime built-in, Linux users should
   # install Node.js or use 'therubyracer'.

Gemfile.lock

@@ -64,6 +64,7 @@ GEM
       activesupport (>= 3.2.0)
     childprocess (0.3.8)
       ffi (~> 1.0, >= 1.0.11)
+    chunky_png (1.2.6)
     client_side_validations (3.2.1)
     coderay (1.0.8)
     coffee-rails (3.2.2)
@@ -73,6 +74,12 @@ GEM
       coffee-script-source
       execjs
     coffee-script-source (1.4.0)
+    compass (0.12.2)
+      chunky_png (~> 1.2)
+      fssm (>= 0.2.7)
+      sass (~> 3.1)
+    compass-rails (1.0.3)
+      compass (>= 0.12.2, < 0.14)
     configurate (0.0.2)
     crack (0.3.2)
     cucumber (1.2.1)
@@ -126,6 +133,7 @@ GEM
     foreman (0.61.0)
       thor (>= 0.13.6)
     formatador (0.2.4)
+    fssm (0.2.9)
     fuubar (1.1.0)
       rspec (~> 2.0)
       rspec-instafail (~> 0.2.0)
@@ -414,6 +422,7 @@ DEPENDENCIES
   capybara (= 1.1.3)
   carrierwave (= 0.8.0)
   client_side_validations (= 3.2.1)
+  compass-rails (= 1.0.3)
   configurate (= 0.0.2)
   cucumber-rails (= 1.3.0)
   database_cleaner (= 0.9.1)

app/assets/javascripts/app/views/aspect_view.js

@@ -3,6 +3,8 @@ app.views.Aspect = app.views.Base.extend({
 
   tagName: "li",
 
+  className: 'sub_nav_item',
+
   initialize: function(){
     if (this.model.get('selected')){
       this.$el.addClass('active');
@@ -16,6 +18,7 @@ app.views.Aspect = app.views.Base.extend({
   toggleAspect: function(evt){
     if (evt) { evt.preventDefault(); };
     this.$el.toggleClass('active');
+    this.$el.find('.icons-check_yes_ok').toggleClass('invisible')
     this.model.toggleSelected();
     app.router.aspects_stream();
   },

app/assets/javascripts/pages/users-getting-started.js

@@ -7,8 +7,6 @@ Diaspora.Pages.UsersGettingStarted = function() {
 
     $('#edit_profile').bind('ajax:success', function(evt, data, status, xhr){
       $('#gs-name-form-spinner').addClass("hidden");
-      $('.profile .saved').show();
-      $('.profile .saved').fadeOut(2000);
     });
 
     // It seems that the default behavior of rails ujs is to clear the remote form

app/assets/stylesheets/application.css.sass

@@ -1,8 +1,17 @@
+@import 'compass'
 @import 'ui.css.sass'
 @import '_mixins.css.scss'
 @import '_flash_messages.scss'
 @import 'new_styles/_spinner'
 
+/* ===== sprites ===== */
+
+@import 'icons/*.png'
+@import 'branding/*.png'
+@import 'social_media_logos/*.png'
+@include all-icons-sprites
+@include all-branding-sprites
+@include all-social_media_logos-sprites
 /* ====== media ====== */
 .media
   :margin 10px
@@ -140,6 +149,14 @@ header
   :border
     :bottom 1px solid #000
 
+  a.header_root_link
+    :display inline-block
+    :margin-top 5px
+
+  .branding-logo_small
+    :height 16px
+    :width 161px
+
   a
     :color #CCC
     :color rgb(147,147,147)
@@ -289,6 +306,8 @@ ul.as-selections
 .diaspora_header_logo
   :float left
   :margin-top -6px
+  :height 38px
+  :width 65px
 
 .stream
   audio
@@ -412,7 +431,20 @@ ul.as-selections
   &:hover
     @include opacity(1)
 
-.controls
+  .block_user
+    :display inline-block
+
+    .icons-ignoreuser
+      :height 14px
+      :width 13px
+
+  .delete
+    :display inline-block
+
+    .icons-deletelabel
+      :height 8px
+      :width 8px
+
   a:hover
     :text-decoration none
 
@@ -720,12 +752,29 @@ form p.checkbox_select
         :text
           :align left
 
+      .icons-monotone_wrench_settings
+        :display inline-block
+        :width 16px
+        :height 16px
+
+      a.question_mark
+        :text-decoration none
+
     #publisher_service_icons
       :position relative
       :top 3px
       :margin
         :right 10px
 
+      .social_media_logos-facebook-16x16,
+      .social_media_logos-twitter-16x16,
+      .social_media_logos-tumblr-16x16,
+      .social_media_logos-email-16x16,
+      .social_media_logos-feed-16x16,
+      .social_media_logos-website-16x16
+        :height 16px
+        :width 16px
+
     #fileInfo
       :display inline
       :position relative
@@ -784,7 +833,11 @@ form p.checkbox_select
     :padding 3px
     :position absolute
     :right 6px
-    :top 0
+    :margin-top 9px
+
+    .icons-deletelabel
+      :height 8px
+      :width 8px
 
     &:hover
       @include opacity(1)
@@ -1167,36 +1220,47 @@ h3 span.current_gs_step
   :display inline-block
   :margin-top 2px
   :float left
+  :width 61px
 
   a:hover
     :text
       :decoration none
 
+
   .badge
     :position relative
     :top 2px
     :display inline
     :margin 0 2px
-    :padding 8px 3px
-      :bottom 9px
     :font
       :weight bold
       :size smaller
-    :width 28px
+    :width 22px
 
     &:hover
       .badge_count
         :background
           :color lighten(#A40802, 5%)
 
+    a.badge_link
+      :display block
+      :width 100%
+      :height 16px
+      :float left
+
+    .icons-notifications_grey
+      :height 16px
+
+    .icons-mail_grey
+      :height 11px
+
 #message_inbox_badge
-  img
+  :float left
-    :position relative
+  :padding 3px 3px 0px 0px
-    :top -2px
 
 #notification_badge
-  img
+  :float left
-    :position relative
+  :padding 0px 3px 0px 3px
 
 .badge_count
   @include border-radius(2px)
@@ -1271,6 +1335,11 @@ ul#request_result
       :right 8px
       :top 3px
 
+  .icons-monotone_plus_add_round,
+  .icons-monotone_check_yes
+    :height 20px
+    :width 20px
+
   > .contacts
     :margin 0
     :padding 5px
@@ -1313,12 +1382,10 @@ ul#request_result
         :border
           :bottom none
 
-        :height 12px !important
+        :min-width auto
-        :width 12px !important
+        :float right
-
+        :padding 2px 4px
-        :padding
+        :margin-top 5px
-          :right 4px
-          :left 4px
 
         &.added
           @include linear-gradient(rgb(158,255,153), rgb(92,199,86))
@@ -1359,8 +1426,11 @@ footer
     :border
       :top 1px solid #ddd
 
-  img
+  .branding-powered_by_diaspora
-    :margin-top 2px
+    :display inline-block
+    :margin-top 3px
+    :height 11px
+    :width 145px
 
   ul#footer_nav
     :margin 0
@@ -1638,13 +1708,19 @@ ul#press_logos
     :color #999
 
 .likes
-  .img
+  .icons-heart
+    :height 12px
+    :width 13px
+    :display inline-block
+    :vertical-align top
     :margin-top 3px
     :margin-right 5px
 
-  img
+  .bd
-    :height 12px
+    :display inline-block
-    :width 12px
+
+    .expand_likes
+      :vertical-align text-bottom
 
 .mark_all_read
   :position relative
@@ -1735,6 +1811,10 @@ ul#press_logos
   :padding
     :left 60px
 
+.icons-monotone_email_letter_round
+  :height 128px
+  :width 128px
+
 #email_invitation
   input
     :width 100%
@@ -1859,6 +1939,10 @@ ul#press_logos
     :top 118px
     :right 5px
 
+    .icons-deletelabel
+      :height 8px
+      :width 8px
+
   h3
     :margin 0
       :top 6px
@@ -2142,7 +2226,6 @@ h1.tag
       :bottom 1px solid #ddd
     :padding 2px 0
       :top 0
-      :left 22px
 
     &.no_icon
       :padding
@@ -2155,16 +2238,47 @@ h1.tag
       :font-weight bold
       :color #777
 
+    .icons-plus,
+    .icons-heart,
+    .icons-question,
+    .icons-monotone_wrench_settings,
+    .icons-coffee,
+    .icons-bookmark,
+      :position absolute
+      :margin-left 3px
+
+    .icons-plus
+      :width  14px
+      :height 14px
+
+    .icons-heart
+      :width  13px
+      :height 13px
+
+    .icons-question
+      :width  16px
+      :height 16px
+
+    .icons-monotone_wrench_settings
+      :width  16px
+      :height 16px
+
+    .icons-bookmark
+      :width  14px
+      :height 16px
+
+    .icons-coffee
+      :width  16px
+      :height 14px
+
+    h5.title-header
+      :margin-left 22px
+
     h5
       :font-size 12px
       :margin 0
       :color #666
 
-    img
-      :position absolute
-      :left 3px
-      :top 0px
-
   .section
     .content
       :padding 8px
@@ -2244,14 +2358,33 @@ ul.left_nav
   &.sub
     :padding-left 6px
 
+  a.community_aspect_selector
+    :width 152px
+    :vertical-align middle
+    :display inline-block
+    :line-height 25px
+    :text
+      :decoration none
   a
-    :color #777
     :font-weight bold
+    :color #777
+    :text
+      :decoration none
+
+  .invisible
+    :visibility hidden
 
   li
     :position relative
     :width 100%
 
+    .icons-check_yes_ok
+      :height 18px
+      :width 18px
+      :display inline-block
+      :margin-left 3px
+      :vertical-align middle
+
   li.active
     > a.home_selector:not(.sub_selected)
       :font
@@ -2264,12 +2397,6 @@ ul.left_nav
           :weight 700
         :color #666
 
-    > a.aspect_selector
-      :background
-        :image image-url("icons/check_yes_ok.png")
-        :position 3px 50%
-        :repeat no-repeat
-
   a.aspect_selector,
   a.home_selector,
   a.tag_selector,
@@ -2279,7 +2406,6 @@ ul.left_nav
       :cursor -moz-grabbing
       :cursor grabbing
 
-  a.aspect_selector,
   a.home_selector,
   a.tag_selector,
   a.element_selector,
@@ -2288,9 +2414,8 @@ ul.left_nav
     :width 100%
     :padding 3px 7px
 
-  a.aspect_selector,
   a.home_selector,
-  a.tag_selector,
+  li.aspect_element,
   a.element_selector
     &:hover
       @include border-radius(2px)
@@ -2299,38 +2424,53 @@ ul.left_nav
       :text
         :decoration none
 
-  .edit,
   .unfollow_icon
+    :margin-right 10px
     :margin-top 4px
     @include transition(opacity)
     @include opacity(0.3)
     :position absolute
     :display none
-    :background
-      :color white
     :padding 0 5px
     &:hover
       @include opacity(1)
 
-  .contact_count
+  .edit
+    :margin-right 10px
+    :margin-top 4px
+    :width 12px
+    :height 12px
+    :margin-top 6px
+    @include transition(opacity)
+    @include opacity(0.3)
     :float right
+    :display none
+    &:hover
+      @include opacity(1)
+
+  .contact_count
+    :width 16px
+    :line-height 16px
+    :text-align center
     @include border-radius(4px)
     :margin-top 1px
     :color #999
     :background
       :color #eee
-    :padding 0 5px
+    :display inline-block
-    :display inline
     :font
       :size 11px
 
+  a.home_selector
+    .contact_count
+      :float right
+
   ul.sub_nav
     :padding 0
     :margin 0
     li
-      :width 162px
+      :width 204px
 
-    a.aspect_selector,
     a.toggle_selector,
     .new_aspect,
     a.tag_selector
@@ -2348,9 +2488,16 @@ ul.left_nav
       &:hover
         :width auto
 
-      a.aspect_selector,
+      a.aspect_selector
+        :width 112px
+        :vertical-align middle
+        :display inline-block
+        :line-height 25px
+        :text
+          :decoration none
+
       a.tag_selector
-        :width 140px
+        :width 117px
         :overflow hidden
         :position relative
         :display inline-block
@@ -2362,22 +2509,40 @@ ul.left_nav
           :position absolute
           :top 0px
           :left 100px
-          @include horizontal-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1))
-        &:hover
-          :width auto
-          :z-index 0.9
         &:hover:after
           :background none
 
-      li:hover,
+      li
+        :height 25px
+        .icons-check_yes_ok
+          :height 18px
+          :width 18px
+          :display inline-block
+          :margin-left 3px
+          :vertical-align middle
+
+        .icons-deletelabel
+          :height 8px
+          :width 8px
+          :margin-top 4px
+
+      li.unfollow,
+      li.sub_nav_item
+        :width 172px
+
+      li.unfollow:hover,
+      li.sub_nav_item:hover,
       li.hover
+        @include border-radius(2px)
+        :background
+          :color lighten($blue,45%)
         .edit,
         .unfollow_icon
-          :display inline-block
-          :position absolute
-          :top 0
-          :left 0
           :z-index 1
+          :display inline-block
+          .icons-monotone_close_exit_delete
+            :height 16px
+            :width 16px
 
   .user_card
     :margin-left 8px
@@ -2447,6 +2612,10 @@ a.toggle_selector
     :height 30px
     :width 30px
 
+  .icons-monotone_close_exit_delete
+    :height 20px
+    :width 20px
+
 #aspect_controls
   @include border-radius(2px)
   :background
@@ -2478,12 +2647,25 @@ a.toggle_selector
   :margin 5px 0
 
 .bottom_submit_section
+  :overflow hidden
   :display block
   :position relative
+  :text-align right
 
   form
+    :float left
     :display inline-block
-  :text-align right
+    .creation
+      :float right
+
+  .icons-padlock-open,
+  .icons-padlock-closed
+    :float left
+    :height 16px
+    :width  16px
+    :margin
+      :left 4px
+      :top 2px
 
 #no_contacts
   :text-align center
@@ -2492,10 +2674,6 @@ a.toggle_selector
     :color #eee
   :color #666
 
-.left
-  :position absolute
-  :left 0
-
 #notification_dropdown
   @include dropdown-shadow
 
@@ -2504,7 +2682,7 @@ a.toggle_selector
   :left 300px
   :width 380px
   :display none
-  :margin-top 8px
+  :float left
 
   :color #444
 
@@ -2565,7 +2743,7 @@ a.toggle_selector
   :margin
     :left 0px
   :padding
-    :bottom 10px
+    :bottom 12px
 
 .cubbies_collage
   :position absolute
@@ -2630,6 +2808,18 @@ a.toggle_selector
   :padding 10px
     :bottom 0
 
+  .social_media_logos-facebook-24x24,
+  .social_media_logos-twitter-24x24,
+  .social_media_logos-tumblr-24x24,
+  .social_media_logos-email-24x24,
+  .social_media_logos-feed-24x24,
+  .social_media_logos-website-24x24
+    :height 24px
+    :width 24px
+
+  a
+    :display inline-block
+
 .cubbies_images
   :margin-left 15px
 
@@ -2833,11 +3023,12 @@ a.toggle_selector
 
 .left_nav
   #new_tag_following
+    :width 137px
     :margin
       :left 24px
 
     input[type='text']
-      :width 100%
+      :width 137px
       :font
         :size 13px
 
@@ -2849,11 +3040,13 @@ a.toggle_selector
   .close
     @include opacity(0)
     @include transition(opacity, 0.2s)
-
-    :float right
     :position relative
-    :top -9px
+    :top 1px
     :right -5px
+    :float right
+    .icons-deletelabel
+      :height 8px
+      :width 8px
 
   &:hover
     .close

app/assets/templates/aspect_tpl.jst.hbs

@@ -1,6 +1,10 @@
-<div class="edit">
+<a href="/aspects/{{id}}/edit" rel="facebox">
-  <a href="/aspects/{{id}}/edit" rel="facebox">
+  <div class="edit icons-pencil" alt="Pencil" title="{{t 'edit'}} {{name}}">
-    <img alt="Pencil" src="{{imageUrl "icons/pencil.png"}}" title="{{t 'edit'}} {{name}}">
+  </div>
-  </a>
+</a>
-</div>
+{{#if selected}}
+  <div class="icons-check_yes_ok"></div>
+{{else}}
+  <div class="icons-check_yes_ok invisible"></div>
+{{/if}}
 <a class="aspect_selector name" data-guid="{{id}}" href="/aspects/query"> {{name}} </a>

app/assets/templates/comment_tpl.jst.hbs

@@ -8,7 +8,7 @@
   {{#if canRemove}}
     <div class="controls">
       <a href="#" class="delete comment_delete" title="{{t "delete"}}">
-        <img alt="Deletelabel" src="{{imageUrl "deletelabel.png"}}" />
+        <div alt="Deletelabel" class="icons-deletelabel" />
       <a/>
     </div>
   {{/if}}

app/assets/templates/header_tpl.jst.hbs

@@ -1,7 +1,8 @@
 <div class="container" style="position:relative;">
 
   <a href="/stream">
-    <img alt="Logo_small" class="diaspora_header_logo" height="38px" width="65px" src="{{imageUrl "branding/header-logo.png"}}" />
+    <div alt="Logo_small" class="diaspora_header_logo branding-header-logo">
+    </div>
   </a>
 
   <span class="header-nav">
@@ -20,27 +21,30 @@
 
   <div id="nav_badges">
     <div class="badge badge-inverse" id="notification_badge">
-      <a href="/notifications" title="{{t "header.notifications"}}">
+      <div class="icons-notifications_grey" >
-        <img alt="{{t "header.notifications"}}" id="notification-flag" src="{{imageUrl "icons/notifications_grey.png"}}" />
+        <a href="/notifications" title="{{t "header.notifications"}}" class="badge_link" >
           <div class="badge_count {{#unless current_user.notifications_count}} hidden {{/unless}}">
             {{current_user.notifications_count}}
           </div>
         </a>
       </div>
+    </div>
 
     <div class="badge badge-inverse" id="message_inbox_badge">
-      <a href="/conversations" title="{{t "header.messages"}}">
+     <div class="icons-mail_grey" >
-        <img alt="{{t "header.messages"}}" src="{{imageUrl "icons/mail_grey.png"}}" />
+        <a href="/conversations" title="{{t "header.messages"}}" class="badge_link" >
           <div class="badge_count {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
             {{current_user.unread_messages_count}}
           </div>
         </a>
       </div>
+    </div>
 
 
       <div id="notification_dropdown">
         <div class="header">
           <div class="right">
+
             <a href="#" id="mark_all_read_link">
               {{t "header.mark_all_as_read"}}
             </a>

app/assets/templates/likes-info_tpl.jst.hbs

@@ -1,9 +1,7 @@
 {{#if likesCount}}
   <div class="comment">
     <div class="media">
-      <span class="img">
+      <div alt="Heart" class="icons-heart"></div>
-        <img alt="Heart" src="{{imageUrl "icons/heart.png"}}" />
-      </span>
 
       <div class="bd">
         {{#unless likes_fetched}}

app/assets/templates/post-viewer/comment_tpl.jst.hbs

@@ -1,7 +1,7 @@
 {{#if canRemove}}
 <div class="controls">
     <a href="#" class="delete comment_delete" title="{{t "delete"}}">
-        <img alt="Deletelabel" src="{{imageUrl "deletelabel.png"}}" />
+      <div alt="Deletelabel" class="icons-deletelabel" />
     <a/>
 </div>
 {{/if}}

app/assets/templates/stream-element_tpl.jst.hbs

@@ -11,14 +11,14 @@
       <div class="controls">
         {{#unless authorIsCurrentUser}}
           <a href="#" rel="nofollow" class="block_user">
-            <img src="{{imageUrl "icons/ignoreuser.png"}}" alt="Ignoreuser" class="ignore control_icon" title="{{t "ignore"}}" />
+            <div class="icons-ignoreuser control_icon" title="{{t "ignore"}}"></div>
           </a>
-          <a href="#" rel="nofollow" class="hide_post">
+          <a href="#" rel="nofollow" class="delete hide_post">
-            <img src="{{imageUrl "deletelabel.png"}}" class="delete control_icon" title="{{t "stream.hide"}}" />
+            <div class="icons-deletelabel delete control_icon" title="{{t "stream.hide"}}"/>
           </a>
         {{else}}
-          <a href="#" rel="nofollow" class="remove_post">
+          <a href="#" rel="nofollow" class="delete remove_post">
-            <img src="{{imageUrl "deletelabel.png"}}" class="delete control_icon" title="{{t "delete"}}" />
+            <div class="icons-deletelabel delete control_icon" title="{{t "delete"}}" />
           </a>
         {{/unless}}
       </div>

app/assets/templates/tag_following_tpl.jst.hbs

@@ -1,9 +1,9 @@
-<div class="unfollow_icon hidden">
-  <a href="#" id="unfollow_{{name}}" rel="nofollow" class="delete tag_following_delete" title="{{t "delete"}}">
-    <img alt="Deletelabel" src="{{imageUrl "deletelabel.png"}}" />
-  <a/>
-</div>
-
 <a class="tag_selector" href="/tags/{{name}}">
   #{{ name }}
 </a>
+
+<div class="unfollow_icon hidden">
+  <a href="#" id="unfollow_{{name}}" rel="nofollow" class="delete tag_following_delete" title="{{t "delete"}}">
+    <div alt="Deletelabel" class="icons-deletelabel"></div>
+  <a/>
+</div>

app/helpers/application_helper.rb

@@ -51,7 +51,7 @@ module ApplicationHelper
   end
 
   def popover_with_close_html(without_close_html)
-    without_close_html + link_to(image_tag('deletelabel.png'), "#", :class => 'close')
+    without_close_html + link_to(content_tag(:div, nil, :class => 'icons-deletelabel'), "#", :class => 'close')
   end
 
   # Require jQuery from CDN if possible, falling back to vendored copy, and require

app/helpers/aspects_helper.rb

@@ -4,7 +4,7 @@
 
 module AspectsHelper
   def add_to_aspect_button(aspect_id, person_id)
-    link_to image_tag('icons/monotone_plus_add_round.png'),
+    link_to content_tag(:div, nil, :class => 'icons-monotone_plus_add_round'),
       { :controller => 'aspect_memberships',
         :action => 'create',
         :format => :json,
@@ -18,7 +18,7 @@ module AspectsHelper
   end
 
   def remove_from_aspect_button(membership_id, aspect_id, person_id)
-    link_to image_tag('icons/monotone_check_yes.png'),
+    link_to content_tag(:div, nil, :class => 'icons-monotone_check_yes'),
       { :controller => "aspect_memberships",
         :action => 'destroy',
         :id => membership_id

app/helpers/contacts_helper.rb

@@ -3,7 +3,7 @@ module ContactsHelper
     membership = contact.aspect_memberships.where(:aspect_id => @aspect.id).first unless @aspect.nil?
 
     if membership
-      link_to(image_tag('icons/monotone_close_exit_delete.png', :height => 20, :width => 20),
+      link_to(content_tag(:div, nil, :class => 'icons-monotone_close_exit_delete'),
         { :controller => "aspect_memberships",
           :action => 'destroy',
           :id => membership.id

app/views/aspects/edit.html.haml

@@ -19,15 +19,14 @@
 
   %br
   .bottom_submit_section
-    .left
     = button_to t('delete'), @aspect, :method => "delete", :data => { :confirm => t('.confirm_remove_aspect') }, :class => 'button delete'
     - if @aspect.contacts_visible
-        = link_to image_tag('icons/padlock-open.png', :height => 16, :width => 16, :id => "contact_visibility_padlock", :class => 'open', :title => t('.aspect_list_is_visible')),
+      = link_to content_tag(:div, nil, :class => 'icons-padlock-open', :id => "contact_visibility_padlock", :title => t('.aspect_list_is_visible')),
-                  aspect_toggle_contact_visibility_path(@aspect), :method => :put, :remote => true
+                            aspect_toggle_contact_visibility_path(@aspect), :class => 'contact_visibility_link', :method => :put, :remote => true
 
     - else
-        = link_to image_tag('icons/padlock-closed.png', :height => 16, :width => 16, :id => "contact_visibility_padlock", :title => t('.aspect_list_is_not_visible')),
+      = link_to content_tag(:div, nil, :class => 'icons-padlock-closed', :id => "contact_visibility_padlock", :title => t('.aspect_list_is_not_visible')),
-                  aspect_toggle_contact_visibility_path(@aspect), :method => :put, :remote => true
+                            aspect_toggle_contact_visibility_path(@aspect), :class => 'contact_visibility_link', :method => :put, :remote => true
 
     = submit_tag t('.done'), :class => 'button creation', :rel => 'close'
 

app/views/aspects/toggle_contact_visibility.js.erb

@@ -2,13 +2,13 @@ $(document).ready(function() {
 
   var padlockImg = $("#contact_visibility_padlock");
 
-  if(padlockImg.hasClass('open')) {
+  if (padlockImg.hasClass('icons-padlock-open')) {
-    padlockImg.attr('src', 'assets/icons/padlock-closed.png');
+    padlockImg.removeClass('icons-padlock-open');
+    padlockImg.addClass('icons-padlock-closed');
     padlockImg.attr('title', "<%= t('aspects.edit.aspect_list_is_not_visible') %>");
   } else {
-    padlockImg.attr('src', 'assets/icons/padlock-open.png');
+    padlockImg.removeClass('icons-padlock-closed');
+    padlockImg.addClass('icons-padlock-open');
     padlockImg.attr('title', "<%= t('aspects.edit..aspect_list_is_visible') %>");
   }
-  padlockImg.toggleClass('open');
-
 });

app/views/contacts/_aspect_listings.haml

@@ -11,8 +11,9 @@
 
     %ul.sub_nav
       - all_aspects.each do |aspect|
-        %li{:data => {:aspect_id => aspect.id}, :class => ("active" if params["a_id"].to_i == aspect.id)}
+        %li.aspect_element{:data => {:aspect_id => aspect.id}, :class => ("active" if params["a_id"].to_i == aspect.id)}
-          %a.aspect_selector{:href => contacts_path(:a_id => aspect.id)}
+          .icons-check_yes_ok{:class => ("invisible" if params["a_id"].to_i != aspect.id) }
+          %a.community_aspect_selector{:href => contacts_path(:a_id => aspect.id)}
             = aspect
           .contact_count
             = aspect.contacts.size
@@ -27,8 +28,9 @@
         = all_contacts_count
 
     %ul.sub_nav
-      %li{:class => ("active" if params["set"] == "only_sharing")}
+      %li.aspect_element{:class => ("active" if params["set"] == "only_sharing")}
-        %a.aspect_selector{:href => contacts_path(:set => "only_sharing")}
+        .icons-check_yes_ok{:class => ("invisible" if params["set"] == "only_sharing")}
+        %a.community_aspect_selector{:href => contacts_path(:set => "only_sharing")}
           = t('contacts.index.only_sharing_with_me')
         .contact_count
           = only_sharing_count

app/views/conversations/_show.haml

@@ -4,7 +4,7 @@
 
 .conversation_participants
   .right
-    = link_to(image_tag('deletelabel.png'), conversation_visibility_path(conversation), :method => 'delete', :data => { :confirm => "#{t('.delete')}?" }, :title => t('.delete'))
+    = link_to(content_tag(:div, nil, :class => 'icons-deletelabel'), conversation_visibility_path(conversation), :method => 'delete', :data => { :confirm => "#{t('.delete')}?" }, :title => t('.delete'))
 
   %h3{ :class => direction_for(conversation.subject) }
     = conversation.subject

app/views/invitations/new.html.haml

@@ -1,6 +1,6 @@
 .span-15.last
   .span-3
-    = image_tag 'icons/monotone_email_letter_round.png', :height => "128px", :width => "128px"
+    .icons-monotone_email_letter_round
 
   .span-12.last
     %h2

app/views/layouts/_footer.html.haml

@@ -1,5 +1,5 @@
 %footer
   .container
+    .branding-powered_by_diaspora
     %ul#footer_nav
       = render :partial =>'shared/links'
-      = image_tag 'branding/powered_by_diaspora.png', :height => "11px", :width => "145px"

app/views/layouts/_header.html.haml

@@ -5,7 +5,7 @@
 %header
     - unless current_user
         .container{:style => "position:relative;"}
-        = link_to image_tag('branding/logo_small.png', :height => "16px", :width => "161px", :style => 'margin-left: 10px'), root_path
+        = link_to content_tag(:div, nil, :class => 'branding-logo_small'), root_path
 
         %ul#landing_nav
             %li= link_to '@joindiaspora', "http://twitter.com/joindiaspora"

app/views/shared/_publisher.html.haml

@@ -16,7 +16,7 @@
         %params
           #fileInfo
           #publisher_textarea_wrapper
-            = link_to( image_tag('deletelabel.png'), "#", :id => "hide_publisher", :title => t('.discard_post'))
+            = link_to(content_tag(:div, nil, :class => 'icons-deletelabel'), "#", :id => "hide_publisher", :title => t('.discard_post'))
             %ul#photodropzone
             - if current_user.getting_started?
               = status.text_area :fake_text, :rows => 2, :value => h(publisher_formatted_text), :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...",
@@ -42,8 +42,13 @@
           %span#publisher_service_icons
             - if current_user.services
               - for service in current_user.services
-                = image_tag "social_media_logos/#{service.provider}-16x16.png", :title => service.provider.titleize, :class => "service_icon dim", :id =>"#{service.provider}", :maxchar => "#{service.class::MAX_CHARACTERS}"
+                = content_tag :div, nil,
-            = link_to (image_tag "icons/monotone_wrench_settings.png"), "#question_mark_pane", :class => 'question_mark', :rel => 'facebox', :title => t('shared.public_explain.manage')
+                              :title => service.provider.titleize,
+                              :class => "social_media_logos-#{service.provider}-16x16 service_icon dim",
+                              :id    => "#{service.provider}",
+                              :maxchar => "#{service.class::MAX_CHARACTERS}"
+            %a{ :href => "#question_mark_pane", :class => 'question_mark', :rel => 'facebox', :title => t('shared.public_explain.manage') }
+              .icons-monotone_wrench_settings
 
           .dropdown{ ! current_user.getting_started? ? {:class => "hang_right"} : { :class => "hang_right", :title => popover_with_close_html("2. #{t('shared.public_explain.control_your_audience')}"), 'data-content'=> t('shared.public_explain.visibility_dropdown')} }
             .button.toggle.publisher

app/views/shared/_right_sections.html.haml

@@ -6,16 +6,16 @@
 - if AppConfig.settings.invitations.open?
   .section
     .title
-      = image_tag('icons/plus.png')
+      .icons-plus
-      %h5
+      %h5.title-header
         = t('shared.invitations.invite_your_friends')
     .content
       = render "shared/invitations"
 
 .section
   .title
-    = image_tag('icons/heart.png')
+    .icons-heart
-    %h5
+    %h5.title-header
       = t('aspects.index.new_here.title')
   .content
     != t('aspects.index.new_here.follow', :link => link_to("#"+t('shared.publisher.new_user_prefill.newhere'), tag_path(:name => t('shared.publisher.new_user_prefill.newhere'))))
@@ -24,8 +24,8 @@
 
 .section
   .title
-    = image_tag('icons/question.png')
+    .icons-question
-    %h5
+    %h5.title-header
       = t('aspects.index.help.need_help')
   .content
     = t('aspects.index.help.here_to_help')
@@ -47,8 +47,8 @@
 - unless AppConfig.configured_services.blank? || all_services_connected?
   .section
     .title
-      = image_tag('icons/monotone_wrench_settings.png')
+      .icons-monotone_wrench_settings
-      %h5
+      %h5.title-header
         = t('aspects.index.services.heading')
     .content
       %div
@@ -57,20 +57,20 @@
       #right_service_icons
         - AppConfig.configured_services.each do |service|
           - unless current_user.services.any?{|x| x.provider == service}
-            = link_to(image_tag("social_media_logos/#{service.to_s.downcase}-24x24.png", :title => service.to_s.titleize), "/auth/#{service}")
+            = link_to(content_tag(:div, nil, :class => "social_media_logos-#{service.to_s.downcase}-24x24", :title => service.to_s.titleize), "/auth/#{service}")
 
 .section
   .title
-    = image_tag('icons/bookmark.png')
+    .icons-bookmark
-    %h5
+    %h5.title-header
       = t('bookmarklet.heading')
   .content
     != t('bookmarklet.explanation', :link => link_to(t('bookmarklet.post_something'), magic_bookmarklet_link))
 
 .section
   .title
-    = image_tag('icons/coffee.png')
+    .icons-coffee
-    %h5
+    %h5.title-header
       = t('aspects.index.donate')
   .content
     - if AppConfig.settings.paypal_hosted_button_id.present?

app/views/users/getting_started.haml

@@ -41,10 +41,6 @@
                   = text_field_tag 'profile[first_name]', current_user.first_name
                   = image_tag 'ajax-loader.gif', :id => "gs-name-form-spinner", :class => "hidden"
 
-              %span.saved{:class => "hidden"}
-                = image_tag 'icons/check_yes_ok.png'
-                = t(".saved")
-
             .clearfix
               = label_tag :your_photo, t('profiles.edit.your_photo'), :class => "bootstrapped"
               .input{:style => "position:relative;"}

features/step_definitions/aspects_steps.rb

@@ -1,7 +1,7 @@
 When /^I click on "([^"]*)" aspect edit icon$/ do |aspect_name|
   step %{I hover over the "ul.sub_nav > li:contains('#{aspect_name}')"}
   within("#aspect_nav") do
-    find(:xpath, "//a[@rel='facebox'][.//img[@title='Edit #{aspect_name}']]").click
+    find('a > .edit').click
   end
 end
 

lib/tasks/tests.rake

@@ -4,7 +4,7 @@ namespace :ci do
     task :other => [ :prepare_db, "tests:generate_fixtures", :spec, "jasmine:ci" ]
     
     desc "Run cucumber"
-    task :cucumber => [ :prepare_db, "rake:cucumber" ]
+    task :cucumber => [ :prepare_db, "assets:precompile", "rake:cucumber" ]
     
     desc "Prepare db"
     task :prepare_db => [ "db:create", "db:test:load"]