Star Rating

app/app/urls.py

@@ -162,6 +162,7 @@
         dashboard.views.funder_payout_reminder_modal,
         name='funder_payout_reminder_modal'
     ),
+    path('modal/rating/<int:bounty_id>/<str:username>/', dashboard.views.rating_modal, name='rating_modal'),
 
     # Notify Funder Modal Submission
     path(

app/assets/v2/css/base.css

@@ -1013,49 +1013,6 @@ input.is-invalid {
   width: auto;
 }
 
-.rating {
-  width:160px;
-}
-.rating span { float:right; position:relative; }
-.rating span input {
-  position:absolute;
-  top:0px;
-  left:0px;
-  opacity:0;
-}
-.rating span label {
-  display:inline-block;
-  width:30px;
-  height:30px;
-  text-align:center;
-  color:#FFF;
-  font-size:25px;
-  margin-right:2px;
-  line-height:30px;
-  border-radius:50%;
-  -webkit-border-radius:50%;
-}
-.rating span label i {
-  color:#ccc;
-}
-
-.rating span:hover ~ span label i,
-.rating span:hover label i {
-  opacity: 0.5;
-}
-.rating span.checked label i,
-.rating span.checked ~ span label i
-{
-  opacity: 1;
-}
-
-.rating span:hover ~ span label i,
-.rating span:hover label i,
-.rating span.checked label i,
-.rating span.checked ~ span label i {
-  color: rgb(18,199,113);
-}
-
 .bounty_box {
   border: 5px solid white;
   width: 100%;

app/assets/v2/css/gitcoin.css

@@ -110,6 +110,18 @@ h4,
   color: #ffffff;
 }
 
+.text-black-60 {
+  color: rgba(0, 0, 0, 0.6)!important;
+}
+
+.text-black-70 {
+  color: rgba(0, 0, 0, 0.7)!important;
+}
+
+.text-current {
+  color: currentColor !important;
+}
+
 .underline {
   text-decoration: underline;
 }

app/assets/v2/css/rating.css

@@ -0,0 +1,88 @@
+/* stylelint-disable no-descending-specificity  */
+.card-rating {
+  color: #0d003c;
+  background-color: #fff;
+  border-radius: 4px;
+  position: relative;
+  margin: 1rem 0.6rem;
+  scroll-snap-align: none start;
+  transition: .45s all ease-in-out;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  flex: 0 0 24.2%;
+  max-width: 24.2%;
+  align-items: center;
+  font-size: 12px;
+  min-width: 230px;
+  box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.1);
+}
+.card-rating .tag {
+  font-weight: 700;
+}
+.card-rating__title {
+  color: #000;
+  font-weight: 600;
+  font-size: 0.9rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin-bottom: 6px;
+}
+
+.card-rating__avatar {
+  flex-shrink: 0;
+}
+
+.card-rating__header {
+  display: flex;
+  background-color: #F8F9FA;
+  padding: 1rem .5em;
+  border-radius: 4px 4px 0 0;
+}
+
+.rating {
+  direction: rtl;
+}
+
+.rating--small .rating-star {
+  font-size: 0.6rem;
+}
+
+.rating > input { display: none; }
+.rating > .rating-star:before {
+  margin: 1px;
+  font-size: 2.35em;
+  font-family: 'Font Awesome\ 5 Free', sans-serif;
+  display: inline-block;
+  content: "\f005";
+}
+
+.rating > .half:before {
+  content: "\f089";
+  position: absolute;
+}
+
+.rating > .rating-star {
+  color: #ddd;
+  margin-bottom: 0;
+}
+
+.rating > input:checked ~ .rating-star,
+fieldset:not(:disabled) .rating:not(:checked) > .rating-star:hover,
+fieldset:not(:disabled) .rating:not(:checked) > .rating-star:hover ~ .rating-star {
+  color: #25E899;
+  font-weight: 800;
+}
+
+fieldset:not(:disabled) .rating > input:checked + .rating-star:hover,
+fieldset:not(:disabled) .rating > input:checked ~ .rating-star:hover,
+fieldset:not(:disabled) .rating > .rating-star:hover ~ input:checked ~ .rating-star,
+fieldset:not(:disabled) .rating > input:checked ~ .rating-star:hover ~ .rating-star {
+  color: rgb(11, 253, 156);
+}
+
+fieldset:disabled .rating {
+  filter: grayscale(1);
+}

app/assets/v2/js/pages/bulk_payout.js

@@ -2,6 +2,13 @@ const round = function(num, decimals) {
   return Math.round(num * 10 ** decimals) / 10 ** decimals;
 };
 
+
+const rateUser = (elem) => {
+  let userSelected = $(elem).select2('data')[0].text;
+
+  $(elem).parents('.new-user').next().find('[data-open-rating]').data('openUsername', userSelected.trim());
+};
+
 const normalizeUsername = function(username) {
   if (username.indexOf('@') != 0) {
     return '@' + username;
@@ -36,7 +43,8 @@ $(document).ready(function($) {
 
   $(document).on('click', '.remove', function(event) {
     event.preventDefault();
-    $(this).parents('tr').remove();
+    $(this).parents('.new-user').next('tr').remove();
+    $(this).parents('.new-user').remove();
     $(this).focus();
     update_registry();
   });
@@ -156,25 +164,52 @@ $(document).ready(function($) {
   };
 
   var add_row = function() {
-    var num_rows = $('#payout_table tbody').find('tr').length;
+    let bountyId = $('#bountyId').val();
+    var num_rows = $('#payout_table tbody').find('tr.new-user').length;
     var percent = num_rows <= 1 ? 100 : '';
     var denomination = $('#token_name').text();
     var amount = get_amount(percent);
+    let username = '';
     var html = `
-      <tr>
+      <tr class="new-user">
         <td class="pl-0 pb-0">
           <div class="pl-0">
             <select onchange="update_registry()" class="username-search custom-select w-100 ml-auto mr-auto"></select>
           </div>
         </td>
-        <td class="pb-0"><div class="percent" contenteditable="true">` + percent + `</div></td>
-        <td class="pb-0"><div class="amount"><span class=amount>` + amount + '</span> <span class=denomination>' + denomination + `</span></div></td>
+        <td class="pb-0"><div class="percent" contenteditable="true">${percent}</div></td>
+        <td class="pb-0"><div class="amount"><span class=amount>${amount}</span> <span class=denomination>${denomination}</span></div></td>
         <td class="pb-0"><a class=remove href=#><i class="fas fa-times mt-2"></i></a>
         </td>
+      </tr>
+      <tr>
+        <td>
+          <fieldset class="" id="${num_rows}-${bountyId}" >
+            <label for="" class="form__label">Rate contributor</label>
+            <div class="rating" data-open-rating=${bountyId} data-open-username=${username}>
+              <input type="radio" id="${num_rows}-${bountyId}-5" name="${num_rows}${bountyId}" value="5" />
+              <label class ="rating-star full" for="${num_rows}-${bountyId}-5" data-toggle="tooltip" title="It was great - 5 stars"></label>
+              <input type="radio" id="${num_rows}-${bountyId}-4" name="${num_rows}${bountyId}" value="4" />
+              <label class ="rating-star full" for="${num_rows}-${bountyId}-4" data-toggle="tooltip" title="It was good - 4 stars"></label>
+              <input type="radio" id="${num_rows}-${bountyId}-3" name="${num_rows}${bountyId}" value="3" />
+              <label class ="rating-star full" for="${num_rows}-${bountyId}-3" data-toggle="tooltip" title="It was okay - 3 stars"></label>
+              <input type="radio" id="${num_rows}-${bountyId}-2" name="${num_rows}${bountyId}" value="2" />
+              <label class ="rating-star full" for="${num_rows}-${bountyId}-2" data-toggle="tooltip" title="It was bad - 2 stars"></label>
+              <input type="radio" id="${num_rows}-${bountyId}-1" name="${num_rows}${bountyId}" value="1" />
+              <label class ="rating-star full" for="${num_rows}-${bountyId}-1" data-toggle="tooltip" title="It was terrible - 1 star"></label>
+            </div>
+          </fieldset>
+        </td>
       </tr>`;
 
     $('#payout_table tbody').append(html);
     userSearch('.username-search:last', true);
+    $('body .username-search').each(function() {
+      $(this).on('select2:select', event => {
+        rateUser($(this));
+      });
+    });
+
     $(this).focus();
   };
 
@@ -185,11 +220,12 @@ $(document).ready(function($) {
     $('.add_another').on('click', function() {
       add_row();
     });
+
   });
 });
 
 var get_total_cost = function() {
-  var rows = $('#payout_table tbody tr');
+  var rows = $('#payout_table tbody tr.new-user');
   var total = 0;
 
   for (i = 0; i < rows.length; i += 1) {
@@ -213,20 +249,20 @@ var update_registry = function(coinbase) {
     });
     return;
   }
-  
-  var num_rows = $('#payout_table tbody').find('tr').length;
+
+  var num_rows = $('#payout_table tbody').find('tr.new-user').length;
   var tc = round(get_total_cost(), 2);
   var denomination = $('#token_name').text();
   var original_amount = $('#original_amount').val();
   var net = round(original_amount - tc, 2);
   var over = round((original_amount - get_total_cost()) * -1, 4);
   var addr = coinbase.substring(38);
   var pay_with_bounty = $('#pay_with_bounty').is(':checked');
-  
+
   $('#total_cost').html(tc + ' ' + denomination);
 
   let transactions = [];
-  
+
   first_transaction = {
     'id': 0,
     'type': 'cancel',
@@ -269,7 +305,7 @@ var update_registry = function(coinbase) {
 
   for (let j = 1; j <= num_rows; j++) {
 
-    var $row = $('#payout_table tbody').find('tr:nth-child(' + j + ')');
+    var $row = $('#payout_table tbody').find('.new-user:nth-child(' + j + ')');
     var amount = parseFloat($row.find('.amount').text());
     var username = $row.find('.username-search').text();
 

app/assets/v2/js/pages/fulfill_bounty.js

@@ -117,28 +117,15 @@ window.onload = function() {
                     txid: result
                   });
 
-                  var submitCommentUrl = '/postcomment/';
                   var finishedComment = function() {
                     dataLayer.push({ event: 'claimissue' });
                     _alert({ message: gettext('Fulfillment submitted to web3.') }, 'info');
                     setTimeout(() => {
                       document.location.href = '/funding/details?url=' + issueURL;
                     }, 1000);
                   };
-                  var ratVal = $('input:radio[name=rating]:checked').val();
-                  var revVal = $('#review').val();
-
-                  $.post(submitCommentUrl, {
-                    'github_url': issueURL,
-                    'network': $('input[name=network]').val(),
-                    'standard_bounties_id': $('input[name=standard_bounties_id]').val(),
-                    'review': {
-                      'rating': ratVal ? ratVal : -1,
-                      'comment': revVal ? revVal : 'No comment given.',
-                      'reviewType': 'worker',
-                      'receiver': ''
-                    }
-                  }, finishedComment, 'json');
+
+                  finishedComment();
                 };
 
                 if (error) {

app/assets/v2/js/pages/process_bounty.js

@@ -1,6 +1,17 @@
 /* eslint-disable no-console */
 window.onload = function() {
 
+  const rateUser = () => {
+    let userSelected = $('#bountyFulfillment').select2('data')[0].text;
+
+    $('[data-open-rating]').data('openUsername', userSelected.trim());
+  };
+
+
+  $('#bountyFulfillment').on('select2:select', event => {
+    rateUser();
+  });
+
   // Check Radio-box
   $('.rating input:radio').attr('checked', false);
 
@@ -222,28 +233,14 @@ window.onload = function() {
 
             _alert({ message: gettext('Submitted transaction to web3, saving comment(s)...') }, 'info');
 
-            var submitCommentUrl = '/postcomment/';
             var finishedComment = function() {
               _alert({ message: gettext('Submitted transaction to web3.') }, 'info');
               setTimeout(() => {
                 document.location.href = '/funding/details?url=' + issueURL;
               }, 1000);
             };
-            var ratVal = $('input:radio[name=rating]:checked').val();
-            var revVal = $('#review').val();
-
-            $.post(submitCommentUrl, {
-              'github_url': issueURL,
-              'network': $('input[name=network]').val(),
-              'standard_bounties_id': $('input[name=standard_bounties_id]').val(),
-              'review': {
-                'rating': ratVal ? ratVal : -1,
-                'comment': revVal ? revVal : 'No comment given.',
-                'reviewType': 'approver',
-                'receiver': getSelectedFulfillment().getAttribute('username')
-		          }
-            }, finishedComment, 'json');
 
+            finishedComment();
           };
 
           if (error) {
@@ -315,6 +312,7 @@ window.onload = function() {
         }
       }
     );
+    rateUser();
 
   }, 100);
 };