Skip to content

Commit

Permalink
Merge pull request #32 from mbeacom/kudos-integrate
Browse files Browse the repository at this point in the history 
WIP Kudos integrate
  • Loading branch information
@jasonrhaas
jasonrhaas authored Oct 10, 2018
2 parents 6d19de6 + eb76296 commit 766f9bb
Show file tree
Hide file tree
Showing 10 changed files with 468 additions and 18 deletions.
1 change: 1 addition & 0 deletions app/app/urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@
url(r'^api/v0.1/', include(kdrouter.urls)),
url(r'^actions/api/v0.1/', include(dbrouter.urls)), # same as active, but not cached in cluodfront
url(r'^api/v0.1/users_search/', dashboard.views.get_users, name='users_search'),
url(r'^api/v0.1/kudos_search/', dashboard.views.get_kudos, name='kudos_search'),
# Health check endpoint
re_path(r'^health/', include('health_check.urls')),
re_path(r'^lbcheck/?', healthcheck.views.lbcheck, name='lbcheck'),
Expand Down
6 changes: 6 additions & 0 deletions app/assets/v2/css/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -604,6 +604,12 @@ input[type=text].loading {
font-size: 0.875rem;
}

.select2-results,
.select2-results{
max-height: 400px;
overflow-y: scroll;
}

.select2-results__option:empty {
padding: 1px;
border-bottom: solid 1px darkgray;
Expand Down
22 changes: 13 additions & 9 deletions app/assets/v2/css/gitcoin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -399,6 +399,14 @@ div.button-pink {
cursor: pointer;
}

.gc-round-text-input {
height: 32px;
border: 1px solid #eee;
outline: none;
padding-left: 10px;
font-weight: 300;
}

.gc-border-black {
border: 1px solid black !important;
}
Expand All @@ -407,16 +415,12 @@ div.button-pink {
border: 1px solid #37ea9c !important;
}

.gc-selected {
border: 1px solid #4ef6ad !important;
.gc-border-blue {
border-color: #0D0764;
}

.gc-round-text-input {
height: 32px;
border: 1px solid #eee;
outline: none;
padding-left: 10px;
font-weight: 300;
.gc-selected {
border: 1px solid #4ef6ad !important;
}

.gc-round-text-form {
Expand Down Expand Up @@ -555,7 +559,7 @@ div.button-pink {
}

.nav-line {

}
.nav-tabs .nav-line {
color: #4A4A4A;
Expand Down
135 changes: 135 additions & 0 deletions app/assets/v2/css/select2-kudos.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
:root {
--arrow-color: #6c757d;
--border-grey: #ced4da;
--border-blue: #0D0764;
}

.select2 {
width: 100%;
}

.select2-container--kudos {
border: 1px solid #ced4da;
padding: 0.25em;
border-radius: .25rem;
}

.select2-container--kudos.select2-container--disabled {
background-color: #e9ecef;
opacity: 1;
}

.select2-container--kudos.select2-container--open .select2-selection .select2-selection__arrow b {
border-color: transparent transparent var(--arrow-color) transparent;
border-width: 0 0.45rem 0.45rem 0.45rem;
}

.select2-container--kudos .select2-selection--single {
min-height: 28px;
height: auto;
display: flex;
}

.select2-container--kudos .select2-selection__placeholder {
vertical-align: middle;
}

.select2-container--kudos .select2-selection--single .select2-selection__arrow {
position: absolute;
bottom: 0;
right: 0.375rem;
top: 0;
width: 0.85rem;
}

.select2-container--kudos .select2-selection--single .select2-selection__arrow b {
border-color: var(--arrow-color) transparent transparent transparent;
border-style: solid;
border-width: 0.45rem 0.45rem 0 0.45rem;
height: 0;
left: 0;
/* margin-top: -0.125rem; */
position: absolute;
top: 0;
bottom: 0;
width: 0;
border-radius: 4px;
margin: auto;
}


.select2-container--kudos .select2-search--dropdown .select2-search__field {
border-radius: 4px;
border: 1px solid #7777;
}

.select2-container--open .select2-dropdown.select2-dropdown--below {
top: -3px;
left: -1px;
}

.select2-container--open .select2-dropdown.select2-dropdown--above {
top: 1px;
left: -1px;
}

.select2-container--kudos .select2-dropdown {
/* border-color: var(--border-grey); */
}

.select2-container--kudos .select2-results__option {
font-size: 12px;
padding: 9px 6px;
}
.select2-container--kudos .select2-results__option--highlighted[aria-selected] {
background-color: #F2F6F9;
}

.select2-container--kudos .select2-selection--single .select2-selection__rendered {
/* display: flex;
justify-content: space-between;
align-items: center;
flex-basis: 100%; */
}

.select2-container--kudos .select2-selection--single .select2-selection__clear {
/* order: 1;
font-size: 20px;
line-height: 1; */

position: absolute;
bottom: 0;
right: 0.375rem;
top: 0;
width: 0.85rem;
font-size: 20px;
z-index: 100;
}

.gc-border-blue + .select2-container--kudos,
.select2-container--kudos > .select2-dropdown {
border-color: var(--border-blue);
}


.kudos-name {
font-weight: 600;
font-size: 14px;
}

.kudos-description {
color: #9B9B9B;
}

.kudos-search-result a.more{
float: right;
}
.kudos-search-result img{
width: 50px;
height: 50px;
}
.kudos-search-result.kudos-search-result-large img{
width: 100px;
height: 100px;
}

172 changes: 172 additions & 0 deletions app/assets/v2/js/kudos-search.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
function kudosSearch(elem) {
var selectItem = elem || '.kudos-search';

$(selectItem).each(function() {
if (!$(this).length) {
return;
}
var auto_terms = ['rare','common','ninja','soft skills','programming'];
var autocomplete_html = "";
for (var i = 0; i < auto_terms.length; i++) {
var delimiter = i == auto_terms.length - 1 ? '' : '|'
autocomplete_html += " <a class=kudos_autocomplete href='#'>" + auto_terms[i] + "</a> " + delimiter;
}

$(this).select2({
ajax: {
url: '/api/v0.1/kudos_search/',
dataType: 'json',
delay: 250,
data: function(params) {

let query = {
term: params.term[0] === '@' ? params.term.slice(1) : params.term
};

return query;
},
processResults: function(data) {
return {
results: data
};
},
cache: true
},
theme: 'kudos',
placeholder: 'Search kudos (or try: '+autocomplete_html+' )',
allowClear: true,
minimumInputLength: 3,
escapeMarkup: function(markup) {

return markup;
},
templateResult: formatKudos,
templateSelection: formatKudosSelection
});

// fix for wrong position on select open
var select2Instance = $(this).data('select2');

select2Instance.on('results:message', function(params) {
this.dropdown._resizeDropdown();
this.dropdown._positionDropdown();
});

function formatKudos(kudos) {

if (kudos.loading) {
return kudos.text;
}
var markup;
if(kudos.copy){
var autocomplete_html = "<ul id=kudos_autocomplete>";
for (var i = 0; i < kudos.autocomplete.length; i++) {
autocomplete_html += "<li><a href='#'>" + kudos.autocomplete[i] + "</a></li>";
}
autocomplete_html += "</ul>";

markup = `<div class="d-flex m-2 align-items-center">
<div style="min-width: 0;width: 100%;">
${kudos.copy} ${autocomplete_html}
<div>
</div>`;
} else {
markup = `<div class="d-flex m-2 align-items-center kudos-search-result">
<div class="mr-2">
<img class="" src="${static_url + kudos.image || static_url + 'v2/images/user-placeholder.png'}" />
</div>
<div style="min-width: 0;width: 100%;">
<div class="d-flex justify-content-between">
<div class="kudos-name">${kudos.name_human}</div>
<div class="kudos-price">${kudos.price_finney} ETH (${kudos.price_usd_humanized})</div>
</div>
<a class=more href=#>expand &gt;</a>
<div class="text-truncate kudos-description">${kudos.description}</div>
<div>
</div>`;
}

return markup;
}

function formatKudosSelection(kudos) {

let selected;
if (kudos.id === '') { // adjust for custom placeholder values
// $('.kudos-comment').hide()
kudosIsSelected()
return kudos.text;
} else if (kudos.id) {
// $('.kudos-comment').show()
kudosIsSelected(true)
selected = `<div class="d-flex m-2 align-items-center">
<div class="mr-3">
<img class="" src="${static_url + kudos.image || static_url + 'v2/images/user-placeholder.png'}" width="40" height="50"/>
</div>
<div style="min-width: 0;width: 100%;">
<div class="d-flex justify-content-between">
<div class="kudos-name"><a target="_blank" href="/kudos/${kudos.id}/${kudos.name}"> <i class="fas fa-external-link-alt"></i></a> ${kudos.name_human} ${kudos.price_finney} ETH</div>
</div>
<div class="text-truncate kudos-description">${kudos.description}</div>
<div>
</div>`;
document.selected_kudos = {
name : kudos.name,
id : kudos.id,
price_finney : kudos.price_finney,
};
} else {
selected = kudos.name_human;
}
return selected;
}

function kudosIsSelected(state){
let comments = $('.kudos-comment')
let alert = $('.msg-alert')

if (state) {
comments.show()
alert.show()
} else {
comments.hide()
alert.hide()
}

}

$(selectItem).on("select2:unselecting", function (e) {
$(this).val(null).trigger('change');
document.selected_kudos = null;
e.preventDefault();
});

});
}

$('document').ready(function() {
kudosSearch();

$("body").on('click', '#kudos_autocomplete li, .kudos_autocomplete', function(e) {
var search_term = $(this).text();
$(".select2-search__field").val(search_term);
$(".select2-search__field").trigger('keyup');
e.preventDefault();
});
var expandFunc = function(e) {
$(this).parents('.kudos-search-result').addClass('kudos-search-result-large');
$(this).parents('.kudos-search-result').find('.text-truncate').removeClass('text-truncate');
$(this).addClass('hidden');
e.preventDefault();
};
$("body").on('mouseover', 'a.more', expandFunc);
$("body").on('click', 'a.more', expandFunc);

$("body").on('mouseleave', '.kudos-search-result', function(e) {
$(this).removeClass('kudos-search-result-large');
$(this).find('.kudos-description').addClass('text-truncate');
$(this).find('.more').removeClass('hidden');
e.preventDefault();
});

});
2 changes: 1 addition & 1 deletion app/assets/v2/js/pages/kudos_send.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,7 +465,7 @@ function sendKudos(email, github_url, from_name, username, amountInEth, comments
// estimate gas for cloning the kudos
console.log('Using Kudos Indirect Send (KIS)')
// let kudosPriceInEth = parseFloat($('#kudosPrice').attr('data-ethprice'));
// var kudosPriceInWei = amountInEth * 1.0 * Math.pow(10, 18);
var kudosPriceInWei = amountInEth * 1.0 * Math.pow(10, 18);
params = {
kudosId: kudosId,
numClones: numClones,
Expand Down
Loading

0 comments on commit 766f9bb

Please sign in to comment.