Merge branch 'master' of gitlab.com:noosfero-plugins/gamification

Leandro Santos
2 parents 350c561d 6ec6987c
Showing 4 changed files with 67 additions and 21 deletions Show diff stats
lib/gamification_plugin/dashboard_helper.rb
lib/merit/point_rules.rb
public/style.css
views/gamification/dashboard.html.erb
@@ -3,8 +3,12 @@ module GamificationPlugin::DashboardHelper
   def level_chart(target)
     content_tag(:div, :class => "level pie-chart", 'data-percent' => @target.gamification_plugin_level_percent) do
-      content_tag :span, @target.level
+      content_tag :span, @target.level, :class => 'level-value'
     end
   end
+  def score_point_class(point)
+    point.num_points > 0 ? 'positive' : 'negative'
+  end
+
 end
@@ -60,7 +60,8 @@ module Merit
         :profile => lambda {|vote| vote.voteable.profile},
         :value => lambda {|vote| vote.vote},
         :description => _('Point weight for the author of a voted content'),
-        :default_weight => 50
+        :default_weight => 50,
+        :condition => lambda {|vote| vote.voteable.profile.community? }
       },
       :vote_voteable => {
         :action => 'vote#create',
@@ -75,7 +76,6 @@ module Merit
         :action => 'vote#create',
         :undo_action => 'vote#destroy',
         :to => lambda {|vote| vote.voter},
-        :profile => lambda {|vote| vote.voter},
         :value => lambda {|vote| 1},
         :description => _('Point weight for a voter'),
         :default_weight => 10
@@ -63,11 +63,44 @@
   font-size: 10px;
 }
-.gamification .pie-chart {
+.gamification-dashboard .pie-chart {
   position: relative;
   text-align: center;
 }
-.gamification .pie-chart canvas {
+.gamification-dashboard .pie-chart canvas {
   position: absolute;
   left: 0;
 }
+.gamification-dashboard .pie-chart .level-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: rgb(64, 64, 65);
+}
+.gamification-dashboard .points, .gamification-dashboard .badges {
+  margin: 10px 10px 25px 10px;
+}
+.gamification-dashboard .points .level {
+  display: inline-block;
+  vertical-align: top;
+}
+.gamification-dashboard .points .scores {
+  display: inline-block;
+  margin-left: 40px;
+}
+.gamification-dashboard .points .level .total {
+  text-align: center;
+  color: rgb(139, 139, 139);
+}
+.gamification-dashboard .scores .negative {
+  color: red;
+}
+.gamification-dashboard .scores .positive {
+  color: green;
+}
+.gamification-dashboard .scores .value {
+  font-weight: bold;
+  width: 30px;
+  display: inline-block;
+  text-align: right;
+  margin-right: 4px;
+}
 <%= javascript_include_tag '/plugins/gamification/slick.min.js' %>
+<%= javascript_include_tag 'jquery.timeago.js' %>
 <%= stylesheet_link_tag '/plugins/gamification/slick.css' %>
 <%= stylesheet_link_tag '/plugins/gamification/slick-theme.css' %>
 <% extend GamificationPlugin::DashboardHelper %>
-<div class="gamification">
+<div class="gamification gamification-dashboard">
   <h1><%= _('Gamification Dashboard for %s' % @target.identifier) %></h1>
-  <div>
-    <h3> <%= _('Level') %></h3>
-    <%= level_chart(@target) %>
-  </div>
-
-  <div class="scores">
-    <h3><%= _('Score') %></h3>
-    <% Merit::PointRules::AVAILABLE_RULES.each do |category, setting| %>
-      <div class="score <%= category %>">
-        <span class="label"><%= _('%s: ' % category) %></span>
-        <span class="value"><%= @target.points(:category => category) %></span>
+  <div class="points">
+    <div class="level">
+      <h3> <%= _('Level') %></h3>
+      <%= level_chart(@target) %>
+      <div class="score total">
+        <span class="label"><%= _('Score: ') %></span>
+        <span class="value"><%= @target.points %></span>
       </div>
-    <% end %>
-    <div class="score total">
-      <span class="label"><%= _('Total: ') %></span>
-      <span class="value"><%= @target.points %></span>
     </div>
+
+    <% unless @target.score_points.empty? %>
+    <div class="scores">
+      <h3><%= _('Last Score Points') %></h3>
+      <% @target.score_points.order('created_at desc').limit(5).each do |point| %>
+        <div class="score <%= point.score.category %>">
+          <span class="value <%= score_point_class(point) %>"><%= point.num_points %></span>
+          <span class="date timeago" title="<%= point.created_at %>"><%= point.created_at %></span>
+        </div>
+      <% end %>
+    </div>
+    <% end %>
   </div>
+
+  <% unless environment.gamification_plugin_badges.empty? %>
   <div class="badges">
     <h3><%= _('Badges') %></h3>
     <ul class="badge-list">
@@ -39,6 +46,7 @@
       <% end %>
     </ul>
   </div>
+  <% end %>
 </div>
 <script>
@@ -49,4 +57,5 @@ $(&#39;.gamification .badge-list&#39;).slick({
   slidesToShow: 3,
   slidesToScroll: 1,
 });
+$(".gamification-dashboard .timeago").timeago();
 </script>
	@@ -63,11 +63,44 @@		@@ -63,11 +63,44 @@
63	font-size: 10px;	63	font-size: 10px;
64	}	64	}
65		65
66	-.gamification .pie-chart {	66	+.gamification-dashboard .pie-chart {
67	position: relative;	67	position: relative;
68	text-align: center;	68	text-align: center;
69	}	69	}
70	-.gamification .pie-chart canvas {	70	+.gamification-dashboard .pie-chart canvas {
71	position: absolute;	71	position: absolute;
72	left: 0;	72	left: 0;
73	}	73	}
		74	+.gamification-dashboard .pie-chart .level-value {
		75	+ font-size: 20px;
		76	+ font-weight: bold;
		77	+ color: rgb(64, 64, 65);
		78	+}
		79	+.gamification-dashboard .points, .gamification-dashboard .badges {
		80	+ margin: 10px 10px 25px 10px;
		81	+}
		82	+.gamification-dashboard .points .level {
		83	+ display: inline-block;
		84	+ vertical-align: top;
		85	+}
		86	+.gamification-dashboard .points .scores {
		87	+ display: inline-block;
		88	+ margin-left: 40px;
		89	+}
		90	+.gamification-dashboard .points .level .total {
		91	+ text-align: center;
		92	+ color: rgb(139, 139, 139);
		93	+}
		94	+.gamification-dashboard .scores .negative {
		95	+ color: red;
		96	+}
		97	+.gamification-dashboard .scores .positive {
		98	+ color: green;
		99	+}
		100	+.gamification-dashboard .scores .value {
		101	+ font-weight: bold;
		102	+ width: 30px;
		103	+ display: inline-block;
		104	+ text-align: right;
		105	+ margin-right: 4px;
		106	+}