Add counters

app/assets/stylesheets/_settings.css.scss

@@ -6,9 +6,6 @@ $footer-height: 210px;
 $max-width: $canvas-width;
 $page-columns: 11;
 
-// Semantic colors
-$secondary-content-color: #999;
-
 // Unsemantic colors
 $ultra-dark-grey: #333333;
 $dark-grey: #626262;
@@ -53,17 +50,22 @@ $meppit-blue: #b1dde8;
 $meppit-dark-blue: #62bbd1;
 $meppit-green: #8EC89A;
 
+$facebook_blue: #3c5a98;
+$google_red: #d84a38;
+$twitter_blue: #46c8f5;
+
+// Semantic colors
+$main-color-bg: $white;
+
+$secondary-content-color: #999;
+
 $meppit-maps-color: #f26700;
 // $meppit-maps-color: #951b81;
 $meppit-data-color: darken($meppit-dark-blue, 20%);
 
 $button-color: #3EBAC2;
 $button-light-color: #4092A9;
 
-$facebook_blue: #3c5a98;
-$google_red: #d84a38;
-$twitter_blue: #46c8f5;
-
 $text-color: $dark-grey;
 $link-color: #009CB4;
 
@@ -72,7 +74,6 @@ $text-link-hover-color-fg: #14636E;
 $text-link-hover-color-bg: #B1DDE8;
 $text-link-visited-color: #004047;
 
-$main-color-bg: $white;
 $stick-color-bg: $white;
 $stick-color-shadow: $meppit-blue;
 

app/assets/stylesheets/application.css.scss

@@ -33,6 +33,7 @@
 @import "shared/tags";
 @import "shared/stick";
 @import "shared/tabs";
+@import "shared/counters";
 
 @import "sessions/sign_in";
 

app/assets/stylesheets/shared/_counters.css.scss

@@ -0,0 +1,46 @@
+.counters {
+  float: right;
+  margin: 5px 0 0;
+
+  .counter {
+    float: left;
+    margin: 0 0 0 15px;
+
+    &:first-child {
+      margin: 0;
+    }
+
+    a {
+      padding: 10px;
+      color: $secondary-content-color;
+      outline: 0;
+
+      &:hover {
+        color: $text-color;
+        text-decoration: none;
+      }
+    }
+
+    i {
+      display: inline-block;
+      margin: 0 5px 0 0;
+      vertical-align: middle;
+      font-size: 1.7em;
+    }
+
+    .counter-value {
+      display: inline-block;
+      vertical-align: middle;
+      text-align: center;
+      font-size: 0.8em;
+      line-height: 1em;
+
+      em {
+        display: block;
+        color: $text-color;
+        font-weight: bold;
+        font-size: 1.2em;
+      }
+    }
+  }
+}

app/assets/stylesheets/users/_profile.css.scss

@@ -25,13 +25,18 @@
   }
 
   // Central pane
+  .main-title {
+    float:left;
+    max-width: 435px;
+  }
+
   .location {
     clear: both;
     width: 100%;
     margin: 10px 0;
     border: 1px solid transparent;
 
-    .map { height: 165px; }
+    .map { height: 180px; }
     .placeholder  { max-height: 50px; width: 100%; }
     .overlay-message { margin-top: 20px; }
   }

app/helpers/application_helper.rb

@@ -56,7 +56,6 @@ def tags_input(f, name, tags)
     f.input name, :input_html => {'data-components' => 'tags', 'data-tags' => tags.to_json, 'data-autocomplete' => tag_search_path }
   end
 
-
   def tools_list(obj, only=:all)
     tools = {
       :edit     => {:icon => :pencil,        :title => t('toolbar.edit'),     :url => url_for([:edit, obj])},
@@ -69,4 +68,15 @@ def tools_list(obj, only=:all)
     }
     only == :all ? tools.values() : only.map {|name| tools[name] }
   end
+
+  def counters_list(obj, only=:all)
+    counters = {
+      :data         => { :icon => :'map-marker', :string => 'counters.data',         :method => :data_count,         :class => "data-counter",         :url => "" },
+      :maps         => { :icon => :globe,        :string => 'counters.maps',         :method => :maps_count,         :class => "maps-counter",         :url => "" },
+      :followers    => { :icon => :star,         :string => 'counters.followers',    :method => :followers_count,    :class => "followers-counter",    :url => "" },
+      :contributors => { :icon => :users,        :string => 'counters.contributors', :method => :contributors_count, :class => "contributors-counter", :url => "" },
+    }
+    available_counters = counters.select {|key, counter| obj.respond_to? counter[:method] }
+    only == :all ? available_counters.values() : only.map {|name| available_counters[name] }
+  end
 end

app/models/user.rb

@@ -38,4 +38,14 @@ def send_reset_password_email!
   def geojson_properties
     {:name => name, :id => id}
   end
+
+  def followers_count
+    # TODO
+    0
+  end
+
+  def maps_count
+    # TODO
+    0
+  end
 end

app/views/shared/_counters.html.erb

@@ -0,0 +1,9 @@
+<ul class="counters">
+  <% counters_list(object, local_assigns[:only] || :all).each do |counter| %>
+    <li class="counter <%= counter[:class] %>">
+      <a href="<%= counter[:url] %>">
+        <%= icon counter[:icon] %><span class="counter-value"><%= raw t(counter[:string], :count => "<em>#{object.send counter[:method]}</em>" ) %></span>
+      </a>
+    </li>
+  <% end %>
+</ul>

app/views/users/show.html.erb

@@ -13,8 +13,11 @@
   </div>
 
   <div class="central-pane">
-    <h1 class="name"><%= @user.name %></h1>
-    <div class="joined"><%= t 'users.profile.joined', date: @user.created_at.to_s(:month_and_year) %></div>
+    <div class="main-title">
+      <h1 class="name"><%= @user.name %></h1>
+      <div class="joined"><%= t 'users.profile.joined', date: @user.created_at.to_s(:month_and_year) %></div>
+    </div>
+    <%= render 'shared/counters', :object => @user, :user => @user %>
 
     <div class="location">
       <% if @user.location %>

config/locales/en/counters.yml

@@ -0,0 +1,6 @@
+en:
+  counters:
+    maps: '%{count} maps'
+    data: '%{count} objects'
+    contributors: '%{count} contributors'
+    followers: '%{count} followers'

config/locales/pt-BR/counters.yml

@@ -0,0 +1,6 @@
+pt-BR:
+  counters:
+    maps: '%{count} mapas'
+    data: '%{count} objetos'
+    contributors: '%{count} colaboradores'
+    followers: '%{count} seguidores'

spec/helpers/application_helper_spec.rb

@@ -121,6 +121,12 @@
     it { expect(helper.tools_list(obj, only=[:edit, :star]).size).to eq 2 }
   end
 
+  describe "#counters_list" do
+    let(:obj) { FactoryGirl.create :user }
+    it { expect(helper.counters_list(obj).size).to eq 2 }
+    it { expect(helper.counters_list(obj, only=[:map]).size).to eq 1 }
+  end
+
 
   describe "Corcerns::ContactsHelper" do
     let(:user) { FactoryGirl.create :user, :contacts => {'address' => 'rua Bla', 'phone' => '12345'} }