Issue 3699 popover quick glance

app/app/urls.py

@@ -90,6 +90,7 @@
 
     # api views
     url(r'^api/v0.1/profile/(.*)?/keywords', dashboard.views.profile_keywords, name='profile_keywords'),
+    url(r'^api/v0.1/profile/(?P<handle>.*)', dashboard.views.profile_details, name='profile_details'),
     url(
         r'^api/v0.1/social_contribution_email',
         dashboard.views.social_contribution_email,

app/assets/v2/css/base.css

@@ -1634,6 +1634,10 @@ div.busyOverlay {
   max-width: 482px;
 }
 
+.popover_card {
+  border-radius: 5px;
+  border: 1px solid #E5E5E5;
+}
 /* Custom icons */
 
 .g-icon {

app/assets/v2/css/bounty.css

@@ -468,6 +468,30 @@ a.btn {
   margin-bottom: 2em;
 }
 
+.earned {
+  color: #8E2ABE;
+  font-size: 14px;
+  line-height: 13px;
+  font-weight: 600;
+}
+
+.username, .contributor-position, .in-progress, .current_status {
+  color: #0D0764;
+}
+
+.specialty {
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 11px;
+}
+.completed-bounties {
+  color: #05B66A;
+}
+
+.abandoned-bounties, .removed-bounties {
+  color: #F5A623;
+}
+
 .code-snippet {
   background-color: #F2F6F9;
   padding: 1rem;

app/dashboard/models.py

@@ -2445,7 +2445,7 @@ def get_eth_sum(self, sum_type='collected', network='mainnet', bounties=None):
 
         return eth_sum
 
-    def get_who_works_with(self, work_type='collected', network='mainnet', bounties=None):
+    def get_who_works_with(self, work_type='collected', network='rinkeby', bounties=None):
         """Get an array of profiles that this user works with.
 
         Args:
@@ -2703,12 +2703,17 @@ def to_representation(self, instance):
             dict: The serialized Profile.
 
         """
+
         return {
             'id': instance.id,
             'handle': instance.handle,
             'github_url': instance.github_url,
             'avatar_url': instance.avatar_url,
-            'url': instance.get_relative_url()
+            'keywords': instance.keywords,
+            'url': instance.get_relative_url(),
+            'position': instance.get_contributor_leaderboard_index(),
+            'organizations': instance.get_who_works_with(),
+            'total_earned': instance.get_eth_sum()
         }
 
 

app/dashboard/templates/bounty/details.html

@@ -232,7 +232,7 @@ <h5 class="bounty-heading">{% trans "Funder" %}</h5>
       [[if activity_type != 'unknown_event']]
         <div class="row box activity">
           <div class="col-12 col-md-1">
-            <div class="activity-avatar">
+            <div class="activity-avatar bounty_row [[if hidden]]bounty_row--hidden[[/if]]" data-username="[[:name]]" data-container="body" data-toggle="popover" data-content='{% include "shared/contributor-popover.html" %}'>
               <img class="avatar" src="/dynamic/avatar/[[:name]]"/>
             </div>
           </div>
@@ -430,6 +430,67 @@ <h5 class="bounty-heading">{% trans "Funder" %}</h5>
     var bootstrapTooltip = $.fn.tooltip.noConflict()
     var bootstrapModal = $.fn.modal.noConflict()
   </script>
+  <script>
+    $.fn.runTooltip = bootstrapTooltip
+
+    $('[data-toggle="popover"]').popover()
+
+    $('body').popover({
+      selector: '.bounty_row',
+      html: true,
+      title: function() {
+        var element = $(this);
+        var data = '';
+          fetch('/api/v0.1/profile/'+ element.attr('data-username'), {
+          method: 'GET'
+          }).then(function(response) {
+            return response.json();
+          }).then(function(json) {
+            $('.org_logos').html(convertToImage(json.profile.organizations));
+            $('.earned').html('~' + json.profile.total_earned + ' ETH earned')
+            $('.contributor-position').html('#' + json.profile.position)
+            $('.completed-bounties').html(json.statistics.work_completed)
+            $('.specialty').html('Specialty: ' + json.profile.keywords.slice(0, 3).toString())
+            $('.in-progress').html(json.statistics.work_in_progress)
+            $('.abandoned-bounties').html(json.statistics.work_abandoned)
+            $('.removed-bounties').html(json.statistics.work_removed)
+            $('.activity-title').html(json.recent_activity.activity_metadata.title)
+            $('.current_status').html(currentStatus(json.recent_activity.activity_type))
+            $('.time-ago').html(moment(json.recent_activity.created, 'YYYYMMDD').fromNow())
+          }).catch(function(err) {
+            $('body').popover('hide')
+            return _alert({ message: err }, 'error');
+          })
+        return data;
+      },
+      trigger: 'hover',
+      placement: 'auto',
+      template: `<div class="popover popover-bounty" role="tooltip">
+                  <div class="arrow"></div>
+                  <div class="popover-body p-0"></div>
+                </div>`
+    })
+    function currentStatus(status) {
+      if (status === 'worker_applied') {
+        return 'Work Applied';
+      } else if (status === 'start_work') {
+        return 'Work Started';
+      } else if (status === 'stop_work') {
+        return 'Work Stopped';
+      } else {
+        return status;
+      }
+    }
+    function convertToImage(images) {
+      var a = [];
+      $.each(images, function(image) {
+        var image_url = "/dynamic/avatar/"+image;
+        var link = "<img src=\""+ image_url + "\" alt=\"" + image + "\" width=\"30px\" />";
+        a.push(link);
+      })
+      return a;
+    }
+  </script>
   <script src="{% static "v2/js/pages/bounty_funder_payout_reminder.js" %}"></script>
   <script src="{% static "v2/js/pages/bounty_share.js" %}"></script>
   <script src="{% static "v2/js/pages/bounty_details.js" %}"></script>

app/dashboard/templates/shared/contributor-popover.html

@@ -0,0 +1,59 @@
+{% comment %}
+  Copyright (C) 2018 Gitcoin Core
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published
+  by the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program. If not, see <http://www.gnu.org/licenses/>.
+{% endcomment %}
+{% load i18n %}
+  <div class="popover-bounty__content">
+    <div class="d-flex justify-content-between mb-2">
+      <h2 class="title font-subheader font-weight-bold username">[[:name]]</h2>
+      <span class="text-muted specialty pt-2"></span>
+      <div class="org_logos"></div>
+    </div>
+    <span class="earned"></span>
+    <div class="statistics d-flex justify-content-between mt-2">
+      <div class="popover_card text-center mr-4 pt-2">
+        <span class="contributor-position font-weight-semibold"></span>
+        <p class="mt-2">Gitcoin Contributor</p>
+      </div>
+      <div class="contributions d-flex justify-content-between">
+        <div class="popover_card text-center mr-2 pt-2">
+          <span class="completed-bounties font-weight-semibold"></span>
+          <p class="mt-2">Bounties Completed</p>
+        </div>
+        <div class="popover_card text-center mr-2 pt-2">
+          <span class="in-progress text-center font-weight-semibold"></span>
+          <p class="mt-2">Bounties In Progress</p>
+        </div>
+        <div class="popover_card text-center mr-2 pt-2">
+          <span class="abandoned-bounties font-weight-semibold"></span>
+          <p class="mt-2">Bounties Abandoned</p>
+        </div>
+        <div class="popover_card text-center mr-2 pt-2">
+          <span class="removed-bounties font-weight-semibold"></span>
+          <p class="mt-2">Bounties Removed</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="popover-bounty__footer">
+      <div class="d-flex justify-content-between">
+        <span class="title text-muted">{% trans 'Latest Activity' %}
+          <span class="current_status font-weight-semibold"></span>
+        </span>
+        <span class="text-muted time-ago"></span>
+      </div>
+      <p class="text-muted pt-2 activity-title"></p>
+  </div>

app/dashboard/views.py

@@ -1289,6 +1289,41 @@ def quickstart(request):
 def profile_keywords(request, handle):
     """Display profile keywords.
 
+    Args:
+        handle (str): The profile handle.
+
+    """
+    try:
+        profile = profile_helper(handle, True)
+        activity = Activity.objects.filter(profile=profile).order_by('-created_on').first()
+        count_work_completed = Activity.objects.filter(profile=profile, activity_type='work_done').count()
+        count_work_in_progress = Activity.objects.filter(profile=profile, activity_type='start_work').count()
+        count_work_abandoned = Activity.objects.filter(profile=profile, activity_type='stop_work').count()
+        count_work_removed = Activity.objects.filter(profile=profile, activity_type='bounty_removed_by_funder').count()
+
+    except (ProfileNotFoundException, ProfileHiddenException):
+        raise Http404
+
+    response = {
+        'profile': ProfileSerializer(profile).data,
+        'recent_activity': {
+            'activity_metadata': activity.metadata,
+            'activity_type': activity.activity_type,
+            'created': activity.created,
+        },
+        'statistics': {
+            'work_completed': count_work_completed,
+            'work_in_progress': count_work_in_progress,
+            'work_abandoned': count_work_abandoned,
+            'work_removed': count_work_removed
+        }
+    }
+    return JsonResponse(response, safe=False)
+
+
+def profile_details(request, handle):
+    """Display profile details.
+
     Args:
         handle (str): The profile handle.
 
@@ -1305,6 +1340,7 @@ def profile_keywords(request, handle):
     return JsonResponse(response)
 
 
+
 @require_POST
 def profile_job_opportunity(request, handle):
     """ Save profile job opportunity.